相對佈局（Relativelayout）——Mars Android開發視頻之第一季第十三集（重）

時間  2019-11-12
標籤 相對 佈局 relativelayout mars android 開發 視頻 一季 第十 三集 欄目 Android 简体版
原文   原文鏈接

##1· 相對佈局（上） ###1.1 什麼是相對佈局（RelativeLayout） 概念：經過指定當前控件與兄弟控件或父控件之間的相對位置，從而達到控制控件位置的目的。android

###1.2 爲何要使用相對佈局佈局

輸入圖片說明

這樣的界面，使用線性佈局來實現，就會消耗不少UI性能，由於須要多個線性佈局才能實現。 而若是使用相對佈局的話，那麼一個佈局就能實現，性能相較而言就會更好。性能

###1.3 相對佈局基本思路code

  • 默認狀況下，若是不指定位置的話，那麼控件都會被放在佈局的左上角位置。 例： 相對佈局中，放入第一個未指定位置的文本域
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第一個控件" />

</RelativeLayout>

此時效果爲：xml

輸入圖片說明

接着放入第二個未指定位置的文本域，它將覆蓋到第一個文本域上面：圖片

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第二個控件" />

這時效果爲：it

輸入圖片說明

  • 先肯定一個控件的位置，再肯定第二個控件相對第一個控件的位置。 好處就是，因某種緣由，第一個控件位置發送變化以後，第二個控件相對於第一個控件的相對位置是不會變化的。

例：讓第二個控件位於第一個控件右邊基礎

<TextView
        android:id="@+id/textView_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="30dp"
        android:text="第一個控件" />
    
    <TextView
        android:id="@+id/textView_2"
        android:padding="30dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/textView_1"
        android:text="第二個控件" />

輸入圖片說明

###1.4 相對佈局的兩組經常使用屬性 ####1.4.1 第一組相對佈局屬性im

  • android:layout_below="@id/xxx" 位於xxx之下（當前控件上邊緣對齊xxx下邊緣）
  • android:layout_above="@id/xxx" 位於xxx之上（當前控件下邊緣對齊xxx上邊緣）
  • android:layout_toLeftOf="@id/xxx" 位於xxx左邊（當前控件右邊緣對齊xxx左邊緣）
  • android:layout_toRightOf="@id/xxx" 位於xxx右邊（當前控件左邊緣對齊xxx右邊緣）

例：layout

讓第二個控件位於第一個控件下面：

<TextView
        android:id="@+id/textView_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="30dp"
        android:background="#ff00ff"
        android:text="第一個控件" />
    
    <TextView
        android:id="@+id/textView_2"
        android:background="#00ff00"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView_1"
        android:text="第二個控件" />

輸入圖片說明

其餘幾個屬性，觸類旁通便可。

####1.4.2 第二組相對佈局屬性

  • android:layout_alignLeft="@id/xxx" 當前控件的左邊緣，對齊xxx的左邊緣
  • android:layout_alignRight="@id/xxx" 當前控件的右邊緣，對齊xxx的右邊緣
  • android:layout_alignTop="@id/xxx" 當前控件的上邊緣，對齊xxx的上邊緣
  • android:layout_alignBottom="@id/xxx" 當前控件的下邊緣，對齊xxx的下邊緣

例：

讓第二個控件上邊緣與第一個控件對齊：

<TextView
        android:id="@+id/textView_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="30dp"
        android:background="#ff00ff"
        android:text="第一個控件" />
    
    <TextView
        android:id="@+id/textView_2"
        android:background="#00ff00"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/textView_1"
        android:text="第二個控件" />

輸入圖片說明

第二個控件下邊緣與第一個控件空對齊：

輸入圖片說明

##2· 相對佈局（中） ###2.1 對齊至控件的基準線(baseline) 概念：爲了保證字母看起來整齊而劃定的線 黃色部分的那條線就是基準線；

輸入圖片說明

對齊基準線：android:layout_alignBaseLine="@id/xxx"

下面經過列子來展現： 這是沒有使用對齊基準線的兩個文本域： 輸入圖片說明

<TextView
        android:id="@+id/textView_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:layout_margin="5dp"
        android:text="第一個控件" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/textView_1"
        android:textSize="10sp"
        android:text="第二個控件" />

下面咱們讓第二個文本域對齊第一個文本域的基準線：

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/textView_1"
        android:layout_alignBaseline="@id/textView_1"
        android:textSize="10sp"
        android:text="第二個控件" />

此時效果爲： 輸入圖片說明

這就是對齊基準線。

###2.2 與父控件的四個邊緣對齊

例子：

讓一個文本框對齊父控件的左邊緣：

  • android:layout_alignParentLeft="true"
  • 值爲布爾值，由於一個控件的直接父控件只有一個

輸入圖片說明

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/textView_1"
        android:layout_alignParentLeft="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#00FFFF"
        android:textSize="20sp"
        android:text="第一個控件" />

</RelativeLayout>

在前面的基礎上，咱們在讓其對齊父控件下邊緣，就能實現讓控件對齊到父控件的左下角：

輸入圖片說明

至於其餘方向，咋們就觸類旁通。

###2.3 對齊至父控件的中央 ####屬性:

  • layout_centerInParent 對齊至父控件的中心位置

輸入圖片說明

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/textView_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#00FFFF"
        android:layout_centerInParent="true"
        android:textSize="20sp"
        android:text="第一個控件" />
    
</RelativeLayout>
  • layout_centerInHorizontal 對齊至父控件的水平中央位置

輸入圖片說明

  • layout_centerInVertical 對齊至父控件的垂直中央位置。

輸入圖片說明

3· 相對佈局（下）

3.1 相對佈局在4.2版本中新增的屬性

屬性：

  • layout_alignStart 對齊到控件的開頭位置

  • layout_alignEnd 對齊到控件的結尾位置

  • layout_alignParentStart 對齊到父控件的開始位置

  • layout_alignParentEnd 對齊到父控件的結尾位置

例子1

對齊到控件的尾部位置： 爲了便於理解，咱們須要兩個文本域：

輸入圖片說明

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/textView_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#00FFFF"
        android:textSize="20sp"
        android:text="第一個控件" />
    
       <TextView
        android:id="@+id/textView_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView_1"
        android:background="#FFFF00"
        android:textSize="20sp"
        android:text="第二" />
</RelativeLayout>

如今咱們讓第二個文本域對齊第一個文本域的尾部：

<TextView
        android:id="@+id/textView_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView_1"
        android:background="#FFFF00"
        android:textSize="20sp"
        android:layout_alignEnd="@id/textView_1"
        android:text="第二" />

此時效果爲： 輸入圖片說明

若是是對齊到第一個文本域的開始位置： 輸入圖片說明

例子2： 讓第一個文本域對齊到父控件的開始位置； 讓第二個文本域對齊到父控件的結尾位置。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/textView_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#00FFFF"
        android:textSize="20sp"
        android:layout_alignParentStart="true"
        android:text="第一個控件" />
    
       <TextView
        android:id="@+id/textView_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#FFFF00"
        android:textSize="20sp"
        android:layout_alignParentEnd="true"
        android:text="第二" />
</RelativeLayout>

效果爲： 輸入圖片說明

完。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程