3.3.1 线性布局 LinearLayout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" ...>
应用 android:orientation 属性指定排列方向:
- vertical 垂直排列
- horizontal 程度排列,默认
<?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"> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button 1" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button 2" /> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button 3" /></LinearLayout>
应用 android:layout_gravity 指定控件在布局的对齐形式:
- top 顶部对齐
- center_vertical 垂直居中
- bottom 底部对齐
<?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"> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="top" # 指定为顶部对齐 android:text="Button 1" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" # 指定为垂直居中 android:text="Button 2" /> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom" # 指定为底部对齐 android:text="Button 3" />
应用 android:layout_weight 以比例形式指定控件在布局的大小:
<?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"> <EditText android:id="@+id/input" android:layout_width="0dp" #将width指定为0dp android:layout_height="wrap_content" android:layout_weight="3" #程度方向宽度占比 android:hint="Type something" /> <Button android:id="@+id/send" android:layout_width="0dp" #将width指定为0dp android:layout_height="wrap_content" android:layout_weight="2" #程度方向宽度占比 android:text="Send" />
width 和 weight 组合应用:
<?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"> <EditText android:id="@+id/input" android:layout_width="0dp" #将width指定为0dp android:layout_height="wrap_content" android:layout_weight="1" #程度方向宽度占比其余空间 android:hint="Type something" /> <Button android:id="@+id/send" android:layout_width="wrap_content" #程度方向适配控件宽度 android:layout_height="wrap_content" android:text="Send" />
3.3.2 绝对布局 RelativeLayout
<?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"> # 左上角对齐 <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:text="button1" /> # 右上角对齐 <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_alignParentTop="true" android:text="button2" /> # 居中对齐 <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="button3" /> # 左下角对齐 <Button android:id="@+id/button4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" android:text="button4" /> # 右下角对齐 <Button android:id="@+id/button5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:text="button5" /></RelativeLayout>
绝对控件进行定位布局
<?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"> # 居中对齐 <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="button3" /> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@id/button3" #位于button3上方 android:layout_toLeftOf="@id/button3" #位于button3左侧 android:text="button1" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@id/button3" #位于button3上方 android:layout_toRightOf="@id/button3" #位于button3右侧 android:text="button2" /> <Button android:id="@+id/button4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/button3" #位于button3下方 android:layout_toLeftOf="@id/button3" #位于button3左侧 android:text="button4" /> <Button android:id="@+id/button5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/button3" #位于button3下方 android:layout_toRightOf="@id/button3" #位于button3右侧 android:text="button5" /></RelativeLayout>
其余绝对于控件进行定位的属性:
- android:layout_alignLeft="@id/button3" 与button3左对齐
- android:layout_alignRight="@id/button3" 与button3右对齐
- android:layout_alignTop="@id/button3" 与button3上对齐
- android:layout_alignBottom="@id/button3" 与button3下对齐
3.3.3 帧布局 FrameLayout
默认状况下控件重叠显示:
<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/text_view" android:layout_width="wrap_content" #控件宽度 android:layout_height="wrap_content" #控件高度 android:text="This is TextView" /> <ImageView android:id="@+id/image_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/ic_launcher" /></FrameLayout>
<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/text_view" android:layout_width="wrap_content" #控件宽度 android:layout_height="wrap_content" #控件高度 android:layout_gravity="left" #控件左对齐 android:text="This is TextView" /> <ImageView android:id="@+id/image_view" android:layout_width="wrap_content" #控件宽度 android:layout_height="wrap_content" #控件高度 android:layout_gravity="right" #控件右对齐 android:src="@mipmap/ic_launcher" /></FrameLayout>
3.3.4 百分比布局 PercentFrameLayout
LinearLayout 自身反对按比例指定控件大小,因而百分比布局只为 FrameLayout 和 RelativeLayout 进行了性能扩大。
# app/build.gradledependencies { compile fileTree(dir: 'libs', include: ['*.jar']) testCompile 'junit:junit:4.12' compile 'com.android.support:appcompat-v7:24.2.1' compile 'com.android.support:percent:24.2.1' #引入依赖}
<?xml version="1.0" encoding="utf-8"?><android.support.percent.PercentFrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:id="@+id/button1" android:text="Button 1" android:layout_gravity="left|top" # 指定地位在左上角 app:layout_widthPercent="50%" # 指定宽度百分比 app:layout_heightPercent="50%" # 指定高度百分比 /> <Button android:id="@+id/button2" android:text="Button 2" android:layout_gravity="right|top" app:layout_widthPercent="50%" app:layout_heightPercent="50%" /> <Button android:id="@+id/button3" android:text="Button 3" android:layout_gravity="left|bottom" app:layout_widthPercent="50%" app:layout_heightPercent="50%" /> <Button android:id="@+id/button4" android:text="Button 4" android:layout_gravity="right|bottom" app:layout_widthPercent="50%" app:layout_heightPercent="50%" /></android.support.percent.PercentFrameLayout>