AndroidUI设计之布局管理器

1、AndroidUI设计之 布局管理器 - 详细解析布局实现写完博客的总结 : 以前没有弄清楚的概念清晰化父容器与本容器属性 : android_layout.属性是本容器的属性, 定义在这个布局管理器的LayoutParams内部类中, 每个布局管理器都有一个LayoutParams内部类, android:. 是父容器用来控制子组件的属性. 如android:layout_gravity 是控制组件本身的对齐方式, android:gravity是控制本容器子组件的对齐方式;布局管理器都是以ViewGroup为基类派生出来的; 使用布局管理器可以适配不同手机屏幕的分辨率,尺寸大小;

2、布局管理器之间的继承关系 : 在上面的UML图中可以看出, 绝对布局 帧布局 网格布局 相对布局 线性布局是直接继承ViewGroup,表格布局是继承的LinearLayout;一. 线性布局(LinearLayout)1. 线性布局作用 作用 : 线性布局会将容器中的组件一个一个排列起来, LinearLayout可以控制组件 横向 或者 纵向 排列, 通过android:orientation属性控制;不换行属性 : 线性布局中的组件不会自动换行, 如果组件一个一个排列到尽头之后, 剩下的组件就不会显示出来;2. LinearLa

3、yout常用属性(1)基线对齐xml属性 : android:baselineAligned; 设置方法 : setBaselineAligned(boolean b); 作用 : 如果该属性为false, 就会阻止该布局管理器与其子元素的基线对齐;(2)设分隔条 xml属性 : android:divider; 设置方法 : setDividerDrawable(Drawable); 作用 : 设置垂直布局时两个按钮之间的分隔条;(3)对齐方式

4、(控制内部子元素)  xml属性 : android:gravity; 设置方法 : setGravity(int); 作用 : 设置布局管理器内组件(子元素)的对齐方式, 支持的属性 : top, bottom, left, right, center_vertical(垂直方向居中), center_horizontal(水平方向居中),fill_vertical(垂直方向拉伸), fill_horizontal(水平方向拉伸), cente

5、r, fill, clip_vertical, clip_horizontal; 可以同时指定多种对齐方式 : 如 left|center_vertical 左侧垂直居中;(4)权重最小尺寸 xml属性 : android:measureWithLargestChild; 设置方法 : setMeasureWithLargestChildEnable(boolean b);作用 : 该属性为true的时候, 所有带权重的子元素都会具有最大子元素的最小尺寸;(5) 排列方式xml属性 : 

6、;android:orientation;设置方法 : setOrientation(int i);作用 : 设置布局管理器内组件排列方式, 设置为horizontal(水平),vertical(垂直), 默认为垂直排列;3. LinearLayout子元素控制LinearLayout的子元素, 即LinearLayout中的组件, 都受到LinearLayout.LayoutParams控制, 因此LinearLayout包含的子元素可以执行下面的属性.(1) 对齐方式xml属性 : android:layout_gravity;作

7、用 : 指定该元素在LinearLayout(父容器)的对齐方式, 也就是该组件本身的对齐方式, 注意要与android:gravity区分, ;(2) 所占权重xml属性 : android:layout_weight;作用 : 指定该元素在LinearLayout(父容器)中所占的权重, 例如都是1的情况下, 那个方向(LinearLayout的orientation方向)长度都是一样的;4. 控制子元素排列 与 在父元素中排列控制本身元素属性与子元素属性 : 设备组件本身属性 : 带layout的属性是设置本

8、身组件属性, 例如 android:layout_gravity设置的是本身的对其方式; 设置子元素属性 : 不带layout的属性是设置其所包含的子元素, 例如android:gravity 设置的是该容器子组件的对齐方式;LayoutParams属性 : 所有的布局管理器都提供了相应的LayoutParams内部类, 这些内部类用于控制该布局本身, 如 对齐方式 layout_gravity, 所占权重 layout_weight, 这些属性用于设置本元素在父容器中的对齐方式;容器属性 : 在android:后面没有layout的属性基本都是容器属性

9、, android:gravity作用是指定指定本元素包含的子元素的对齐方式, 只有容器才支持这个属性;5. 常见用法(1) 获取LinearLayout的宽高a. 组件外无法获取组件宽高 下面的两种情况都是针对 View.getHeight() 和 View.getWidth() 方法 : 组件外无法获取 : 调用View.getHeight() 和View.getWidth()方法 是获取不到组件的宽度和高度的, 这两个方法返回的是0, Android的运行机制决定了无法在组件外部使用getHeight()和getWidth()方

10、法获取宽度和高度;组件内可以获取 : 在自定义的类中可以在View的类中通过调用这两个方法获取该View子类组件的宽和高;b. 组件外部获取View对象宽高方法 外部获取 : 使用View.getMeasuredWidth() 和View.getMeasuredHeight()方法可以获取组件的宽和高, 在调用这个方法之前, 必须先调用View.measure()方法, 才可以, 否则也获取不到组件的宽高;注意(特例) : 如果组件宽度或高度设置为 fill_parent, 使用 getMeasuredHeight() 等方法获取宽度和高度的时

11、候, 并且组件中含有子元素时, 所获取的实际值是这些组件所占的最小宽度和最小高度.(没看懂)示例:java view plaincopy1. View view = getLayoutInflater().inflate(R.layout.main, null);  2. LinearLayout layout = (LinearLayout) view.findViewById(R.id.linearlayout);  3. /调用测量方法, 调用了该方

12、法之后才能通过getMeasuredHeight()等方法获取宽高  4. layout.measure(0, 0);  5. /获取宽度  6. int width = layout.getMeasuredWidth();  7. /获取高度  8. int height = layout.getMeasuredHeight();  c. 获取布局文件中组件的宽高 从LayoutParams中获

13、取 : 调用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. 使用Imag

14、eView添加(低版本3.0以下)垂直布局 横向宽度填满 : 如果布局是vertical, 那么设置一个ImageView宽度fill_parent, 高度2dp, 设置一个背景色;水平布局 纵向高度填满 : 如果布局时horizontal, 那么设置一个ImageView宽度2dp, 高度fill_parent, 设置一个背景色;java view plaincopy1. <ImageView   2.     android:layout_width="fill_parent

15、"  3.     android:layout_height="2dp"  4.     android:background="#F00"/>  b. 使用xml属性添加(3.0以上版本)设置LinearLayout标签的 android:showDividers属性, 该属性有四个值 : none :不显示分隔线;beginning : 在LinearLa

16、yout开始处显示分隔线;middle : 在LinearLayout中每两个组件之间显示分隔线;end : 在LinearLayout结尾处显示分隔线;设置android:divider属性, 这个属性的值是一个Drawable的id;c. 使用代码添加(3.0以上版本)设置显示分隔线样式 : linearLayout.setShowDividers(), 设置android:showDividers属性;设置分隔线图片 : linearLayout.setDividerDrawable(), 设置android:divider属性;6. 实际案例(1

17、) 按钮排列        要点 : 底部 + 水平居中 对齐属性 : 左边的LinearLayout的android:gravity 属性为bottom|center_horizontal; 右部 + 垂直居中 对齐属性 : 右边的LinearLayout的android:gravity 属性为right|center_vertical;代码 : html view plaincopy1. <?xml version="1.0"

18、 encoding="utf-8"?>  2. <LinearLayout xmlns:android="3.     android:layout_width="fill_parent"  4.     android:layout_height="fill_parent"  5.     android:orie

19、ntation="vertical"   6.     android:gravity="bottom|center_horizontal">  7.     <Button   8.         android:layout_width="wrap_content" &#

20、160;9.         android:layout_height="wrap_content"  10.         android:text="按钮1"/>  11.     <Button   12.      

21、   android:layout_width="wrap_content"  13.         android:layout_height="wrap_content"  14.         android:text="测试按钮2"/>  15.   

22、  <Button   16.         android:layout_width="wrap_content"  17.         android:layout_height="wrap_content"  18.       &

23、#160; android:text="按钮3"/>  19.     <Button   20.         android:layout_width="wrap_content"  21.         android:layout_height="

24、;wrap_content"  22.         android:text="测试按钮4"/>  23.     <Button   24.         android:layout_width="wrap_content"  25. &

25、#160;       android:layout_height="wrap_content"  26.         android:text="按钮5"/>  27. </LinearLayout>  子元素对齐 : 通过修改 android:gravity 属性来控制LinearLayout中子元素的排列情况;

26、左边的图的属性为 bottom|center_horizontal , 右边的android:gravity的属性值为 right|center_vertical;(2) 三个按钮各自对齐三个水平方向的按钮, 分别左对齐, 居中对齐, 右对齐 :要点 : 水平线性布局 : 最顶层的LinearLayout的orientation是horizontal水平的;等分三个线性布局 : 第二层的LinearLayout的orientation是vertical垂直的, 并且宽度是fill_parent , 依靠权重分配宽度;设置按钮对齐方式 : 按钮的

27、android:layout_gravity属性根据需求 left, center, right, 默认为left;代码 : html view plaincopy1. <?xml version="1.0" encoding="utf-8"?>  2. <LinearLayout xmlns:android="3.     android:layout_width="fill_parent"

28、60; 4.     android:layout_height="fill_parent"  5.     android:orientation="horizontal"  >  6.      7.     <LinearLayout   8.   &

29、#160;     android:layout_width="fill_parent"  9.         android:layout_weight="1"  10.         android:layout_height="wrap_content"  1

30、1.         android:orientation="vertical"  12.         android:background="#f00">  13.         <Button android:layout_width="

31、;wrap_content"  14.             android:layout_height="wrap_content"  15.             android:text="按钮1"/>  16.  

32、0;  </LinearLayout>  17.       18.     <LinearLayout   19.         android:layout_width="fill_parent"  20.       

33、60; android:layout_weight="1"  21.         android:layout_height="wrap_content"  22.         android:orientation="vertical"  23.     &#

34、160;   android:background="#0f0">  24.         <Button android:layout_width="wrap_content"  25.             android:layout_height=&quo

35、t;wrap_content"  26.             android:text="按钮2"  27.             android:layout_gravity="center"/>  28.   &#

36、160; </LinearLayout>  29.       30.     <LinearLayout   31.         android:layout_width="fill_parent"  32.        &

37、#160;android:layout_weight="1"  33.         android:layout_height="wrap_content"  34.         android:orientation="vertical"  35.      

38、   android:background="#00f">  36.         <Button android:layout_width="wrap_content"  37.             android:layout_height="wr

39、ap_content"  38.             android:text="按钮3"  39.             android:layout_gravity="right"/>  40.    &

40、#160;</LinearLayout>  41.       42. </LinearLayout>  二. 相对布局RelativeLayout相对布局容器中, 子组件的位置总是相对兄弟组件,父容器来决定的;1. RelativeLayout支持的属性(1) 对齐方式xml属性 : android:gravity;设置方法 : setGravity(int);作用 : 设置布局容器内子元素的对齐方式

41、, 注意与android:layout_gravity区分, 后者是设置组件本身元素对齐方式;(2) 忽略对齐方式xml属性 : android:ignoreGravity;设置方法 : setIgnoreGravity(int);作用 : 设置该组件不受gravity属性影响, 因为gravity属性影响容器内所有的组件的对齐方式, 设置了之后, 该组件就可以例外;2. LayoutParams属性(1) 只能设置boolean值的属性这些属性都是相对父容器的, 确定是否在父容器中居中(水平, 垂直), 是否位于父容器的 上下左右 

42、端;是否水平居中 : android:layout_centerHorizontal;是否垂直居中 : android:layout_centerVertical;是否位于中央 : android:layout_centerInParent;是否底端对齐 : android:layout_alignParentBottom;是否顶端对齐 : android:layout_alignParentTop;是否左边对齐 : android:layout_alignParentLeft;是否右边对齐 : android:layout

43、_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组件左边对齐

44、 : android:layout_alignLeft;与所给id组件右边对齐 : android:layout_alignRight;3. 梅花布局效果 五个按钮排成梅花形状, 梅花处于正中心, 效果图如下 : 两个按钮, 如果只有 android:layout_above="+id/bt1" 会是这种情况 : 加上 android:layout_alignLeft="+id/bt1"就会成为这种情况 : 要点 : 注意每个组件的属性, 先要确定方位, 在进行对齐

45、, 组件左边界对齐, 组件上边界对齐;代码 : html view plaincopy1. <?xml version="1.0" encoding="utf-8"?>  2. <RelativeLayout xmlns:android="3.     android:layout_width="fill_parent"  4.     a

46、ndroid:layout_height="fill_parent" >  5.       6.     <Button   7.         android:id="+id/bt1"  8.        &#

47、160;android:layout_width="wrap_content"  9.         android:layout_height="wrap_content"  10.         android:text="按钮1"  11.      

48、0;  android:layout_centerInParent="true"/>  12.       13.     <Button   14.         android:id="+id/bt2"  15.      

49、;   android:layout_width="wrap_content"  16.         android:layout_height="wrap_content"  17.         android:text="按钮2"  18.    

50、     android:layout_above="+id/bt1"  19.         android:layout_alignLeft="+id/bt1"/>  20.       21.     <Button   22.  

51、;       android:id="+id/bt3"  23.         android:layout_width="wrap_content"  24.         android:layout_height="wrap_content" &#

52、160;25.         android:text="按钮3"  26.         android:layout_centerInParent="true"  27.         android:layout_below="+id/bt1"&#

53、160; 28.         android:layout_alignLeft="+id/bt1"/>  29.       30.     <Button   31.         android:id="+id/bt4"

54、;  32.         android:layout_width="wrap_content"  33.         android:layout_height="wrap_content"  34.         android:text=&qu

55、ot;按钮4"  35.         android:layout_centerInParent="true"  36.         android:layout_toLeftOf="+id/bt1"  37.         android

56、:layout_alignTop="+id/bt1"/>  38.       39.     <Button   40.         android:id="+id/bt5"  41.         andro

57、id:layout_width="wrap_content"  42.         android:layout_height="wrap_content"  43.         android:text="按钮5"  44.        

58、 android:layout_centerInParent="true"  45.         android:layout_toRightOf="+id/bt1"  46.         android:layout_alignTop="+id/bt1"/>  47.   

59、    48. </RelativeLayout>  4. 相对布局常用方法(1) 获取屏幕中一个组件的位置创建数组 : 要先创建一个整型数组, 数组大小2位; 这个数组传入getLocationOnScreen()方法;将位置信息传入数组 : 可以调用View.getLocationOnScreen()方法, 返回的是一个数组 int2, int0 是横坐标, int1 是纵坐标;java view plaincopy1. /获取组件  2. Button b&

60、#160;= (Button) this.findViewById(R.id.Button01);  3. /创建数组, 将该数组传入getLocationOnScreen()方法  4. int locations = new int2;  5. /获取位置信息  6. b.getLocationOnScreen(locations);  7. /获取宽度  8. int width 

61、= locations0;  9. /获取高度  10. int height = locations1;  (2) LayoutParams的使用设置所有属性属性设置方法少 : Android SDK中View类只提供了很少用于设置属性的方法,大多数属性没有直接对应的获得和设置属性值的方法, 看起来貌似不是很好用;使用LayoutParams设置属性值 : Android中可以对任何属性进行设置, 这里我们需要一个LayoutParams对象, 使用这个LayoutPara

62、ms.addRule()方法, 可以设置所有组件的属性值; 设置完之后调用View.setLayoutParams()方法, 传入刚才创建的LayoutParams对象, 并更新View的相应的LayoutParams属性值, 向容器中添加该组件;代码中动态设置布局属性 : a. 创建LayoutParams对象b. 调用LayoutParams对象的addRule()方法设置对应属性;c. 调用View.setLayoutParams()方法将设置好的LayoutParams对象设置给组件;d. 调用addView方法将View对象设置到布局中去;使用代码设置a

63、ndroid:layout_toRightOf 和 android:layout_below属性 : java view plaincopy1. /装载布局文件  2. RelativeLayout relativeLayout = (RelativeLayout) getLayoutInflater().inflate(R.layout.relative, null);  3. /装载要动态添加的布局文件  4. Button button =

64、 (Button) relativeLayout.findViewById(R.id.bt1);  5. /创建一个LayoutParams对象  6. LayoutParams layoutParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);  7. /设置android:layout_toRightOf属性  8. layoutPara

65、ms.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. relativeLay

66、out.addView(button);  三. 帧布局FrameLayout帧布局容器为每个组件创建一个空白区域, 一个区域成为一帧, 这些帧会根据FrameLayout中定义的gravity属性自动对齐;1. 绘制霓虹灯布局绘制一个霓虹灯效果的层叠布局, 如下图 : 要点 : 后挡前 : 后面的View组件会遮挡前面的View组件,越在前面, 被遮挡的概率越大;界面居中 : 将所有的TextView组件的对齐方式 android:layout_gravity 设置为center;正方形 : 所有的TextVie

67、w都设置android:height 和 android:width 属性, 用来设置其宽高, 这里设置成正方形, 宽高一样, 后面的组件比前面的边长依次少40;颜色 : 每个TextView的背景都设置成不一样的;代码 : html view plaincopy1. <?xml version="1.0" encoding="utf-8"?>  2. <FrameLayout xmlns:android="3.    

68、; android:layout_width="match_parent"  4.     android:layout_height="match_parent" >  5.       6.     <TextView   7.        

69、 android:id="+id/tv_1"  8.         android:layout_width="wrap_content"  9.         android:layout_height="wrap_content"  10.      

70、   android:layout_gravity="center"  11.         android:width="320px"  12.         android:height="320px"  13.      

71、0;  android:background="#f00"/>  14.     <TextView   15.         android:id="+id/tv_2"  16.         android:layout_width="wr

72、ap_content"  17.         android:layout_height="wrap_content"  18.         android:layout_gravity="center"  19.         andro

73、id:width="280px"  20.         android:height="280px"  21.         android:background="#0f0"/>  22.     <TextView   23.

74、        android:id="+id/tv_3"  24.         android:layout_width="wrap_content"  25.         android:layout_height="wrap_content"&#

75、160; 26.         android:layout_gravity="center"  27.         android:width="240px"  28.         android:height="240px" 

76、 29.         android:background="#00f"/>  30.     <TextView   31.         android:id="+id/tv_4"  32.      

77、60;  android:layout_width="wrap_content"  33.         android:layout_height="wrap_content"  34.         android:layout_gravity="center"  35.  

78、60;      android:width="200px"  36.         android:height="200px"  37.         android:background="#ff0"/>  38.   &#

79、160; <TextView   39.         android:id="+id/tv_5"  40.         android:layout_width="wrap_content"  41.         andr

80、oid:layout_height="wrap_content"  42.         android:layout_gravity="center"  43.         android:width="160px"  44.        

81、 android:height="160px"  45.         android:background="#f0f"/>  46.     <TextView   47.         android:id="+id/tv_6" 

82、; 48.         android:layout_width="wrap_content"  49.         android:layout_height="wrap_content"  50.         android:layout_gravity

83、="center"  51.         android:width="120px"  52.         android:height="120px"  53.         android:background="#

84、0ff"/>  54.   55. </FrameLayout>  .作者 :万境绝尘 转载请注明出处 : .2. 使用代码使上面的霓虹灯效果动起来(1) 图片效果 (2) 颜色资源创建颜色资源, 在跟节点<resources>下面创建<color>子节点, color属性标签 name 自定义, 子文本为颜色代码;(3) 定时器控制handler创建Handler对象, 实现handleMessage()方法, 在这个方法

85、中循环设置 TextView对象的颜色变量, 使用color(i + currentColor)%colors.length每调用一次, 就将所有的TextView颜色依次调换一次;在onCreate()方法中, 开启一个定时器Timer, 每隔0.2s就调用一个handler中的方法, 这样动态的霓虹灯代码就显示出来了.(4) 代码颜色资源代码 : html view plaincopy1. <?xml version="1.0" encoding="utf-8"?>  

86、2. <resources>  3.     <color name = "color1">#f00</color>  4.     <color name = "color2">#0f0</color>  5.     <color name

87、 = "color3">#00f</color>  6.     <color name = "color4">#ff0</color>  7.     <color name = "color5">#f0f</color>  8.  

88、0;  <color name = "color6">#0ff</color>  9. </resources>  代码 : java view plaincopy1. package com.example.framelayout;  2.   3. import java.util.Timer;  4. import java.util.

89、TimerTask;  5.   6. import android.app.Activity;  7. import android.os.Bundle;  8. import android.os.Handler;  9. import android.os.Message;  10. import android.widget.TextView;  11.   12. public

90、 class MainActivity extends Activity   13.   14.     /这个变量用来控制霓虹灯颜色变化  15.     private int currentColor = 0;  16.     /颜色对应的资源id  17.   

91、;  final int colors = new int  18.             R.color.color1,  19.             R.color.color2,  20.   &#

92、160;         R.color.color3,  21.             R.color.color4,  22.             R.color.color5,  23.  

93、;           R.color.color6  24.       25.     /View组件对应的资源id  26.     final int names = new int  27.    &

94、#160;        R.id.tv_1,  28.             R.id.tv_2,  29.             R.id.tv_3,  30.     &

95、#160;       R.id.tv_4,  31.             R.id.tv_5,  32.             R.id.tv_6  33.      &#

96、160;34.       35.     /组件数组  36.     TextView views = new TextViewnames.length;  37.       38.     /定义这个Handler, 为了在定时器中固定调用handleMessa

97、ge方法  39.     Handler handler = new Handler()  40.         public void handleMessage(Message msg)   41.            

98、 if(msg.what = 0x123)  42.                 for(int i = 0; i < names.length; i +)  43.          &#

99、160;          viewsi.setBackgroundResource(colors(i + currentColor) % names.length);  44.                   45.    

100、             currentColor +;  46.               47.           48.      

101、0;49.       50.     Override  51.     public void onCreate(Bundle savedInstanceState)   52.         super.onCreate(savedInstanceState);  53.

102、         setContentView(R.layout.frame);  54.         /初始化组件数组  55.         for(int i = 0; i < names.length; i +)  56.