iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 4
0
Mobile Development

Android的30天學習歷程系列 第 4

第四篇:搞懂不同Layout之間的差異(下)

  • 分享至 

  • xImage
  •  

前言

接續上一篇的內容這篇將會講述 AbsoluteLayout(絕對佈局)、FrameLayout(框架佈局)以及在一個 Layout 下同時使用複數以上的不同 Layout 。

AbsoluteLayout–絕對佈局

AbsoluteLayout 顧名思義是一種以 X 及 Y 座標來設定元件位置的一種布局方法,是以頁面的左上角作為(0,0)的座標,但目前已被 Android Studio 棄用。

常用程式碼

  • android:layout_x:與X軸距離
  • android:layout_y:與Y軸距離
<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
   >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="50dp"
        android:layout_y="50dp"
        android:text="距離X,Y 50dp"
        android:textSize="50dp"
         />
</AbsoluteLayout>

範例試圖↓
https://ithelp.ithome.com.tw/upload/images/20200827/20129418CDsNiQCqCz.png

FrameLayout-框架佈局

FrameLayout 算是佈局中最簡單的一種,與其他元件不一樣的地方在於,允許佈局中的元件可以疊在一起,最先的元件會被放在最底層而最後的元件會被放在最上面,這樣使版面在設計時可以有更多的變化

常用程式碼

  • android:foreground:設置改幀佈局容器的前景圖像
  • android:foregroundGravity :設置前景圖像顯示的位置
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TextView
        android:gravity="bottom"
        android:background="#FF7575	"
        android:text="第一層"
        android:textSize="100dp"
        android:textStyle="bold"
        android:layout_height="fill_parent"
        android:layout_width="fill_parent" />
    <TextView
        android:gravity="bottom"
        android:textSize="80dp"
        android:text="第二層"
        android:background="#FFA042"
        android:layout_width="362dp"
        android:layout_height="606dp" />

    <TextView
        android:layout_width="309dp"
        android:layout_height="491dp"
        android:background="#FFDC35"
        android:gravity="bottom"
        android:text="第三層"
        android:textSize="60dp" />

    <TextView
        android:layout_width="244dp"
        android:layout_height="408dp"
        android:background="	#79FF79"
        android:gravity="bottom"
        android:text="第四層"
        android:textSize="40dp" />

    <TextView
        android:layout_width="210dp"
        android:layout_height="347dp"
        android:background="#00FFFF"
        android:gravity="bottom"
        android:text="第五層"
        android:textSize="20dp" />
</FrameLayout>

範例試圖↓
https://ithelp.ithome.com.tw/upload/images/20200831/20129418yxHqQUplht.png

同時使用多個Layout

每個 layout 都有他們擅長設計的版面,所以當我們今天在設計一個複雜的版面時,就可以同時用到復數的不同的 layout 來協助設計。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="226dp">

        <TextView
            android:layout_width="147dp"
            android:layout_height="76dp"
            android:layout_marginTop="120dp"
            android:text="這裡是constraintlayout"
            android:textSize="30dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.261"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <FrameLayout
            android:background="#00FFFF"
            android:layout_width="410dp"
            android:layout_height="97dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" >

            <TextView
                android:textSize="40dp"
                android:background="#02F78E"
                android:text="這裡是FrameLayout"
                android:layout_width="216dp"
                android:layout_height="match_parent"/>
        </FrameLayout>
    </androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>

範例試圖↓
https://ithelp.ithome.com.tw/upload/images/20200831/201294180oIaCTYUEm.png

到這裡 layout 的介紹就告一段落了(感謝閱讀)


上一篇
第三篇:搞懂不同Layout之間的差異(上)
下一篇
第五篇:介紹基礎元件
系列文
Android的30天學習歷程30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言