iT邦幫忙

2025 iThome 鐵人賽

DAY 9
0

今天會帶各位介紹Layout的部分,會介紹到的就是下面這幾種,今天會主要先介紹ConstraintLayout、LinearLayout和FrameLayout

https://ithelp.ithome.com.tw/upload/images/20250923/20176154WfONd2FRl6.png

首先先從ConstraintLayout開始吧

ConstraintLayout

ConstraintLayout 是目前Android官方推薦使用的版面配置。它允許開發者透過設定來定義視圖與其他視圖或父容器之間的相對關係,從而創建複雜且扁平化的介面(基本上是蠻簡單也算好上手的Layout)

核心特性:

  • 相對定位:視圖的位置是透過與Guidelines或其他元素約束來決定的。每個視圖都需要至少一個水平和一個垂直的約束才能確定其位置

下面是Guidelines的位置,當然也可以直接在Code中自己寫

https://ithelp.ithome.com.tw/upload/images/20250923/20176154v7o6eLtX8Z.png

https://ithelp.ithome.com.tw/upload/images/20250923/20176154zyKMa9gtiw.png

  • 扁平化視圖層級:相較於使用多層 LinearLayout 巢狀結構才能實現的複雜介面,ConstraintLayout 通常只需要一層佈局即可完成,還能顯著提升介面渲染的效能
  • 靈活性與功能:提供非常豐富的功能來處理各種對齊、分佈和尺寸調整的需求,例如:
    • 輔助線 (Guidelines):創建不可見的對齊線
    • 屏障 (Barriers):根據一組視圖中最長或最高的那個來建立約束
    • 鏈 (Chains):將一組視圖以類似 LinearLayout 的方式進行水平或垂直分佈
    • 尺寸比例 (Dimension Ratio):可以設定視圖的寬高比

使用情境:

  • 幾乎適用於所有情境,特別是複雜的、需要精確對齊的介面
  • 希望提升介面效能,避免深層的版面配置巢狀
  • 需要創建能良好適應不同螢幕尺寸和方向的響應式介面

FrameLayout

FrameLayout 是最簡單的版面配置容器。它的設計理念是堆疊,所有加入到 FrameLayout 的子視圖都會被放置在左上角,後加入的視圖會覆蓋在先前的視圖之上,就像一層一層疊起來的卡片~~(我很少用ww)~~

核心特性:

  • 堆疊機制:子視圖預設對齊於左上角,並按照加入的順序堆疊
  • 簡單高效:由於其簡單的佈局邏輯,FrameLayout 的測量和繪製效能非常好
  • 位置控制:可以透過子視圖的android:layout_gravity屬性來控制其在 FrameLayout 中的對齊位置 (例如:置中、靠右、置底……)

使用情境:

  • 當需要重疊顯示多個視圖時。例如,在圖片上顯示一個播放按鈕,或是在地圖上顯示一個資訊視窗
  • 作為Fragment 的容器,動態地切換顯示不同的頁面內容
  • 顯示單一的、需要填滿整個容器的視圖

LinearLayout

LinearLayout相較於上面兩個Layout會比較難理解一點,會將其內部的所有子視圖 (View) 以單一方向進行排列,可以是水平 (horizontal)垂直 (vertical),所以如果你的佈局要一直垂直水平交互使用的話,Code的部分會有很多巢狀結構,就會看起來很複雜

核心特性:

  • 方向性:透過 android:orientation 屬性設定為 vertical (垂直) 或 horizontal (水平),決定子視圖的排列方向

  • 順序性:子視圖會依照它們在 XML 檔案中宣告的順序依序排列

  • 權重 (Weight)android:layout_weight 是 LinearLayout 中一個非常重要的屬性。它允許子視圖按照比例分配剩餘的空間。這對於創建彈性且能適應不同螢幕尺寸的介面非常有用

    可以讓兩個按鈕各佔據螢幕寬度的一半

     <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">
    
            <Button
    		        android:layout_width="0dp"
    		        android:layout_height="wrap_content"
    		        android:layout_weight="1"
    		        android:text="Button" />
    
            <Button
    		        android:layout_width="0dp"
    		        android:layout_height="wrap_content"
    		        android:layout_weight="1"
    		        android:text="Button" />
    
     </LinearLayout>
    

使用情境:

  • 創建簡單的列表或項目排列,例如一排按鈕、垂直排列的表單欄位
  • 當介面元素只需要單純地沿著一個方向堆疊時
  • 在局部介面中作為其他複雜版面配置的子元素

今天就先到這裡,明天會開始來介紹元件部分,明天見( ゜ー゜)b
https://ithelp.ithome.com.tw/upload/images/20250923/201761540blIZ7A6lI.png


上一篇
Day8 MVVM架構2
下一篇
Day10 TextView、Button、EditView
系列文
Android 菜鳥30天從0到1的學習紀錄12
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言