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>