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.gradle
dependencies {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>