文档章节

Android 百分比布局(percent-support-lib)的使用及源码详解

KingBoxing123
 KingBoxing123
发布于 2017/09/04 10:17
字数 1807
阅读 33
收藏 0
点赞 0
评论 0

百分比布局提供的了两种布局PercentFrameLayout和PercentRelativeLayout,很明显前者继承于FrameLayout,后者继承于RelativeLayout,所以父类的各种属性还是可以使用。百分比布局给我们提供了以下特有的属性:

app:layout_heightPercent
app:layout_widthPercent
app:layout_marginPercent
app:layout_marginTopPercent
app:layout_marginBottomPercent
app:layout_marginLeftPercent
app:layout_marginRightPercent
app:layout_marginStartPercent
app:layout_marginEndPercent

app:layout_aspectRatio

 

也就是说我们宽高和各种margin都可以用百分比表示

当使用百分比布局时,就没用必要再去指定宽高(layout_width和layout_height),只需要设置layout_widthPercent和layout_heightPercent就可以了。

如果通过百分比获取的宽高太小或者想要更大的话,可以把layout_width和layout_height指定为wrap_content。

layout_aspectRatio代表横纵比,比如想要把宽高比例设置为2:10,以下代码示例

 

<TextView  

            android:id="@+id/tv2"  

            android:layout_width="0dp"  

            android:layout_height="0dp"  

            android:layout_toRightOf="@id/tv1"  

            android:background="#D5AD34"  

            android:gravity="center"  

            android:text="aspectRatio:2:10,height:100%"  

            android:textColor="@android:color/white"  

            app:layout_aspectRatio="20%"  

            app:layout_heightPercent="100%" />  

app:layout_aspectRatio设置为20%,这个值是宽高的比值,这里就只是指定了app:layout_heightPercent,宽度就很根据这个比值计算出来。

 

百分比布局的导入

 

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

PercentFrameLayout使用

<?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"  

    xmlns:tools="http://schemas.android.com/tools"  

    android:layout_width="match_parent"  

    android:layout_height="match_parent"  

    android:orientation="vertical"  

    tools:context="com.lzy.test.MainActivity">  

  

    <TextView  

        android:layout_width="0dp"  

        android:layout_height="0dp"  

        android:layout_gravity="left|top"  

        android:background="#53DBB9"  

        android:gravity="center"  

        android:text="width:30%,height:50%"  

        app:layout_heightPercent="50%"  

        app:layout_widthPercent="30%" />  

  

    <TextView  

        android:layout_width="0dp"  

        android:layout_height="0dp"  

        android:layout_gravity="right|top"  

        android:background="#4400ff00"  

        android:gravity="center"  

        android:text="width:70%,height:20%"  

        app:layout_heightPercent="20%"  

        app:layout_widthPercent="70%" />  

  

    <TextView  

        android:layout_width="0dp"  

        android:layout_height="0dp"  

        android:background="#327217"  

        android:gravity="center"  

        android:text="width:70%,height:20%\nmarginTop:20%,marginLeft:30%"  

        app:layout_heightPercent="30%"  

        app:layout_marginLeftPercent="30%"  

        app:layout_marginTopPercent="20%"  

        app:layout_widthPercent="70%" />  

  

    <TextView  

        android:layout_width="0dp"  

        android:layout_height="0dp"  

        android:background="#DF65A2"  

        android:gravity="center"  

        android:text="width:100%,height:40%\nmarginTop:50%"  

        app:layout_heightPercent="40%"  

        app:layout_marginTopPercent="50%"  

        app:layout_widthPercent="100%" />  

  

    <TextView  

        android:layout_width="0dp"  

        android:layout_height="0dp"  

        android:layout_gravity="bottom"  

        android:background="#770000ff"  

        android:gravity="center"  

        android:text="width:100%,height:10%"  

        app:layout_heightPercent="10%"  

        app:layout_widthPercent="100%" />  

</android.support.percent.PercentFrameLayout>  


PercentRelativeLayout

<?xml version="1.0" encoding="utf-8"?>  

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  

    xmlns:app="http://schemas.android.com/apk/res-auto"  

    xmlns:tools="http://schemas.android.com/tools"  

    android:layout_width="match_parent"  

    android:layout_height="match_parent"  

    android:orientation="vertical"  

    tools:context="com.lzy.test.Main2Activity">  

  

    <View  

        android:layout_width="match_parent"  

        android:layout_height="80dp"  

        android:background="#1A807C" />  

  

    <android.support.percent.PercentRelativeLayout  

        android:layout_width="match_parent"  

        android:layout_height="match_parent">  

  

        <TextView  

            android:id="@+id/tv1"  

            android:background="#B5256D"  

            android:gravity="center"  

            android:text="width:60%,height:50%"  

            android:textColor="@android:color/white"  

            app:layout_heightPercent="50%"  

            app:layout_widthPercent="60%" />  

  

        <TextView  

            android:id="@+id/tv2"  

            android:layout_width="0dp"  

            android:layout_height="0dp"  

            android:layout_toRightOf="@id/tv1"  

            android:background="#D5AD34"  

            android:gravity="center"  

            android:text="aspectRatio:2:10,height:100%"  

            android:textColor="@android:color/white"  

            app:layout_aspectRatio="20%"  

            app:layout_heightPercent="100%" />  

  

        <android.support.percent.PercentRelativeLayout  

            android:layout_width="0dp"  

            android:layout_height="0dp"  

            android:layout_below="@id/tv1"  

            app:layout_heightPercent="50%"  

            app:layout_widthPercent="60%">  

  

            <TextView  

                android:layout_width="0dp"  

                android:layout_height="0dp"  

                android:background="#4E3ED7"  

                android:gravity="center"  

                android:text="width:40%,height:100%"  

                android:textColor="@android:color/white"  

                app:layout_heightPercent="100%"  

                app:layout_widthPercent="40%" />  

  

            <TextView  

                android:layout_width="0dp"  

                android:layout_height="0dp"  

                android:layout_alignParentRight="true"  

                android:background="#93E684"  

                android:gravity="center"  

                android:text="width:60%,height:100%"  

                android:textColor="@android:color/white"  

                app:layout_heightPercent="100%"  

                app:layout_widthPercent="60%" />  

        </android.support.percent.PercentRelativeLayout>  

    </android.support.percent.PercentRelativeLayout>  

</LinearLayout>  


 

 

源码分析

看看PercentFrameLayout的主要源码,其中省略了部分代码

public class PercentFrameLayout extends FrameLayout {
    private final PercentLayoutHelper mHelper = new PercentLayoutHelper(this);

    public PercentFrameLayout(Context context) {
        super(context);
    }

    @Override
    public LayoutParams generateLayoutParams(AttributeSet attrs) {
        return new LayoutParams(getContext(), attrs);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        mHelper.adjustChildren(widthMeasureSpec, heightMeasureSpec);
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        if (mHelper.handleMeasuredStateTooSmall()) {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        }
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        mHelper.restoreOriginalParams();
    }

    public static class LayoutParams extends FrameLayout.LayoutParams
            implements PercentLayoutHelper.PercentLayoutParams {
        private PercentLayoutHelper.PercentLayoutInfo mPercentLayoutInfo;

        public LayoutParams(Context c, AttributeSet attrs) {
            super(c, attrs);
            mPercentLayoutInfo = PercentLayoutHelper.getPercentLayoutInfo(c, attrs);
        }

        public LayoutParams(LayoutParams source) {
            this((FrameLayout.LayoutParams) source);
            mPercentLayoutInfo = source.mPercentLayoutInfo;
        }

        @Override
        public PercentLayoutHelper.PercentLayoutInfo getPercentLayoutInfo() {
            if (mPercentLayoutInfo == null) {
                mPercentLayoutInfo = new PercentLayoutHelper.PercentLayoutInfo();
            }

            return mPercentLayoutInfo;
        }

        @Override
        protected void setBaseAttributes(TypedArray a, int widthAttr, int heightAttr) {
            PercentLayoutHelper.fetchWidthAndHeight(this, a, widthAttr, heightAttr);
        }
    }
}

为了获得PercentFrameLayout的子view里面的自定义属性,所以我们重写了generateLayoutParams方法,把它的返回值修改为我们自己定义的LayoutParams,就相当于把原来的LayoutParams包装了一层,在此过程中就可以截取到属性值,找出子view里面的自定义属性,这些自定义属性就是设置的宽高百分比。

 

这个自定义的LayoutParams是继承于FrameLayout.LayoutParams,同时实现了PercentLayoutHelper.PercentLayoutParams接口

public interface PercentLayoutParams {  

        PercentLayoutInfo getPercentLayoutInfo();  

    }  

这个接口就一个返回PercentLayoutInfo的方法,PercentLayoutInfo类就是存储了各种百分比的信息。

public LayoutParams(Context c, AttributeSet attrs) {  

            super(c, attrs);  

            mPercentLayoutInfo = PercentLayoutHelper.getPercentLayoutInfo(c, attrs);  

        }  

这里显然就是获取attrs里面的各种百分比信息,然后存储在PercentLayoutInfo里面,没什么好说的,点进去看就是各种获取自定义属性的方法,和我们平常的差不多。

 

 

下面看看onMeasure方法

@Override  

   protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  

       mHelper.adjustChildren(widthMeasureSpec, heightMeasureSpec);  

       super.onMeasure(widthMeasureSpec, heightMeasureSpec);  

       if (mHelper.handleMeasuredStateTooSmall()) {  

           super.onMeasure(widthMeasureSpec, heightMeasureSpec);  

       }  

   }  

首先是mHelper.adjustChildren(widthMeasureSpec, heightMeasureSpec),点进去看看

public void adjustChildren(int widthMeasureSpec, int heightMeasureSpec) {

        int widthHint = View.MeasureSpec.getSize(widthMeasureSpec);
        int heightHint = View.MeasureSpec.getSize(heightMeasureSpec);
        for (int i = 0, N = mHost.getChildCount(); i < N; i++) {
            View view = mHost.getChildAt(i);
            ViewGroup.LayoutParams params = view.getLayoutParams();
            
            if (params instanceof PercentLayoutParams) {
                PercentLayoutInfo info =
                        ((PercentLayoutParams) params).getPercentLayoutInfo();
                
                if (info != null) {
                    if (params instanceof ViewGroup.MarginLayoutParams) {
                        info.fillMarginLayoutParams(view, (ViewGroup.MarginLayoutParams) params,
                                widthHint, heightHint);
                    } else {
                        info.fillLayoutParams(params, widthHint, heightHint);
                    }
                }
            }
        }
    }

首先这里计算出PercentFrameLayout的宽高,通过百分比计算子view宽高当然需要这个PercentFrameLayout的宽高咯,接着遍历里面的所以子view,判断是否是PercentLayoutParams,如果是就可以调用getPercentLayoutInfo方法来获取到PercentLayoutInfo,最后拿着里面的百分比信息去计算出实际的大小,这里有两种方法来计算,一个是有margin和没有margin的,其实都差不多

 

public void fillLayoutParams(ViewGroup.LayoutParams params, int widthHint,
                int heightHint) {
            // Preserve the original layout params, so we can restore them after the measure step.
            mPreservedParams.width = params.width;
            mPreservedParams.height = params.height;

            // We assume that width/height set to 0 means that value was unset. This might not
            // necessarily be true, as the user might explicitly set it to 0. However, we use this
            // information only for the aspect ratio. If the user set the aspect ratio attribute,
            // it means they accept or soon discover that it will be disregarded.
            final boolean widthNotSet =
                    (mPreservedParams.mIsWidthComputedFromAspectRatio
                            || mPreservedParams.width == 0) && (widthPercent < 0);
            final boolean heightNotSet =
                    (mPreservedParams.mIsHeightComputedFromAspectRatio
                            || mPreservedParams.height == 0) && (heightPercent < 0);

            if (widthPercent >= 0) {
                params.width = (int) (widthHint * widthPercent);
            }

            if (heightPercent >= 0) {
                params.height = (int) (heightHint * heightPercent);
            }

            if (aspectRatio >= 0) {
                if (widthNotSet) {
                    params.width = (int) (params.height * aspectRatio);
                    // Keep track that we've filled the width based on the height and aspect ratio.
                    mPreservedParams.mIsWidthComputedFromAspectRatio = true;
                }
                if (heightNotSet) {
                    params.height = (int) (params.width / aspectRatio);
                    // Keep track that we've filled the height based on the width and aspect ratio.
                    mPreservedParams.mIsHeightComputedFromAspectRatio = true;
                }
            }
        }

首先是通过mPreservedParams记录了子view原始的宽高,然后判断是否设置了宽高,这个在后面aspectRatio用,接着就是根据百分比计算出宽高了,最后根据设置的横纵比aspectRatio来计算宽高。这样就根据百分比来重新设置了宽高,大功告成了!

 

好了,这里面就完成了,回到onMeasure方法,这里

 

 if (mHelper.handleMeasuredStateTooSmall()) {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        }

很显然,就是判断测量的宽高是不是太小,如果太小的话,就会使用wrap_content来重新测量,这里就不具体看了。

 @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        mHelper.restoreOriginalParams();
    }

这里调用了一个 mHelper.restoreOriginalParams()方法,作用是恢复原始的参数值,在上面的fillLayoutParams方法中不是把原始的值存储到mPreservedParams中了吗,目的就是在这里用于恢复的,因为在利用百分比计算宽高时已经改变了它原始的值。至于为什么要恢复这个原始的值,具体我也不太清楚,毕竟也是菜鸟一个~~分析就到此完毕了。

 

其实PercentRelativeLayout源码和PercentFrameLayout基本都差不多,只是其中自定义的LayoutParams是继承于RelativeLayout的LayoutParams,所以你想要实现LinearLayout的百分比布局,也只需要把自定义的LayoutParams继承于LinearLayout的LayoutParams就OK了

 

百分比布局的扩展地址:https://github.com/hongyangAndroid/android-percent-support-extend

© 著作权归作者所有

共有 人打赏支持
KingBoxing123
粉丝 5
博文 90
码字总数 48684
作品 0
成都
Android Percent Layout for Eclipse

Android Percent Layout for Eclipse https://github.com/wangkunlin/AndroidPercentLayout Android Support库百分比布局 com.android.support:percent:22.2.0 附带Eclipse教程 http://blog.......

addcn ⋅ 2016/07/01 ⋅ 0

Android5.0+(Percent 百分比布局)

相信大家都已经对Android API所提供的布局方式非常熟悉了。也许在接触Android的时候都有过这样的想法,如果可以按照百分比的方式进行界面布局,这样适配各种屏幕就简单多了吧!谷歌正式提供百...

让代码飞一会 ⋅ 2015/07/27 ⋅ 1

Android屏幕适配开发工具——Google百分比布局支持库

文/腾讯优测 吴宇焕 相信开发同学都被安卓设备碎片化的问题折磨过,市面上安卓手机的主流屏幕尺寸种类繁多,给适配造成很大的困难。就算搞定了屏幕尺寸问题,各种分辨率又让人眼花缭乱,当你...

腾讯优测 ⋅ 2015/12/18 ⋅ 0

【Kotlin For Android】(三): Anko 库

一、简介 Github地址 是一个使 Android应用程序 开发更快,更容易的库。它使你的代码变得简洁易读,并让您忘记 的粗糙边缘。 Anko 由几部分组成: :一个轻量级的库,里面充满了,对话框,日...

Agnes2017 ⋅ 04/27 ⋅ 0

Flutter尝鲜:跨平台移动应用开发

开始之前 本人使用Flutter开发的一个图文App《每日图文》,可以同时运行在Android和iOS上,欢迎体验,喜欢的话还不吝Star一下。 叮叮叮~ 传送门 Flutter为何物? 随着移动App开发成本越来越...

开发的猫 ⋅ 06/06 ⋅ 0

Android性能优化:这是一份详细的布局优化 指南(含、、)

前言 在 开发中,性能优化策略十分重要 本文主要讲解性能优化中的布局优化,希望你们会喜欢。 目录 /** 实例说明:在上述例子,在布局B中 通过标签引用布局C 此时:布局层级为 = RelativeLa...

Carson_Ho ⋅ 05/14 ⋅ 0

android 常用第三方插件收藏

1、android-vertical-slide-view : 仿照淘宝和聚美优品,在商品详情页,向上拖动时,可以加载下一页。使用ViewDragHelper,滑动比较流畅。 2、Android-MaterialRefreshLayout :这是一个下拉...

ch10mmt ⋅ 2017/03/13 ⋅ 0

AndroidManifest.xml详解

我们在进行APP开发的时候都会遇到一个文件:AndroidManifest.xml。从刚开始进行Android开发,到现在已经过去了几个月,还是对这个文件一知半解,只知道它是配置用的。但是这文件里的东西具体...

闪电的蓝熊猫 ⋅ 05/14 ⋅ 0

Android性能优化:那些不可忽略的绘制优化

前言 在 开发中,性能优化策略十分重要 本文主要讲解性能优化中的绘制优化,希望你们会喜欢。 目录 // 方式2:在 BaseActivity 的 onCreate() 方法中使用下面的代码移除 优化方案2:移除 控件...

Carson_Ho ⋅ 05/21 ⋅ 0

android蓝牙手柄、仿QQ看房、仿慕课网、数据库二维码框架等源码

Android精选源码 可自定义图片指示器并支持自定义Tab宽度的TabLayout源码(http://www.apkbus.com/thread-599243-1-1.html) android蓝牙控制手柄操作源码(http://www.apkbus.com/thread-59928...

逆鳞龙 ⋅ 05/15 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

JavaScript零基础入门——(八)JavaScript的数组

JavaScript零基础入门——(八)JavaScript的数组 欢迎大家回到我们的JavaScript零基础入门,上一节课我们讲了有关JavaScript正则表达式的相关知识点,便于大家更好的对字符串进行处理。这一...

JandenMa ⋅ 今天 ⋅ 0

sbt网络问题解决方案

转自:http://dblab.xmu.edu.cn/blog/maven-network-problem/ cd ~/.sbt/launchers/0.13.9unzip -q ./sbt-launch.jar 修改 vi sbt/sbt.boot.properties 增加一个oschina库地址: [reposit......

狐狸老侠 ⋅ 今天 ⋅ 0

大数据,必须掌握的10项顶级安全技术

我们看到越来越多的数据泄漏事故、勒索软件和其他类型的网络攻击,这使得安全成为一个热门话题。 去年,企业IT面临的威胁仍然处于非常高的水平,每天都会看到媒体报道大量数据泄漏事故和攻击...

p柯西 ⋅ 今天 ⋅ 0

Linux下安装配置Hadoop2.7.6

前提 安装jdk 下载 wget http://mirrors.hust.edu.cn/apache/hadoop/common/hadoop-2.7.6/hadoop-2.7.6.tar.gz 解压 配置 vim /etc/profile # 配置java环境变量 export JAVA_HOME=/opt/jdk1......

晨猫 ⋅ 今天 ⋅ 0

crontab工具介绍

crontab crontab 是一个用于设置周期性被执行的任务工具。 周期性执行的任务列表称为Cron Table crontab(选项)(参数) -e:编辑该用户的计时器设置; -l:列出该用户的计时器设置; -r:删除该...

Linux学习笔记 ⋅ 今天 ⋅ 0

深入Java多线程——Java内存模型深入(2)

5. final域的内存语义 5.1 final域的重排序规则 1.对于final域,编译器和处理器要遵守两个重排序规则: (1)在构造函数内对一个final域的写入,与随后把这个被构造对象的引用赋值给一个引用...

江左煤郎 ⋅ 今天 ⋅ 0

面试-正向代理和反向代理

面试-正向代理和反向代理 Nginx 是一个高性能的反向代理服务器,但同时也支持正向代理方式的配置。

秋日芒草 ⋅ 今天 ⋅ 0

Spring 依赖注入(DI)

1、Setter方法注入: 通过设置方法注入依赖。这种方法既简单又常用。 类中定义set()方法: public class HelloWorldOutput{ HelloWorld helloWorld; public void setHelloWorld...

霍淇滨 ⋅ 昨天 ⋅ 0

马氏距离与欧氏距离

马氏距离 马氏距离也可以定义为两个服从同一分布并且其协方差矩阵为Σ的随机变量之间的差异程度。 如果协方差矩阵为单位矩阵,那么马氏距离就简化为欧氏距离,如果协方差矩阵为对角阵,则其也...

漫步当下 ⋅ 昨天 ⋅ 0

聊聊spring cloud的RequestRateLimiterGatewayFilter

序 本文主要研究一下spring cloud的RequestRateLimiterGatewayFilter GatewayAutoConfiguration @Configuration@ConditionalOnProperty(name = "spring.cloud.gateway.enabled", matchIfMi......

go4it ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部