Android布局“小众派”——PercentFrameLayo

前言

Google为开发者提供了多种布局方案，以应对复杂的用户界面，简化了开发者的工作。那么除了常用的布局之外，还有哪些比较“小众”的布局呢？今天我们来回顾一下常用布局，认识PercentFrameLayout&PercentRelativeLayout

Android常用布局

• LinearLayout 线性布局
• RelativeLayout 相对布局
• FrameLayout 帧布局

LinearLayout & RelativeLayout回顾

LinearLayout 的小技巧：

1. 利用LinearLayout自带属性为其子View添加分割线：

android:divider="@drawable/divider"
android:showDividers="beginning|middle|end">

divider.xml内容如下：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/colorAccent" />
    <size android:height="0.5dp" />
</shape>

2. layout_weight属性
   在使用weight属性时，把对应方向上的height/width指定为0dp（具体看LinearLayout的方向）；需要将子View填满剩余布局时，指定该View的 layout_weight属性为1即可。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
    <TextView
        android:layout_width="60dp"
        android:layout_height="50dp"
        android:gravity="center"
        android:text="附件" />
    <EditText
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:layout_weight="1" />
    <TextView
        android:layout_width="60dp"
        android:layout_height="50dp"
        android:gravity="center"
        android:text="发送" />
</LinearLayout>

RelativeLayout&LinearLayout 性能对比？

1.RelativeLayout会让子View调用2次onMeasure，LinearLayout 在有weight时，也会调用子View2次onMeasure
2.RelativeLayout的子View如果高度和RelativeLayout不同，则会引发效率问题，当子View很复杂时，这个问题会更加严重。如果可以，尽量使用padding代替margin。
3.在不影响层级深度的情况下,使用LinearLayout和FrameLayout而不是RelativeLayout。
详情见：Android中RelativeLayout和LinearLayout性能分析

今日主菜：

Android布局“小众派”——PercentFrameLayout

有了这个布局，我们就可以轻易的实现任意比例分割的布局了，但是为什么说是小众派呢，一是因为因为LinearLayout的替代性，二是这个布局是在support library下的，需要单独引入使用：
compile 'com.android.support:percent:25.0.1'
正如名字，它是FrameLayout的子类，也就是说它具有了FrameLayout的属性。

percentFrameLayout.png

PercentFrameLayout用法：

<android.support.percent.PercentFrameLayout
         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">

     <ImageView
         app:layout_widthPercent="50%"
         app:layout_heightPercent="50%"
         app:layout_marginTopPercent="25%"
         app:layout_marginLeftPercent="25%"/>

 </android.support.percent.PercentFrameLayout>

这里一定要定义app命名空间，用来引用PercentFrameLayout的属性

其他属性：

  app:layout_marginRightPercent
  app:layout_marginBottomPercent
  app:layout_marginStartPercent
  app:layout_marginEndPercent
  app:layout_aspectRatio

细心的同学可能发现了，上面的ImageView没有定义宽高啊！?是的，在这里并不需要，但是，可以在某些占百分比比价笑小的空间中加入layout_width/height="wrap_content，防止太小的百分比致使该控件无法正常显示，保证能显示出内容。

app:layout_aspectRatio 这个属性有点陌生，其实它是屏幕的宽高比，如：

     android:layout_width="300dp"
     app:layout_aspectRatio="200%"

PercentFrameLayout.xml实例

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:background="@android:color/holo_green_light"
        app:layout_heightPercent="45%"
        app:layout_widthPercent="100%" />

    <Button
        android:layout_gravity="center"
        android:background="@android:color/darker_gray"
        app:layout_heightPercent="10%"
        app:layout_widthPercent="100%" />

    <Button
        android:layout_gravity="bottom|left"
        android:background="@android:color/holo_blue_dark"
        app:layout_heightPercent="45%"
        app:layout_widthPercent="50%" />

    <Button
        android:layout_gravity="bottom|right"
        android:background="@android:color/holo_blue_bright"
        app:layout_heightPercent="45%"
        app:layout_marginLeftPercent="30%"
        app:layout_widthPercent="50%" />

</android.support.percent.PercentFrameLayout>

布局效果

可以看到我们用PercentFrameLayout轻松实现了这个布局，大家可以想想用其他布局怎么实现。笔者认为它相对于LinearLayout减少了层级，相对于RelativeLayout则简单了很多，不失为一种优雅的写法。

PercentFrameLayout实例

Android布局“小众派”——PercentRelativeLayout

PercentRelativeLayout则是RelativeLayout的子类，继承了它的所有属性，并且扩展了百分比属性，跟前文介绍的PercentFrameLayout百分比属性以及宽高比属性一样。这里就不做过多介绍了。