Android開發之百分比布局庫

為瞭解決android手機適配問題，我們經常想如果可以按照百分比的方式進行介面布局，這樣適配各種螢幕就簡單多了吧！現在Google正式提供百分比布局支援庫（android-support-percent-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即可。

使用：

關於使用，其實及其簡單，並且github上也有例子，android-percent-support-lib-sample。

使用Android studio在build.gradle添加以下資訊就可以擷取支援庫，當然了，如果你沒有下載到該支援庫會提示你下載。

{5330C3E9-D43A-40E0-A247-83C217BE9A84}

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">     <TextView        android:id="@+id/row_one_item_one"        android:layout_width="0dp"        android:layout_height="0dp"        android:layout_alignParentTop="true"        android:background="#7700ff00"        android:text="w:70%,h:20%"        android:gravity="center"        app:layout_heightPercent="20%"        app:layout_widthPercent="70%"/>     <TextView        android:id="@+id/row_one_item_two"        android:layout_width="0dp"        android:layout_height="0dp"        android:layout_toRightOf="@+id/row_one_item_one"        android:background="#396190"        android:text="w:30%,h:20%"        app:layout_heightPercent="20%"        android:gravity="center"        app:layout_widthPercent="30%"/>      <ImageView        android:id="@+id/row_two_item_one"        android:layout_width="match_parent"        android:layout_height="0dp"        android:scaleType="centerCrop"        android:layout_below="@+id/row_one_item_one"        android:background="#d89695"        app:layout_heightPercent="70%"/>     <TextView        android:layout_width="0dp"        android:layout_height="0dp"        android:layout_below="@id/row_two_item_one"        android:background="#770000ff"        android:gravity="center"        android:text="width:100%,height:10%"        app:layout_heightPercent="10%"        app:layout_widthPercent="100%"/> </android.support.percent.PercentRelativeLayout

效果圖如下

 

 

因為沒有LinearLayout我們可以自己來自訂。剛好在網上看到有自訂好的PercentLinearlayout，分享給大家

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

使用效果如下：