前言

首先大家可以思考下如何用RelativeLayout而且沒(méi)有嵌套生成下面的布局，如果你會(huì)的話(huà)就不用看后面的了。

分析

這個(gè)布局的特點(diǎn)是按鈕3底部對(duì)齊，按鈕2在按鈕3的上面，文本框水平充滿(mǎn)剩余的區(qū)域，按鈕1頂部對(duì)齊，列表框垂直充滿(mǎn)剩余的區(qū)域。

下面我們會(huì)拆分為下面兩個(gè)子問(wèn)題：

水平充滿(mǎn)剩余區(qū)域的問(wèn)題

水平方向上有兩個(gè)組件，一個(gè)組件寬度為wrap_content（或者固定寬度），另外一個(gè)組件的需要充滿(mǎn)剩余的寬度，效果如下： 

左側(cè)一個(gè)文本框，右側(cè)一個(gè)按鈕

如果是嵌套一個(gè)LinearLayout布局肯定就十分簡(jiǎn)單了，如果用RelativeLayout也是可以的，如下：

<Button
 android:id="@+id/btn2"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_above="@id/btn3"
 android:layout_alignParentRight="true"
 android:text="按鈕2"
 />
<EditText
 android:id="@+id/et"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignBaseline="@id/btn2"
 android:layout_alignParentLeft="true"
 android:layout_toLeftOf="@id/btn2"
 />

主要方法如下：（主要通過(guò)toRightOf和toLeftOf兩個(gè)屬性）

      1. 兩個(gè)組件的布局寬度都是wrap_content（或者固定寬度）

      2. 左邊的組件alignParentLeft，右邊的組件alignParentRight（如果他們左右分別有一些固定寬度的組件，就用toRightOf（左側(cè)）或者toLeftOf（右側(cè)）指定的組件）

      3. 為了讓左邊的組件緊挨著右邊的組件，也就是拉長(zhǎng)左側(cè)的文本框，設(shè)置toLeftOf="右邊組件的ID" （這里是重點(diǎn)），這樣，左側(cè)文本框就會(huì)自動(dòng)拉伸至和右側(cè)按鈕緊挨著。

      4. 當(dāng)然，最后，兩邊組件要水平對(duì)齊，對(duì)左邊組件用alignBaseline="右邊組件的ID"

      5. 注意要把右側(cè)按鈕在代碼中放到前面（否則編譯時(shí)找不到對(duì)應(yīng)的id，因?yàn)樽髠?cè)EditText布局依賴(lài)右側(cè)按鈕）

垂直充滿(mǎn)剩余空間的問(wèn)題

垂直方向上有兩個(gè)組件，第一個(gè)組件的高度為wrap_content（或固定高度），另外一個(gè)組件的高度需要充滿(mǎn)剩余的高度,效果如前面的ListView: 

這個(gè)時(shí)候也可以通過(guò)RelativeLayout實(shí)現(xiàn)，下面我貼出了整個(gè)布局的代碼（為了更好的說(shuō)明，我在上面和下面都加了一個(gè)組件：

<?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">
 <Button
  android:id="@+id/btn1"
  android:layout_width="match_parent"
  android:layout_height="50dp"
  android:text="固定寬度按鈕"/>
 <Button
  android:id="@+id/btn3"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_alignParentBottom="true"
  android:text="按鈕3"/>
 <Button
  android:id="@+id/btn2"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_above="@id/btn3"
  android:layout_alignParentRight="true"
  android:text="按鈕2"
  />
 <EditText
  android:id="@+id/et"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_alignBaseline="@id/btn2"
  android:layout_alignParentLeft="true"
  android:layout_toLeftOf="@id/btn2"
  />
 <ListView
  android:id="@+id/lv"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_above="@id/btn2"
  android:layout_below="@id/btn1"
  />
</RelativeLayout>

主要看ListView的布局，方法如下：

      1. 讓ListView below=上面的組件

      2. 讓ListView above=下面的組件

      3. 注意將ListView依賴(lài)的組件都放到ListView的上面

看前面我們給出的完整的布局文件代碼，這里需要說(shuō)明如下內(nèi)容：

注意組件在代碼中的前后擺放，不然會(huì)編譯報(bào)錯(cuò)（前面一直在說(shuō)），方法如下：

需要拉伸的組件放到后面，然后用另一個(gè)組件來(lái)進(jìn)行整體的布局。也就是被依賴(lài)位置的都放到前面，那些固定長(zhǎng)寬（指的是固定或者wrap_content且不依賴(lài)其他組件布局的）或者依賴(lài)父容器的組件都放到前面，其他組件放到后面，如前面的按鈕1，按鈕3，按鈕2都放到了前面，因?yàn)榘粹o2依賴(lài)于按鈕3（按鈕2 above 按鈕3），所以按鈕2也放到了按鈕3的后面。 (按鈕1說(shuō)的是最上面那個(gè)固定高度按鈕)

讓兩個(gè)組件水平中線(xiàn)對(duì)齊的問(wèn)題

讓一個(gè)組件和另外一個(gè)組件中線(xiàn)對(duì)齊：讓其中一個(gè)組件足夠高(或者我們知道哪個(gè)組件高度一定是高于頂一個(gè)組件的)，然后讓需要對(duì)齊的組件和這個(gè)沒(méi)有內(nèi)容的組件上下皆對(duì)齊（alignTop,alignBottom設(shè)置），然后將第二個(gè)組件的gravity為垂直居中即可。
如果是有 baseline 屬性的 TextView，Button 這類(lèi)顯示文本的組件的話(huà)，可以通過(guò) align_Baseline 來(lái)進(jìn)行對(duì)齊，這里的 baseline指的是文本底部對(duì)其的，就像我們小時(shí)候拿一把尺子，然后比著尺子寫(xiě)字那種意思。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)各位Android開(kāi)發(fā)者們能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論