Android 百分比佈局(percent-support-lib)的使用及源碼詳解

時間 2019-12-07

標籤 android 百分比佈局 percent support lib 使用源碼詳解欄目 Android 简体版

原文原文鏈接

百分比佈局提供的了兩種佈局PercentFrameLayout和PercentRelativeLayout，很明顯前者繼承於FrameLayout，後者繼承於RelativeLayout，因此父類的各類屬性仍是可使用。百分比佈局給咱們提供瞭如下特有的屬性：android

app:layout_heightPercent
app:layout_widthPercent
app:layout_marginPercent
app:layout_marginTopPercent
app:layout_marginBottomPercent
app:layout_marginLeftPercent
app:layout_marginRightPercent
app:layout_marginStartPercent
app:layout_marginEndPercentgit

app:layout_aspectRatiogithub

也就是說咱們寬高和各類margin均可以用百分比表示app

當使用百分比佈局時，就沒用必要再去指定寬高（layout_width和layout_height），只須要設置layout_widthPercent和layout_heightPercent就能夠了。ide

若是經過百分比獲取的寬高過小或者想要更大的話，能夠把layout_width和layout_height指定爲wrap_content。源碼分析

layout_aspectRatio表明橫縱比，好比想要把寬高比例設置爲2:10，如下代碼示例佈局

<TextView fetch

android:id="@+id/tv2" this

android:layout_width="0dp" .net

android:layout_height="0dp"

android:layout_toRightOf="@id/tv1"

android:background="#D5AD34"

android:gravity="center"

android:text="aspectRatio:2:10,height:100%"

android:textColor="@android:color/white"

app:layout_aspectRatio="20%"

app:layout_heightPercent="100%" />

app:layout_aspectRatio設置爲20%，這個值是寬高的比值，這裏就只是指定了app:layout_heightPercent，寬度就很根據這個比值計算出來。

百分比佈局的導入

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

PercentFrameLayout使用

<?xml version="1.0" encoding="utf-8"?>

<android.support.percent.PercentFrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

tools:context="com.lzy.test.MainActivity">

<TextView

android:layout_width="0dp"

android:layout_height="0dp"

android:layout_gravity="left|top"

android:background="#53DBB9"

android:gravity="center"

android:text="width:30%,height:50%"

app:layout_heightPercent="50%"

app:layout_widthPercent="30%" />

<TextView

android:layout_width="0dp"

android:layout_height="0dp"

android:layout_gravity="right|top"

android:background="#4400ff00"

android:gravity="center"

android:text="width:70%,height:20%"

app:layout_heightPercent="20%"

app:layout_widthPercent="70%" />

<TextView

android:layout_width="0dp"

android:layout_height="0dp"

android:background="#327217"

android:gravity="center"

android:text="width:70%,height:20%\nmarginTop:20%,marginLeft:30%"

app:layout_heightPercent="30%"

app:layout_marginLeftPercent="30%"

app:layout_marginTopPercent="20%"

app:layout_widthPercent="70%" />

<TextView

android:layout_width="0dp"

android:layout_height="0dp"

android:background="#DF65A2"

android:gravity="center"

android:text="width:100%,height:40%\nmarginTop:50%"

app:layout_heightPercent="40%"

app:layout_marginTopPercent="50%"

app:layout_widthPercent="100%" />

<TextView

android:layout_width="0dp"

android:layout_height="0dp"

android:layout_gravity="bottom"

android:background="#770000ff"

android:gravity="center"

android:text="width:100%,height:10%"

app:layout_heightPercent="10%"

app:layout_widthPercent="100%" />

</android.support.percent.PercentFrameLayout>

PercentRelativeLayout

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

tools:context="com.lzy.test.Main2Activity">

<View

android:layout_width="match_parent"

android:layout_height="80dp"

android:background="#1A807C" />

<android.support.percent.PercentRelativeLayout

android:layout_width="match_parent"

android:layout_height="match_parent">

<TextView

android:id="@+id/tv1"

android:background="#B5256D"

android:gravity="center"

android:text="width:60%,height:50%"

android:textColor="@android:color/white"

app:layout_heightPercent="50%"

app:layout_widthPercent="60%" />

<TextView

android:id="@+id/tv2"

android:layout_width="0dp"

android:layout_height="0dp"

android:layout_toRightOf="@id/tv1"

android:background="#D5AD34"

android:gravity="center"

android:text="aspectRatio:2:10,height:100%"

android:textColor="@android:color/white"

app:layout_aspectRatio="20%"

app:layout_heightPercent="100%" />

<android.support.percent.PercentRelativeLayout

android:layout_width="0dp"

android:layout_height="0dp"

android:layout_below="@id/tv1"

app:layout_heightPercent="50%"

app:layout_widthPercent="60%">

<TextView

android:layout_width="0dp"

android:layout_height="0dp"

android:background="#4E3ED7"

android:gravity="center"

android:text="width:40%,height:100%"

android:textColor="@android:color/white"

app:layout_heightPercent="100%"

app:layout_widthPercent="40%" />

<TextView

android:layout_width="0dp"

android:layout_height="0dp"

android:layout_alignParentRight="true"

android:background="#93E684"

android:gravity="center"

android:text="width:60%,height:100%"

android:textColor="@android:color/white"

app:layout_heightPercent="100%"

app:layout_widthPercent="60%" />

</android.support.percent.PercentRelativeLayout>

</LinearLayout>

源碼分析

看看PercentFrameLayout的主要源碼，其中省略了部分代碼

public class PercentFrameLayout extends FrameLayout {
private final PercentLayoutHelper mHelper = new PercentLayoutHelper(this);

public PercentFrameLayout(Context context) {
super(context);
}

@Override
public LayoutParams generateLayoutParams(AttributeSet attrs) {
return new LayoutParams(getContext(), attrs);
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
mHelper.adjustChildren(widthMeasureSpec, heightMeasureSpec);
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
if (mHelper.handleMeasuredStateTooSmall()) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}

@Override
protected 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 FrameLayout.LayoutParams
implements PercentLayoutHelper.PercentLayoutParams {
private PercentLayoutHelper.PercentLayoutInfo mPercentLayoutInfo;

public LayoutParams(Context c, AttributeSet attrs) {
super(c, attrs);
mPercentLayoutInfo = PercentLayoutHelper.getPercentLayoutInfo(c, attrs);
}

public LayoutParams(LayoutParams source) {
this((FrameLayout.LayoutParams) source);
mPercentLayoutInfo = source.mPercentLayoutInfo;
}

@Override
public PercentLayoutHelper.PercentLayoutInfo getPercentLayoutInfo() {
if (mPercentLayoutInfo == null) {
mPercentLayoutInfo = new PercentLayoutHelper.PercentLayoutInfo();
}

return mPercentLayoutInfo;
}

@Override
protected void setBaseAttributes(TypedArray a, int widthAttr, int heightAttr) {
PercentLayoutHelper.fetchWidthAndHeight(this, a, widthAttr, heightAttr);
}
}
}

爲了得到PercentFrameLayout的子view裏面的自定義屬性，因此咱們重寫了generateLayoutParams方法，把它的返回值修改成咱們本身定義的LayoutParams，就至關於把原來的LayoutParams包裝了一層，在此過程當中就能夠截取到屬性值，找出子view裏面的自定義屬性，這些自定義屬性就是設置的寬高百分比。

這個自定義的LayoutParams是繼承於FrameLayout.LayoutParams，同時實現了PercentLayoutHelper.PercentLayoutParams接口

public interface PercentLayoutParams {

PercentLayoutInfo getPercentLayoutInfo();

}

這個接口就一個返回PercentLayoutInfo的方法，PercentLayoutInfo類就是存儲了各類百分比的信息。

public LayoutParams(Context c, AttributeSet attrs) {

super(c, attrs);

mPercentLayoutInfo = PercentLayoutHelper.getPercentLayoutInfo(c, attrs);

}

這裏顯然就是獲取attrs裏面的各類百分比信息，而後存儲在PercentLayoutInfo裏面，沒什麼好說的，點進去看就是各類獲取自定義屬性的方法，和咱們日常的差很少。

下面看看onMeasure方法

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

mHelper.adjustChildren(widthMeasureSpec, heightMeasureSpec);

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

if (mHelper.handleMeasuredStateTooSmall()) {

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

}

首先是mHelper.adjustChildren(widthMeasureSpec, heightMeasureSpec)，點進去看看

public void adjustChildren(int widthMeasureSpec, int heightMeasureSpec) {

int widthHint = View.MeasureSpec.getSize(widthMeasureSpec);
int heightHint = View.MeasureSpec.getSize(heightMeasureSpec);
for (int i = 0, N = mHost.getChildCount(); i < N; i++) {
View view = mHost.getChildAt(i);
ViewGroup.LayoutParams params = view.getLayoutParams();

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);
}
}
}
}
}

首先這裏計算出PercentFrameLayout的寬高，經過百分比計算子view寬高固然須要這個PercentFrameLayout的寬高咯，接着遍歷裏面的因此子view，判斷是不是PercentLayoutParams，若是是就能夠調用getPercentLayoutInfo方法來獲取到PercentLayoutInfo，最後拿着裏面的百分比信息去計算出實際的大小，這裏有兩種方法來計算，一個是有margin和沒有margin的，其實都差很少

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);
}

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;
}
}
}

首先是經過mPreservedParams記錄了子view原始的寬高，而後判斷是否設置了寬高，這個在後面aspectRatio用，接着就是根據百分比計算出寬高了，最後根據設置的橫縱比aspectRatio來計算寬高。這樣就根據百分比來從新設置了寬高，大功告成了！

好了，這裏面就完成了，回到onMeasure方法，這裏

if (mHelper.handleMeasuredStateTooSmall()) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}

很顯然，就是判斷測量的寬高是否是過小，若是過小的話，就會使用wrap_content來從新測量，這裏就不具體看了。

@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
mHelper.restoreOriginalParams();
}

這裏調用了一個 mHelper.restoreOriginalParams()方法，做用是恢復原始的參數值，在上面的fillLayoutParams方法中不是把原始的值存儲到mPreservedParams中了嗎，目的就是在這裏用於恢復的，由於在利用百分比計算寬高時已經改變了它原始的值。至於爲何要恢復這個原始的值，具體我也不太清楚，畢竟也是菜鳥一個~~分析就到此完畢了。

其實PercentRelativeLayout源碼和PercentFrameLayout基本都差很少，只是其中自定義的LayoutParams是繼承於RelativeLayout的LayoutParams，因此你想要實現LinearLayout的百分比佈局，也只須要把自定義的LayoutParams繼承於LinearLayout的LayoutParams就OK了

百分比佈局的擴展地址：https://github.com/hongyangAndroid/android-percent-support-extend