Android 百分比布局库(percent-support-lib) 使用详解

引库

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

这个库提供了

PercentRelativeLayout、PercentFrameLayout，

支持的属性有：

layout_widthPercent
layout_heightPercent、
layout_marginPercent
layout_marginLeftPercent、
layout_marginTopPercent
layout_marginRightPercent、
layout_marginBottomPercent
layout_marginStartPercent
layout_marginEndPercent
layout_aspectRatio//这个等下就是着重介绍的

这几个属性相信大家都很熟悉
可以看到支持宽高，以及margin。

先上效果

xml文件

<android.support.percent.PercentRelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:id="@+id/view1"
        app:layout_widthPercent="25%"
        app:layout_heightPercent="10%"
        android:background="#e7ed28"/>

    <View
        android:id="@+id/view2"
        android:layout_toRightOf="@id/view1"
        app:layout_widthPercent="25%"
        app:layout_heightPercent="10%"
        android:background="#4fc12d"/>

    <View
        android:id="@+id/view3"
        android:layout_toRightOf="@id/view2"
        app:layout_widthPercent="25%"
        app:layout_heightPercent="10%"
        android:background="#89661f"/>

    <View
        android:layout_toRightOf="@id/view3"
        app:layout_widthPercent="25%"
        app:layout_heightPercent="10%"
        android:background="#333333"/>

    <View
        app:layout_aspectRatio="100%"
        app:layout_widthPercent="50%"
        android:background="#b91321"
        android:id="@+id/view4"
        android:layout_below="@+id/view1"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <View
        app:layout_aspectRatio="178%"
        app:layout_widthPercent="50%"
        android:background="#ef929a"
        android:layout_below="@+id/view4"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />


</android.support.percent.PercentRelativeLayout>

layout_aspectRatio

从字面意思我们就可以知道是屏幕纵横比
屏幕纵横比（Aspect Ratio）: 显示设备中显示图像的横向尺寸与纵向尺寸的比例

 <View
        app:layout_aspectRatio="100%"//这就是1:1
        app:layout_widthPercent="50%"
        android:background="#b91321"
        android:id="@+id/view4"
        android:layout_below="@+id/view1"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

我设置了宽度是50% ，通过设置layout_aspectRatio ,我们就能轻易的得到高度也占50%

也就是 宽（50%）/高=100% 那么高也就是50% 宽高比为（1：1）

下面一个view 宽（50%）/高=178% 那么高也就是 28% （16：9）

改变宽度或者高度就会按照比例缩放

The End
QQ:3355168235