PercentLibrary是Google在15年推出的一个支持百分比布局的类库,支持的相对布局和帧布局,不过网上有的人已经扩展出支持线性布局。这个类库的使用是非常的简单的,我们需要了解的只有两个类:android.support.percent.PercentRelativeLayout和android.support.percent.PercentFrameLayout分别对于上面的两个布局。
两个布局都是继承自对应的基本布局,都拥有下面的属性:
layout_widthPercent
layout_heightPercen
layout_marginPercent
layout_marginLeftPercent
layout_marginTopPercent
layout_marginRightPercent
layout_marginBottomPercent
layout_marginStartPercent
layout_marginEndPercent
layout_aspectRatio
layout_heightPercen
layout_marginPercent
layout_marginLeftPercent
layout_marginTopPercent
layout_marginRightPercent
layout_marginBottomPercent
layout_marginStartPercent
layout_marginEndPercent
layout_aspectRatio
其实很简单,大致就3类:宽高、margin、宽高比。
使用步骤:
1、在gradle中引入类库:compile 'com.android.support:percent:25.3.1'
2、将对应的相对布局和帧布局替换成对应的百分比布局
3、将百分比布局下的子布局的宽高设为0,使用上面的属性设置其宽高。
因为非常的简单,这里我直接贴出一个效果图然后贴出布局代码,java中不需要编写任何的代码。
效果图:
对应的代码:
<?xml version="1.0" encoding="utf-8"?>
<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="#229961">
<ScrollView
android:id="@+id/left_line"
android:layout_width="0dp"
android:layout_height="match_parent"
app:layout_widthPercent="49%">
<android.support.percent.PercentRelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="@+id/imgv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="@drawable/first"
app:layout_heightPercent="30%"
app:layout_marginBottomPercent="1%" />
<ImageView
android:id="@+id/imgv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/imgv1"
android:scaleType="fitXY"
android:src="@drawable/secend"
app:layout_heightPercent="30%" />
<ImageView
android:id="@+id/imgv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/imgv2"
android:scaleType="fitXY"
app:layout_marginTopPercent="1%"
android:src="@drawable/third"
app:layout_heightPercent="30%" />
<ImageView
android:id="@+id/imgv4"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_below="@+id/imgv3"
android:scaleType="fitXY"
android:src="@drawable/four" app:layout_marginTopPercent="1%"
app:layout_heightPercent="30%" />
<ImageView
android:id="@+id/imgv5"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_below="@+id/imgv4"
android:scaleType="fitXY"
android:src="@drawable/five"
android:background="#ccc"
app:layout_marginTopPercent="1%"
app:layout_heightPercent="30%" />
</android.support.percent.PercentRelativeLayout>
</ScrollView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toLeftOf="@+id/right_line"
android:layout_toRightOf="@id/left_line"
android:background="@drawable/background_gradient">
</LinearLayout>
<ScrollView
android:id="@+id/right_line"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
app:layout_widthPercent="49%">
<android.support.percent.PercentRelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="@+id/imgv6"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="fitXY"
android:src="@drawable/six"
app:layout_aspectRatio="70%"
app:layout_widthPercent="100%" />
<ImageView
android:id="@+id/imgv7"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_below="@+id/imgv6"
android:scaleType="fitXY"
android:src="@drawable/seven"
app:layout_aspectRatio="70%"
app:layout_widthPercent="100%" />
<ImageView
android:id="@+id/imgv8"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_below="@+id/imgv7"
android:layout_centerHorizontal="true"
android:scaleType="fitXY"
android:src="@drawable/eight"
app:layout_aspectRatio="70%"
app:layout_widthPercent="70%" />
<ImageView
android:id="@+id/imgv9"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_below="@+id/imgv8"
android:scaleType="fitXY"
android:src="@drawable/nine"
app:layout_heightPercent="50%"
app:layout_widthPercent="100%" />
<ImageView
android:id="@+id/imgv10"
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_below="@+id/imgv9"
android:scaleType="fitXY"
android:src="@drawable/ten" />
</android.support.percent.PercentRelativeLayout>
</ScrollView>
</android.support.percent.PercentRelativeLayout>
最近去官网查看发现,现在google推荐使用ConstraintLayout来代替该类库。尽管如此,我们还是有必要知道有这个类库的,而以后我会给ConstraintLayout的使用详细的介绍给大家。最后贴上demo吧:点击打开链接
欢迎关注我的微信公众号“android教科书”,最新最好的文章第一时间送到手!可以扫描下面的二维码来关注: