Android百分比布局

  以往在写网页中我们经常用到百分比布局，现在在Android中我们也可以百分比布局，为屏幕适配带来一些方便。在使用时导入android-percent-support-lib-sample包。

使用说明：
1.需要在build.gradle文件当中导入以下内容：
dependencies {
    compile 'com.android.support:percent:24.4.0'
}
2.这个库提供了包android.support.percent
这里包括了两种布局：
    PercentRelativeLayout、PercentFrameLayout，通过名字就可以看出，这是继承自FrameLayout和RelativeLayout两个容器类；
android.support.percent.PercentRelativeLayout
android.support.percent.PercentFrameLayout

支持的属性有：
    layout_widthPercent、layout_heightPercent、
    layout_marginPercent、layout_marginLeftPercent、
    layout_marginTopPercent、layout_marginRightPercent、
    layout_marginBottomPercent、layout_marginStartPercent、layout_marginEndPercent。

可以看到百分比布局支持宽高，以及margin属性。
只要在开发过程中使用PercentRelativeLayout、PercentFrameLayout替换FrameLayout、RelativeLayout。

实例：

[html] view plain copy

print?

1. <android.support.percent.PercentRelativeLayout  
2.     xmlns:android="http://schemas./apk/res/android"  
3.     xmlns:app="http://schemas./apk/res-auto"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="match_parent"  
6.     android:orientation="vertical">  
7.     <TextView  
8.         android:id="@+id/tv1"  
9.         android:layout_width="0dp"  
10.         android:layout_height="0dp"  
11.         app:layout_heightPercent="20%"  
12.         app:layout_widthPercent="30%"  
13.         android:background="#00ff00"  
14.         android:gravity="center"  
15.         android:text="w-30%,h-20%"/>  
16.     <TextView  
17.         android:id="@+id/tv2"  
18.         android:layout_width="0dp"  
19.         android:layout_height="0dp"  
20.         app:layout_heightPercent="20%"  
21.         app:layout_widthPercent="70%"  
22.         android:background="#ff0000"  
23.         android:layout_toRightOf="@+id/tv1"  
24.         android:gravity="center"  
25.         android:text="w-70%,h-20%"/>  
26.   
27.     <TextView  
28.         android:id="@+id/tv3"  
29.         app:layout_heightPercent="50%"  
30.         app:layout_widthPercent="50%"  
31.         android:layout_alignParentBottom="true"  
32.         android:layout_width="0dp"  
33.         android:background="#ffff00"  
34.         android:layout_height="0dp"  
35.         android:gravity="center"  
36.         android:text="w-50%,h-50%"/>  
37. </android.support.percent.PercentRelativeLayout>  

效果：

实例二：

[html] view plain copy

print?

1. <android.support.percent.PercentFrameLayout  
2.     xmlns:android="http://schemas./apk/res/android"  
3.     xmlns:app="http://schemas./apk/res-auto"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="match_parent">  
6.     <TextView  
7.         android:id="@+id/tv1"  
8.         android:layout_width="0dp"  
9.         android:layout_height="0dp"  
10.         app:layout_heightPercent="20%"  
11.         app:layout_widthPercent="50%"  
12.         android:background="#ff00ff"  
13.         />  
14.   
15.     <TextView  
16.         android:id="@+id/tv2"  
17.         android:layout_width="0dp"  
18.         android:layout_height="0dp"  
19.         app:layout_heightPercent="20%"  
20.         app:layout_widthPercent="50%"  
21.         android:layout_gravity="right|top"  
22.         android:background="#00ffff"/>  
23.   
24.     <TextView  
25.         android:id="@+id/tv3"  
26.         android:layout_width="0dp"  
27.         android:layout_height="0dp"  
28.         app:layout_heightPercent="20%"  
29.         app:layout_widthPercent="80%"  
30.         android:background="#ffff00"  
31.         app:layout_marginTopPercent="30%"/>  
32.   
33.     <ImageView  
34.         android:id="@+id/iv"  
35.         android:layout_width="0dp"  
36.         android:layout_height="0dp"  
37.         app:layout_marginTopPercent="50%"  
38.         app:layout_heightPercent="50%"  
39.         app:layout_widthPercent="100%"  
40.         android:src="@mipmap/ali"  
41.         android:scaleType="centerCrop"/>  
42. </android.support.percent.PercentFrameLayout>  

可以通过自定义实现线性百分比布局：

[java] view plain copy

print?

1. public class PercentLinearLayout extends LinearLayout {  
2.     private PercentLayoutHelper mPercentLayoutHelper;  
3.   
4.     public PercentLinearLayout(Context context, AttributeSet attrs) {  
5.         super(context, attrs);  
6.   
7.         mPercentLayoutHelper = new PercentLayoutHelper(this);  
8.     }  
9.     @Override  
10.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
11.         mPercentLayoutHelper.adjustChildren(widthMeasureSpec, heightMeasureSpec);  
12.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);  
13.         if (mPercentLayoutHelper.handleMeasuredStateTooSmall()) {  
14.             super.onMeasure(widthMeasureSpec, heightMeasureSpec);  
15.         }  
16.     }  
17.     @Override  
18.     protected void onLayout(boolean changed, int l, int t, int r, int b) {  
19.         super.onLayout(changed, l, t, r, b);  
20.         mPercentLayoutHelper.restoreOriginalParams();  
21.     }  
22.     @Override  
23.     public LayoutParams generateLayoutParams(AttributeSet attrs) {  
24.         return new LayoutParams(getContext(), attrs);  
25.     }  
26.   
27.     public static class LayoutParams extends LinearLayout.LayoutParams  
28.             implements PercentLayoutHelper.PercentLayoutParams {  
29.         private PercentLayoutHelper.PercentLayoutInfo mPercentLayoutInfo;  
30.   
31.         public LayoutParams(Context c, AttributeSet attrs) {  
32.             super(c, attrs);  
33.             mPercentLayoutInfo = PercentLayoutHelper.getPercentLayoutInfo(c, attrs);  
34.         }  
35.   
36.         @Override  
37.         public PercentLayoutHelper.PercentLayoutInfo getPercentLayoutInfo() {  
38.             return mPercentLayoutInfo;  
39.         }  
40.   
41.         @Override  
42.         protected void setBaseAttributes(TypedArray a, int widthAttr, int heightAttr) {  
43.             PercentLayoutHelper.fetchWidthAndHeight(this, a, widthAttr, heightAttr);  
44.         }  
45.   
46.         public LayoutParams(int width, int height) {  
47.             super(width, height);  
48.         }  
49.   
50.   
51.         public LayoutParams(ViewGroup.LayoutParams source) {  
52.             super(source);  
53.         }  
54.   
55.         public LayoutParams(MarginLayoutParams source) {  
56.             super(source);  
57.         }  
58.   
59.     }  
60. }  

[html] view plain copy

print?

1. <com.xinyuliu.imageproject.custom.PercentLinearLayout  
2.     xmlns:android="http://schemas./apk/res/android"  
3.     xmlns:app="http://schemas./apk/res-auto"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="match_parent"  
6.     android:orientation="vertical">  
7.     <TextView  
8.         android:id="@+id/tv1"  
9.         android:layout_width="0dp"  
10.         android:layout_height="0dp"  
11.         app:layout_heightPercent="10%"  
12.         app:layout_widthPercent="40%"  
13.         android:background="#00ff00"  
14.         app:layout_marginBottomPercent="5%"/>  
15.   
16.     <TextView  
17.         android:id="@+id/tv2"  
18.         android:layout_width="0dp"  
19.         android:layout_height="0dp"  
20.         app:layout_heightPercent="10%"  
21.         app:layout_widthPercent="60%"  
22.         android:background="#ff0000"  
23.         />  
24.     <TextView  
25.         android:layout_width="0dp"  
26.         android:layout_height="0dp"  
27.         app:layout_heightPercent="10%"  
28.         app:layout_widthPercent="80%"  
29.         app:layout_marginTopPercent="5%"  
30.         android:background="#0000ff"/>  
31. </com.xinyuliu.imageproject.custom.PercentLinearLayout>  

通过导入com.zhy.android.percent.support.PercentFrameLayout实现居中布局：

[html] view plain copy

print?

1. <com.zhy.android.percent.support.PercentFrameLayout  
2.     xmlns:android="http://schemas./apk/res/android"  
3.     xmlns:app="http://schemas./apk/res-auto"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="match_parent">  
6.   
7.   
8.     <com.zhy.android.percent.support.PercentFrameLayout  
9.         android:id="@+id/percentflayout01"  
10.         android:layout_width="0dp"  
11.         android:layout_height="0dp"  
12.         android:layout_gravity="center"  
13.         app:layout_heightPercent="50%w"  
14.         app:layout_widthPercent="50%w"  
15.         android:background="#ff0000">  
16.         <TextView  
17.             android:layout_width="0dp"  
18.             android:layout_height="0dp"  
19.             app:layout_heightPercent="25%w"  
20.             app:layout_widthPercent="25%w"  
21.             android:layout_gravity="center"  
22.             android:background="#00ff00"/>  
23.     </com.zhy.android.percent.support.PercentFrameLayout>  
24.   
25.   
26. </com.zhy.android.percent.support.PercentFrameLayout>