1010      阿裏雲  技術社區[雲棲]

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

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

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

.

作者 :萬境絕塵 

轉載請注明出處 : https://blog.csdn.net/shulianghan/article/details/18964835

.

布局管理器都是以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() 等方法獲取寬度和高度的時候, 並且組件中含有子元素時, 所獲取的實際值是這些組件所占的最小寬度和最小高度.(沒看懂)

示例:

[java] view plaincopy

1. View view = getLayoutInflater().inflate(R.layout.main, null);  
2. LinearLayout layout = (LinearLayout) view.findViewById(R.id.linearlayout);  
3. //調用測量方法, 調用了該方法之後才能通過getMeasuredHeight()等方法獲取寬高  
4. layout.measure(0, 0);  
5. //獲取寬度  
6. int width = layout.getMeasuredWidth();  
7. //獲取高度  
8. 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, 設置一個背景色;

[java] view plaincopy

1. <ImageView   
2.     android:layout_width="fill_parent"  
3.     android:layout_height="2dp"  
4.     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;

代碼 : 

[html] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent"  
5.     android:orientation="vertical"   
6.     android:gravity="bottom|center_horizontal">  
7.     <Button   
8.         android:layout_width="wrap_content"  
9.         android:layout_height="wrap_content"  
10.         android:text="按鈕1"/>  
11.     <Button   
12.         android:layout_width="wrap_content"  
13.         android:layout_height="wrap_content"  
14.         android:text="測試按鈕2"/>  
15.     <Button   
16.         android:layout_width="wrap_content"  
17.         android:layout_height="wrap_content"  
18.         android:text="按鈕3"/>  
19.     <Button   
20.         android:layout_width="wrap_content"  
21.         android:layout_height="wrap_content"  
22.         android:text="測試按鈕4"/>  
23.     <Button   
24.         android:layout_width="wrap_content"  
25.         android:layout_height="wrap_content"  
26.         android:text="按鈕5"/>  
27. </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;

代碼 : 

[html] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent"  
5.     android:orientation="horizontal"  >  
6.      
7.     <LinearLayout   
8.         android:layout_width="fill_parent"  
9.         android:layout_weight="1"  
10.         android:layout_height="wrap_content"  
11.         android:orientation="vertical"  
12.         android:background="#f00">  
13.         <Button android:layout_width="wrap_content"  
14.             android:layout_height="wrap_content"  
15.             android:text="按鈕1"/>  
16.     </LinearLayout>  
17.       
18.     <LinearLayout   
19.         android:layout_width="fill_parent"  
20.         android:layout_weight="1"  
21.         android:layout_height="wrap_content"  
22.         android:orientation="vertical"  
23.         android:background="#0f0">  
24.         <Button android:layout_width="wrap_content"  
25.             android:layout_height="wrap_content"  
26.             android:text="按鈕2"  
27.             android:layout_gravity="center"/>  
28.     </LinearLayout>  
29.       
30.     <LinearLayout   
31.         android:layout_width="fill_parent"  
32.         android:layout_weight="1"  
33.         android:layout_height="wrap_content"  
34.         android:orientation="vertical"  
35.         android:background="#00f">  
36.         <Button android:layout_width="wrap_content"  
37.             android:layout_height="wrap_content"  
38.             android:text="按鈕3"  
39.             android:layout_gravity="right"/>  
40.     </LinearLayout>  
41.       
42. </LinearLayout>  

二. 相對布局RelativeLayout

相對布局容器中, 子組件的位置總是相對兄弟組件,父容器來決定的;

1. RelativeLayout支持的屬性

(1) 對齊方式

xml屬性 : android:gravity;

設置方法 : setGravity(int);

作用 : 設置布局容器內子元素的對齊方式, 注意與android:layout_gravity區分, 後者是設置組件本身元素對齊方式;

(2) 忽略對齊方式

xml屬性 : android:ignoreGravity;

設置方法 : setIgnoreGravity(int);

作用 : 設置該組件不受gravity屬性影響, 因為gravity屬性影響容器內所有的組件的對齊方式, 設置了之後, 該組件就可以例外;

2. LayoutParams屬性

(1) 隻能設置boolean值的屬性

這些屬性都是相對父容器的, 確定是否在父容器中居中(水平, 垂直), 是否位於父容器的 上下左右 端;

是否水平居中 : android:layout_centerHorizontal;

是否垂直居中 : android:layout_centerVertical;

是否位於中央 : android:layout_centerInParent;

是否底端對齊 : android:layout_alignParentBottom;

是否頂端對齊 : android:layout_alignParentTop;

是否左邊對齊 : android:layout_alignParentLeft;

是否右邊對齊 : android:layout_alignParentRight;

(2) 隻能設置其它組件id的屬性

位於所給id組件左側 : android:layout_toLeftOf;

位於所給id組件右側 : android:layout_toRightOf;

位於所給id組件的上邊 : android:layout_above;

位於所給id組件的下方 : android:layout_below;

與所給id組件頂部對齊 : android:layout_alignTop;

與所給id組件底部對齊 : android:layout_alignBottom;

與所給id組件左邊對齊 : android:layout_alignLeft;

與所給id組件右邊對齊 : android:layout_alignRight;

3. 梅花布局效果 

五個按鈕排成梅花形狀, 梅花處於正中心, 效果圖如下 :

兩個按鈕, 如果隻有 android:layout_above="@+id/bt1" 會是這種情況 : 

加上 android:layout_alignLeft="@+id/bt1"就會成為這種情況 : 

要點 : 

注意每個組件的屬性, 先要確定方位, 在進行對齊, 組件左邊界對齊, 組件上邊界對齊;

代碼 : 

[html] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent" >  
5.       
6.     <Button   
7.         android:id="@+id/bt1"  
8.         android:layout_width="wrap_content"  
9.         android:layout_height="wrap_content"  
10.         android:text="按鈕1"  
11.         android:layout_centerInParent="true"/>  
12.       
13.     <Button   
14.         android:id="@+id/bt2"  
15.         android:layout_width="wrap_content"  
16.         android:layout_height="wrap_content"  
17.         android:text="按鈕2"  
18.         android:layout_above="@+id/bt1"  
19.         android:layout_alignLeft="@+id/bt1"/>  
20.       
21.     <Button   
22.         android:id="@+id/bt3"  
23.         android:layout_width="wrap_content"  
24.         android:layout_height="wrap_content"  
25.         android:text="按鈕3"  
26.         android:layout_centerInParent="true"  
27.         android:layout_below="@+id/bt1"  
28.         android:layout_alignLeft="@+id/bt1"/>  
29.       
30.     <Button   
31.         android:id="@+id/bt4"  
32.         android:layout_width="wrap_content"  
33.         android:layout_height="wrap_content"  
34.         android:text="按鈕4"  
35.         android:layout_centerInParent="true"  
36.         android:layout_toLeftOf="@+id/bt1"  
37.         android:layout_alignTop="@+id/bt1"/>  
38.       
39.     <Button   
40.         android:id="@+id/bt5"  
41.         android:layout_width="wrap_content"  
42.         android:layout_height="wrap_content"  
43.         android:text="按鈕5"  
44.         android:layout_centerInParent="true"  
45.         android:layout_toRightOf="@+id/bt1"  
46.         android:layout_alignTop="@+id/bt1"/>  
47.       
48. </RelativeLayout>  

4. 相對布局常用方法

(1) 獲取屏幕中一個組件的位置

創建數組 : 要先創建一個整型數組, 數組大小2位; 這個數組傳入getLocationOnScreen()方法;

將位置信息傳入數組 : 可以調用View.getLocationOnScreen()方法, 返回的是一個數組 int[2], int[0] 是橫坐標, int[1] 是縱坐標;

[java] view plaincopy

1. //獲取組件  
2. Button b = (Button) this.findViewById(R.id.Button01);  
3. //創建數組, 將該數組傳入getLocationOnScreen()方法  
4. int locations[] = new int[2];  
5. //獲取位置信息  
6. b.getLocationOnScreen(locations);  
7. //獲取寬度  
8. int width = locations[0];  
9. //獲取高度  
10. int height = locations[1];  

(2) LayoutParams的使用設置所有屬性

屬性設置方法少 : Android SDK中View類隻提供了很少用於設置屬性的方法,大多數屬性沒有直接對應的獲得和設置屬性值的方法, 看起來貌似不是很好用;

使用LayoutParams設置屬性值 : Android中可以對任何屬性進行設置, 這裏我們需要一個LayoutParams對象, 使用這個LayoutParams.addRule()方法, 可以設置所有組件的屬性值; 設置完之後調用View.setLayoutParams()方法, 傳入剛才創建的LayoutParams對象, 並更新View的相應的LayoutParams屬性值, 向容器中添加該組件;

代碼中動態設置布局屬性 : 

a. 創建LayoutParams對象

b. 調用LayoutParams對象的addRule()方法設置對應屬性;

c. 調用View.setLayoutParams()方法將設置好的LayoutParams對象設置給組件;

d. 調用addView方法將View對象設置到布局中去;

使用代碼設置android:layout_toRightOf 和 android:layout_below屬性 : 

[java] view plaincopy

1. //裝載布局文件  
2. RelativeLayout relativeLayout = (RelativeLayout) getLayoutInflater().inflate(R.layout.relative, null);  
3. //裝載要動態添加的布局文件  
4. Button button = (Button) relativeLayout.findViewById(R.id.bt1);  
5. //創建一個LayoutParams對象  
6. LayoutParams layoutParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);  
7. //設置android:layout_toRightOf屬性  
8. layoutParams.addRule(RelativeLayout.RIGHT_OF, R.id.bt2);  
9. //設置android:layout_below  
10. layoutParams.addRule(RelativeLayout.BELOW, R.id.bt2);  
11. //更新Button按鈕的屬性  
12. button.setLayoutParams(layoutParams);  
13. //向布局中動態添加按鈕  
14. relativeLayout.addView(button);  

三. 幀布局FrameLayout

幀布局容器為每個組件創建一個空白區域, 一個區域成為一幀, 這些幀會根據FrameLayout中定義的gravity屬性自動對齊;

1. 繪製霓虹燈布局

繪製一個霓虹燈效果的層疊布局, 如下圖 : 

要點 : 

後擋前 : 後麵的View組件會遮擋前麵的View組件,越在前麵, 被遮擋的概率越大;

界麵居中 : 將所有的TextView組件的對齊方式 android:layout_gravity 設置為center;

正方形 : 所有的TextView都設置android:height 和 android:width 屬性, 用來設置其寬高, 這裏設置成正方形, 寬高一樣, 後麵的組件比前麵的邊長依次少40;

顏色 : 每個TextView的背景都設置成不一樣的;

代碼 : 

[html] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <FrameLayout xmlns:android="https://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent" >  
5.       
6.     <TextView   
7.         android:id="@+id/tv_1"  
8.         android:layout_width="wrap_content"  
9.         android:layout_height="wrap_content"  
10.         android:layout_gravity="center"  
11.         android:width="320px"  
12.         android:height="320px"  
13.         android:background="#f00"/>  
14.     <TextView   
15.         android:id="@+id/tv_2"  
16.         android:layout_width="wrap_content"  
17.         android:layout_height="wrap_content"  
18.         android:layout_gravity="center"  
19.         android:width="280px"  
20.         android:height="280px"  
21.         android:background="#0f0"/>  
22.     <TextView   
23.         android:id="@+id/tv_3"  
24.         android:layout_width="wrap_content"  
25.         android:layout_height="wrap_content"  
26.         android:layout_gravity="center"  
27.         android:width="240px"  
28.         android:height="240px"  
29.         android:background="#00f"/>  
30.     <TextView   
31.         android:id="@+id/tv_4"  
32.         android:layout_width="wrap_content"  
33.         android:layout_height="wrap_content"  
34.         android:layout_gravity="center"  
35.         android:width="200px"  
36.         android:height="200px"  
37.         android:background="#ff0"/>  
38.     <TextView   
39.         android:id="@+id/tv_5"  
40.         android:layout_width="wrap_content"  
41.         android:layout_height="wrap_content"  
42.         android:layout_gravity="center"  
43.         android:width="160px"  
44.         android:height="160px"  
45.         android:background="#f0f"/>  
46.     <TextView   
47.         android:id="@+id/tv_6"  
48.         android:layout_width="wrap_content"  
49.         android:layout_height="wrap_content"  
50.         android:layout_gravity="center"  
51.         android:width="120px"  
52.         android:height="120px"  
53.         android:background="#0ff"/>  
54.   
55. </FrameLayout>  

.

作者 :萬境絕塵 

轉載請注明出處 : https://blog.csdn.net/shulianghan/article/details/18964835

.

2. 使用代碼使上麵的霓虹燈效果動起來

(1) 圖片效果 

(2) 顏色資源

創建顏色資源, 在跟節點<resources>下麵創建<color>子節點, color屬性標簽 name 自定義, 子文本為顏色代碼;

(3) 定時器控製handler

創建Handler對象, 實現handleMessage()方法, 在這個方法中循環設置 TextView對象的顏色變量, 使用color[(i + currentColor)%colors.length]每調用一次, 就將所有的TextView顏色依次調換一次;

在onCreate()方法中, 開啟一個定時器Timer, 每隔0.2s就調用一個handler中的方法, 這樣動態的霓虹燈代碼就顯示出來了.

(4) 代碼

顏色資源代碼 : 

[html] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <resources>  
3.     <color name = "color1">#f00</color>  
4.     <color name = "color2">#0f0</color>  
5.     <color name = "color3">#00f</color>  
6.     <color name = "color4">#ff0</color>  
7.     <color name = "color5">#f0f</color>  
8.     <color name = "color6">#0ff</color>  
9. </resources>  

代碼 : 

[java] view plaincopy

1. package com.example.framelayout;  
2.   
3. import java.util.Timer;  
4. import java.util.TimerTask;  
5.   
6. import android.app.Activity;  
7. import android.os.Bundle;  
8. 最後更新：2017-04-03 12:56:36

     上一篇： 仿今日頭條的graidview拖動

     下一篇： 仿今日頭條的graidview拖動

   ---

   相關內容

   ---

   •  ibatis中的模煳查詢
   •  Tomcat集群Cluster實現原理剖析
   •   小微商家大調查：三成是夫妻店，八成受假鈔困擾
   •  Date.parse Firefox返回Nan的解決辦法
   •   人工智能第三次黃金時代，藏在全球數億攝像頭裏？
   •   如何設計穩定性橫跨全球的 Cron 服務
   •  dm642的中斷
   •  Oracle中的substr方法
   •  PHP5與PHP4的區別小議
   •   新型智慧城市：在標準的力量下闊步前行

   熱門內容

   ---

   •  PostgreSQL 路徑規劃插件 pgruoting 介紹
   •  人生不過如此
   •   《STM32庫開發實戰指南：基於STM32F4》----導讀
   •   解密區塊鏈：從基礎概念到技術實現的進階攻略
   •  ZED Board從入門到精通（三）：從傳統ARM開發到PS開發的轉變
   •  [圖文]曆屆奧斯卡影帝(上)
   •   紮克伯格發6千字長文,談Facebook未來願景和世界該有的樣子
   •  VS 添加jQuery智能提示
   •  python3學習
   •   突破吞吐限製，多NAS性能聚合方案，數據上傳及讀寫

   最新內容

   ---

   •   駐雲Gartner聯合發布人工智能時代的MSP白皮書
   •   雲端安全之三：最佳實踐
   •   突破吞吐限製，多NAS性能聚合方案，數據上傳及讀寫
   •   如何同步TableStore數據到OSS
   •   百億級全網輿情分析係統存儲設計
   •   在ECS中訪問各類阿裏雲雲資源的正確姿勢
   •   不外傳的seo計劃教程方案
   •   網站有收錄沒排名的原因與解決辦法
   •   燃！阿裏的技術小哥們又又又拿冠軍了！
   •   如何將個性化需求變成大數據解決方案

   ---