参考书籍:第一行代码:Android(第二版)(郭霖):第三章
二、基本布局
1、介绍
布局是一种可用于放置很多控件的容器,它可以按照一定的规律调整内部控件的位置,从而编写出精美的界面,布局里面除了放置控件之外,还可以放置布局,通过多层布局的嵌套,可以完成一些比较复杂的界面实现
线性布局LinearLayout |
这个布局会将它所包含的控件在线性方向上依次排列(android:orientation=“vertical”垂直方向上的线性排列),(android:orientation=“horizontal”水平方向上的线性排列),注意如果是水平线性排列的话内部控件的宽度不能为match_parent,不然单独一个控件会将整个水平方向占满 |
相对布局RelativeLayout |
是一种非常常用的布局,与线性布局相比,相对布局显得更加随意一些,它可以通过相对定位的方式让控件出现在布局的任何位置 |
帧布局FrameLayout |
相对于前面两种布局简单,因此它的应用场景少了很多。这种布局没有方便的定位方式,所有的控件都会默认摆放在布局的左上角 |
百分比布局 |
由于LinearLayout本身已经支持按比例指定控件的大小了,因此百分比布局只为RelativeLayout和帧FrameLayout进行了功能扩展提供了PercentFrameLayout和PercentRelativeLayout这两个全新的布局,Android团队将百分比布局定义在support库中,我们只需要在项目的build.gradle中添加百分比布局库的依赖,就能保证百分比布局在Android所有系统版本上兼容,打开app/build.gradle文件,新版本操作如下案例图 |
2、例子
1、线性布局LinearLayout
1、常见属性
orientation |
布局中组件的排列方式 |
gravity |
控制组件所包含的子元素的对齐方式,可多个组合(center|bottom、center、center_vertical等等) |
layout_gravity |
控制该组件在父容器里的对齐方式 |
background |
为该组件设置一个背景图片,或者是直接用颜色覆盖 |
divider |
分割线 |
showDividers |
设置分割线所在的位置,none(无),beginning(开始),end(结束),middle(每两个组件间) |
dividerPadding |
设置分割线的padding |
layout_weight(权重) |
该属性是用来等比例的划分区域,权重分配的是剩余空间,如果有一个组件属性为match_parent,则其他会被覆盖,如果为垂直方向则设置高,如果为水平方向则设置宽 |
2、代码示例
<?xml version="1.0" encoding="utf-8"?>
<?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"
android:gravity="center_vertical"
android:showDividers="middle"
android:background="@drawable/str"
android:dividerPadding="50dp">
<LinearLayout
android:background="#ff0000"
android:layout_width="100dp"
android:layout_height="0dp"
android:layout_weight="1"/>
<View
android:layout_width="match_parent"
android:layout_height="10dp"
android:background="#00ff00" />
<LinearLayout
android:background="#fff000"
android:layout_width="100dp"
android:layout_height="0dp"
android:layout_weight="2"/>
<LinearLayout
android:background="#0F73FF"
android:layout_width="100dp"
android:layout_height="0dp"
android:layout_weight="1"/>
</LinearLayout>
运行结果:
2、相对布局RelativeLayout
1、常见属性
根据父容器定位属性 |
作用 |
layout_alignParentLeft |
左对齐 |
layout_alignParentRight |
右对齐 |
layout_alignParentTop |
顶部对其 |
layout_alignParentBottom |
底部对齐 |
layout_centerHorizontal |
水平居中 |
layout_centerVertical |
垂直居中 |
layout_centerInParent |
中间位置 |
根据兄弟组件定位 |
作用 |
layout_toLeftOf |
放置于参考组件的左边 |
layout_toRightOf |
放置于参考组件的右边 |
layout_above |
放置于参考组件的上面 |
layout_below |
放置于参考组件的下面 |
layout_alignTop |
对齐参考组件的上边界 |
layout_alignBottom |
对齐参考组件的下边界 |
layout_alignLeft |
对齐参考组件的左边界 |
layout_alignRight |
对齐参考组件的右边界 |
通用属性 |
作用 |
layout_margin |
上下左右偏移 |
layout_marginLeft |
左偏移 |
layout_marginRight |
右偏移 |
layout_marginBottom |
下偏移 |
layout_marginTop |
上偏移 |
|
|
设置组件内部元素的边距 |
作用 |
padding |
上下左右边距 |
paddingBottom |
下边距 |
paddingLeft |
左边距 |
paddingRight |
右边距 |
paddingTop |
上边距 |
2、代码演示
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"