AndroidUI設計之布局-詳細解析布局實現

寫完博客的總結 : 以前沒有弄清楚的概念清晰化

父容器與本容器屬性 : android_layout...屬性是本容器的屬性, 定義在這個布局管理器的LayoutParams內部類中, 每個布局管理器都有一個LayoutParams內部類, android:... 是父容器用來控制子組件的屬性. 如android:layout_gravity 是控制組件本身的對齊方式, android:gravity是控制本容器子組件的對齊方式;

 

布局管理器都是以ViewGroup為基類派生出來的; 使用布局管理器可以適配不同手機屏幕的分辨率,尺寸大小;

 

布局管理器之間的繼承關系 : 

 

在上面的UML圖中可以看出, 絕對布局 幀布局 網格布局 相對布局 線性布局是直接繼承ViewGroup,表格布局是繼承的LinearLayout;

 

一. 線性布局(LinearLayout)

 

1. 線性布局作用 

 

作用 : 線性布局會將容器中的組件一個一個排列起來, LinearLayout可以控制組件 橫向 或者 縱向 排列, 通過android:orientation屬性控制;

不換行屬性 : 線性布局中的組件不會自動換行, 如果組件一個一個排列到盡頭之后, 剩下的組件就不會顯示出來;

 

2. LinearLayout常用屬性

 

(1)基線對齊

 

xml屬性 : android:baselineAligned; 

設置方法 : setBaselineAligned(boolean b); 

作用 : 如果該屬性為false, 就會阻止該布局管理器與其子元素的基線對齊;

 

(2)設分隔條 

 

xml屬性 : android:divider; 

設置方法 : setDividerDrawable(Drawable); 

作用 : 設置垂直布局時兩個按鈕之間的分隔條;

 

(3)對齊方式(控制內部子元素)  

 

xml屬性 : android:gravity; 

設置方法 : setGravity(int); 

作用 : 設置布局管理器內組件(子元素)的對齊方式, 

支持的屬性 : 

top, bottom, left, right, 

center_vertical(垂直方向居中), center_horizontal(水平方向居中),

fill_vertical(垂直方向拉伸), fill_horizontal(水平方向拉伸), 

center, fill, 

clip_vertical, clip_horizontal; 

可以同時指定多種對齊方式 : 如 left|center_vertical 左側垂直居中;

 

(4)權重最小尺寸 

 

xml屬性 : android:measureWithLargestChild; 

設置方法 : setMeasureWithLargestChildEnable(boolean b);

作用 : 該屬性為true的時候, 所有帶權重的子元素都會具有最大子元素的最小尺寸;

 

(5) 排列方式

 

xml屬性 : android:orientation;

設置方法 : setOrientation(int i);

作用 : 設置布局管理器內組件排列方式, 設置為horizontal(水平),vertical(垂直), 默認為垂直排列;

 

3. LinearLayout子元素控制

 

LinearLayout的子元素, 即LinearLayout中的組件, 都受到LinearLayout.LayoutParams控制, 因此LinearLayout包含的子元素可以執行下面的屬性.

 

(1) 對齊方式

 

xml屬性 : android:layout_gravity;

作用 : 指定該元素在LinearLayout(父容器)的對齊方式, 也就是該組件本身的對齊方式, 注意要與android:gravity區分, ;

 

(2) 所占權重

 

xml屬性 : android:layout_weight;

作用 : 指定該元素在LinearLayout(父容器)中所占的權重, 例如都是1的情況下, 那個方向(LinearLayout的orientation方向)長度都是一樣的;

 

4. 控制子元素排列 與 在父元素中排列

 

控制本身元素屬性與子元素屬性 : 

設備組件本身屬性 : 帶layout的屬性是設置本身組件屬性, 例如 android:layout_gravity設置的是本身的對其方式; 

設置子元素屬性 : 不帶layout的屬性是設置其所包含的子元素, 例如android:gravity 設置的是該容器子組件的對齊方式;

LayoutParams屬性 : 所有的布局管理器都提供了相應的LayoutParams內部類, 這些內部類用於控制該布局本身, 如 對齊方式 layout_gravity, 所占權重 layout_weight, 這些屬性用於設置本元素在父容器中的對齊方式;

容器屬性 : 在android:后面沒有layout的屬性基本都是容器屬性, android:gravity作用是指定指定本元素包含的子元素的對齊方式, 只有容器才支持這個屬性;

 

5. 常見用法

 

(1) 獲取LinearLayout的寬高

 

a. 組件外無法獲取組件寬高 

下面的兩種情況都是針對 View.getHeight() 和 View.getWidth() 方法 : 

組件外無法獲取 : 調用View.getHeight() 和View.getWidth()方法 是獲取不到組件的寬度和高度的, 這兩個方法返回的是0, Android的運行機制決定了無法在組件外部使用getHeight()和getWidth()方法獲取寬度和高度;

組件內可以獲取 : 在自定義的類中可以在View的類中通過調用這兩個方法獲取該View子類組件的寬和高;

 

b. 組件外部獲取View對象寬高方法 

 

外部獲取 : 使用View.getMeasuredWidth() 和View.getMeasuredHeight()方法可以獲取組件的寬和高, 在調用這個方法之前, 必須先調用View.measure()方法, 才可以, 否則也獲取不到組件的寬高;

注意(特例) : 如果組件寬度或高度設置為 fill_parent, 使用 getMeasuredHeight() 等方法獲取寬度和高度的時候, 並且組件中含有子元素時, 所獲取的實際值是這些組件所占的最小寬度和最小高度.(沒看懂)

 

示例:

 

View view = getLayoutInflater().inflate(R.layout.main, null);
LinearLayout layout = (LinearLayout) view.findViewById(R.id.linearlayout);
//調用測量方法, 調用了該方法之后才能通過getMeasuredHeight()等方法獲取寬高
layout.measure(0, 0);
//獲取寬度
int width = layout.getMeasuredWidth();
//獲取高度
int height = layout.getMeasuredHeight();

 

 

c. 獲取布局文件中組件的寬高 

 

從LayoutParams中獲取 : 調用View.getLayoutParams().width 和 View.getLayoutParams().height 獲取寬高, 如果寬高被設定為 fill_parent, match_parent, warp_content 時, 這兩個兩邊直接回返回 FILL_PARENT, MATCH_PARENT, WARP_CONTENT常量值;

規律 : 從View.getLayoutParams()中獲取 width, height 值, 在布局xml文件中設置的是什么, 獲取的時候就得到的是什么;

 

(2) 在LinearLayout中添加分隔線

 

a. 使用ImageView添加(低版本3.0以下)

 

垂直布局 橫向寬度填滿 : 如果布局是vertical, 那么設置一個ImageView寬度fill_parent, 高度2dp, 設置一個背景色;

水平布局 縱向高度填滿 : 如果布局時horizontal, 那么設置一個ImageView寬度2dp, 高度fill_parent, 設置一個背景色;

<ImageView
    android:layout_width="fill_parent"
    android:layout_height="2dp"
    android:background="#F00"/>

 

b. 使用xml屬性添加(3.0以上版本)

 

設置LinearLayout標簽的 android:showDividers屬性, 該屬性有四個值 : 

none :不顯示分隔線;

beginning : 在LinearLayout開始處顯示分隔線;

middle : 在LinearLayout中每兩個組件之間顯示分隔線;

end : 在LinearLayout結尾處顯示分隔線;

 

設置android:divider屬性, 這個屬性的值是一個Drawable的id;

 

c. 使用代碼添加(3.0以上版本)

 

設置顯示分隔線樣式 : linearLayout.setShowDividers(), 設置android:showDividers屬性;

設置分隔線圖片 : linearLayout.setDividerDrawable(), 設置android:divider屬性;

 

6. 實際案例

 

(1) 按鈕排列 

       

要點 : 

底部 + 水平居中 對齊屬性 : 左邊的LinearLayout的android:gravity 屬性為bottom|center_horizontal; 

右部 + 垂直居中 對齊屬性 : 右邊的LinearLayout的android:gravity 屬性為right|center_vertical;

 

代碼 : 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:gravity="bottom|center_horizontal">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按鈕1"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="測試按鈕2"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按鈕3"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="測試按鈕4"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按鈕5"/>
</LinearLayout>

 子元素對齊 : 通過修改 android:gravity 屬性來控制LinearLayout中子元素的排列情況;

 

左邊的圖的屬性為 bottom|center_horizontal , 右邊的android:gravity的屬性值為 right|center_vertical;

 

(2) 三個按鈕各自對齊

 

三個水平方向的按鈕, 分別左對齊, 居中對齊, 右對齊 :

要點 : 

水平線性布局 : 最頂層的LinearLayout的orientation是horizontal水平的;

等分三個線性布局 : 第二層的LinearLayout的orientation是vertical垂直的, 並且寬度是fill_parent , 依靠權重分配寬度;

設置按鈕對齊方式 : 按鈕的android:layout_gravity屬性根據需求 left, center, right, 默認為left;

 

代碼 : 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal"  >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:background="#f00">
        <Button android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按鈕1"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:background="#0f0">
        <Button android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按鈕2"
            android:layout_gravity="center"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:background="#00f">
        <Button android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按鈕3"
            android:layout_gravity="right"/>
    </LinearLayout>

</LinearLayout>

 

相對布局RelativeLayout，待續。。。。