Android 布局 ViewGroup

布局

res/layout

命名规则(全部小写)

activity_

fragment_

item_

基础组件

com.android.widget包下

父类View

view：屏幕上一块矩阵区域

能在xml中设置的都是view，除了特殊标签。

引用使用@符号

　　1、background:@drawable引用图片 @android:color引用颜色

　　2、android:clickable可以响应点击事件

　　3、android:id 每一个组件都可以设置一个在当前xml中唯一的id号，使用@+id/来创建一个R文件中的id号，用来在java代码或xml中引用

　　4、android:padding自己与自己的内部之间的距离

　　5、android:layout_margin 布局管理器自己与外部之间的距离

　　6、android:visibility是否显示组件，visible显示，inVisible不显示但是占位，gone不显示也不占位

TextView文本框

　　用来显示文本String

所有的组件都包含有的属性

　　android：表明属于android标准属性

　　使用android标准命名空间

　　　　xmlns:android="http://schemas.android.com/apk/res/android

　　前面加layout的所有属性，都属于布局

　　所有组件都必须加上的（TableLayout除外）

　　　　layout_width 宽度

　　　　layout_height 高度

　　　　match_parent 常量与父布局相同大小，如果在根布局上，表明全屏，fill_arent过期和match_parent一样

　　　　wrap_content 常量根据内容来确定组件的大小

TextView独有的属性

　　text 显示文本信息

　　drawableTop在四边设置一张图片

　　android:gravity 对齐

　　singleLine 单行模式

　　textColor 设置文本显示的颜色

　　textSize 设置文本大小，单位：sp 跟随用户手机字体的首选项进行调整

　　textStyle 设置文本显示样式，粗体和斜体多个常量可以使用|连接

Button 与TextView相同

跑马灯

1、必须内容大于宽度

2、必须单行

3、设置焦点

　　android:ellipsize="marquee"

　　android:focusable="true"

　　android:focusableInTouchMode="true"

　　android:singleLine="true"　　　

View一般用于划线

　　<View

　　　　android:layout_width="match_parent"

　　　　android:layout_height="1px"

　　　　android:background="@android:color/black"　/>

LinearLayout线性布局

　　一行或者一列只有一个元素

　　超过一个组件或者给了id必须设置方向orientation属性

　　vertical垂直一行只有一个组件

　　horizontal水平一列只有一个组件

　　布局可以嵌套布局

　　layout_gravity线性布局特有属性：水平时只能设置上下，垂直时只能设置水平

　　layout_weight设置按权重来调整组件大小，设置为0dp

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     android:layout_width="match_parent"
 3     android:background="@android:color/holo_purple"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical" >
 6     <LinearLayout
 7         android:layout_width="match_parent"
 8         android:layout_height="0dp"
 9         android:layout_margin="2dp"
10         android:orientation="horizontal"
11         android:layout_weight="1">
12         <Button 
13             android:layout_width="0dp"
14             android:layout_weight="1"
15             android:layout_height="match_parent"
16             android:layout_margin="1dp"
17             android:textStyle="bold"
18             android:textSize="20sp"
19             android:text="MC"/>
20 
21     </LinearLayout>
22 </LinearLayout>

TableLayout 表格布局

TableLayout 继承于LinearLayout，支持所有LinearLayout属性
添加多个TableRow，每个TableRow占一行，如果不添加TableRow直接添加组件，那么每个组件单独占一行，TableRow也是容器，每添加一个组件，就可以添加一列
唯一一个不需要宽高的组件
initTableLayout()初始化时，setOrientation(VERTICAL);默认设置了方向为垂直方向，所以这里设置方向无意义

 1 <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     android:layout_width="match_parent"
 3        android:stretchColumns="1"
 4        android:shrinkColumns="0"
 5     android:layout_height="match_parent" >
 6     
 7     <Button android:text="你好"/>
 8     <Button android:text="你好"/>
 9     
10     <TableRow>
11         <TextView android:text="用户名:"/>
12         <EditText
13             android:hint="6-16个字符"
14             android:layout_weight="1"/>
15     </TableRow>
16     <TableRow>
17         <TextView android:text="密码:"/>
18         <EditText
19             android:hint="6-14个字母" 
20             android:layout_weight="1"/>
21     </TableRow>
22     
23       <TableRow
24           >
25           <!-- 填满整行，还用weight分配宽度 -->
26           <Button android:text="1"/>
27           <Button android:text="2"/>
28           <Button android:text="3" />
29           <Button android:text="4" />
30        </TableRow> 
31        
32       <TableRow>
33         <!-- android:layout_span="4" 跨越4列 -->
34         <!-- <Button android:text="5"
35             android:layout_span="4" /> -->
36         <Button android:text="6" />
37         <Button android:text="7" />
38         <Button android:text="8" />
39           
40       </TableRow>
41       
42       <TableRow>
43        <!--  android:layout_column="1"指定显示在第1列上，后面的组件会跟着走 -->
44           <!-- <Button android:text="11" 
45               android:layout_column="1"/> -->
46           <Button android:text="22" />
47           <Button android:text="33" />
48           <Button android:text="44" />
49        </TableRow>
50        
51       
52       
53 </TableLayout>

效果图如下：

FrameLayout 帧布局也叫层布局

 1 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     android:layout_width="match_parent"
 3     android:layout_height="match_parent"
 4     android:orientation="vertical" >
 5     
 6     <!-- 一般作为容器（碎片的容器） -->
 7     <!-- 特效 -->
 8     <!--FrameLayout中的子元素总是以屏幕的左上角层叠在一起  -->
 9     <Button
10         android:layout_width="wrap_content"
11         android:layout_height="wrap_content" 
12         android:text="aaa"/>
13     
14     <TextView android:layout_width="wrap_content"
15         android:layout_height="wrap_content"
16         android:text="bbbbb"/>
17 </FrameLayout>

效果图如下

AbsoluteLayout 绝对布局已过期

RelativeLayout相对布局

  1 <!-- 默认以左上角为原点 -->
  2 <!-- 4组方法 -->
  3 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  4     android:layout_width="match_parent"
  5     android:layout_height="match_parent" >
  6     
  7 <!-- 1、居中方式  相对于父窗体   三种居中方式-->
  8 <!--   android:layout_centerInParent="true"  布局的正中心 -->
  9 <!-- android:layout_centerVertical="true"  布局的垂直居中 -->
 10 <!-- android:layout_centerHorizontal="true" 布局的水平居中 -->
 11 
 12     <Button 
 13         android:id="@+id/center"
 14         android:layout_width="wrap_content"
 15         android:layout_height="wrap_content"
 16         android:layout_centerInParent="true"
 17         android:text="正中心"/>
 18     
 19     <Button android:layout_width="wrap_content"
 20         android:layout_height="wrap_content"
 21         android:layout_centerVertical="true"
 22         android:text="垂直居中" />
 23     
 24      <Button android:layout_width="wrap_content"
 25         android:layout_height="wrap_content"
 26         android:layout_centerHorizontal="true"
 27         android:text="水平居中" />
 28 
 29 <!--2、与父窗体的对齐方式   在父窗体的左右上下  -->
 30 <!-- android:layout_alignParentLeft="true"  -->
 31 <!-- android:layout_alignParentRight="true" -->
 32 <!-- android:layout_alignParentTop="true" -->
 33 <!-- android:layout_alignParentBottom="true" -->
 34    
 35    <Button android:layout_width="wrap_content"
 36         android:layout_height="wrap_content"
 37         android:layout_alignParentLeft="true"
 38         android:layout_alignParentTop="true"
 39         android:text="左上角"/>
 40 
 41    <Button android:layout_width="wrap_content"
 42         android:layout_height="wrap_content"
 43         android:layout_alignParentRight="true"
 44         android:layout_alignParentTop="true"
 45         android:text="右上角"/>
 46    
 47    <Button android:layout_width="wrap_content"
 48         android:layout_height="wrap_content"
 49         android:layout_alignParentLeft="true"
 50         android:layout_alignParentBottom="true"
 51         android:text="左下角"/>
 52    
 53    <Button android:layout_width="wrap_content"
 54         android:layout_height="wrap_content"
 55         android:layout_alignParentBottom="true"
 56         android:layout_alignParentRight="true"
 57         android:text="右下角"/>
 58 
 59 <!-- 3、相对其他组件的位置 -->
 60 <!-- android:layout_above="@id/center"  在id的上面 -->
 61 <!-- android:layout_below="@id/center" 在id的下面 -->
 62 <!-- android:layout_toLeftOf="@id/center" 在id的左边-->
 63 <!-- android:layout_toRightOf="@id/center" 在id的右边 -->
 64    <Button 
 65        android:id="@+id/top"
 66        android:layout_width="wrap_content"
 67         android:layout_height="wrap_content"
 68         android:layout_above="@id/center"
 69         android:layout_centerHorizontal="true"
 70         android:text="上"/>
 71    
 72    <Button 
 73        android:id="@+id/down"
 74        android:layout_width="wrap_content"
 75         android:layout_height="wrap_content"
 76         android:layout_below="@id/center"
 77         android:layout_centerHorizontal="true"
 78         android:text="下"/>
 79    
 80    <Button 
 81        android:id="@+id/left"
 82        android:layout_width="wrap_content"
 83         android:layout_height="wrap_content"
 84         android:layout_toLeftOf="@id/center"
 85         android:layout_centerVertical="true"
 86         android:text="左"/>
 87    
 88     <Button 
 89         android:id="@+id/right"
 90         android:layout_width="wrap_content"
 91         android:layout_height="wrap_content"
 92         android:layout_toRightOf="@id/center"
 93         android:layout_centerVertical="true"
 94         android:text="右"/>
 95 
 96 <!-- 4、相对于其他组件的对齐方式 -->
 97 <!--android:layout_alignLeft="@id/left" 与id组件左对齐  -->
 98 <!--android:layout_alignRight="@id/right" 与id组件右对齐  -->
 99 <!--android:layout_alignTop="@id/top" 与id组件上对齐  -->
100 <!--android:layout_alignBottom="@id/down" 与id组件下对齐  -->
101     <Button android:layout_width="wrap_content"
102         android:layout_height="wrap_content"
103         android:layout_above="@id/left"
104         android:layout_alignLeft="@id/left"
105         android:layout_alignTop="@id/top"
106         android:text="A"/>
107 
108     <Button android:layout_width="wrap_content"
109         android:layout_height="wrap_content"
110         android:layout_above="@id/right"
111         android:layout_alignRight="@id/right"
112         android:layout_alignTop="@id/top"
113         android:text="B"/>
114     
115     <Button android:layout_width="wrap_content"
116         android:layout_height="wrap_content"
117         android:layout_below="@id/left"
118         android:layout_alignLeft="@id/left"
119         android:layout_alignBottom="@id/down"
120         android:text="C"/>
121     
122     <Button android:layout_width="wrap_content"
123         android:layout_height="wrap_content"
124         android:layout_below="@id/right"
125         android:layout_alignRight="@id/right"
126         android:layout_alignBottom="@id/down"
127         android:text="D"/>
128 
129 </RelativeLayout>

效果图如下：

GridLayout网格布局 4.0新增特性

 1 <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     android:layout_width="match_parent"
 3     android:layout_height="match_parent"
 4     android:columnCount="5" > 
 5     <!-- 设置列数 -->
 6     
 7     <Button android:layout_width="wrap_content"
 8         android:layout_height="wrap_content"
 9         android:text="1"/>
10     
11     <Button android:layout_width="wrap_content"
12         android:layout_height="wrap_content"
13         android:text="2"/>
14     
15     <Button android:layout_width="wrap_content"
16         android:layout_height="wrap_content"
17         android:text="3"/>
18     
19     <Button android:layout_width="wrap_content"
20         android:layout_height="wrap_content"
21         android:text="4"/>
22     
23     <Button android:layout_width="wrap_content"
24         android:layout_height="wrap_content"
25         android:text="5"/>
26     
27     <Button android:layout_width="wrap_content"
28         android:layout_height="wrap_content"
29         android:text="6"/>
30     
31     <Button android:layout_width="wrap_content"
32         android:layout_height="wrap_content"
33         android:text="7"/>
34     
35     <Button android:layout_width="wrap_content"
36         android:layout_height="wrap_content"
37         android:text="8"/>
38 </GridLayout>

效果图如下：