思维导图:
二、什么是布局?
布局就是把界面中的空间按照某种规律摆放在指定的位置
三、布局的目的
主要是为了解决应用程序在不同手机中的显示问题,同时增加美感。
四、Android实现布局两种方式(布局支持嵌套)
1、java代码 布局文件对应的Java类都是ViewGroup类的子类
2、xml配置文件 所有的布局文件都是放在res/layout文件夹中
五、布局的一些基本属性
五大布局:
①LinearLayout(线性布局)
线性布局会将其中的控价一个接一个排列
常用属性: 1、设置排列方式
1.1 xml属性 android:orientation [ horizontal 水平排列 vertical 垂直排列 ]
1.2 方法 setOrientation(int)
2、设置组件的对其方式
2.1 XML属性 android:gravity
2.2 方法 setGravity(int)
android gravity和layout_gravity区别:
- gravity属性:是对该view 内容的位置的设置。
比如一个button 上面的text. 你可以设置该text 在view的靠左,靠右等位置. - layout_gravity属性:是用来设置该view相对与父view 的位置。
比如一个button 在Linearlayout里,你可以通过设置该属性把该button放在父布局Linearlayout靠左靠右等位置。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="左上按钮"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="右上按钮"
/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="420dp"
android:gravity="center"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="中间按钮"
android:layout_gravity="center"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="bottom"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="左下按钮"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="右下按钮"
/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
②FrameLayout(帧布局)
类似于PS中图层的概念,为每个加入其中的组件创建单独的帧,看上去是组件叠加在一起。后面的会覆盖前面的组件。
实例:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="280dp"
android:layout_height="280dp"
android:background="#ff0000"
android:layout_gravity="center"
/>
<TextView
android:layout_width="240dp"
android:layout_height="240dp"
android:background="#00ff00"
android:layout_gravity="center"
/>
<TextView
android:layout_width="200dp"
android:layout_height="200dp"
android:background="#0000ff"
android:layout_gravity="center"
/>
<TextView
android:layout_width="160dp"
android:layout_height="160dp"
android:background="#ffee00"
android:layout_gravity="center"
/>
<TextView
android:layout_width="120dp"
android:layout_height="120dp"
android:background="#00ffe1"
android:layout_gravity="center"
/>
</FrameLayout>
效果:
③TableLayout(表格布局)
1、表格布局可将视图按行、列进行排列
2、直接向TableLayout中添加控件,则这个控件占一行
3、一个表格布局由一个<TableLayout>标签和若干<TableRow>组成
4、常用属性
4.1某列被收缩,以保证表格能完全填充父容器的宽度
4.1.1 XML中 android:shrinkColumns 设置第几列为收缩
4.1.2 Java中 setColumnShrinkable(int,boolean)
4.2某列被拉伸,以保证表格能完全填充父容器的宽度
4.2.1 XML中 android:stretchColumns
4.2.2 Java中, setColumnStretchable(int,boolean)
4.3某列被隐藏
4.3.1 XML中 android:collapseColumns
4.3.2 Java中 setColumnCollapsed(int boolean)
4.4 表格跨列 android:layout_span="3"
实例:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchColumns="1,2"
android:shrinkColumns="0"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="这是第一个lay的第一行"
android:background="#ff0000"
/>
<TableRow>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2行1列"
android:background="#ff0000"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2行2列"
android:background="#ff00ff"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2行3列"
android:background="#00ff04"
/>
</TableRow>
</TableLayout>
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:collapseColumns="1">
<TableRow>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="第二个layout1行1列"
android:background="#ffb700"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="第二个layout1行2列"
android:background="#00ffcc"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="第二个layout1行3列"
android:background="#a600ff"
/>
</TableRow>
<TableRow>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2行1列"
android:background="#ffb700"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2行2列"
android:background="#ff008c"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2行3列"
android:background="#a600ff"
/>
</TableRow>
</TableLayout>
</LinearLayout>
效果:
④AbsoluteLayout(绝对布局)不推荐使用
1、自己制定控件位置
2、每个控件都有layout_x和layout_y属性
3、会随着屏幕大小变化,其位置也会变化
实例:
<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#ff0000"
android:gravity="center"
android:layout_x="100dp"
android:layout_y="100dp"
android:textColor="#ffffff"
android:text="Red" />
<TextView
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#00ff00"
android:gravity="center"
android:layout_x="250dp"
android:layout_y="250dp"
android:textColor="#ffffff"
android:text="Red" />
</AbsoluteLayout>
效果:
⑤RelativeLayout(相对布局)
1、控件位置总是相对父容器或者兄弟控件
2、如果A控件位置是相对B控件的,那B控件要先定义
3、每个控件使用LayoutParams规定的参数来定义相对位置
4.三种属性
4.1属性值是ture或false
- android:layout_centerHrizontal 水平居中
- android:layout_centerVertical 垂直居中
- android:layout_centerInparent 相对于父元素完全居中。
- android:layout_alignParentBottom 位于父元素的下边缘
- android:layout_alignParentTop 位于父元素的上边缘
- android:layout_alignParentLeft 位于父元素的左边缘
- android:layout_alignParentRight 位于父元素的右边缘
4.2属性值是”@id/*“
- android:layout_below 在某元素的下方
- android:layout_above 在某元素的上方
- andorid:layout_toRightOf 在某元素的右方
- android:layout_toLeftOf 在某元素的左方
- android:layout_alignBottom 和某元素下方对齐
- android:layout_alignTop 和某元素上方对齐
- android:layout_alignRight 和某元素右方对齐
- android:layout_alignLeft 和某元素左方对齐
4.3属性值是数值
- android:layout_marginLeft 离某元素左边缘的距离
- android:layout_marginRight 离某元素右边缘的距离
- android:layout_marginTop 离某元素上边缘的距离
- android:layout_marginBottom 离某元素下边缘的距离
实例一:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/bt_layout1"
android:text="按钮一"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮二"
android:id="@+id/bt_layout2"
android:layout_below="@id/bt_layout1"
android:layout_toRightOf="@id/bt_layout1"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮三"
android:layout_above="@id/bt_layout2"
android:layout_toRightOf="@id/bt_layout2"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/bt_layout2"
android:text="按钮四"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/bt_layout2"
android:layout_toRightOf="@id/bt_layout2"
android:text="按钮五"/>
</RelativeLayout>
效果:
实例二:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#ff0000"
android:gravity="center"
android:textColor="#ffffff"
android:text="Red" />
<TextView
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#FFA600"
android:gravity="center"
android:textColor="#ffffff"
android:layout_centerHorizontal="true"
android:text="Orange"/>
<TextView
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#FFFF00"
android:gravity="center"
android:layout_alignParentRight="true"
android:textColor="#ffffff"
android:text="Yellow" />
<TextView
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#0000ff"
android:gravity="center"
android:textColor="#ffffff"
android:layout_centerInParent="true"
android:id="@+id/tv_main_blue"
android:layout_margin="10dp"
android:text="Blue" />
<TextView
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#00ff00"
android:gravity="center"
android:textColor="#ffffff"
android:layout_toLeftOf="@id/tv_main_blue"
android:layout_alignBottom="@id/tv_main_blue"
android:text="Green" />
<TextView
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#4A0084"
android:gravity="center"
android:textColor="#ffffff"
android:layout_toRightOf="@id/tv_main_blue"
android:layout_centerVertical="true"
android:text="Indigo" />
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#EF82EF"
android:gravity="center"
android:textColor="#ffffff"
android:layout_alignParentBottom="true"
android:text="Violet" />
</RelativeLayout>
效果:
Android4.0后的新布局
⑥GridLayout
1、GridLayout使用虚线将布局划分为行、列和单元格,也支持一个控件在行、列上都有交错排列
2、与HTML中的table非常相似
3、4.0版本以上可直接使用
4、2.x版本需要添加一个支持包
5、常用属性
5.1 指定行数
5.1.1 XML属性 rowCount
5.1.2 方法 layout.setRowCount(int row)
5.2 指定列数
5.2.1 XML属性 columnCount
5.2.2 方法 layout.setColumnCount(int column)
5.3设置控件跨行
5.3.1 XML属性 android:layout_rowSpan android:layout_gravity
5.3.2 方法 设置控件的跨行跨列需使用GridLayout.Spec
GridLayout.Spec rowspec=GridLayout.spec(4); 设置控件在第几行
GridLayout.Spec rowspec=GridLayout.spec(1,4); 设置控件在第几行,并跨几行
5.4设置控件跨列
5.4.1XM属性 android:layout_columnSpan
5.4.2 方法
GridLayout.Spec columnSpec=GridLayout.spec(4); 设置控件在第几列
GridLayout.Spec columnSpec=GridLayout.spec(1,4); 设置控件在第几列,并跨几列
实例:
<?xml version="1.0" encoding="utf-8"?> <GridLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:rowCount="6" android:columnCount="4" > <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="/" /> <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" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="6" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="x" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="7" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="8" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="9" /> <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="0" android:layout_columnSpan="2" android:layout_gravity="fill_horizontal" /> <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:layout_rowSpan="2" android:layout_gravity="fill_vertical" android:text="+" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_columnSpan="3" android:layout_gravity="fill_horizontal" android:text="=" /> </GridLayout>
效果:
⑦RTL
1、Android4.2之后才能用,一般在阿拉伯语等环境中,中国用户很少使用
2、AndroidManifest.XML中把application标签的android:supportsRtl属性值 设置为true
3、相应的视图标签把android:layoutDirection属性值设置为rtl
实例:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layoutDirection="rtl"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="|一号选手"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="|二号选手"/>
</LinearLayout>
效果:
六、布局重用
1、可以在布局文件中使用<include>标签重用布局
2、语法<include android:id="@+id/cell1"> layout="@layout/frame_layout"