Android 百分比布局详解及实例代码

Android 百分比布局
1.引入：compile "com.android.support:percent:24.0.0"
2.点开源码可以看到，主要有两个布局类PercentFrameLayout和PercentRelativeLayout，一个工具类PercentLayoutHelper。

3.点开布局类比如PercentRelativeLayout的源码，可以看到实现的很简单。

public class PercentRelativeLayout extends RelativeLayout {private final PercentLayoutHelper mHelper = new PercentLayoutHelper（this）;/**省略若干行构造方法之类的代码**/@Overrideprotected void onMeasure（int widthMeasureSpec, int heightMeasureSpec） {//重点在这mHelper.adjustChildren（widthMeasureSpec, heightMeasureSpec）;super.onMeasure（widthMeasureSpec, heightMeasureSpec）;if （mHelper.handleMeasuredStateTooSmall（）） {super.onMeasure（widthMeasureSpec, heightMeasureSpec）;}}@Overrideprotected void onLayout（boolean changed, int left, int top, int right, int bottom） {super.onLayout（changed, left, top, right, bottom）;mHelper.restoreOriginalParams（）;}public static class LayoutParams extends RelativeLayout.LayoutParamsimplements PercentLayoutHelper.PercentLayoutParams {private PercentLayoutHelper.PercentLayoutInfo mPercentLayoutInfo;public LayoutParams（Context c, AttributeSet attrs） {super（c, attrs）;mPercentLayoutInfo = PercentLayoutHelper.getPercentLayoutInfo（c, attrs）;} /**省略若干行构造方法之类的代码**/@Overridepublic PercentLayoutHelper.PercentLayoutInfo getPercentLayoutInfo（） {if （mPercentLayoutInfo == null） {mPercentLayoutInfo = new PercentLayoutHelper.PercentLayoutInfo（）;}return mPercentLayoutInfo;}@Overrideprotected void setBaseAttributes（TypedArray a, int widthAttr, int heightAttr） {PercentLayoutHelper.fetchWidthAndHeight（this, a, widthAttr, heightAttr）;}}}

就是在onMeasure和onLayout里面调用了PercentLayoutHelper 的一些方法，另外在里面定义了自己的LayoutParams ，而这个LayoutParams 也相当简单。

这里关键的一行代码是在onMeasure方法里面，mHelper.adjustChildren（widthMeasureSpec, heightMeasureSpec）;通过PercentLayoutHelper 的adjustChildren 遍历子view来设置子view的宽高，宽高在PercentLayoutHelper 的内部类PercentLayoutInfo通过在布局文件中设置的值计算好了。

public void adjustChildren（int widthMeasureSpec, int heightMeasureSpec） {// Calculate available space, accounting for host"s paddingsint widthHint = View.MeasureSpec.getSize（widthMeasureSpec） - mHost.getPaddingLeft（）- mHost.getPaddingRight（）;int heightHint = View.MeasureSpec.getSize（heightMeasureSpec） - mHost.getPaddingTop（）- mHost.getPaddingBottom（）;for （int i = 0, N = mHost.getChildCount（）; i < N; i++） {//遍历子view来设置 子view的宽高View view = mHost.getChildAt（i）;ViewGroup.LayoutParams params = view.getLayoutParams（）;if （DEBUG） {Log.d（TAG, "should adjust " + view + " " + params）;}if （params instanceof PercentLayoutParams） {PercentLayoutInfo info =（（PercentLayoutParams） params）.getPercentLayoutInfo（）;if （info ！= null） {if （params instanceof ViewGroup.MarginLayoutParams） {info.fillMarginLayoutParams（view, （ViewGroup.MarginLayoutParams） params,widthHint, heightHint）;} else {info.fillLayoutParams（params, widthHint, heightHint）;}}}}}

4.布局中的使用方法：以PercentRelativeLayout为例

<android.support.percent.PercentRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@color/background_color"><TextViewandroid:id="@+id/mian_tab_name"android:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:textColor="@color/back_green"android:textSize="15sp"android:text="name"/><ImageViewapp:layout_widthPercent="50%"app:layout_heightPercent="50%"android:src="@drawable/ic_launcher_icon"android:scaleType="fitXY"android:layout_below="@+id/mian_tab_name"android:background="@color/black"/></android.support.percent.PercentRelativeLayout>

引入xmlns:app的命名空间，然后app:layout_widthPercent="50%"就可以设置宽高的百分比了。相当简单。
5.不过在使用的过程中，可能会有一些其他的需求，比如app:layout_widthPercent="50%",app:layout_heightPercent="50%"都是相对于屏幕的宽高的，假如要显示一张正方形的图片，以宽的50%为准呢？这个时候就可以这样写了：

<ImageViewapp:layout_widthPercent="50%"app:layout_aspectRatio="100%"android:src="@drawable/ic_launcher_icon"android:scaleType="fitXY"android:layout_below="@+id/mian_tab_name"android:background="@color/CS_black"/>

使用layout_aspectRatio属性，设置app:layout_aspectRatio="100%"，layout_aspectRatio就是宽高比。这个时候就不要设置app:layout_heightPercent属性了。在PercentLayoutHelper 里面，源代码如下：

public void fillLayoutParams（ViewGroup.LayoutParams params, int widthHint,int heightHint） {// Preserve the original layout params, so we can restore them after the measure step.mPreservedParams.width = params.width;mPreservedParams.height = params.height;// We assume that width/height set to 0 means that value was unset. This might not// necessarily be true, as the user might explicitly set it to 0. However, we use this// information only for the aspect ratio. If the user set the aspect ratio attribute,// it means they accept or soon discover that it will be disregarded.final boolean widthNotSet =（mPreservedParams.mIsWidthComputedFromAspectRatio|| mPreservedParams.width == 0） && （widthPercent < 0）;final boolean heightNotSet =（mPreservedParams.mIsHeightComputedFromAspectRatio|| mPreservedParams.height == 0） && （heightPercent < 0）;if （widthPercent >= 0） {params.width = （int） （widthHint * widthPercent）;}if （heightPercent >= 0） {params.height = （int） （heightHint * heightPercent）;}//这一段代码是关键，如果aspectRatio >=0，aspectRatio是宽高比if （aspectRatio >= 0） {if （widthNotSet） { //如果宽没有设置，就以高为准params.width = （int） （params.height * aspectRatio）;// Keep track that we"ve filled the width based on the height and aspect ratio.mPreservedParams.mIsWidthComputedFromAspectRatio = true;}if （heightNotSet） {//如果高没有设置，就以宽为准params.height = （int） （params.width / aspectRatio）;// Keep track that we"ve filled the height based on the width and aspect ratio.mPreservedParams.mIsHeightComputedFromAspectRatio = true;}}if （DEBUG） {Log.d（TAG, "after fillLayoutParams: （" + params.width + ", " + params.height + "）"）;}}

6.另外，假如我们要定义自己的PercentLinearLayout，基本可以直接改一下名字，继承自LinearLayout就好了：public class PercentLinearLayout extends LinearLayout ,在仿照PercentRelativeLayout里面的LayoutParams定义一个自己的LayoutParams就好了。

不过官方为什么没有直接提供一个PercentLinearLayout 类，而只提供了两个PercentFrameLayout和PercentRelativeLayout呢？或许是由于LinearLayout 本身就有权重属性，自带百分比效果了。
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！