Android – 常用版面配置 – LinearLayout

在app → res → layout 下的XML檔案中可以定義需要的使用者操作介面,將所需要的元件套入Layout中來進行排版,並且可以根據需求來選擇不同的Layout,同時在Layout中也可以加入另一個Layout,使UI整體呈現樹狀結構,下面會介紹各種Layout的不同及特色。

 

LinearLayout


線性版面配置是一種最廣泛應用的版面配置,可以使在LinearLayout中的子物件呈現垂直或是水平的方向,可以利用android:orientation的屬性來設定配置方向是垂直(vertical)或是水平(horizontal),且排版原理為單一方向, 從上至下或是從左到右,所以垂直排版每一行的物件不管多寬都只會擺放一個,其他會根據物件本身高度會往下堆疊,LinearLayout會允許每個子物件的gravity和margin屬性來進行對齊功能, 而orientation算是最重要的屬性.

  • android:orientation=”vertical”  //垂直排列  
  • android:orientation=”horizontal”  //左右排列

通常對於具有非常多的尺寸Android的實體裝置的版面設計而言, 必須要能夠以尺寸比例原則來規劃設計, 較能吻合大多數的裝置. 因此LinearLayout在比例配置上, 是非常具有彈性的ViewGroup.

假設是以垂直進行版面規劃, 則其內容元件的layout_height屬性都應該設定為0dp(即使是設定為0, 也必須賦予其單位), 因為垂直的排列是以高度為比例原則, 並且設定layout_weight的比例數值, 可以是整數或是浮點數. 如果是以水平進行內部元件的版面規劃的話, 則先將layout_width設定為0dp, 再以layout_weight來進行比例配置. 重點就是不需要再設定match_parent或是wrap_content, 因為設定上去就失去了以比例為主的版面配置.

以下為例, 配置了四個TextView, 分別為1:2:3:4 的比例:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >
    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:text="Hello World1!"
        android:textSize="24sp"
        android:background="#0000ff"
        />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"
        android:text="Hello World2!"
        android:textSize="24sp"
        android:background="#ffff00"
        />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="3"
        android:text="Hello World3!"
        android:textSize="24sp"
        android:background="#ff0000"
        />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="4"
        android:text="Hello World4!"
        android:textSize="24sp"
        android:background="#00ff00"
        />
</LinearLayout>

 

 

 

 

 

 

%d bloggers like this: