作者：李旺成

時(shí)間：2016年5月6日

想要的效果

想要的效果

如上圖所示，要實(shí)現(xiàn)這樣一個(gè)效果：按鈕居中顯示，并且占據(jù)父控件寬度的一半。

看上去好像挺簡(jiǎn)單的，可以有很多實(shí)現(xiàn)方案，那最佳方案或者說最簡(jiǎn)單的方案是不是大家都會(huì)呢？

這里給出兩個(gè)方案，具體選哪個(gè)看自己的實(shí)際情況。

方案一：weightSum 和 layout_weight 配合

先看效果：

居中顯示寬度為父控件一半（一）

實(shí)現(xiàn)代碼

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:weightSum="2"
    tools:context="com.diygreen.androidhackslayout.Hack1Activity">
    <Button
        android:id="@+id/btn_center"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="居中按鈕" />
</LinearLayout>

原理分析

這里涉及到 LinearLayout 的 weightSum 屬性與子控件的 layout_weight 屬性配合使用?？紤]到大家對(duì) layout_weight 應(yīng)該更了解，這里先討論下 layout_weight。

layout_weight 屬性

首先，看一下 layout_weight 屬性的作用：
它是用來分配剩余空間的一個(gè)屬性，可以設(shè)置它的權(quán)重。

然后，理解 layout_weight 的“真實(shí)含義”
這個(gè)屬性大家一般都用過，但是可能都不是很清楚具體是怎么回事（反正我以前是這樣，看著顯示效果調(diào)，效果出來就萬事大吉，沒有考慮過為什么），這里稍微介紹下 layout_weight 的“真實(shí)含義”。

android:layout_weight 的真實(shí)含義是：一旦 View 設(shè)置了該屬性（假設(shè)有效的情況下），那么該 View 的寬度等于原有寬度（android:layout_width）加上剩余空間的占比！

設(shè)屏幕寬度為 L，在兩個(gè) View 的寬度都為 match_parent 的情況下，原有寬度為 L，兩個(gè)的 View 的寬度都為 L，那么剩余寬度為 L-（L+L） = -L, 左邊的 View 占比三分之一，所以總寬度是 L+(-L)*1/3 = (2/3)L。事實(shí)上默認(rèn)的 View 的 weight 這個(gè)值為0，一旦設(shè)置了這個(gè)值，那么所在 View 在繪制的時(shí)候執(zhí)行 onMeasure 兩次的原因就在這。
Google 官方推薦，當(dāng)使用 weight 屬性時(shí)，將 width 設(shè)為 0dp 即可，效果跟設(shè)成 wrap_content 是一樣的。這樣 weight 就可以理解為占比了！（參考：android:layout_weight的真實(shí)含義）

最后，稍微總結(jié)一下
在 layout_width 設(shè)置為 much_parent 的時(shí)候，layout_weight 所代表的是你的控件要優(yōu)先盡可能的大，但這個(gè)大是有限度的，即 much_parent；
在 layout_width 設(shè)置為 wrap_content 的時(shí)候（這和設(shè)置為 0dp 一致），layout_weight 所代表的是你的控件要優(yōu)先盡可能的小，但這個(gè)小是有限度的，即 wrap_content。（參考自：Android中 android:layout_weight 屬性 完美解釋）

weightSum 屬性

LinearLayout 的 weightSum 屬性，我基本上是第一次使用（就是在這個(gè)示例中），老規(guī)矩先看看官方的介紹：

weightSum 屬性

簡(jiǎn)單解釋一下：
“定義 weight 總和的最大值。如果未指定該值，以所有子控件的 layout_weight 屬性的累加值作為總和的最大值。一個(gè)典型的案例是：通過指定子控件的 layout_weight 屬性為 0.5，并設(shè)置 LinearLayout 的 weightSum 屬性為 1.0，實(shí)現(xiàn)子控件占據(jù)可用寬度的 50%”。（參考自：《50 Android Hacks》）

源碼分析

源碼分析

在上面的代碼中， LinearLayout 的 android:weightSum 屬性值設(shè)置為 "2"，表示其內(nèi)部所有子控件的 weight 比例總和是 2。示例中 LinearLayout 中只有一個(gè)子控件：Button。該 Button 的 android:layout_width 設(shè)置為 "0dp"，因此需要根據(jù) android:weightSum 來決定 Button 的 width。Button 的 android:layout_weight 設(shè)置為 "1"，即 android:weightSum 屬性值的一半，所以，Button 將占據(jù) 50% 的可用空間。

方案二：PercentXxxLayout

先看效果：

居中顯示寬度為父控件一半（二）

實(shí)現(xiàn)代碼

<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentFrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.diygreen.androidhackslayout.Hack1Activity">
    <Button
        android:id="@+id/btn_center"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        app:layout_widthPercent="50%"
        android:text="居中按鈕(二)" />
</android.support.percent.PercentFrameLayout>

原理分析

百分比布局，做過前端的同學(xué)應(yīng)該知道網(wǎng)頁(yè)提供百分比計(jì)算大小，Web 中支持子控件的寬度可參考父控件的寬度以百分比設(shè)置，最外層控件的寬度參考屏幕尺寸以百分比設(shè)置。看過一些開源庫(kù)使用類似的思路，來解決 Andoid 多機(jī)型適配的問題。但是，這些方案一般都有些缺點(diǎn)：會(huì)增加很多無用的數(shù)據(jù)，導(dǎo)致apk包變大，等等。

值得高興的是，Google 提供了一個(gè)叫做 percent 的 Support 庫(kù)，示例見這里 android-percent-support-lib-sample，上面的示例用的就是 percent 布局中的 PercentFrameLayout。

有了百分比布局那要實(shí)現(xiàn)上述效果就很簡(jiǎn)單了，關(guān)于代碼沒有什么好講解的了，下面簡(jiǎn)單介紹下 percent 庫(kù)。

percent Support 庫(kù)簡(jiǎn)介

percent 庫(kù)提供了兩個(gè)布局：
PercentRelativeLayout、PercentFrameLayout，通過名字就可以看出，它們應(yīng)該是從 FrameLayout 和 RelativeLayout 擴(kuò)展而來的：

PercentFrameLayout 繼承結(jié)構(gòu)

PercentRelativeLayout 繼承結(jié)構(gòu)

果然如此，F(xiàn)rameLayout 和 RelativeLayout 大家應(yīng)該都很熟悉了，那了解下 PercentXxxLayout 提供的特有屬性應(yīng)該就可以用起來了。

PercentXxxLayout 特有屬性：

• layout_widthPercent、layout_heightPercent
• layout_marginPercent
  layout_marginLeftPercent
  layout_marginTopPercent
  layout_marginRightPercent
  layout_marginBottomPercent
  layout_marginStartPercent
  layout_marginEndPercent

上面這些屬性不用解釋了吧！只是加了個(gè) “Percent”，賦值的時(shí)候用 xx% 即可， 直接當(dāng)作 FrameLayout、RelativeLayout 用就可以了。

簡(jiǎn)單使用

這里就不展開講解了，感興趣的，或者對(duì)該這兩個(gè)布局不熟悉的可以參考：Android 百分比布局庫(kù)(percent-support-lib) 解析與擴(kuò)展

小結(jié)

weight 屬性還是挺有作用的，利用好該屬性可以避免使用硬編碼的方式帶來的副作用，但是它也有局限性 —— 只能在 LinearLayout 中使用。好在，我們現(xiàn)在有了更強(qiáng)大的百分比庫(kù)了。

這只是布局技巧的冰山一角，還有很多技巧等待大家發(fā)掘，如果你有更好的方案，或者其他布局方面的技巧，希望也可以分享分享。

項(xiàng)目地址

AndroidHacks合集
布局篇
個(gè)人博客
示例用到代碼見：
Hack1Activity.java
activity_hack1_1.xml
activity_hack1_2.xml

參考

Android 百分比布局庫(kù)(percent-support-lib) 解析與擴(kuò)展
android:layout_weight的真實(shí)含義
Android中 android:layout_weight 屬性 完美解釋