第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

全部開發(fā)者教程

Android 入門教程

菜單類控件
菜單：Menu
并發(fā)編程
多線程
首頁 慕課教程 Android 入門教程 Android 入門教程 Android相對(duì)布局RelativeLayout
馬超老師 · 更新于 2020-05-21

相對(duì)布局 RelativeLayout

在上一節(jié)中我們講到了 LinearLayout，這也是大家學(xué)到的第一個(gè)布局方式。它支持將多個(gè) View 通過線性的方式（水平或垂直）組合起來，其中最實(shí)用的就是 weight 屬性，用好 weight 可以讓你的線性布局更靈活美觀。

然而，在上一節(jié)的例子中我們發(fā)現(xiàn)，如果需要在多個(gè)方向上進(jìn)行布局，就要嵌套多個(gè) LinearLayout，可以想象如果我們的 UI 足夠復(fù)雜，那么從工作量和性能上都將是一場(chǎng)噩夢(mèng)。所以這里要引出另一種布局方式——RelativeLayout（相對(duì)布局），很多時(shí)候需要嵌套多個(gè) LinearLayout 才能實(shí)現(xiàn)的布局，使用 RelativeLayout 一層就能夠完成。真的有這么神奇？學(xué)完你就知道。

1. RelativeLayout 的特性

顧名思義，相對(duì)布局就是讓內(nèi)部的 View 根據(jù)其他 View 或者 Parent 的位置來確定自己的擺放位置和尺寸。

比如你買了套沙發(fā)，你告訴師傅把沙發(fā)放到客廳內(nèi)，面對(duì)電視機(jī)并且和茶幾平行，靠墻擺放。其中沙發(fā)就是我們的目標(biāo) View，客廳就是 Parent，電視機(jī)和茶幾就是其他的 View。這樣一來，就能夠準(zhǔn)確的確定出你希望擺放的位置。

RelativeLayout 的原理就是這樣，我們可以指定某個(gè) View 相對(duì)于它的兄弟 View 而言的擺放位置（比如在 TextView 的左邊 10 dp或者在上面 25 dp），另外也可以指定它在父布局（RelativeLayout）中的擺放位置。RelativeLayout 應(yīng)該說是在 Android GUI 設(shè)計(jì)中最常用的布局方式，接下來我們來學(xué)習(xí)一下 RelativeLayout 的具體用法。

2. RelativeLayout 的對(duì)齊方式

由于在 LinearLayout 中已經(jīng)對(duì)很多通用屬性做過介紹，如果不清楚可以查看 7.2 小節(jié)的內(nèi)容，這里就不在贅述 Layout 的設(shè)置項(xiàng)，而著重講解 RelativeLayout 中比較特殊的設(shè)置屬性。

注：為了方便學(xué)習(xí)演示，本節(jié)中的示例都默認(rèn)將 RelativeLayout 的長(zhǎng)寬設(shè)置成 match_parent，即整個(gè)屏幕的顯示區(qū)域都是 RelativeLayout。

2.1 居中布局

RelativeLayout居中布局

當(dāng)你希望 View 能夠在父布局中居中擺放時(shí)，你可以有以下3種屬性選擇：

  • android:layout_centerHorizontal=“true”：
    這個(gè)屬性會(huì)讓你的View在父布局中水平居中，如上圖中紅色 View 所示，由于 RelativeLayout 占滿全屏，所以它最終會(huì)在屏幕的水平方向上居中顯示。

  • android:layout_centerVertical=“true”：
    這個(gè)屬性會(huì)讓你的View在父布局中垂直居中，如上圖中黃色 View 所示，它最終會(huì)在屏幕的垂直方向上居中顯示。

  • android:layout_centerInParent="true"
    看到這里，聰明的你應(yīng)該能猜到，接下來就是在兩個(gè)方向上居中顯示。沒錯(cuò)，這個(gè)屬性能夠讓你在父布局中整體居中顯示，如上圖的藍(lán)色 View 所示，它最終將擺放在屏幕的正中央。

參考代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:background="#F75549"
        android:text="centerHorizontal"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:background="#F1E14D"
        android:text="centerVertical"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="#14CEE6"
        android:text="centerInParent"
        android:textSize="20sp" />
</RelativeLayout>

2.2 與父布局對(duì)齊

接下來的幾個(gè)屬性能夠?qū)?View 固定在相對(duì)于父布局任意一條邊固定距離的位置。

與父布局對(duì)齊

  • android:layout_alignParentTop=“true”：
    使用layout_alignParentTop屬性可以讓你的View與父布局的頂端對(duì)齊，同時(shí)由于RelativeLayout的長(zhǎng)寬是match_parent，所以最終的效果就是顯示在屏幕的最上方。

  • android:layout_alignParentBottom=“true”：
    使用layout_alignParentBottom屬性可以讓你的View與父布局的底部對(duì)齊，最終的效果就是顯示在屏幕的最下方。

  • android:layout_alignParentLeft=“true”：
    使用layout_alignParentBottom屬性可以讓你的View與父布局的左側(cè)對(duì)齊，最終的效果就是顯示在屏幕的最左側(cè)。

  • android:layout_alignParentRight=“true”：
    使用layout_alignParentRight屬性可以讓你的View與父布局的右側(cè)對(duì)齊，最終的效果就是顯示在屏幕的最右側(cè)。

注：以上幾個(gè)對(duì)齊屬性都可以多個(gè)搭配使用，比如我們上圖中的幾個(gè)View，分別是右上對(duì)齊、左下對(duì)齊和右中對(duì)齊
參考代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:background="#F75549"
        android:text="right|top"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        android:layout_centerVertical="true"
        android:background="#F1E14D"
        android:text="left|bottom"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerInParent="true"
        android:layout_centerVertical="true"
        android:background="#14CEE6"
        android:text="right|centerInParent"
        android:textSize="20sp" />
</RelativeLayout>

2.3 將 View 添加到一個(gè)兄弟布局的相對(duì)位置

以上是設(shè)置 View 與父布局的相對(duì)位置，當(dāng) RelativeLayout 中有了 View 之后，我們同樣可以設(shè)置 View 與其他兄弟 View 的位置關(guān)系。

相對(duì)兄弟View的位置

  • android:layout_above="@id/center"：
    這個(gè)屬性設(shè)置當(dāng)前 View 擺放在 id 為 center 的 View 的上方。
  • android:layout_below="@id/center"：
    設(shè)置當(dāng)前View擺放在 id 為 center 的 View 的下方。
  • android:layout_toLeftOf="@id/center"：
    設(shè)置當(dāng)前 View 擺放在 id 為 center 的 View 的左邊。
  • android:layout_toRightOf="@id/center"：
    設(shè)置當(dāng)前 View 擺放在 id 為 center 的 View 的右邊。

注：可以看到這個(gè)屬性是需要指定一個(gè) id 的，所以我們需要給被依賴的兄弟 View 賦予一個(gè) id。但是要注意的是與賦予 id 時(shí)用“+id”不同，在指定兄弟 View 的時(shí)候，不需要寫“+id”，即直接寫 id 即可。
參考代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="#FFdddddd"
        android:text="centerInParent"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/center"
        android:layout_centerInParent="true"
        android:background="#F30C5D"
        android:text="above"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/center"
        android:layout_centerInParent="true"
        android:background="#ECEC18"
        android:text="below"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_toLeftOf="@id/center"
        android:background="#14CEE6"
        android:text="left"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_toRightOf="@id/center"
        android:background="#25EC0F"
        android:text="right"
        android:textSize="20sp" />
</RelativeLayout>

2.4 讓 View 與兄弟 View 對(duì)齊

類似與父布局的對(duì)齊方式，你可以使用以下幾個(gè)屬性將 View 與一個(gè)已有的兄弟 View 對(duì)齊。

  • android:layout_alignTop="@id/center"：
    設(shè)置 View 與 id 為 center 的 View 頂端對(duì)齊。
  • android:layout_alignBottom="@id/center"
    設(shè)置 View 與 id 為 center 的 View 底部對(duì)齊。
  • android:layout_alignLeft="@id/center"
    設(shè)置 View 與 id 為 center 的 View 左側(cè)對(duì)齊。
  • android:layout_alignRight="@id/center"
    設(shè)置 View 與 id 為 center 的 View 右側(cè)對(duì)齊。
  • android:layout_alignBaseLine="@id/center"
    設(shè)置 View 與 id 為 center 的 View 的基準(zhǔn)線對(duì)齊。

3. RelativeLayout 的相對(duì)距離

在上面的例子中，可以發(fā)現(xiàn)我們可以通過屬性設(shè)置 View 與 View 之間、View 與父布局之間的相對(duì)位置，但是發(fā)現(xiàn) View 都是貼在一起或者貼著邊的，并不美觀。其實(shí) RelativeLayout 除了可以設(shè)置相對(duì)位置及對(duì)齊方式以外，還可以在此基礎(chǔ)之上設(shè)置兩個(gè) View、View 與父布局之間的間距，設(shè)置間距和 LinearLayout 布局的一樣：

  • layout_margin： 設(shè)置元素與周圍其他元素的間距，類似的還可以設(shè)置單邊的間距：
    • layout_marginRight
    • layout_marginTop
    • layout_marginLeft
    • layout_marginBottom
      注：margin 是可以為負(fù)數(shù)的，感興趣的同學(xué)可以可以自行測(cè)試查看效果

我們?cè)?2.3 小節(jié)示例中添加以上四種上下左右間距之后，效果如圖：

RelativeLayout的間距

4. 小結(jié)

本節(jié)介紹了更為靈活的布局方式——RelativeLayout，它的核心是可以任何設(shè)置 View 與父布局、View 與 View 之間的對(duì)齊方式及相對(duì)位置，并在其基礎(chǔ)之上設(shè)置與目標(biāo)的相對(duì)距離，在大多數(shù)的實(shí)戰(zhàn)場(chǎng)景中，我們會(huì)將 LinearLayout 和 RelativeLayout 結(jié)合使用，往往會(huì)產(chǎn)生意想不到的效果。