六大布局之RelativeLayout

時間 2019-11-30

標籤六大佈局 relativelayout 简体版

原文原文鏈接

前言

上一期咱們給你們講解了FrameLayout的使用，這一期咱們爲你們講解一下RelativeLayout（相對佈局）的使用，RelativeLayout是Android的六大布局之一，也是咱們經常使用的佈局之一，下面咱們一塊兒開始學習吧~java

簡介

相對佈局 RelativeLayout 容許子元素指定它們相對於其父元素或兄弟元素的位置，這是實際佈局中最經常使用的佈局方式之一。相對佈局和LinearLayout，FrameLayout相比較來講，性能不是最好的，可是它能夠大大減小布局的結構層次，從而達到優化佈局的效果，它的靈活性大不少，固然屬性也多，屬性之間產生衝突的的可能性也大，使用相對佈局時要多作些測試。android

經常使用屬性

第一類:屬性值爲true或false
//居中 
android:layout_centerHrizontal="true" //水平居中
android:layout_centerVertical="true" //垂直居中
android:layout_centerInparent="true" //相對於父元素徹底居中
//相對於父組件
android:layout_alignParentBottom="true" //貼緊父元素的下邊緣
android:layout_alignParentLeft="true" //貼緊父元素的左邊緣
android:layout_alignParentRight="true" //貼緊父元素的右邊緣
android:layout_alignParentTop="true" //貼緊父元素的上邊緣
複製代碼

代碼示範

<?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"
    android:layout_margin="10dp"
    android:orientation="vertical">

    <!-- 相對於父佈局左邊緣位置 -->
    <Button
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_alignParentLeft="true"
        android:background="@color/colorPrimary"
        android:text="左上角"
        android:textColor="#FFFFFF" />

    <!-- 相對於父佈局右邊緣位置 -->
    <Button
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_alignParentRight="true"
        android:background="@color/colorPrimary"
        android:text="右上角"
        android:textColor="#FFFFFF" />

    <!-- 相對於父佈局左下角位置 -->
    <Button
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        android:background="@color/colorPrimary"
        android:text="左下角"
        android:textColor="#FFFFFF" />

    <!-- 相對父佈局右下角位置 -->
    <Button
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:background="@color/colorPrimary"
        android:text="右下角"
        android:textColor="#FFFFFF" />

    <!-- 相對父佈局中間居中位置 -->
    <Button
        android:id="@+id/center"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_centerInParent="true"
        android:background="@color/colorPrimary"
        android:text="中間居中"
        android:textColor="#FFFFFF" />

    <!-- 相對父佈局垂直居中位置 -->
    <Button
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_centerVertical="true"
        android:background="@color/colorPrimary"
        android:text="垂直居中"
        android:textColor="#FFFFFF" />

    <!-- 相對父佈局水平居中位置 -->
    <Button
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_centerHorizontal="true"
        android:background="@color/colorPrimary"
        android:text="水平居中"
        android:textColor="#FFFFFF" />

</RelativeLayout>
複製代碼

運行效果圖

第二類：屬性值必須爲id的引用名「@id/id-name」
//相對於給定ID控件
android:layout_below="@id/xxx" //在某元素的下方
android:layout_above="@id/xxx" //在某元素的的上方
android:layout_toLeftOf="@id/xxx" //在某元素的左邊
android:layout_toRightOf="@id/xxx" //在某元素的右邊

android:layout_alignTop="@id/xxx" //本元素的上邊緣和某元素的的上邊緣對齊
android:layout_alignLeft="@id/xxx" //本元素的左邊緣和某元素的的左邊緣對齊
android:layout_alignBottom="@id/xxx" //本元素的下邊緣和某元素的的下邊緣對齊
android:layout_alignRight="@id/xxx" //本元素的右邊緣和某元素的的右邊緣對齊
複製代碼

第三類：屬性值爲具體的像素值，如30dp，40px
//指定移動像素
android:layout_marginBottom="30dp" //離某元素底邊緣的距離
android:layout_marginLeft="30dp" //離某元素左邊緣的距離
android:layout_marginRight="30dp" //離某元素右邊緣的距離
android:layout_marginTop="30dp" //離某元素上邊緣的距離
複製代碼

第四類：其它屬性
android:gravity="center_horizontal|bottom"//設置內部子控件的顯示位置，居中，上下左右均可以
android:layout_alignParentStart="true"//設置是否緊貼父佈局開始的位置
android:layout_alignParentEnd="true"//設置是否緊貼父佈局結束的位置
android:layout_toStartOf="@+id/xxx"//設置位於某個id控件的開始位置
android:layout_toEndOf="@+id/xxx"//設置位於某個id控件的結束位置
android:layout_alignStart="@+id/xxx"//設置和某個id的控件的開始位置位於一條線上
android:layout_alignEnd="@+id/xxx" //設置和某個id的控件的結束位置位於一條線上
android:layout_alignWithParentIfMissing="true"// 若是找不到其餘子控件，就相對於父控件佈局
android:ignoreGravity="@id/xxx"//傳入子控件的id
複製代碼

代碼示範

<?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"
    android:orientation="vertical"
    android:padding="10dp">

    <Button
        android:id="@+id/left_top"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_marginTop="50dp"
        android:background="@color/colorPrimary"
        android:text="程序員"
        android:textColor="#FFFFFF" />

    <!-- 本元素在left_top元素的右邊 -->
    <Button
        android:id="@+id/right_top"
        android:layout_width="120dp"
        android:layout_height="60dp"
        android:layout_alignTop="@id/left_top"
        android:layout_marginLeft="10dp"
        android:layout_toRightOf="@+id/left_top"
        android:background="@color/colorPrimary"
        android:text="程序員鼓勵師"
        android:textColor="#FFFFFF" />

    <Button
        android:id="@+id/left_bottom"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="50dp"
        android:background="@color/colorPrimary"
        android:text="程序員"
        android:textColor="#FFFFFF" />

    <!-- 本元素在left_bottom元素的左邊 -->
    <Button
        android:layout_width="120dp"
        android:layout_height="60dp"
        android:layout_alignTop="@id/left_bottom"
        android:layout_marginRight="10dp"
        android:layout_toLeftOf="@id/left_bottom"
        android:background="@color/colorPrimary"
        android:text="UI設計師"
        android:textColor="#FFFFFF" />

    <!-- 中間居中 -->
    <Button
        android:id="@+id/center"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_centerInParent="true"
        android:background="@color/colorPrimary"
        android:text="中間"
        android:textColor="#FFFFFF" />

    <!-- 本元素在center元素的上方 -->
    <Button
        android:id="@+id/top"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_above="@id/center"
        android:layout_alignLeft="@id/center"
        android:layout_marginBottom="10dp"
        android:background="@color/colorPrimary"
        android:text="上"
        android:textColor="#FFFFFF" />

    <!-- 本元素在center元素的下方 -->
    <Button
        android:id="@+id/buttom"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_below="@id/center"
        android:layout_centerInParent="true"
        android:layout_marginTop="10dp"
        android:background="@color/colorPrimary"
        android:text="下"
        android:textColor="#FFFFFF" />

    <!-- 本元素在center元素的左方 -->
    <Button
        android:id="@+id/left"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_alignTop="@id/center"
        android:layout_marginRight="10dp"
        android:layout_toLeftOf="@id/center"
        android:background="@color/colorPrimary"
        android:text="左"
        android:textColor="#FFFFFF" />

    <!-- 本元素在center元素的右方 -->
    <Button
        android:id="@+id/right"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_alignTop="@id/center"
        android:layout_marginLeft="10dp"
        android:layout_toRightOf="@id/center"
        android:background="@color/colorPrimary"
        android:text="右"
        android:textColor="#FFFFFF" />

</RelativeLayout>
複製代碼