android屏幕适配方案二（百分比法）及其扩展

素颜马尾好姑娘i 2022-07-19 05:57 214阅读 0赞

### 一、概述 ###

周末游戏打得过猛，于是周天熬夜码代码，周一早上浑浑噩噩的发现[android-percent-support-lib-sample][]这个项目，Google终于开始支持百分比的方式布局了，瞬间脉动回来，啊咧咧。对于这种历史性的时刻，不出篇博客难以表达我内心的激动。

还记得不久前，发了篇博客：[Android 屏幕适配方案][Android]，这篇博客以Web页面设计引出一种适配方案，最终的目的就是可以通过百分比控制控件的大小。当然了，存在一些问题，比如：

*  对于没有考虑到屏幕尺寸，可能会出现意外的情况；
 *  apk的大小会增加；

当然了android-percent-support这个库，基本可以解决上述问题，是不是有点小激动，稍等，我们先描述下这个support-lib。

这个库提供了：

*  两种布局供大家使用：  
    `PercentRelativeLayout`、`PercentFrameLayout`，通过名字就可以看出，这是继承自`FrameLayout`和`RelativeLayout`两个容器类；
 *  支持的属性有：

`layout_widthPercent`、`layout_heightPercent`、  
`layout_marginPercent`、`layout_marginLeftPercent`、  
`layout_marginTopPercent`、`layout_marginRightPercent`、  
`layout_marginBottomPercent`、`layout_marginStartPercent`、`layout_marginEndPercent`。

可以看到支持宽高，以及margin。

也就是说，大家只要在开发过程中使用`PercentRelativeLayout`、`PercentFrameLayout`替换`FrameLayout`、`RelativeLayout`即可。

是不是很简单，不过貌似没有LinearLayout，有人会说LinearLayout有weight属性呀。但是，weight属性只能支持一个方向呀~~哈，没事，刚好给我们一个机会去自定义一个`PercentLinearLayout`。

好了，本文分为3个部分：

*  `PercentRelativeLayout`、`PercentFrameLayout`的使用
 *  对上述控件源码分析
 *  自定义`PercentLinearLayout`

--------------------

### 二、使用 ###

关于使用，其实及其简单，并且github上也有例子，[android-percent-support-lib-sample][]。我们就简单过一下：

首先记得在build.gradle添加：

compile 'com.android.support:percent:22.2.0'

#### （一）PercentFrameLayout ####

3个TextView，很简单，直接看效果图：

![20150630142729580][]

(二) PercentRelativeLayout

ok，依然是直接看效果图:

![20150630142802272][]

使用没什么好说的，就是直观的看一下。

--------------------

### 三、源码分析 ###

其实细想一下，Google只是对我们原本熟悉的RelativeLayout和FrameLayout进行的功能的扩展，使其支持了percent相关的属性。

那么，我们考虑下，如果是我们添加这种扩展，我们会怎么做：

*  通过LayoutParams获取child设置的percent相关属性的值
 *  onMeasure的时候，将child的width,height的值，通过获取的自定义属性的值进行计算（eg:容器的宽 \* fraction ），计算后传入给child.measure(w,h);

ok，有了上面的猜想，我们直接看`PercentFrameLayout`的源码。

代码是相当的短，可以看到`PercentFrameLayout`里面首先重写了generateLayoutParams方法，当然了，由于支持了一些新的layout\_属性，那么肯定需要定义对应的LayoutParams。

#### （一）percent相关属性的获取 ####

可以看到PercentFrameLayout.LayoutParams在原有的FrameLayout.LayoutParams基础上，实现了PercentLayoutHelper.PercentLayoutParams接口。

这个接口很简单，只有一个方法：

而，这个方法的实现呢，也只有一行：`return mPercentLayoutInfo;`，那么这个mPercentLayoutInfo在哪完成赋值呢？

看PercentFrameLayout.LayoutParams的构造方法：

可以看到，将attrs传入给getPercentLayoutInfo方法，那么不用说，这个方法的内部，肯定是获取自定义属性的值，然后将其封装到PercentLayoutInfo对象中，最后返回。

代码如下：

<code class="language-java hljs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">public static PercentLayoutInfo getPercentLayoutInfo(Context context,
 AttributeSet attrs) {
 PercentLayoutInfo info = null;
 TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.PercentLayout_Layout);
 float value = array.getFraction(R.styleable.PercentLayout_Layout_layout_widthPercent, 1, 1,
 -1f);
 if (value != -1f) {
 if (Log.isLoggable(TAG, Log.VERBOSE)) {
 Log.v(TAG, "percent width: " + value);
 }
 info = info != null ? info : new PercentLayoutInfo();
 info.widthPercent = value;
 }
 value = array.getFraction(R.styleable.PercentLayout_Layout_layout_heightPercent, 1, 1, -1f);
 if (value != -1f) {
 if (Log.isLoggable(TAG, Log.VERBOSE)) {
 Log.v(TAG, "percent height: " + value);
 }
 info = info != null ? info : new PercentLayoutInfo();
 info.heightPercent = value;
 }
 value = array.getFraction(R.styleable.PercentLayout_Layout_layout_marginPercent, 1, 1, -1f);
 if (value != -1f) {
 if (Log.isLoggable(TAG, Log.VERBOSE)) {
 Log.v(TAG, "percent margin: " + value);
 }
 info = info != null ? info : new PercentLayoutInfo();
 info.leftMarginPercent = value;
 info.topMarginPercent = value;
 info.rightMarginPercent = value;
 info.bottomMarginPercent = value;
 }
 value = array.getFraction(R.styleable.PercentLayout_Layout_layout_marginLeftPercent, 1, 1,
 -1f);
 if (value != -1f) {
 if (Log.isLoggable(TAG, Log.VERBOSE)) {
 Log.v(TAG, "percent left margin: " + value);
 }
 info = info != null ? info : new PercentLayoutInfo();
 info.leftMarginPercent = value;
 }
 value = array.getFraction(R.styleable.PercentLayout_Layout_layout_marginTopPercent, 1, 1,
 -1f);
 if (value != -1f) {
 if (Log.isLoggable(TAG, Log.VERBOSE)) {
 Log.v(TAG, "percent top margin: " + value);
 }
 info = info != null ? info : new PercentLayoutInfo();
 info.topMarginPercent = value;
 }
 value = array.getFraction(R.styleable.PercentLayout_Layout_layout_marginRightPercent, 1, 1,
 -1f);
 if (value != -1f) {
 if (Log.isLoggable(TAG, Log.VERBOSE)) {
 Log.v(TAG, "percent right margin: " + value);
 }
 info = info != null ? info : new PercentLayoutInfo();
 info.rightMarginPercent = value;
 }
 value = array.getFraction(R.styleable.PercentLayout_Layout_layout_marginBottomPercent, 1, 1,
 -1f);
 if (value != -1f) {
 if (Log.isLoggable(TAG, Log.VERBOSE)) {
 Log.v(TAG, "percent bottom margin: " + value);
 }
 info = info != null ? info : new PercentLayoutInfo();
 info.bottomMarginPercent = value;
 }
 value = array.getFraction(R.styleable.PercentLayout_Layout_layout_marginStartPercent, 1, 1,
 -1f);
 if (value != -1f) {
 if (Log.isLoggable(TAG, Log.VERBOSE)) {
 Log.v(TAG, "percent start margin: " + value);
 }
 info = info != null ? info : new PercentLayoutInfo();
 info.startMarginPercent = value;
 }
 value = array.getFraction(R.styleable.PercentLayout_Layout_layout_marginEndPercent, 1, 1,
 -1f);
 if (value != -1f) {
 if (Log.isLoggable(TAG, Log.VERBOSE)) {
 Log.v(TAG, "percent end margin: " + value);
 }
 info = info != null ? info : new PercentLayoutInfo();
 info.endMarginPercent = value;
 }
 array.recycle();
 if (Log.isLoggable(TAG, Log.DEBUG)) {
 Log.d(TAG, "constructed: " + info);
 }
 return info;
 }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box; padding: 0px 5px;">58</li><li style="box-sizing: border-box; padding: 0px 5px;">59</li><li style="box-sizing: border-box; padding: 0px 5px;">60</li><li style="box-sizing: border-box; padding: 0px 5px;">61</li><li style="box-sizing: border-box; padding: 0px 5px;">62</li><li style="box-sizing: border-box; padding: 0px 5px;">63</li><li style="box-sizing: border-box; padding: 0px 5px;">64</li><li style="box-sizing: border-box; padding: 0px 5px;">65</li><li style="box-sizing: border-box; padding: 0px 5px;">66</li><li style="box-sizing: border-box; padding: 0px 5px;">67</li><li style="box-sizing: border-box; padding: 0px 5px;">68</li><li style="box-sizing: border-box; padding: 0px 5px;">69</li><li style="box-sizing: border-box; padding: 0px 5px;">70</li><li style="box-sizing: border-box; padding: 0px 5px;">71</li><li style="box-sizing: border-box; padding: 0px 5px;">72</li><li style="box-sizing: border-box; padding: 0px 5px;">73</li><li style="box-sizing: border-box; padding: 0px 5px;">74</li><li style="box-sizing: border-box; padding: 0px 5px;">75</li><li style="box-sizing: border-box; padding: 0px 5px;">76</li><li style="box-sizing: border-box; padding: 0px 5px;">77</li><li style="box-sizing: border-box; padding: 0px 5px;">78</li><li style="box-sizing: border-box; padding: 0px 5px;">79</li><li style="box-sizing: border-box; padding: 0px 5px;">80</li><li style="box-sizing: border-box; padding: 0px 5px;">81</li><li style="box-sizing: border-box; padding: 0px 5px;">82</li><li style="box-sizing: border-box; padding: 0px 5px;">83</li><li style="box-sizing: border-box; padding: 0px 5px;">84</li><li style="box-sizing: border-box; padding: 0px 5px;">85</li><li style="box-sizing: border-box; padding: 0px 5px;">86</li><li style="box-sizing: border-box; padding: 0px 5px;">87</li><li style="box-sizing: border-box; padding: 0px 5px;">88</li><li style="box-sizing: border-box; padding: 0px 5px;">89</li><li style="box-sizing: border-box; padding: 0px 5px;">90</li><li style="box-sizing: border-box; padding: 0px 5px;">91</li><li style="box-sizing: border-box; padding: 0px 5px;">92</li></ul>

是不是和我们平时的取值很类似，所有的值最终封装到PercentLayoutInfo对象中。

ok，到此我们的属性获取就介绍完成，有了这些属性，是不是onMeasure里面要进行使用呢？

--------------------

####  ####

#### (二) onMeasue中重新计算child的尺寸 ####

可以看到onMeasure中的代码页很少，看来核心的代码都被封装在mHelper的方法中，我们直接看mHelper.adjustChildren方法。

通过注释也能看出，此方法中遍历所有的孩子，通过百分比的属性重新设置其宽度和高度。

首先在widthHint、heightHint保存容器的宽、高，然后遍历所有的孩子，判断其LayoutParams是否是PercentLayoutParams类型，如果是，通过params.getPercentLayoutInfo拿出info对象。

> 是否还记得，上面的分析中，PercentLayoutInfo保存了percent相关属性的值。

如果info不为null，则判断是否需要处理margin；我们直接看fillLayoutParams方法（处理margin也是类似的）。

首先保存原本的width和height，然后重置params的width和height为`(int) (widthHint * widthPercent)`和`(int) (heightHint * heightPercent);`。

到此，其实我们的百分比转换就结束了，理论上就已经实现了对于百分比的支持，不过Google还考虑了一些细节。

我们回到onMeasure方法：

下面还有个mHelper.handleMeasuredStateTooSmall的判断，也就是说，如果你设置的百分比，最终计算出来的MeasuredSize过小的话，会进行一些操作。  
代码如下：

首先遍历所有的孩子，拿出孩子的layoutparams，如果是PercentLayoutParams实例，则取出info。如果info不为null，调用`shouldHandleMeasuredWidthTooSmall`判断：

这里就是判断，如果你设置的measuredWidth或者measureHeight过小的话，并且你在布局文件中layout\_w/h 设置的是WRAP\_CONTENT的话，将params.width / height= ViewGroup.LayoutParams.WRAP\_CONTENT，然后重新测量。

哈，onMeasure终于结束了~~~现在我觉得应该代码结束了吧，尺寸都设置好了，还需要干嘛么，but，你会发现onLayout也重写了，我们又不改变layout规则，在onLayout里面干什么毛线：

继续看`mHelper.restoreOriginalParams`

噗，原来是重新恢复原本的尺寸值，也就是说onMeasure里面的对值进行了改变，测量完成后。在这个地方，将值又恢复成如果布局文件中的值，上面写的都是0。恢复很简单：

你应该没有忘在哪存的把~忘了的话，麻烦Ctrl+F ‘mPreservedParams.width’ 。

也就是说，你去打印上面写法，布局文件中view的`v.getLayoutParams().width`，这个值应该是0。

这里感觉略微不爽~这个0没撒用处呀，还不如不重置~~

好了，到此就分析完了，其实主要就几个步骤：

*  LayoutParams中属性的获取
 *  onMeasure中，改变params.width为百分比计算结果，测量
 *  如果测量值过小且设置的w/h是wrap\_content，重新测量
 *  onLayout中，重置params.w/h为布局文件中编写的值

可以看到，有了RelativeLayout、FrameLayout的扩展，竟然没有LinearLayout几个意思。好在，我们的核心代码都由`PercentLayoutHelper`封装了，自己扩展下LinearLayout也不复杂。

--------------------

###  ###

### 三、实现PercentLinearlayout ###

可能有人会说，有了weight呀，但是weight能做到宽、高同时百分比赋值嘛？

好了，代码很简单，如下：

--------------------

#### （一）PercentLinearLayout ####

<code class="language-java hljs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">package com.juliengenoud.percentsamples;
 
 import android.content.Context;
 import android.content.res.TypedArray;
 import android.support.percent.PercentLayoutHelper;
 import android.util.AttributeSet;
 import android.view.ViewGroup;
 import android.widget.LinearLayout;
 
 /**
 * Created by zhy on 15/6/30.
 */
 public class PercentLinearLayout extends LinearLayout
 {
 
 private PercentLayoutHelper mPercentLayoutHelper;
 
 public PercentLinearLayout(Context context, AttributeSet attrs)
 {
 super(context, attrs);
 
 mPercentLayoutHelper = new PercentLayoutHelper(this);
 }
 
 
 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
 {
 mPercentLayoutHelper.adjustChildren(widthMeasureSpec, heightMeasureSpec);
 super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 if (mPercentLayoutHelper.handleMeasuredStateTooSmall())
 {
 super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 }
 }
 
 @Override
 protected void onLayout(boolean changed, int l, int t, int r, int b)
 {
 super.onLayout(changed, l, t, r, b);
 mPercentLayoutHelper.restoreOriginalParams();
 }
 
 @Override
 public LayoutParams generateLayoutParams(AttributeSet attrs)
 {
 return new LayoutParams(getContext(), attrs);
 }
 
 
 public static class LayoutParams extends LinearLayout.LayoutParams
 implements PercentLayoutHelper.PercentLayoutParams
 {
 private PercentLayoutHelper.PercentLayoutInfo mPercentLayoutInfo;
 
 public LayoutParams(Context c, AttributeSet attrs)
 {
 super(c, attrs);
 mPercentLayoutInfo = PercentLayoutHelper.getPercentLayoutInfo(c, attrs);
 }
 
 @Override
 public PercentLayoutHelper.PercentLayoutInfo getPercentLayoutInfo()
 {
 return mPercentLayoutInfo;
 }
 
 @Override
 protected void setBaseAttributes(TypedArray a, int widthAttr, int heightAttr)
 {
 PercentLayoutHelper.fetchWidthAndHeight(this, a, widthAttr, heightAttr);
 }
 
 public LayoutParams(int width, int height) {
 super(width, height);
 }
 
 
 public LayoutParams(ViewGroup.LayoutParams source) {
 super(source);
 }
 
 public LayoutParams(MarginLayoutParams source) {
 super(source);
 }
 
 }
 
 }
 
 </code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box; padding: 0px 5px;">58</li><li style="box-sizing: border-box; padding: 0px 5px;">59</li><li style="box-sizing: border-box; padding: 0px 5px;">60</li><li style="box-sizing: border-box; padding: 0px 5px;">61</li><li style="box-sizing: border-box; padding: 0px 5px;">62</li><li style="box-sizing: border-box; padding: 0px 5px;">63</li><li style="box-sizing: border-box; padding: 0px 5px;">64</li><li style="box-sizing: border-box; padding: 0px 5px;">65</li><li style="box-sizing: border-box; padding: 0px 5px;">66</li><li style="box-sizing: border-box; padding: 0px 5px;">67</li><li style="box-sizing: border-box; padding: 0px 5px;">68</li><li style="box-sizing: border-box; padding: 0px 5px;">69</li><li style="box-sizing: border-box; padding: 0px 5px;">70</li><li style="box-sizing: border-box; padding: 0px 5px;">71</li><li style="box-sizing: border-box; padding: 0px 5px;">72</li><li style="box-sizing: border-box; padding: 0px 5px;">73</li><li style="box-sizing: border-box; padding: 0px 5px;">74</li><li style="box-sizing: border-box; padding: 0px 5px;">75</li><li style="box-sizing: border-box; padding: 0px 5px;">76</li><li style="box-sizing: border-box; padding: 0px 5px;">77</li><li style="box-sizing: border-box; padding: 0px 5px;">78</li><li style="box-sizing: border-box; padding: 0px 5px;">79</li><li style="box-sizing: border-box; padding: 0px 5px;">80</li><li style="box-sizing: border-box; padding: 0px 5px;">81</li><li style="box-sizing: border-box; padding: 0px 5px;">82</li><li style="box-sizing: border-box; padding: 0px 5px;">83</li><li style="box-sizing: border-box; padding: 0px 5px;">84</li><li style="box-sizing: border-box; padding: 0px 5px;">85</li><li style="box-sizing: border-box; padding: 0px 5px;">86</li><li style="box-sizing: border-box; padding: 0px 5px;">87</li><li style="box-sizing: border-box; padding: 0px 5px;">88</li><li style="box-sizing: border-box; padding: 0px 5px;">89</li><li style="box-sizing: border-box; padding: 0px 5px;">90</li><li style="box-sizing: border-box; padding: 0px 5px;">91</li></ul>

如果你详细看了上面的源码分析，这个代码是不是没撒解释的了~

--------------------

####  ####

### 三、实现PercentLinearlayout ###

可能有人会说，有了weight呀，但是weight能做到宽、高同时百分比赋值嘛？

好了，代码很简单，如下：

--------------------

#### （一）PercentLinearLayout ####

<code class="language-java hljs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">package com.juliengenoud.percentsamples;
 
 import android.content.Context;
 import android.content.res.TypedArray;
 import android.support.percent.PercentLayoutHelper;
 import android.util.AttributeSet;
 import android.view.ViewGroup;
 import android.widget.LinearLayout;
 
 /**
 * Created by zhy on 15/6/30.
 */
 public class PercentLinearLayout extends LinearLayout
 {
 
 private PercentLayoutHelper mPercentLayoutHelper;
 
 public PercentLinearLayout(Context context, AttributeSet attrs)
 {
 super(context, attrs);
 
 mPercentLayoutHelper = new PercentLayoutHelper(this);
 }
 
 
 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
 {
 mPercentLayoutHelper.adjustChildren(widthMeasureSpec, heightMeasureSpec);
 super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 if (mPercentLayoutHelper.handleMeasuredStateTooSmall())
 {
 super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 }
 }
 
 @Override
 protected void onLayout(boolean changed, int l, int t, int r, int b)
 {
 super.onLayout(changed, l, t, r, b);
 mPercentLayoutHelper.restoreOriginalParams();
 }
 
 @Override
 public LayoutParams generateLayoutParams(AttributeSet attrs)
 {
 return new LayoutParams(getContext(), attrs);
 }
 
 
 public static class LayoutParams extends LinearLayout.LayoutParams
 implements PercentLayoutHelper.PercentLayoutParams
 {
 private PercentLayoutHelper.PercentLayoutInfo mPercentLayoutInfo;
 
 public LayoutParams(Context c, AttributeSet attrs)
 {
 super(c, attrs);
 mPercentLayoutInfo = PercentLayoutHelper.getPercentLayoutInfo(c, attrs);
 }
 
 @Override
 public PercentLayoutHelper.PercentLayoutInfo getPercentLayoutInfo()
 {
 return mPercentLayoutInfo;
 }
 
 @Override
 protected void setBaseAttributes(TypedArray a, int widthAttr, int heightAttr)
 {
 PercentLayoutHelper.fetchWidthAndHeight(this, a, widthAttr, heightAttr);
 }
 
 public LayoutParams(int width, int height) {
 super(width, height);
 }
 
 
 public LayoutParams(ViewGroup.LayoutParams source) {
 super(source);
 }
 
 public LayoutParams(MarginLayoutParams source) {
 super(source);
 }
 
 }
 
 }
 
 </code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box; padding: 0px 5px;">58</li><li style="box-sizing: border-box; padding: 0px 5px;">59</li><li style="box-sizing: border-box; padding: 0px 5px;">60</li><li style="box-sizing: border-box; padding: 0px 5px;">61</li><li style="box-sizing: border-box; padding: 0px 5px;">62</li><li style="box-sizing: border-box; padding: 0px 5px;">63</li><li style="box-sizing: border-box; padding: 0px 5px;">64</li><li style="box-sizing: border-box; padding: 0px 5px;">65</li><li style="box-sizing: border-box; padding: 0px 5px;">66</li><li style="box-sizing: border-box; padding: 0px 5px;">67</li><li style="box-sizing: border-box; padding: 0px 5px;">68</li><li style="box-sizing: border-box; padding: 0px 5px;">69</li><li style="box-sizing: border-box; padding: 0px 5px;">70</li><li style="box-sizing: border-box; padding: 0px 5px;">71</li><li style="box-sizing: border-box; padding: 0px 5px;">72</li><li style="box-sizing: border-box; padding: 0px 5px;">73</li><li style="box-sizing: border-box; padding: 0px 5px;">74</li><li style="box-sizing: border-box; padding: 0px 5px;">75</li><li style="box-sizing: border-box; padding: 0px 5px;">76</li><li style="box-sizing: border-box; padding: 0px 5px;">77</li><li style="box-sizing: border-box; padding: 0px 5px;">78</li><li style="box-sizing: border-box; padding: 0px 5px;">79</li><li style="box-sizing: border-box; padding: 0px 5px;">80</li><li style="box-sizing: border-box; padding: 0px 5px;">81</li><li style="box-sizing: border-box; padding: 0px 5px;">82</li><li style="box-sizing: border-box; padding: 0px 5px;">83</li><li style="box-sizing: border-box; padding: 0px 5px;">84</li><li style="box-sizing: border-box; padding: 0px 5px;">85</li><li style="box-sizing: border-box; padding: 0px 5px;">86</li><li style="box-sizing: border-box; padding: 0px 5px;">87</li><li style="box-sizing: border-box; padding: 0px 5px;">88</li><li style="box-sizing: border-box; padding: 0px 5px;">89</li><li style="box-sizing: border-box; padding: 0px 5px;">90</li><li style="box-sizing: border-box; padding: 0px 5px;">91</li></ul>

如果你详细看了上面的源码分析，这个代码是不是没撒解释的了~

--------------------

#### （二）测试布局 ####

我们纵向排列的几个TextView，分别设置宽/高都为百分比，且之间的间隔为5%p。

--------------------

### (三)效果图 ###

![20150630142842665][]

ok，到此，我们使用、源码分析、扩展PercentLinearLayout就结束了。

添加PercentLinearLayout后的地址：[点击查看][Link 1]

扩展下载:[android-percent-support-extend][] 包含android studio, eclipse项目，以及上述源码。

~~have a nice day ~~

[android-percent-support-lib-sample]: https://github.com/JulienGenoud/android-percent-support-lib-sample
[Android]: http://blog.csdn.net/lmj623565791/article/details/45460089
[20150630142729580]: /images/20220718/0301f960b91b407c9b88c29403aab819.png
[20150630142802272]: /images/20220718/4f2954511e1744df9d222adbd2868bea.png
[20150630142842665]: /images/20220718/c7c75f8a3e7c48c187a777747b5cf4f1.png
[Link 1]: https://github.com/hongyangAndroid/android-percent-support-lib-sample
[android-percent-support-extend]: https://github.com/hongyangAndroid/android-percent-support-extend