你真的了解android:layout_weight 嗎？

一直以來對android:layout_weight 屬性的理解停留在對其相對于的View按權(quán)重（或者說是比例）平分的概念中，因為之前學(xué)習(xí)時看的書上就是這么講的政勃。最近才發(fā)現(xiàn)原來不僅僅是按權(quán)重平分那么簡單（真是坑爹教材坑死人安珊小）旧乞，嚴(yán)格的說法應(yīng)該是對當(dāng)前剩余空間按權(quán)重平分。

初探##

日常開發(fā)中磅氨，在LinearLayout中使用layout_weight可以很好的應(yīng)對那些內(nèi)容會動態(tài)變化的布局結(jié)構(gòu)尺栖。比如表單填寫，最常見的就是注冊登錄頁面布局內(nèi)容的實現(xiàn)烦租，例如要實現(xiàn)下圖布局

layout_weight

可用如下方式實現(xiàn)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
    android:layout_marginTop="10dp"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:padding="8dp"
        android:layout_width="0dp"
        android:layout_weight="1.5"
        android:layout_height="wrap_content"
        android:text="用戶名"
        android:gravity="center"
        android:id="@+id/textView2" />

    <EditText
        android:padding="8dp"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:inputType="textPersonName"
        android:text=""
        android:ems="10"
        android:id="@+id/editText"
        android:layout_weight="3" />
</LinearLayout>

    <LinearLayout
        android:layout_marginTop="10dp"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:padding="8dp"
            android:layout_width="0dp"
            android:layout_weight="1.5"
            android:layout_height="wrap_content"
            android:text="密碼"
            android:gravity="center"
            />

        <EditText
            android:padding="8dp"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:inputType="textPersonName"
            android:text=""
            android:ems="10"
            android:layout_weight="3" />
    </LinearLayout>
    <LinearLayout
        android:layout_marginTop="10dp"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:padding="8dp"
            android:layout_width="0dp"
            android:layout_weight="1.5"
            android:layout_height="wrap_content"
            android:text="確認(rèn)密碼"
            android:gravity="center"
             />

        <EditText
            android:padding="8dp"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:inputType="textPersonName"
            android:text=""
            android:ems="10"
            android:layout_weight="3" />
    </LinearLayout>

</LinearLayout>

這里使TextView和EditText的寬度為0耐亏，讓后使其權(quán)重分別為1.5和3筒繁，這樣整體效果會看起來比較整齊味混，當(dāng)然用RelativeLayout也是能實現(xiàn)的眼姐，但是這樣更簡單一些，也更高效窃祝。

進階##

在Android沒有推出android-percent-support-lib之前屡贺，甚至在其推出后，一直使用layout_weight實現(xiàn)“百分比”布局锌杀。相比于wrap_content和match_parent ,巧妙的使用layout_weight可以很簡潔的實現(xiàn)界面按“百分比”布局，當(dāng)然這其中也有一些奧妙泻仙，這里就做一下記錄糕再。

首先看一下下面的布局文件

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:orientation="horizontal">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="#77bc1f"
                android:text="AAA"
                android:textColor="#fff"
                android:textSize="23sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:background="#06d992"
                android:text="BBB"
                android:textColor="#fff"
                android:textSize="23sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="3"
                android:background="#EEA32E"
                android:text="CCC"
                android:textColor="#fff"
                android:textSize="23sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:orientation="horizontal">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="#77bc1f"
                android:text="AAA"
                android:textColor="#fff"
                android:textSize="23sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:background="#06d992"
                android:text="BBB"
                android:textColor="#fff"
                android:textSize="23sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="3"
                android:background="#EEA32E"
                android:text="CCC"
                android:textColor="#fff"
                android:textSize="23sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:orientation="horizontal">

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="#77bc1f"
                android:text="AAA"
                android:textColor="#fff"
                android:textSize="23sp" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:background="#06d992"
                android:text="BBB"
                android:textColor="#fff"
                android:textSize="23sp" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="3"
                android:background="#EEA32E"
                android:text="CCC"
                android:textColor="#fff"
                android:textSize="23sp" />
        </LinearLayout>

    </LinearLayout>

這段代碼實現(xiàn)的UI效果如下：

layout_weight

整個布局是個垂直的LinearLayout，里面有三個水平方向的LinearLayout玉转，內(nèi)部放置了三個TextView突想，三個TextView高度為wrap_content；其內(nèi)容和背景色也不同（這里只是為了看起來方便）究抓，重點是其寬度：

第一行內(nèi)三個TextView

layout_width="wrap_content"

第二行內(nèi)三個TextView

android:layout_width="match_parent"

第三行內(nèi)三個TextView

android:layout_width="0dp"

而每一個LinearLayout內(nèi)部三個TextView的layout_weight分別1猾担，2，3刺下。由此绑嘹，看見由于其wrap_content的不同，使其layout_weight的分配受到了影響橘茉。這里就來分析一下工腋，按照之前所說，layout_weight會按屏幕剩余空間畅卓，按權(quán)重分配空間擅腰。

第一種情況（第一個LinearLayout）

系統(tǒng)先給3個TextView分配他們的寬度值wrap_content（寬度足以包含他們的內(nèi)容1,2,3即可），然后會把剩下來的屏幕空間按照1:2:3的比列分配給3個textview翁潘，
上面的UI 比重為：
61/6 趁冈，62/6，6*3/6 即1:2:3 拜马，如UI 第一行呈現(xiàn)的那樣渗勘。

第二種情況（第二個LinearLayout）

系統(tǒng)先給3個textview分配他們所要的寬度match_parent沐绒，也就是說每一都是填滿他的父控件，這里就是屏幕的寬度
那么這時候的剩余空間=
1個parent_width-3個parent_width=-2個parent_width (parent_width指的是屏幕寬度 )

那么第一個TextView的實際所占寬度應(yīng)該=match_parent的寬度,
即parent_width + 他所占剩余空間的權(quán)重比列1/6 * 剩余空間大醒叫稀（-2 parent_width）=2/3parent_width

同理第二個TextView的實際所占寬度=parent_width + 2/6*(-2parent_width)=1/3parent_width;

第三個TextView的實際所占寬度=parent_width + 3/6*(-2parent_width)=0parent_width洒沦；所以就是2:1:0的比列顯示了。

即如UI第二行呈現(xiàn)的那樣价淌。

第三種情況

這種情況申眼，其實和第一種是一樣的。

看到這里蝉衣，下次使用layout_weight時括尸，如果放置的控件看不見了，就不會覺得奇怪了病毡。

舉一反三##

好了濒翻，接下來想想，如果把上面代碼里三個TextView的權(quán)重依次改為3啦膜，2有送，1 又會是一種怎樣的UI效果呢，想好了僧家，看下面代碼和實際效果圖雀摘。

 <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#FF424242"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:orientation="horizontal">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="3"
                android:background="#77bc1f"
                android:text="AAA"
                android:textColor="#fff"
                android:textSize="23sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:background="#06d992"
                android:text="BBB"
                android:textColor="#fff"
                android:textSize="23sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="#EEA32E"
                android:text="CCC"
                android:textColor="#fff"
                android:textSize="23sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:orientation="horizontal">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="3"
                android:background="#77bc1f"
                android:text="AAA"
                android:textColor="#fff"
                android:textSize="23sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:background="#06d992"
                android:text="BBB"
                android:textColor="#fff"
                android:textSize="23sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="#EEA32E"
                android:text="CCC"
                android:textColor="#fff"
                android:textSize="23sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:orientation="horizontal">

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="3"
                android:background="#77bc1f"
                android:text="AAA"
                android:textColor="#fff"
                android:textSize="23sp" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:background="#06d992"
                android:text="BBB"
                android:textColor="#fff"
                android:textSize="23sp" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="#EEA32E"
                android:text="CCC"
                android:textColor="#fff"
                android:textSize="23sp" />
        </LinearLayout>

    </LinearLayout>

layout_weight

應(yīng)該和你想的一樣吧。

好了八拱，這里就是對android:layout_weight的學(xué)習(xí)筆記阵赠，雖然是一個很簡單的屬性，但是巧妙的設(shè)置后肌稻，很方便的實現(xiàn)一些布局清蚀。

ps:markdown 語法什么時候直接支持代碼高亮，加粗就好了

最后編輯于：2017.12.03 04:08:35

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末爹谭，一起剝皮案震驚了整個濱河市枷邪，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌旦棉，老刑警劉巖齿风，帶你破解...
沈念sama閱讀 206,839評論 6贊 482
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異绑洛，居然都是意外死亡救斑，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,543評論 2贊 382
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門真屯，熙熙樓的掌柜王于貴愁眉苦臉地迎上來脸候，“玉大人，你說我怎么就攤上這事≡寺伲” “怎么了泵额？”我有些...
開封第一講書人閱讀 153,116評論 0贊 344
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長携添。經(jīng)常有香客問我嫁盲，道長，這世上最難降的妖魔是什么烈掠？我笑而不...
開封第一講書人閱讀 55,371評論 1贊 279
?港島之戀（遺憾婚禮）
正文為了忘掉前任羞秤，我火速辦了婚禮，結(jié)果婚禮上左敌，老公的妹妹穿的比我還像新娘瘾蛋。我一直安慰自己，他們只是感情好矫限，可當(dāng)我...
茶點故事閱讀 64,384評論 5贊 374
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布哺哼。她就那樣靜靜地躺著，像睡著了一般叼风。火紅的嫁衣襯著肌膚如雪取董。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 49,111評論 1贊 285
城市分裂傳說
那天无宿，我揣著相機與錄音甲葬，去河邊找鬼。笑死懈贺，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的坡垫。我是一名探鬼主播梭灿，決...
沈念sama閱讀 38,416評論 3贊 400
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼冰悠！你這毒婦竟也來了堡妒？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 37,053評論 0贊 259
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤溉卓，失蹤者是張志新（化名）和其女友劉穎皮迟，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體桑寨，經(jīng)...
沈念sama閱讀 43,558評論 1贊 300
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡伏尼，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 36,007評論 2贊 325
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了尉尾。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片爆阶。...
茶點故事閱讀 38,117評論 1贊 334
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出辨图，到底是詐尸還是另有隱情班套，我是刑警寧澤，帶...
沈念sama閱讀 33,756評論 4贊 324
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布故河，位于F島的核電站吱韭，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏鱼的。R本人自食惡果不足惜理盆，卻給世界環(huán)境...
茶點故事閱讀 39,324評論 3贊 307
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望鸳吸。院中可真熱鬧熏挎，春花似錦、人聲如沸晌砾。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,315評論 0贊 19
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽养匈。三九已至哼勇，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間呕乎，已是汗流浹背积担。一陣腳步聲響...
開封第一講書人閱讀 31,539評論 1贊 262
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留猬仁，地道東北人帝璧。一個月前我還...
沈念sama閱讀 45,578評論 2贊 355
代替公主和親
正文我出身青樓，卻偏偏與公主長得像湿刽，于是被迫代替她去往敵國和親的烁。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 42,877評論 2贊 345

你真的了解android:layout_weight 嗎？

初探##

進階##

舉一反三##

推薦閱讀更多精彩內(nèi)容