Android Support库百分比布局

之前写过一篇屏幕适配的文章Android 屏幕适配最佳实践，里面提到了类似百分比布局的东西，但是该方法缺点很明显，就会增加很多无用的数据，导致apk包变大。

而谷歌的support库中，增加了一个叫做percent库，该库在如图目录下，如果没有，请使用sdk manager更新至最新

在使用前，我们先看下这个库有哪些类

很明显里面有一个FrameLayout布局的子类和RelativeLayout布局的子类，此外还有一个Helper类，这个Helper类主要是完成百分比的测量工作，里面有一个接口PercentLayoutParams，如果我们自己要实现百分比布局，那么就要实现这个接口。

我们看下谷歌对外公布了什么自定义属性

<?xml version="1.0" encoding="utf-8"?>
<resources><declare-styleable name="PercentLayout_Layout"><attr name="layout_widthPercent" format="fraction"/><attr name="layout_heightPercent" format="fraction"/><attr name="layout_marginPercent" format="fraction"/><attr name="layout_marginLeftPercent" format="fraction"/><attr name="layout_marginTopPercent" format="fraction"/><attr name="layout_marginRightPercent" format="fraction"/><attr name="layout_marginBottomPercent" format="fraction"/><attr name="layout_marginStartPercent" format="fraction"/><attr name="layout_marginEndPercent" format="fraction"/></declare-styleable>
</resources>

看到这些属性应该能直接明白这些属性的意思，其属性值类型为fraction，即小数，百分比。主要属性有宽度，高度占是百分比，外边距的百分比，其中Android MarginLeft与MarginStart的区别参考Android MarginLeft与MarginStart的区别，提取关键内容如下。

在写layout布局的时候，我们会发现有这样几个比较相似的属性：
MarginStart MarginLeft
MarginEnd MarginRight

这些属性的区别是什么? 根据api注释，我们得知MarginStart指的是控件距离开头View部分的间距大小，MarginLeft则指的是控件距离左边View部分的间距大小，MarginEnd和MarginRight同理。

一般情况下，View开始部分就是左边，但是有的语言目前为止还是按照从右往左的顺序来书写的，例如阿拉伯语，在Android 4.2系统之后，Google在Android中引入了RTL布局，更好了支持了由右到左文字布局的显示，为了更好的兼容RTL布局，google推荐使用MarginStart和MarginEnd来替代MarginLeft和MarginRight，这样应用可以在正常的屏幕和由右到左显示文字的屏幕上都保持一致的用户体验。

了解了这些后，我们开始使用PercentRelativeLayout

使用前加入库文件依赖

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

开始编写布局文件，我们要实现的效果如图所示

即左边红色部分宽度占屏幕30%，高度占屏幕90%，右边宽度占屏幕70%，高度各占屏幕45%。在不使用百分比布局之前，我们一般是使用LinearLayout的weight达到这种效果，然而使用weight会增加布局的嵌套，会过度绘制。那么使用百分比布局会变成什么样的，无需布局嵌套，设置高度宽度百分比即可。

<android.support.percent.PercentRelativeLayoutxmlns: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"><Viewandroid:id="@+id/left"android:layout_width="0dp"android:layout_height="0dp"android:layout_alignParentBottom="true"android:background="#ff0000"app:layout_heightPercent="100%"app:layout_marginBottomPercent="10%"app:layout_widthPercent="30%"/><Viewandroid:id="@+id/right_top"android:layout_width="0dp"android:layout_height="0dp"android:layout_alignParentRight="true"android:background="#00ff00"app:layout_heightPercent="45%"app:layout_widthPercent="70%"/><Viewandroid:id="@+id/right_bttom"android:layout_width="0dp"android:layout_height="0dp"android:layout_alignParentRight="true"android:layout_alignParentBottom="true"android:background="#ffff00"app:layout_heightPercent="45%"app:layout_marginBottomPercent="10%"app:layout_widthPercent="70%"/>
</android.support.percent.PercentRelativeLayout>

我们要设置左边的布局宽度占30%，使用app:layout_widthPercent=”30%”，高度占90%，为了演示另一个属性的使用，这里不直接设置高度为90%，而是设置高度为100%,底边距为10%,即

android:layout_alignParentBottom="true"
app:layout_heightPercent="100%"
app:layout_marginBottomPercent="10%"

同理编写右边两个的布局。

正如文章开头看到的，这个库只提供了两个百分比布局给我们使用，比较常见的线性布局并没有提供对应的百分比布局。因此，我们想能不能自己实现一个呢，答案是肯定的，通过观察现有的两个百分比布局的代码，我们需呀继承原来的布局，即LinearLayout，编写对应的构造方法调用父类。声明一个PercentLayoutHelper对象辅助完成百分比测量，此外还需要重写onMeasure和onLayout方法，以及一个
实现了PercentLayoutHelper.PercentLayoutParams接口的继承原来布局的LayoutParams的LayoutParams。

那么我们新建一个叫PercentLinearLayout的继承LinearLayout的类，实现其构造方法，以及声明一个final的PercentLayoutHelper 对象。


public class PercentLinearLayout extends LinearLayout {private final PercentLayoutHelper mHelper = new PercentLayoutHelper(this);public PercentLinearLayout(Context context) {super(context);}public PercentLinearLayout(Context context, AttributeSet attrs) {super(context, attrs);}public PercentLinearLayout(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);}
}

仿造现有的两个百分比布局实现内部类LayoutParams ，这一步直接复制代码修改一下即可，记得一定要继承自android.widget.LinearLayout.LayoutParams。

   public static class LayoutParams extends android.widget.LinearLayout.LayoutParams implements PercentLayoutHelper.PercentLayoutParams {private PercentLayoutHelper.PercentLayoutInfo mPercentLayoutInfo;public LayoutParams(Context c, AttributeSet attrs) {super(c, attrs);this.mPercentLayoutInfo = PercentLayoutHelper.getPercentLayoutInfo(c, attrs);}public LayoutParams(int width, int height) {super(width, height);}public LayoutParams(android.view.ViewGroup.LayoutParams source) {super(source);}public LayoutParams(MarginLayoutParams source) {super(source);}public PercentLayoutHelper.PercentLayoutInfo getPercentLayoutInfo() {return this.mPercentLayoutInfo;}protected void setBaseAttributes(TypedArray a, int widthAttr, int heightAttr) {PercentLayoutHelper.fetchWidthAndHeight(this, a, widthAttr, heightAttr);}}

此外，还要重写一个生成LayoutParams 的方法generateLayoutParams，返回我们的内部类。

    @Overridepublic LayoutParams generateLayoutParams(AttributeSet attrs) {return new PercentLinearLayout.LayoutParams(this.getContext(), attrs);}

然后重新onLayout和onMeasure方法即可，这一步也不需要自己实现，直接复制代码即可。

   protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {this.mHelper.adjustChildren(widthMeasureSpec, heightMeasureSpec);super.onMeasure(widthMeasureSpec, heightMeasureSpec);if(this.mHelper.handleMeasuredStateTooSmall()) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);}}protected void onLayout(boolean changed, int left, int top, int right, int bottom) {super.onLayout(changed, left, top, right, bottom);this.mHelper.restoreOriginalParams();}

就这样，完成了百分比线性布局，我们进行使用下。完成下面的效果，随意发挥的涂鸦。

主要是红色部分，从上到下，高度各为父容器的20%,30%,30%，宽度各为父容器的30%,50%,40，其中第三个靠右边布局，右边距为父容器的20%，同时有上边距为父容器的10%，看代码更直接

<android.support.percent.PercentRelativeLayoutxmlns: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"><Viewandroid:layout_width="0dp"android:layout_height="0dp"android:background="#00ff00"app:layout_heightPercent="30%"app:layout_widthPercent="50%"></View><cn.edu.zafu.percentlayout.PercentLinearLayoutandroid:layout_width="0dp"android:layout_height="0dp"app:layout_heightPercent="50%"app:layout_widthPercent="100%"android:background="#ff0000"android:layout_alignParentBottom="true"app:layout_marginBottomPercent="10%"android:orientation="vertical"><Viewandroid:layout_width="0dp"android:layout_height="0dp"android:background="#ff0ff0"app:layout_heightPercent="20%"app:layout_widthPercent="30%"/><Viewandroid:layout_width="0dp"android:layout_height="0dp"android:background="#dedff0"app:layout_heightPercent="30%"app:layout_widthPercent="50%"app:layout_marginTopPercent="10%"app:layout_marginLeftPercent="10%"/><Viewandroid:layout_width="0dp"android:layout_height="0dp"android:background="#1254f0"android:layout_gravity="right"app:layout_heightPercent="30%"app:layout_widthPercent="40%"app:layout_marginTopPercent="10%"app:layout_marginRightPercent="20%"/></cn.edu.zafu.percentlayout.PercentLinearLayout></android.support.percent.PercentRelativeLayout>

怎么样，是不是轻轻松松就实现了百分比布局，更多内容自行挖掘，下面上源码
http://download.csdn.net/detail/sbsujjbcy/8853673

eclipse可用的库请见下载链接,将该项目导入eclipse中去,依赖该项目即可使用百分比布局.
http://download.csdn.net/detail/sbsujjbcy/8857747

Android Support库百分比布局相关推荐

【Android】Android Support库介绍
文章目录一.简介二.应用组件 1.Activity 2.Fragment 3.ContextCompat 4.IntentCompat 5.Loader 6.Preference 7.Conten ...
记录一个AndroidX和Android support库不能共存的坑
今天用到第三方库的时候一直报异常More than one file was found with OS independent path 'META-INF/androidx.legacy_lega ...
android广播第三方库,Android Support 库：LocalBroadcastManager
在介绍完 Android Support 库发展历程(http://blog.chengyunfeng.com/?p=1047)后, 再分别介绍下 Android Support 库中有用但是被忽略的 ...
Android Support库——support annotations
Android Support库是官方出的支持扩展库,包含了丰富的组件.工具类等,通过在Android SDK Manager中勾选以下两项来获取到. 其中,Android Support Libra ...
android百分比扩展枯,Android 增强版百分比布局库为了适配而扩展
一概述上周一我们发布了Android 百分比布局库(percent-support-lib) 解析与扩展中对percent-support这个库进行了解析和添加了PercentLinearLayo ...
Android 增强版百分比布局库为了适配而扩展
转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/46767825: 本文出自:[张鸿洋的博客] 一概述上周一我们发布了Andr ...
android relativelayout 比例,百分比布局支持库:RelativeLayout 和 FrameLayout 的尺寸用 % 来表示...
虽然有很多的布局可以在 Android 应用程序开发的世界供我们使用,但我们总是只用这三种布局:LinearLayout, RelativeLayout and FrameLayout. 不管怎么说在 ...
android软件百分比怎么实现,Android自实现百分比布局
在开发中,组件布局是大家每日开发必须要面对的工作,对于Android来说提供五种常用布局,分别是:LinearLayout(线性布局) TableLayout(表格布局) RelativeLayout ...
android开发笔记之com.android.support:percent
背景最近在给别的部门的人做项目,发现他们项目中使用了比例控件,然后我再度娘了一下,发现这个东东就是基本的控件上加了一个按比例显示长度的几个属性,使用起来非常简单. Demo的简单说明第一步:添加库 ...

Android Support库百分比布局

Android Support库百分比布局相关推荐

最新文章

热门文章