日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 运维知识 > Android >内容正文

Android

【Android 应用开发】AndroidUI设计之 布局管理器 - 详细解析布局实现

發布時間:2025/6/17 Android 25 豆豆
生活随笔 收集整理的這篇文章主要介紹了 【Android 应用开发】AndroidUI设计之 布局管理器 - 详细解析布局实现 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

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

.

作者?:萬境絕塵?

轉載請注明出處?:?http://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() 等方法獲取寬度和高度的時候, 并且組件中含有子元素時, 所獲取的實際值是這些組件所占的最小寬度和最小高度.(沒看懂)


示例:

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


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


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"就會成為這種情況 :?




要點 :?

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


代碼 :?


<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent" ><Button android:id="@+id/bt1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按鈕1"android:layout_centerInParent="true"/><Button android:id="@+id/bt2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按鈕2"android:layout_above="@+id/bt1"android:layout_alignLeft="@+id/bt1"/><Button android:id="@+id/bt3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按鈕3"android:layout_centerInParent="true"android:layout_below="@+id/bt1"android:layout_alignLeft="@+id/bt1"/><Button android:id="@+id/bt4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按鈕4"android:layout_centerInParent="true"android:layout_toLeftOf="@+id/bt1"android:layout_alignTop="@+id/bt1"/><Button android:id="@+id/bt5"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按鈕5"android:layout_centerInParent="true"android:layout_toRightOf="@+id/bt1"android:layout_alignTop="@+id/bt1"/></RelativeLayout>



4. 相對布局常用方法

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


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

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


//獲取組件Button b = (Button) this.findViewById(R.id.Button01);//創建數組, 將該數組傳入getLocationOnScreen()方法int locations[] = new int[2];//獲取位置信息b.getLocationOnScreen(locations);//獲取寬度int width = locations[0];//獲取高度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屬性 :?


//裝載布局文件RelativeLayout relativeLayout = (RelativeLayout) getLayoutInflater().inflate(R.layout.relative, null);//裝載要動態添加的布局文件Button button = (Button) relativeLayout.findViewById(R.id.bt1);//創建一個LayoutParams對象LayoutParams layoutParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);//設置android:layout_toRightOf屬性layoutParams.addRule(RelativeLayout.RIGHT_OF, R.id.bt2);//設置android:layout_belowlayoutParams.addRule(RelativeLayout.BELOW, R.id.bt2);//更新Button按鈕的屬性button.setLayoutParams(layoutParams);//向布局中動態添加按鈕relativeLayout.addView(button);



三. 幀布局FrameLayout

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


1. 繪制霓虹燈布局


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




要點 :?

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

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

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

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


代碼 :?


<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent" ><TextView android:id="@+id/tv_1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:width="320px"android:height="320px"android:background="#f00"/><TextView android:id="@+id/tv_2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:width="280px"android:height="280px"android:background="#0f0"/><TextView android:id="@+id/tv_3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:width="240px"android:height="240px"android:background="#00f"/><TextView android:id="@+id/tv_4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:width="200px"android:height="200px"android:background="#ff0"/><TextView android:id="@+id/tv_5"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:width="160px"android:height="160px"android:background="#f0f"/><TextView android:id="@+id/tv_6"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:width="120px"android:height="120px"android:background="#0ff"/></FrameLayout>

.

作者?:萬境絕塵?

轉載請注明出處?:?http://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) 代碼


顏色資源代碼 :?


<?xml version="1.0" encoding="utf-8"?> <resources><color name = "color1">#f00</color><color name = "color2">#0f0</color><color name = "color3">#00f</color><color name = "color4">#ff0</color><color name = "color5">#f0f</color><color name = "color6">#0ff</color> </resources>


代碼 :?


package com.example.framelayout;import java.util.Timer; import java.util.TimerTask;import android.app.Activity; import android.os.Bundle; import android.os.Handler; import android.os.Message; import android.widget.TextView;public class MainActivity extends Activity {//這個變量用來控制霓虹燈顏色變化private int currentColor = 0;//顏色對應的資源idfinal int[] colors = new int[]{R.color.color1,R.color.color2,R.color.color3,R.color.color4,R.color.color5,R.color.color6};//View組件對應的資源idfinal int[] names = new int[]{R.id.tv_1,R.id.tv_2,R.id.tv_3,R.id.tv_4,R.id.tv_5,R.id.tv_6};//組件數組TextView[] views = new TextView[names.length];//定義這個Handler, 為了在定時器中固定調用handleMessage方法Handler handler = new Handler(){public void handleMessage(Message msg) {if(msg.what == 0x123){for(int i = 0; i < names.length; i ++){views[i].setBackgroundResource(colors[(i + currentColor) % names.length]);}currentColor ++;}};};@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.frame);//初始化組件數組for(int i = 0; i < names.length; i ++){views[i] = (TextView) findViewById(names[i]);}//每隔0.2秒更換一次顏色new Timer().schedule(new TimerTask() {@Overridepublic void run() {handler.sendEmptyMessage(0x123);}}, 0, 200);} }


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




要點 : 給FrameLayout中的三個按鈕分別設置 不同的layout_gravity,left ,center_horizontal,right, 就能設置成上圖的樣式;


代碼 :?


<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent" ><Button android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按鈕1"android:layout_gravity="left"/><Button android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按鈕2"android:layout_gravity="center_horizontal"/><Button android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按鈕3"android:layout_gravity="right"/></FrameLayout>



四. 表格布局TableLayout


1. 表格布局的一些概念


繼承關系 : 表格布局繼承了LinearLayout, 其本質是線性布局管理器;?

控制組件 : 表格布局采用 行, 列 形式管理子組件, 但是并不需要聲明有多少 行列, 只需要添加TableRow 和 組件 就可以控制表格的行數和列數, 這一點與網格布局有所不同, 網格布局需要指定行列數;

增加行的方法 :?

a. TableRow增加行列 : 向TableLayout中添加一個TableRow,一個TableRow就是一個表格行, 同時TableRow也是容器, 可以向其中添加子元素, 每添加一個組件, 就增加了一列;

b. 組件增加行 : 如果直接向TableLayout中添加組件, 就相當于直接添加了一行;


列寬 : TableLayout中, 列的寬度由該列最寬的單元格決定, 整個表格的寬度默認充滿父容器本身;


2. 單元格行為方式?


(1) 行為方式概念

?

a. 收縮 :Shrinkable, 如果某列被設為Shrinkable, 那么該列所有單元格寬度可以被收縮, 保證表格能適應父容器的寬度;

b. 拉伸 :Stretchable, 如果某列被設為Stretchable, 那么該列所有單元格的寬度可以被拉伸, 保證表格能完全填滿表格剩余空間;

d. 隱藏 :Collapsed, 如果某列被設置成Collapsed, 那么該列所有單元格會被隱藏;


(2) 行為方式屬性


a. 隱藏

xml屬性 : android:collapsedColumns;

設置方法 : setColumnCollapsed(int, boolean);

作用 : 設置需要被隱藏的列的序號, 在xml文件中, 如果隱藏多列, 多列序號間用逗號隔開;


b. 拉伸

xml屬性 : android:stretchColumns;

設置方法 : setStretchAllColumns(boolean);

作用 : 設置允許被拉伸的列的序列號, xml文件中多個序列號之間用逗號隔開;


c. 收縮

xml屬性 : android:shrinkableColumns;

設置方法 : setShrinkableAllColumns(boolean);

作用 : 設置允許被收縮的列的序號, xml文件中, 多個序號之間可以用逗號隔開;


3. 表格布局實例




實現要點 :?

獨自一行按鈕 : 向TableLayout中添加按鈕, 這個按鈕就會獨自占據一行;

收縮按鈕: 在TableLayout標簽中,設置android:stretchable屬性標簽, 屬性值是要收縮的列, 注意,列標從0開始;

拉伸按鈕 : 在TableLayout標簽中,設置android:shrinkable屬性標簽, 屬性值是要拉伸的列, 注意, 列表從0開始;


代碼 :?


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent" ><!-- LinearLayout默認是水平的, 這里設置其方向為垂直 --><!-- 表格布局, 第2列允許收縮, 第3列允許拉伸, 注意這里行列的計數都是從0開始的 --><TableLayout android:layout_width="fill_parent"android:layout_height="wrap_content"android:shrinkColumns="1"android:stretchColumns="2"><!-- 向TableLayout中直接添加組件, 獨占一行 --><Button android:layout_width="fill_parent"android:layout_height="wrap_content"android:text="獨自一行的按鈕"/><TableRow><Button android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="普通的按鈕"/><Button android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="收縮的按鈕"/><Button android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="拉伸的按鈕"/></TableRow></TableLayout><!-- 第二個按鈕會隱藏掉 --><TableLayout android:layout_width="fill_parent"android:layout_height="wrap_content"android:collapseColumns="1"><Button android:layout_width="fill_parent"android:layout_height="wrap_content"android:text="獨自一行的按鈕"/><TableRow ><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"/></TableRow></TableLayout><!-- 指定第二列和第三列可以被拉伸 --><TableLayout android:layout_height="wrap_content"android:layout_width="fill_parent"android:stretchColumns="1,2"><Button android:layout_width="fill_parent"android:layout_height="wrap_content"android:text="獨自占一行的按鈕"/><TableRow ><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="拉伸的按鈕"/><Button android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="拉伸的按鈕"/></TableRow><TableRow ><Button android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="普通的按鈕"/><Button android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="拉伸的按鈕"/></TableRow></TableLayout></LinearLayout>

五. 網格布局


1. 網格布局介紹


網格布局時Android4.0版本才有的, 在低版本使用該布局需要導入對應支撐庫;

GridLayout將整個容器劃分成rows * columns個網格, 每個網格可以放置一個組件. 還可以設置一個組件橫跨多少列, 多少行. 不存在一個網格放多個組件情況;


2. 網格布局常用屬性


(1) 設置對齊模式


xml屬性 : android:alignmentMode;

設置方法 : setAlignmentMode(int);

作用 : 設置網格布局管理器的對齊模式


(2) 設置列數


xml屬性 : android:columnCount;

設置方法 : setColumnCount(int);

作用 : 設置該網格布局的列數;


(3) 設置是否保留列序列號


xml屬性 : android:columnOrderPreserved;

設置方法 : setColumnOrderPreserved(boolean);

作用 : 設置網格容器是否保留列序列號;


(4) 設置行數


xml屬性 : android:rowCount;

設置方法 : setRowCount(int);

作用 : 設置該網格的行數;


(5) 設置是否保留行序列號


xml屬性 : android:rowOrderPreserved;

設置方法 : setRowOrderPreserved(int);

作用 : 設置該網格容器是否保留行序列號;


(6) 頁邊距


xml屬性 : android:useDefaultMargins;

設置方法 : setUseDefaultMargins(boolean);

作用 : 設置該布局是否使用默認的頁邊距;


3. GridLayout的LayoutParams屬性


(1) 設置位置列


xml屬性 : android:layout_column;

作用 : 設置子組件在GridLayout的哪一列;


(2) 橫向跨列


xml屬性 : android:layout_columnSpan;

作用 : 設置該子組件在GridLayout中橫向跨幾列;


(3) 占據空間方式


xml屬性 : android:layout_gravity;

設置方法 : setGravity(int);

作用 : 設置該組件采用何種方式占據該網格的空間;


(4) 設置行位置


xml屬性 : android:layout_row;

作用 : 設置該子組件在GridLayout的第幾行;


(5) 設置橫跨行數


xml屬性 : android:layout_rowSpan;

作用 : 設置該子組件在GridLayout縱向橫跨幾行;


4. 實現一個計算機界面






(1) 布局代碼


設置行列 : 設置GridLayout的android:rowCount為6, 設置android:columnCount為4, 這個網格為 6行 * 4列 的;

設置橫跨四列 : 設置TextView和按鈕橫跨四列android:layout_columnSpan 為4, 列的合并 就是占了一行;

textView的一些設置:?

設置textView中的文本與邊框有5像素間隔 : android:padding = "5px";


代碼 :?


<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent" android:rowCount="6"android:columnCount="4"android:id="@+id/root"><!-- 定義一個 6行 * 4列 GridLayout, 在里面定義兩個組件兩個組件都橫跨4列, 單獨占一行--><TextView android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_columnSpan="4"android:textSize="50sp"android:layout_marginLeft="4px"android:layout_marginRight="4px"android:padding="5px"android:layout_gravity="right"android:background="#eee"android:textColor="#000"android:text="0"/><Button android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_columnSpan="4"android:text="清除"/></GridLayout>

(2) Activity代碼


將組件設置給GridLayout網格流程 :?

指定組件所在行 : GridLayout.SpecrowSpec = GridLayout.spec(int);?

指定組件所在列 : GridLayout.SpeccolumnSpec = GridLayout.spec(int);

創建LayoutParams對象 : GridLayout.LayoutParams params =new GridLayout.LayoutParams(rowSpec, columnSpec);

指定組件占滿容器 : params.setGravity(Gravity.FILL);

將組件添加到布局中 : gridLayout.addView(view, params);


代碼 :?


package com.example.caculator;import android.app.Activity; import android.os.Bundle; import android.view.Gravity; import android.widget.Button; import android.widget.GridLayout; import android.widget.GridLayout.LayoutParams; import android.widget.GridLayout.Spec;public class MainActivity extends Activity {private GridLayout gridLayout;//需要放到按鈕上的字符串String chars[] = new String[]{"7", "8", "9", "/","4", "5", "6", "*","1", "2", "3", "-",".", "0", "=", "+"};@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);gridLayout = (GridLayout) findViewById(R.id.root);for(int i = 0; i < chars.length; i ++){Button button = new Button(this);button.setText(chars[i]);button.setTextSize(40);//指定組件所在行Spec rowSpec = GridLayout.spec(i / 4 + 2);//指定組件所在列Spec columnSpec = GridLayout.spec(i % 4);//生成LayoutParams對象LayoutParams layoutParams = new LayoutParams(rowSpec, columnSpec);//指定組件充滿網格layoutParams.setGravity(Gravity.FILL);//將組件設置給GridLayoutgridLayout.addView(button, layoutParams);}} }



六. 絕對布局 AbsoluteLayout


1. 絕對布局介紹?


絕對布局特點 : 在絕對布局中,組件位置通過x, y坐標來控制, 布局容器不再管理組件位置, 大小, 這些都可以自定義;?

絕對布局使用情況 : 絕對布局不能適配不同的分辨率, 屏幕大小, 這種布局已經過時, 如果只為一種設備開發這種布局的話, 可以考慮使用這種布局;


2. 絕對布局的屬性


android:layout_x: 指定組件的x坐標;

android:layout_y: 指定組件的y坐標;


android:layout_width 是指定寬度是否充滿父容器, 或者僅僅包含子元素的,

android:width : 指定組件的寬度, 可以指定一個 數字 + 單位 , 如 100px 或者 100dp; 同理 android:layout_height 和 android:height;


3. 各種單位介紹


px : 像素, 每個px對應屏幕上的一個點;

dip/dp : device independent pixels, 設備的獨立像素, 這種單位基于屏幕密度, 在每英寸160點的顯示器上 1dp = 1px, 隨著屏幕密度改變, dp 與 px 換算會發生改變;

sp : scale pixels, 比例像素, 處理字體的大小, 可以根據用戶字體大小進行縮放;

in : 英寸, 標準長度單位

mm : 毫米, 標準長度單位

pt : 磅, 標準長度單位, 1/72英寸;



七. Android 分辨率 dip 與 px 轉換





1. 術語介紹


px : pixel, 像素, 屏幕分辨率就是像素, 分辨率用 寬度 * 長度 表示, 分辨率不是長寬比, Android中一般不直接處理分辨率;

density : 密度, 是以分辨率為基礎, 沿長寬方向排列的像素,密度低的屏幕像素少,密度高的屏幕像素多; 如果以像素為單位, 同一個按鈕在高密度屏幕 要比 在低密度屏幕要大.

dip : device independent pixel, 設備獨立像素, 程序用dip來定義界面元素,dip與實際密度無關.


2. 屏幕密度與大小


手機屏幕密度分類 : 高 hdpi 240 , 中 mdpi 160, 小 ldpi 120, 在res下有對應密度的標簽資源, 注意這些資源與屏幕大小無關;

手機屏幕大小分類 : 大屏幕 4.8英寸以上, 普通屏幕 3.0 ~ 4.0英寸, 小屏幕 2.6 ~ 3.0英寸;

基準屏幕 : 正常尺寸, 與中密度120dpi,HAVG 320 * 480 是基準屏幕, 中密度 px == dip;


3. dip 與 px 換算


dip -> px :px = dip * (densityDpi / 160);

px -> dip :dip = px / (densityDpi / 160);


在中密度 mdpi 下, dip == px;

在高密度 hdpi 下, px > dip;

在低密度 ldpi 下, px < dip;


獲取密度 :DisplayMetrics dm = getResources().getDisplayMetrics();

密度 : int density =dm.densityDpi;

像素 :dm.widthPixel * dm.heightPixel; ?



七. 獲取View對象寬高


如果在Activity中直接調用View組件的寬高, 獲得的寬高一定是0;

重寫 onWindowFocusChanged()?.方法, 在這個方法中獲取寬高, 就能成功獲取到view組件的準確寬高值;

參考 :?http://blog.csdn.net/sodino/article/details/10086633



.

作者?:萬境絕塵?

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

.












,

















,















,


《新程序員》:云原生和全面數字化實踐50位技術專家共同創作,文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的【Android 应用开发】AndroidUI设计之 布局管理器 - 详细解析布局实现的全部內容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。