Androidの一般的なレイアウトのRelativeLayout(相対レイアウト)

1. 相対レイアウト( RelativeLayout )の概要

相对布局(RelativeLayout)親コンテナと兄弟コントロールを基準にコントロールの位置を決めるレイアウト方法です。

ここに画像の説明を挿入します

 親コンテナの配置の場合:

  • android:layout_alignParentLeft="true" 親コンテナの左側
  • android:layout_alignParentRight="true" 親コンテナの右側
  • android:layout_alignParentTop="true" 親コンテナの上部
  • android:layout_alignParentBottom="true" 親コンテナの下部
  • android:layout_centerhorizo​​ntal="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>

実現効果:


 さまざまな属性を組み合わせることでコントロールの位置を常に変化させることができ、うまく使えばページをより美しくすることができます。

おすすめ

転載: blog.csdn.net/qq_62277763/article/details/128520195