Android布局
概述:本篇为大家讲解安卓 LinearLayout、RelativeLayout、自定义ViewGroup、FrameLayout、TableLayout、AbsoluteLayout六种布局进行详细的讲解。
一.线性布局(LinerLayout)
1.线性布局,两种排法:
从左到右 android:orientation=”horizontal”
<?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="horizontal"
>
<Button
android:layout_width="200px"
android:layout_height="100px"
android:text="按钮一"
/>
<Button
android:layout_width="200px"
android:layout_height="100px"
android:text="按钮二"
/>
<Button
android:layout_width="200px"
android:layout_height="100px"
android:text="按钮三"
/>
</LinearLayout>
从左到右 android:orientation=”vertical”
将LinearLayout 的 orientation属性的属性值改成”vertical”
2.线性布局中控件的权重(layout_weight)
权重是线性布局中非常重要的属性,这个属性允许我们按比例方式指定控件大小,对于不同手机的适配是非常重要的作用,也有利于UI界面的美观
<?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="horizontal"
>
<EditText
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="输入用户名:"
/>
<Button
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="提交"
/>
<Button
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="取消"
/>
</LinearLayout>
图一
将输入框的权重设置为4 android:layout_weight=”4”,即可得到下图二
注意:
当是水平分布时,可以注意到button,与EditText的宽度为0,因为当设置了权重后控件的的宽度由weight的多少决定,此处宽度设置为0为规范做法。当为竖直(vertical)时则高度设置为0;
权重是线性布局特有的,不能在相对布局中使用。
二.相对布局(最常用的布局)
相对布局是最常用的布局,和LinearLayout的排列规则不同RelativeLayout的布局更加随意,可以通过定位的方式把控件出现在布局的任意位置
1.RelativeLayout的属性
参考其他控件进行布局,默认为父控件。
有三种类型的属性:
属性值是true或false
android:layout_centerHrizontal 水平居中
android:layout_centerVertical 垂直居中
android:layout_centerInparent 相对于父元素完全居中。
android:layout_alignParentBottom 位于父元素的下边缘
android:layout_alignParentTop 位于父元素的上边缘
android:layout_alignParentLeft 位于父元素的左边缘
android:layout_alignParentRight 位于父元素的右边缘属性值是”@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 和某元素左方对齐属性值是数值
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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1号盒子"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2号盒子" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3号盒子"
android:id="@+id/txt_center"
android:layout_centerInParent="true"
/>
<TextView
android:layout_alignParentBottom="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4号盒子" />
<TextView
android:layout_below="@id/txt_center"
android:background="#d0d9ff"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="5号盒子" />
<TextView
android:layout_alignBottom="@+id/txt_center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="6号盒子" />
<TextView
android:layout_marginLeft="150dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="7号盒子" />
<TextView
android:layout_centerVertical="true"
android:layout_marginLeft="100dp"
android:layout_toRightOf="@id/txt_center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="8号盒子"/>
</RelativeLayout>
三.帧布局
没有方便的定位方式,所有控件默认摆放在布局左上角,后面的控件会覆盖前面的控件
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="100dp"
android:textColor="#777"
android:text="第一层"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="80dp"
android:textColor="#000"
android:text="第二层"/>
</FrameLayout>
注意:第二层是在第一层之后添加的所以会压在第一层上
我们亦可以设置layout_gravity=”right”;属性设置控件的对齐方式,与线性布局类似。
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="40dp"
android:textColor="#000"
android:layout_gravity="left"
android:text="第一层"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="第二层"
android:layout_gravity="right"
android:textColor="#777"
android:textSize="100dp" />
</FrameLayout>
四.百分比布局
使用较少不做详细的描述