Android中將控件放到線性布局的任意位置（四）

1、 先來分析嘗試下下

在Android中將控件放到線性布局的任意位置（三）中，我們學(xué)習(xí)了解了線性布局中常用屬性layout_gravity和 orientation之間相“沖突”的地方，以及其為何會有這個(gè)“沖突”揣測。在其末尾，我們提出一個(gè)需求，詳見上文。

  1. 先用layout_gravity練練手
  • 從前面幾篇文章中，我們得出結(jié)論，當(dāng)父布局中屬性：android:orientation="vertical",子控件的屬性：layout_gravity在豎直方向上是會失去作用的。
  • 那么在這樣的前提下，我們想讓layout_gravity起作用，先把父布局android:orientation="vertical"更改為橫向，再在子控件TextView中利用layout_gravity調(diào)整TextView的位置,一起看下：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/ll_one"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff0000"
    tools:context=".MainActivity"
    android:orientation="horizontal"
    >
    <TextView
        android:id="@+id/tv_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0000ff"
        android:text="第一個(gè)TextView"
        android:textColor="#ffffff"
        android:textSize="25sp" />

    <TextView
        android:layout_gravity="bottom"
        android:id="@+id/tv_tow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#555555"
        android:text="第二個(gè)TextView"
        android:textColor="#ffffff"
        android:textSize="25sp" />
</LinearLayout>

看效果：


1.png
  • 如果這個(gè)結(jié)果對你并不意外，那么說明上一篇文章里已經(jīng)吃透了。我們似乎達(dá)到了目標(biāo)，但是很顯然，這樣的情況是，盡管兩個(gè)TextView一上一下，但是確實(shí)分列左右，而我們想要的不過是單純的一個(gè)在頂部，一個(gè)在底部而已。而且一個(gè)顯而易見的問題是，如果我們兩個(gè)TextView都把寬度設(shè)置為match_parent，顯然就會有問題了。
  1. 那么用gravity屬性來控制。
  • 由于兩個(gè)TextView的寬高都是wrap_content，也即是和內(nèi)容(就是顯示的字符串啦)一樣大小，那么在TextView中是沒有用gravity的必要的（該屬性是控制自己空間內(nèi)部“內(nèi)容”的排布位置，如果控件大?。ù舜蜗喈?dāng)于父布局）和內(nèi)容一樣大，那么該屬性就沒有作用）。
  • 這樣看來，我們只能在外層的線性布局使用該屬性，看代碼：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/ll_one"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff0000"
    tools:context=".MainActivity"
    android:orientation="vertical"
    android:gravity="bottom"
    >
    <TextView
        android:id="@+id/tv_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0000ff"
        android:text="第一個(gè)TextView"
        android:textColor="#ffffff"
        android:textSize="25sp" />

    <TextView
        android:layout_gravity="bottom"
        android:id="@+id/tv_tow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#555555"
        android:text="第二個(gè)TextView"
        android:textColor="#ffffff"
        android:textSize="25sp" />
</LinearLayout>

我們將orientation改為豎直方向，并在線性布局中設(shè)置android:gravity="bottom"
看效果：

2.png

這個(gè)結(jié)果你也應(yīng)該預(yù)料到的，否則請細(xì)看前面三篇文章。（在zhiqian設(shè)置android:gravity="bottom"之前，兩者從上到下，排在屏幕頂部的），現(xiàn)在效果是從上到下，排在底部。

  • 那么我們發(fā)現(xiàn)，似乎想要第一個(gè)TextView排在屏幕頂部，第二個(gè)TextView排在屏幕底部是完成不了的，我們陷入僵局了……？！
  • 辦法必然是有的，不然我費(fèi)什么話啊。

先認(rèn)識認(rèn)識layout_weight

  • 看見了嗎,layout開頭，說明是對當(dāng)前控件起作用的，一如layout_width,layout_height,layout_gravity等，都是對當(dāng)前布局起作用。至于“weight”是重量……那么結(jié)合起來似布局的……比重？正確，看代碼：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/ll_one"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff0000"
    tools:context=".MainActivity"
    android:orientation="vertical"
    android:gravity="bottom"
    >
    <TextView
        android:layout_weight="1"
        android:id="@+id/tv_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0000ff"
        android:text="第一個(gè)TextView"
        android:textColor="#ffffff"
        android:textSize="25sp" />

    <TextView
        android:layout_weight="1"
        android:id="@+id/tv_tow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#555555"
        android:text="第二個(gè)TextView"
        android:textColor="#ffffff"
        android:textSize="25sp" />
</LinearLayout>

效果：

3.png

就是醬紫，屬性layout_weight就是布局在父布局所提供的空間中所占的比例，上面代碼將父布局提供的空間（所有紅色部分）以一比一平分，我們兩個(gè)TextView寬度都是只有內(nèi)容寬（包裹內(nèi)容），并未占滿屏幕（所以藍(lán)色、灰色只占了屏幕從上到下的、與其內(nèi)容寬的部分）。

  • 那么現(xiàn)在的情況下，兩個(gè)TextView的內(nèi)容一個(gè)顯示在頂部，一個(gè)顯示在底部就簡單多了：
    第一個(gè)已經(jīng)在頂部顯示了，只需修改第二個(gè)TextView就可以：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/ll_one"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff0000"
    tools:context=".MainActivity"
    android:orientation="vertical"
    android:gravity="bottom"
    >
    <TextView
        android:layout_weight="1"
        android:id="@+id/tv_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0000ff"
        android:text="第一個(gè)TextView"
        android:textColor="#ffffff"
        android:textSize="25sp" />

    <TextView
        android:layout_weight="1"
        android:id="@+id/tv_tow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#555555"
        android:text="第二個(gè)TextView"
        android:textColor="#ffffff"
        android:textSize="25sp"
        android:gravity="bottom"/>
</LinearLayout>

效果：

4.png

在上一步情況下，用gravity屬性修改第二個(gè)TextView中內(nèi)容的位置就OK了。

  • 至此，我們似乎大功告成了。
  • 但是……似乎，我們太大動干戈了，你看，為了將兩個(gè)文本內(nèi)容分別顯示在屏幕頂部、底部，我們讓藍(lán)色和灰色各占了豎直方向一半的屏幕……過分了哈，在不改變TextView的高度的情況下（layoutweight屬性，會讓子控件在父布局orientation指定方向上，按比例分配父布局提供的全部空間，相當(dāng)于改變了該方向上的寬度或者是高度）

正確的姿勢是

廢話不多，上代碼：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/ll_one"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff0000"
    tools:context=".MainActivity"
    android:orientation="vertical"
    android:gravity="bottom"
    >
    <TextView
        android:id="@+id/tv_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0000ff"
        android:text="第一個(gè)TextView"
        android:textColor="#ffffff"
        android:textSize="25sp" />
    <TextView
        android:textSize="25sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#00ff00"
        android:text="我就只想占個(gè)位置"/>

    <TextView
        android:id="@+id/tv_tow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#555555"
        android:text="第二個(gè)TextView"
        android:textColor="#ffffff"
        android:textSize="25sp"
        android:gravity="bottom"/>
</LinearLayout>

效果：

5.png

看，既然在父布局是豎直方向布局的情況下，我是不能通過子控件的gravity屬性指定該子控件位置，那么我就依你的規(guī)則（從上到下排），在需要分別在頂部、底部顯示內(nèi)容的空間之間，添加一個(gè)占位置的空間，并讓這個(gè)控件占滿屏幕剩余空間就可以了。layout_weight屬性有這么一個(gè)巧用：

巧用layout_weight屬性，填滿空白空間

  • 用layout_weight屬性填滿空白空間，是基于這樣的事實(shí)：
    當(dāng)父布局（線性布局等具有方向性的布局）內(nèi)的子控件，如上面所示的三個(gè)TextView，只有一個(gè)控件設(shè)置layout_weight屬性時(shí)，該控件將默認(rèn)“擠滿”父布局所有空間，其他控件則根據(jù)自身設(shè)置屬性來布局。
  • 所以呢，出現(xiàn)上面的結(jié)果，就是這樣的原因：
    1、 頂部、底部的TextView按照設(shè)置的android:layout_height="wrap_content"布局，而中間的TextView給上下兩個(gè)TextView留下空間后，便將所有父布局剩余的（在父布局布局方向上的）空間全部占滿，這樣，它前后兩個(gè)控件將分別列于屏幕的頂部和底部，同樣，水平方向上我們可以：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/ll_one"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff0000"
    tools:context=".MainActivity"
    android:orientation="horizontal"
    android:gravity="bottom"
    >
    <TextView
        android:id="@+id/tv_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0000ff"
        android:text="第一"
        android:textColor="#ffffff"
        android:textSize="25sp" />
    <TextView
        android:textSize="25sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#00ff00"
        android:text="只想占個(gè)位置"/>

    <TextView
        android:id="@+id/tv_tow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#555555"
        android:text="第二"
        android:textColor="#ffffff"
        android:textSize="25sp"
        android:gravity="bottom"/>
</LinearLayout>

效果：


6.png
  • 為什么在底部呢，這個(gè)問題留給你，代碼中有答案的。
    實(shí)際運(yùn)用的時(shí)候，背景色是相同的（或者都沒有），就可以了，上一下去掉背景的效果。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/ll_one"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="horizontal"
    >
    <TextView
        android:id="@+id/tv_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第一"
        android:textSize="25sp" />
    <TextView
        android:gravity="center"
        android:textSize="25sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="只想占個(gè)位置"/>

    <TextView
        android:id="@+id/tv_tow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第二"
        android:textSize="25sp"
        android:gravity="bottom"/>
</LinearLayout>

效果：


7.png

代碼：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/ll_one"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical"
    >
    <TextView
        android:id="@+id/tv_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第一"
        android:textSize="25sp" />
    <TextView
        android:gravity="center"
        android:textSize="25sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="只想占個(gè)位置"/>

    <TextView
        android:id="@+id/tv_tow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第二"
        android:textSize="25sp"
        android:gravity="bottom"/>
</LinearLayout>
8.png

我做了些小小的改動，大家可以結(jié)合圖片代碼，體會下這幾篇文章我們所學(xué)得東西。如果你在線性布局中還有什么問題，歡迎留言討論，我會盡我所能回答問題。
over.

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容