1. 相対レイアウト( RelativeLayout )の概要
相对布局(RelativeLayout)
親コンテナと兄弟コントロールを基準にコントロールの位置を決めるレイアウト方法です。
親コンテナの配置の場合:
- android:layout_alignParentLeft="true" 親コンテナの左側
- android:layout_alignParentRight="true" 親コンテナの右側
- android:layout_alignParentTop="true" 親コンテナの上部
- android:layout_alignParentBottom="true" 親コンテナの下部
- android:layout_centerhorizontal="true" 水平方向中央揃え
- android:layout_centerVertical="true" 垂直方向の中央揃え
- android:layout_centerInParent="true" 水平方向と垂直方向の中央揃え
兄弟コントロールの配置の場合:
- button1 コントロールの左側の android:layout_toLeftOf="@+id/button1"
- button1 コントロールの右側の android:layout_toRightOf="@+id/button1"
- button1 コントロールの上の android:layout_above="@+id/button1"
- button1 コントロールの下の android:layout_below="@+id/button1"
- android:layout_alignLeft="@+id/button1" は button1 コントロールの左側と同じ高さになります
- android:layout_alignRight="@+id/button1" は button1 コントロールの右側と同じ高さになります
- android:layout_alignTop="@+id/button1" は button1 コントロールの上部と同じ高さになります
- android:layout_alignBottom="@+id/button1" は button1 コントロールの下部と同じ高さになります
コード例:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
tools:context=".RelativeLayoutActivity">
<!-- 整体采用兄弟布局的方式-->
<TextView
android:id="@+id/text1"
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="相对布局"
android:gravity="center"
android:textSize="50dp"
/>
<TextView
android:id="@id/text2"
android:layout_below="@id/text1"
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="父容器"
android:textSize="30dp"
android:gravity="center"/>
<RelativeLayout
android:id="@+id/Re1"
android:layout_below="@id/text2"
android:layout_width="match_parent"
android:layout_height="600px">
<Button
android:layout_width="200px"
android:layout_height="150px"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="左上角"
android:textSize="20dp"
android:background="@color/teal_200"></Button>
<Button
android:layout_width="200px"
android:layout_height="150px"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="右上角"
android:textSize="20dp"
android:background="@color/teal_200"></Button>
<Button
android:layout_width="200px"
android:layout_height="150px"
android:text="中间"
android:layout_centerInParent="true"
android:textSize="20dp"
android:background="@color/teal_200"></Button>
<Button
android:layout_width="200px"
android:layout_height="150px"
android:text="左下角"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:textSize="20dp"
android:background="@color/teal_200"></Button>
<Button
android:layout_width="200px"
android:layout_height="150px"
android:text="右下角"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:textSize="20dp"
android:background="@color/teal_200"></Button>
</RelativeLayout>
<TextView
android:id="@+id/text3"
android:layout_below="@id/Re1"
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="兄弟控件"
android:textSize="30dp"
android:gravity="center"/>
<RelativeLayout
android:layout_below="@+id/text3"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/button1"
android:layout_width="200px"
android:layout_height="150px"
android:text="中间"
android:layout_centerInParent="true"
android:textSize="20dp"
android:background="@color/teal_200"></Button>
<Button
android:id="@+id/button2"
android:layout_width="200px"
android:layout_height="150px"
android:text="左边"
android:layout_toLeftOf="@id/button1"
android:layout_alignTop="@id/button1"
android:textSize="20dp"
android:background="@color/teal_200"></Button>
<Button
android:id="@+id/button3"
android:layout_width="200px"
android:layout_height="150px"
android:text="右边"
android:layout_toRightOf="@+id/button1"
android:layout_alignTop="@id/button1"
android:textSize="20dp"
android:background="@color/teal_200"></Button>
<Button
android:id="@+id/button4"
android:layout_width="200px"
android:layout_height="150px"
android:text="上边"
android:layout_above="@id/button1"
android:layout_alignLeft="@id/button1"
android:textSize="20dp"
android:background="@color/teal_200"></Button>
<Button
android:id="@+id/button5"
android:layout_width="200px"
android:layout_height="150px"
android:text="下边"
android:layout_below="@id/button1"
android:layout_alignLeft="@id/button1"
android:textSize="20dp"
android:background="@color/teal_200"></Button>
</RelativeLayout>
</RelativeLayout>
実現効果:
さまざまな属性を組み合わせることでコントロールの位置を常に変化させることができ、うまく使えばページをより美しくすることができます。