1. 程式人生 > >安卓入門系列-05常見佈局之RelaiveLayout(相對佈局)

安卓入門系列-05常見佈局之RelaiveLayout(相對佈局)

接著上一篇提到的線性佈局,如果說線性佈局是遵循一種順序排放,一處存在一個元件就不會存在另一個。那麼相對佈局則是位置上的相對關係(對於其他元件),不指定相對位置則會堆在一起重疊起來。

1.什麼是相對佈局

相對佈局指的是有參照的佈局方式,就是以某個兄弟元件,或者父容器來決定元件自己位置的。(兄弟元件是在同一個佈局裡面的元件,id參照其他佈局裡的元件會出問題)

2.常見屬性

android:gravity

設定容器內各個子元件的對齊方式。

android:ignoreGravity

這是子元件的屬性,設定了的話那麼該子元件不受上面的gravity影響。

嘗試設定一個佈局檔案,如下。

<?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"
    tools:context="com.zc.helloworld.MainActivity"
    >

    <Button
        android:id="@+id/btn_01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="I am Button"/>
    <Button
        android:id="@+id/btn_02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="I am Button"/>
    <Button
        android:id="@+id/btn_03"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="I am Button"/>


</RelativeLayout>

效果如下。驚訝發現三個按鈕只出現了一個,這就是相對佈局,沒有指定相對位置,那麼就會疊放在一個位置。

設定權重,但是這隻會改變元件對於佈局的排列,而不能設定元件自身之間的關係,因此依然重疊。

3.子元件的屬性

根據父容器確定位置

向左對齊:android:layout_alighParentLeft

向右對齊:android:layout_alighParentRight

頂端對齊:android:layout_alighParentTop

底部對齊:android:layout_alighParentBottom

水平居中:android:layout_centerHorizontal

垂直居中:android:layout_centerVertical

中央位置:android:layout_centerInParent(兩個方向)

屬性值為布林值。

進行設定如下。(取消權重設定,顯然不同於LinearLayout的必須給出排列方向,Relativelayout自定義性更強)

<?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"
    tools:context="com.zc.helloworld.MainActivity"
    >

    <Button
        android:id="@+id/btn_01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:text="I am Button"/>
    <Button
        android:id="@+id/btn_02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_alignParentTop="true"
        android:text="I am Button"/>
    <Button
        android:id="@+id/btn_03"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:text="I am Button"/>


</RelativeLayout>

根據兄弟元件確定位置

左邊:android:layout_toLeftOf

右邊:android:layout_toRightOf

上方:android:layout_above

下方:android:layout_below

對齊上邊界:android:layout_alignTop

對齊下邊界:android:layout_alignBottom

對齊左邊界:android:layout_alignLeft

對齊右邊界:android:layout_alignRight

屬性值均為兄弟元件id。

如下設定。

<?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"
    tools:context="com.zc.helloworld.MainActivity"
    >

    <Button
        android:id="@+id/btn_01"
        android:layout_toLeftOf="@+id/btn_02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="I am Button"/>
    <Button
        android:id="@+id/btn_02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_alignParentTop="true"
        android:text="I am Button"/>
    <Button
        android:id="@+id/btn_03"
        android:layout_toRightOf="@id/btn_02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="I am Button"/>


</RelativeLayout>

效果如下。

自身設定與父容器邊距確定位置

android:layout_margin元件的四周外部留出一定的邊距 android:layout_marginLeft元件的左邊外部留出一定的邊距 android:layout_marginTop元件的上邊外部留出一定的邊距 android:layout_marginRight: 元件的右邊外部留出一定的邊距 android:layout_marginBottom: 元件的下邊外部留出一定的邊距

屬性值為畫素值(px或者dp)

自身設定內部元素邊距

android:padding :元件的四周內部留出一定的邊距 android:paddingLeft: 元件的左邊內部留出一定的邊距 android:paddingTop: 元件的上邊內部留出一定的邊距 android:paddingRight: 元件的右邊內部留出一定的邊距 android:paddingBottom: 元件的下邊內部留出一定的邊距

屬性值同上。

解釋如下。