Android layout系列-autolayout

最新推荐文章于 2024-04-13 23:50:59 发布
最新推荐文章于 2024-04-13 23:50:59 发布
阅读量781 收藏 1
点赞数
分类专栏： Android 布局 文章标签： android 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ncuboy045wsq/article/details/74359051
版权

1. 前言

在Android项目开发的过程，开发者需要根据UI设计师的设计效果图做各种各样的机型适配，这往往是最麻烦和最浪费时间的。下面几种方案可供选择。

AndroidAutoLayout是最省时省力的一个基础库，在这里感谢hongyongAndroid的开源，关于它的介绍可以查阅开源者的介绍博客:Android AutoLayout全新的适配方式 堪称适配终结者，这篇博客主要讲述它的实现原理和使用方法和注意点。

2. 原理

在使用AndroidAutoLayout，需要在对应的项目的AndroidManifest.xml配置：

<meta-data
    android:name="design_width"
    android:value="1080" />
<meta-data
    android:name="design_height"
    android:value="1920" />

这两个配置项对应：设计稿的宽度和高度，单位是像素

这两个配置项目就涉及到了AndroidAutoLayout的实现原理：框架获取到屏幕的宽度和高度，然后通过和配置的设计宽度和高度比较，计算出宽度比例和高度比例，然后应用到我们在AutoLayout中使用到的px单位。你可以理解为这个框架是把设计效果图等比缩放到适配手机。

定位到AutoConfig类，下面代码会获取到配置的设计宽度和高度

mDesignWidth = (int) applicationInfo.metaData.get(KEY_DESIGN_WIDTH);
                mDesignHeight = (int) applicationInfo.metaData.get(KEY_DESIGN_HEIGHT);

AndroidAutoLayout提供了AutoFrameLayout，AutoLinearLayout, AutoRelativeLayout, 这里就拿常用的AutoLinearLayout来研究下它的实现原理，下面这两段代码我们来分析下：

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

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

generateLayoutParams是override方法，这里提供了自定义的layoutParams,对应的代码

public LayoutParams(Context c, AttributeSet attrs)
    {
        super(c, attrs);
        mAutoLayoutInfo = AutoLayoutHelper.getAutoLayoutInfo(c, attrs);
    }

这里有个AutoLayoutHelper.getAutoLayoutInfo(c, attrs)，它 的意义是获取配置的支持的属性，对应代码

public static AutoLayoutInfo getAutoLayoutInfo(Context context,
                                               AttributeSet attrs) {

    AutoLayoutInfo info = new AutoLayoutInfo();

    TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.AutoLayout_Layout);
    int baseWidth = a.getInt(R.styleable.AutoLayout_Layout_layout_auto_basewidth, 0);
    int baseHeight = a.getInt(R.styleable.AutoLayout_Layout_layout_auto_baseheight, 0);
    a.recycle();

    TypedArray array = context.obtainStyledAttributes(attrs, LL);

    int n = array.getIndexCount();


    for (int i = 0; i < n; i++) {
        int index = array.getIndex(i);
//            String val = array.getString(index);
//            if (!isPxVal(val)) continue;

        if (!DimenUtils.isPxVal(array.peekValue(index))) continue;

        int pxVal = 0;
        try {
            pxVal = array.getDimensionPixelOffset(index, 0);
        } catch (Exception ignore)//not dimension
        {
            continue;
        }
        switch (index) {
            case INDEX_TEXT_SIZE:
                info.addAttr(new TextSizeAttr(pxVal, baseWidth, baseHeight));
                break;
            case INDEX_PADDING:
                info.addAttr(new PaddingAttr(pxVal, baseWidth, baseHeight));
                break;
            case INDEX_PADDING_LEFT:
                info.addAttr(new PaddingLeftAttr(pxVal, baseWidth, baseHeight));
                break;
            case INDEX_PADDING_TOP:
                info.addAttr(new PaddingTopAttr(pxVal, baseWidth, baseHeight));
                break;
            case INDEX_PADDING_RIGHT:
                info.addAttr(new PaddingRightAttr(pxVal, baseWidth, baseHeight));
                break;
            case INDEX_PADDING_BOTTOM:
                info.addAttr(new PaddingBottomAttr(pxVal, baseWidth, baseHeight));
                break;
            case INDEX_WIDTH:
                info.addAttr(new WidthAttr(pxVal, baseWidth, baseHeight));
                break;
            case INDEX_HEIGHT:
                info.addAttr(new HeightAttr(pxVal, baseWidth, baseHeight));
                break;
            case INDEX_MARGIN:
                info.addAttr(new MarginAttr(pxVal, baseWidth, baseHeight));
                break;
            case INDEX_MARGIN_LEFT:
                info.addAttr(new MarginLeftAttr(pxVal, baseWidth, baseHeight));
                break;
            case INDEX_MARGIN_TOP:
                info.addAttr(new MarginTopAttr(pxVal, baseWidth, baseHeight));
                break;
            case INDEX_MARGIN_RIGHT:
                info.addAttr(new MarginRightAttr(pxVal, baseWidth, baseHeight));
                break;
            case INDEX_MARGIN_BOTTOM:
                info.addAttr(new MarginBottomAttr(pxVal, baseWidth, baseHeight));
                break;
            case INDEX_MAX_WIDTH:
                info.addAttr(new MaxWidthAttr(pxVal, baseWidth, baseHeight));
                break;
            case INDEX_MAX_HEIGHT:
                info.addAttr(new MaxHeightAttr(pxVal, baseWidth, baseHeight));
                break;
            case INDEX_MIN_WIDTH:
                info.addAttr(new MinWidthAttr(pxVal, baseWidth, baseHeight));
                break;
            case INDEX_MIN_HEIGHT:
                info.addAttr(new MinHeightAttr(pxVal, baseWidth, baseHeight));
                break;
        }
    }
    array.recycle();
    L.e(" getAutoLayoutInfo " + info.toString());
    return info;
}

这里我们可以发现支持的属性：

  • textSize
  • padding
  • paddingLeft
  • paddingTop
  • paddingRight
  • paddingBottom
  • width
  • height
  • margin
  • marginLeft
  • marginTop
  • marginRight
  • marginBottom
  • maxWidth
  • maxHeight
  • minWidth
  • minHeight
    当然也可以自己实现其他属性。比如下面使用AutoLinearLayout
<com.zhy.autolayout.AutoLinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="7px"
    android:background="@android:color/white"
    android:orientation="vertical"
    android:paddingBottom="22px"
    android:paddingLeft="15px"
    android:paddingRight="15px"
    android:paddingTop="8px"
    >
    <github.ankushsachdeva.emojicon.EmojiconTextView
        android:id="@+id/tv_channel_desc"
        style="@style/Common.TextView.13"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="15px"
        /></com.zhy.autolayout.AutoLinearLayout>

上面，使用到了android:layout_marginTop="15px",看看是layout_marginTop属性是如何做自适配的。定位到MarginTopAttr，会发现如下代码

@Override
protected void execute(View view, int val)
{
    if (!(view.getLayoutParams() instanceof ViewGroup.MarginLayoutParams))
    {
        return;
    }
    ViewGroup.MarginLayoutParams lp = (ViewGroup.MarginLayoutParams) view.getLayoutParams();
    lp.topMargin = val;

}

分析上面代码，可以发现topMargin会重置了。然后需要找到val是怎么计算的，定位到AutoAttr，会发现这样一段代码：

public void apply(View view)
{

    boolean log = view.getTag() != null && view.getTag().toString().equals("auto");

    if (log)
    {
        L.e(" pxVal = " + pxVal + " ," + this.getClass().getSimpleName());
    }
    int val;
    if (useDefault())
    {
        val = defaultBaseWidth() ? getPercentWidthSize() : getPercentHeightSize();
        if (log)
        {
            L.e(" useDefault val= " + val);
        }
    } else if (baseWidth())
    {
        val = getPercentWidthSize();
        if (log)
        {
            L.e(" baseWidth val= " + val);
        }
    } else
    {
        val = getPercentHeightSize();
        if (log)
        {
            L.e(" baseHeight val= " + val);
        }
    }

    if (val > 0)
        val = Math.max(val, 1);//for very thin divider
    execute(view, val);
}

通过分析上面代码，我们会发现val被重新计算了, 因为这里是分析的marginTop属性，所以上面调用的是getPercentHeightSize,下面代码是其实现方法

public static int getPercentHeightSizeBigger(int val)
{
    int screenHeight = AutoLayoutConifg.getInstance().getScreenHeight();
    int designHeight = AutoLayoutConifg.getInstance().getDesignHeight();

    int res = val * screenHeight;
    if (res % designHeight == 0)
    {
        return res / designHeight;
    } else
    {
        return res / designHeight + 1;
    }
}

通过分析代码，我们知道上面设置的android:layout_marginTop="15px"，先通过获取屏幕高度和设计高度的比例，然后进行缩放了。

通过上面代码知道了其具体实现原理，但是我们还没有分析上面的一系列方法是怎么被调用的，还是定位到AutoLinearLayout, 会发现下面这个方法

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

在onMeasure方法会调用mHelper.adjustChildren(),看下它是怎么实现的

public void adjustChildren()
{
    AutoLayoutConifg.getInstance().checkParams();

    for (int i = 0, n = mHost.getChildCount(); i < n; i++)
    {
        View view = mHost.getChildAt(i);
        ViewGroup.LayoutParams params = view.getLayoutParams();

        if (params instanceof AutoLayoutParams)
        {
            AutoLayoutInfo info =
                    ((AutoLayoutParams) params).getAutoLayoutInfo();
            if (info != null)
            {
                info.fillAttrs(view);
            }
        }
    }

}

分析上面代码，举例AutoLinearLayout，它会它的所有直接子view都应用info.fillAttrs(view);,

NOTE:这里需要注意的是只支持直接子view,假如AutoLinearLayout下面还有LinearLayout，那么这个LinearLayout下面的子view不会支持AutoLayout.

回到上面的info.fillAttrs(view);，找到它的代码：

public void fillAttrs(View view)
{
    for (AutoAttr autoAttr : autoAttrs)
    {
        autoAttr.apply(view);
    }
}

OK，通过上面代码，我们知道它会所有支持的属性迭代地应用。

总结下它的原理，通过下面步骤
1. 获取配置的design_width和design_height获取设计稿的宽度和高度
2. 获取所有支持的属性如：textSize, marginTop,
3. 获取AutoLinearLayout/AutoRelativeLayout/AutoFrameLayout下面的所有直接子view
4. 所有的直接子view都对所有的支持属性进行等比缩放转换尺寸。

3. 补充

有些时候不方便在layout中使用AutoLayout,也可以在代码里动态的进行适配，AutoUtils提供了一系列方法
这里写图片描述

4. 自定义扩展

添加对GridView的”android_horinzontalSpacing”属性的支持
1）Attr.java中添加public static final int GRID_HORIZONTAL_SPACING = MAX_HEIGHT << 1;
2）AutoLayoutHelper.java中的ll数组添加android.R.attr.horizontalSpacing，添加private static final int INDEX_HORIZONTAL_SPACING = 17;
3）在getAutoLayoutInfo方法添加

case INDEX_HORIZONTAL_SPACING:
                    info.addAttr(new GridHorizontalSpacingAttr(pxVal, baseWidth, baseHeight));
                    break;

4）创建GridHorizontalSpacingAttr类

public class GridHorizontalSpacingAttr extends AutoAttr
{
    public GridHorizontalSpacingAttr(int pxVal, int baseWidth, int baseHeight)
    {
        super(pxVal, baseWidth, baseHeight);
    }

    @Override
    protected int attrVal()
    {
        return Attrs.GRID_HORIZONTAL_SPACING;
    }

    @Override
    protected boolean defaultBaseWidth()
    {
        return true;
    }

    @Override
    protected void execute(View view, int val)
    {
        if(!(view instanceof GridView))
        {
            return ;
        }
        GridView gridView = (GridView) view;
        gridView.setHorizontalSpacing(val);
    }

    public static GridHorizontalSpacingAttr generate(int val, int baseFlag)
    {
        GridHorizontalSpacingAttr attr = null;
        switch (baseFlag)
        {
            case AutoAttr.BASE_WIDTH:
                attr = new GridHorizontalSpacingAttr(val, Attrs.GRID_HORIZONTAL_SPACING, 0);
                break;
            case AutoAttr.BASE_HEIGHT:
                attr = new GridHorizontalSpacingAttr(val, 0, Attrs.GRID_HORIZONTAL_SPACING);
                break;
            case AutoAttr.BASE_DEFAULT:
                attr = new GridHorizontalSpacingAttr(val, 0, 0);
                break;
        }
        return attr;
    }
}

扩展代码在我的fork中：https://github.com/Sherchen/AndroidAutoLayout

5. 缺点

通过上面的代码，我们知道了它的实现原理是在运行时做一系列的计算之后，再重置设置尺寸，当一个layout大量使用AutoLayout后，会一定程度上降低layout的加载速度，影响用户体验，所以使用它的时候也需要多注意下。

https://github.com/Sherchen/AndroidAutoLayout是我的fork版本,我会把我的一些修改和扩展提交上去。

安卓机器人
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AndroidAutoLayout:Android自动版式
05-01
在做android项目中，遇到最多的问题就是适配，各种尺寸的机型，让开发者头痛，自己在开发中也存在这个问题，不过我目前的公司大多项目是demo的性质，但是最近一个产品化的项目，让我在适配问题上遇到了不少困难。 于是想要使用别人的研究成果，就找到了鸿祥大神写的 库，他的设计思路是根据UI设计的效果图尺寸，然后在不同手机上根据比例进行缩放，感觉满足绝大多数适配需求，可惜大神太忙，这个库已经停止维护了。 针对鸿祥的设计思路，自己也写了一个自动布局的库 假设我们拿到一张设计图： 这样的设计图开发中很常见吧，有些公司可能需要自己去测量。 按照我们的思想： 布局直接抄设计图上的尺寸 对于布局文库应该这么写： <com.xz.autoLayout.AutoRelativeLayout android:layout_width="match_parent" android:layout_height="8
AutoLayout——Android屏幕自动适配
ZhengJingLe的博客
06-23 1万+
不久前看了张鸿洋大神的《Android AutoLayout全新的适配方式 堪称适配终结者》，觉得不错。 拿来用了以后，发现有些问题。 自己觉得可以写一个类似的，于是兴趣大发，动手写出了自己的AutoLayout，感觉更胜一筹。
50家大厂面试万字精华总结-+-面试100-问，又一篇吊打面试官系列！
最新发布
2401_84103386的博客
04-13 785
简历首选内推方式，速度快，效率高啊！然后可以在拉钩，boss，脉脉，大街上看看。简历上写道熟悉什么技术就一定要去熟悉它，不然被问到不会很尴尬！做过什么项目，即使项目体量不大，但也一定要熟悉实现原理！不是你负责的部分，也可以看看同事是怎么实现的，换你来做你会怎么做？做过什么，会什么是广度问题，取决于项目内容。但做过什么，达到怎样一个境界，这是深度问题，和个人学习能力和解决问题的态度有关了。大公司看深度，小公司看广度。大公司面试你会的，小公司面试他们用到的你会不会，也就是岗位匹配度。面试过程一定要有礼貌！
Android AutoLayout全新的适配方式 堪称适配终结者
2401_83704218的博客
03-24 838
如果你觉得这些内容对你有帮助，可以扫码领取！！！！
android autolayout教程,Android中AutoLayout的使用
weixin_36166342的博客
05-31 1084
一.引入AutoLayoutapp->build.gradle中dependencies {compile 'com.zhy:autolayout:1.4.5'}二.清单文件中配置在AndroidManifest中注明设计的尺寸三.使用让你的Activity继承自AutoLayoutActivity，如果不希望继承AutoLayoutActivity，可以在编写布局文件时，将LinearLa...
android自动布局优先级,自动布局AutoLayout
weixin_36484519的博客
05-27 693
1:理解概念Auto Layout中文翻译过来意思是自动布局,通过内定的Constraint(约束)和各项条件来计算出合理的布局.而这个合理的布局,符合我们的的预期和意图.将我们想象中的结果展现出来.Constraint的设定非常灵活,实现一种布局的方法可以通过多Constraint套来完成.以下几点是我们在开始使用之前必须弄清楚的事情:1:我们要抛弃以往旧的布局方式不再去关注Vi...
AndroidAutoLayout--屏幕适配终结者
Thik叮当
12-15 1534
AndroidAutoLayout Android屏幕适配方案，直接填写设计图上的像素尺寸即可完成适配。 非常感谢 ： 吃土豆的人 的协作。 效果图 最大幅度解决适配问题，并且最大化方便开发者。 so,看下用法： 你没有看错，拿到设计稿，在布局文件里面直接填写对应的px即可，px:这里的px并非是Google不建议使用的px，在内部会进行转化处理。 ok，拿一些实际项目的页面
android小游戏！你会的还只有初级工程师的技术吗？3面直接拿到offer
clhcowboy的博客
03-03 367
前言 不清楚你是不是知道，咱们中国有相当大的一部分软件公司，他们的软件开发团队都小的可怜，甚至只有1-3个人，连一个项目小组都算不上，而这样的团队却要承担一个软件公司所有的软件开发任务，在软件上线和开发的关键阶段需要团队的成员没日没夜的加班，还需要为测试出的BUG和不能按时提交的软件模块功能而心怀忐忑，有的时候如果你不幸加入现场开发的团队你则需要背井离乡告别你的女友，进行封闭开发，你平时除了编码之外就是吃饭和睡觉(有钱的公司甚至请个保姆为你做饭，以让你节省出更多的时间来投入到工作中，让你一直在那种累了就休息
MyLinearLayout：MyLayout是由Objective-C实现的功能强大的iOS UI框架。 它与Android Layout，iOS AutoLayout，SizeClass，HTML CSS float和flexbox和bootstrap集成了功能。 因此，您可以使用LinearLayout，RelativeLayout，FrameLayout，TableLayout，FlowLayout，FloatLayout，PathLayout，GridLayout，LayoutSizeClass
01-29
它集成了以下功能：iOS的Autolayout和SizeClass，Android的五个布局类，float和flex-box以及HTML / CSS引导程序。 MyLayout的Swift版本的名称为： 中文（简体）： 用法 有一个容器视图S，其宽度为100，高度包装为...
Android AutoLayout全新的适配库
03-16
Android AutoLayout全新的适配库，不产生任何多余的资源文件，完成各种分辨率的适配！
Android AutoLayout全新的适配方式
05-31
Android AutoLayout全新的适配方式 堪称适配终结
AutoLayout-Android, 支持多个屏幕的简单方法.zip
09-18
AutoLayout-Android, 支持多个屏幕的简单方法 面向Android的自动布局支持多个屏幕的简单方法。自动调整大小：每次使用屏幕尺寸时，写入。。自定义自适应策略。支持的纵横比。这里项目是来自 hongyangandroid/androidautolayout的分支，但不同。
android autoLayout.jar
04-23
android适配不同分辨率资源文件生成工具，帮助快速完成UI图到不同设备分辨率的卡死适配，工具简单实用，上手快捷。
Android autolayout 屏幕适配
12-17
Android autolayout 屏幕适配，测试工程中含有Fragement,listview,gridview,万能适配
Android-AutoAndroidLayoutAndroid屏幕适配方案直接填写设计图上的像素尺寸即可
08-12
AutoAndroidLayout Android屏幕适配方案，直接填写设计图上的像素尺寸即可
TangramKit：TangramKit是由Swift实现的功能强大的iOS UI框架。 它将功能与Android布局，iOS AutoLayout，SizeClass，HTML CSS float和flexbox和bootstrap集成在一起。 因此，您可以使用LinearLayout，RelativeLayout，FrameLayout，TableLayout，FlowLayout，FloatLayout，LayoutSizeClass来构建您的App。自动布局UIView UITableView
02-03
它集成了以下功能：iOS的Autolayout和SizeClass，Android的五个布局类，float和flex-box以及HTML / CSS引导程序。 TangramKit的Objective-C版本名为： 中文（简体）： 用法 有一个容器视图S，其宽度为100，高度...
迁移到Android Studio 3.0
热门推荐
ncuboy045wsq的专栏
06-20 2万+
前言Google 发布了Android Studio 3.0，有很多功能值得我们使用，比如：Android Profiler, Android Plugin for Gradle 3.0.0（com.android.tools.build:gradle:3.0.0-alpha3）等。 今天这篇主要介绍下Android Plugin for Gradle 3.0.0.1.更新配置Gradle需要更新
2分钟了解kotlin:优点，缺点，设计原则
ncuboy045wsq的专栏
07-08 1万+
1. 优点kotlin提供了很多好的特性，比如：null安全检测，属性访问，unchecked exceptions, publication有更详细的介绍。1.1 java 自动转换成kotlinkotlin项目开发总结有介绍如何使用，这个是有JetBrains提供的，目前已经集成到了IDEA/AS, 虽然它不是很完美（我的上篇博客也已经介绍到了），但是对比重新用Kotlin开发一个完全一样功能的
Android 分辨率适配
09-09
Android分辨率适配是指在开发Android应用时，考虑到各种分辨率的手机屏幕，以确保应用在不同屏幕上的显示效果良好。 有几种常见的方法可以实现Android分辨率适配。一种方法是创建不同分辨率下的布局文件夹，然后在其中定义对应的布局文件。例如，可以在res目录下创建layout-1800x1080.xml文件夹，用于适配1080*1800像素屏幕（例如魅族MX3）。Android系统会首先查找分辨率相同的布局，如果不存在，则使用默认的layout文件夹下的布局文件。 另一种方法是使用第三方库，如AutoLayout支持库。这个库允许使用像素（px）编写布局，并在运行时将像素数值转换为适应当前屏幕的大小。它能够自动将各个布局文件转换为对应的AutoLayout，从而无需在所有xml文件中手动更改。但是该库也存在一些问题。 除了上述方法，还有其他一些解决方案可以用于Android分辨率适配，例如使用百分比布局或动态计算布局的方式。根据具体的需求和应用程序的复杂性，可以选择适合的方法来实现Android分辨率适配。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值