Android开发 - 掌握ConstraintLayout(一)传统布局的问题

在传统的Android开发中,页面布局占用了我们很多的开发时间,而且面对复杂页面的时候,传统的一些布局会显得非常复杂,每种布局都有特定的应用场景,我们通常需要各种布局结合起来使用来实现复杂的页面。随着ConstraintLayout的推出,这种现象有了很大的改善,而且它可以实现很多传统布局难以实现的功能。

本系列我们就一起来学习ConstraintLayout的使用,来大幅提高我们的生产力。

传统布局

在ConstraintLayout退出之前,我们经常使用FrameLayout, LinearLayout, RelativeLayout, ***Layout等来布局页面。这些布局当然有其方便的地方,但是其方便地同时也限制了我们的使用场景,在写一些复杂页面的时候就显得力不从心,我们先做一下简单地回顾:

  • FrameLayout:帧布局。最常用并且简单的布局,通常用于错误页面的显示,蒙层的显示等。
  • LinearLayout:线性布局。当我们绘制需要顺序排列的内容时,我们使用使用此布局。
  • RelativeLayout:相对布局。相当于ConstraintLayout的低级版本。顾名思义,可以各个View之间相对地指定位置进行布局。
  • ...

存在的问题

以上布局并不是完美的,比如我们要布局这个页面:

我们如果使用传统的布局,可能会导致布局的层级多层嵌套:

<RelativeLayout>
    <ImageView/>
    <ImageView/>
    <RelativeLayout>
        <TextView/>
        <LinearLayout>
            <TextView/>
            <RelativeLayout>
                <EditText/>
            </RelativeLayout>
        </LinearLayout>
        ...
    </RelativeLayout>
    ...
</RelativeLayout>
  • 布局复杂
    使用传统的布局虽然可以实现我们的需求,但是在代码实现中有非常多的嵌套,而且要结合许多布局的特性来实现,这样复杂的布局让我们难以维护。
  • 效率底下
    当布局层级越深的时候,系统的绘制效率越低,当子View.invalidate()的时候,也会导致其父View进行重新绘制。
    又比如这些布局中相对灵活的RelativeLayout,它会被测量至少两次,已确定最终渲染时的位置,也同样会影响效率。
  • 难以创建复杂动画
    Android在属性动画(ObjectAnimator)推出之前,执行动画的原理其实只是在绘制的时候执行,并不是真正的改变了布局,在属性推出之后,虽然确实可以改变其真实的布局属性,但是由于布局特性的约束以及各个View之间的约束,创建复杂的动画也并非易事。

ConstraintLayout登场!

下面我们进入本系列的主角:ConstraintLayout!

使用ConstraintLayout可以解决以上传统布局存在的种种问题,而且Android Studio也提供了强大而且简单易用的编辑器,使用它可以让我们的开发效率大大增加。

下一篇我们将介绍它:Android开发 - 使用ConstraintLayout(二)介绍

本文地址,如有更多疑问,请参考我的其它Android相关博客:我的博客地址

原文地址:http://blog.51cto.com/11761032/2310731

时间: 2024-07-31 04:44:56

Android开发 - 掌握ConstraintLayout(一)传统布局的问题的相关文章

Android开发 - 掌握ConstraintLayout(三)编辑器

从本篇博客开始我们开始介绍如何使用ConstraintLayout.既然ConstraintLayout叫约束布局,首先我们先介绍什么叫约束(Constraints): 约束(Constraints) 一个约束表示View之间的"布局约束"关系,以及约束的位置,类似RelativeLayout的"相对"概念. 编辑器介绍 在工程中我们新建一个布局activity_main.xml,整个界面如下: 这是一个编辑器整体的界面,下面我们来介绍一些常用的功能: 设计/文本视

Android开发 - 掌握ConstraintLayout(四)创建基本约束

上一篇我们介绍了编辑器的基本使用,本文我们介绍创建基本的约束. "约束"表示View之间的位置关系.当我们在ConstraintLayout布局中创建View时,如果我们没有添加任何约束,虽然在设计视图我们可以拖动它们到任意位置,但是运行后都会在左上角的原点位置,同时代码中也会给出警告: 所以我们必须确保我们的View都被添加了适当的约束.我们常用的约束通常有两种,一种是相对父View的约束,一种是相对其它View的约束. 相对父布局的约束 创建相对布局的约束时比较简单,将对象方位的锚

Android开发 - 掌握ConstraintLayout(九)分组(Group)

使用ConstraintLayout后我们的布局是没有层级关系的,各个View之间都是平级关系,但是如果根据某个业务条件来控制多个View的显示与否,我们需要分别对每个View进行控制,需要调用多次setVisibility().这样就显得非常不方便. 本文所介绍的Group就是解决这个问题的. Group就是一个分组,可以关联多个View,从而只需要对这个分组进行控制就可以实现这样的场景. 我们下面来介绍它的使用. 添加分组 首先,我们添加一个Group: 关联元素 然后将页面上的元素拖动到这

Android开发 - 掌握ConstraintLayout(六)链条(Chains)

本文我们介绍链条(Chains),使用它可以将多个View连接起来,互相约束. 可以创建横向的链条,也可以创建纵向的链条,我们以横向的链条举例: 我们先创建三个按钮: 我们选中三个按钮后在上面点右键创建链条: 创建后我们发现这三个View平均分布地排列了: 最简单的使用是平均分布,当然也可以不平均分布,具体看约束的具体设置,比如将第一个Button的marginEnd设置成10后链条会自动地分布每个View的位置. 这使得分布View变得非常灵活,并且从某种程度上可以取代LinearLayout

Android开发 - 掌握ConstraintLayout(八)障碍线(Barrier)

本文我们来介绍障碍线(Barrier)的使用,平常在开发中用的相对要少一些,但是在需要时会非常方便. 它的作用是将多个元素放到这个障碍线里面使时,其中的任何元素的大小或位置变化时都会使它的位置进行改变. 可以理解成一面墙,"墙"里面任何元素的位置或大小改变时都会导致它的改变,从而保证所有的元素都在"墙"里面. 下面我们来举例进行说明,会更加直观. 首先,我们先创建两个元素: 接下来,我们来创建一条垂直的Barrier: 创建后,我们把这两个View拖到这个Barri

Android开发中的性能优化---布局

1.基础 Android中所有的View都是"画"在手机屏幕上的,系统是每隔16ms更新一次Activity中的内容,所以为了让用户看不到卡顿,就要想尽一切方法来让界面在16ms内更改完成,遵循的原则其实只有一个-----尽量的少画东西,这样效率当然就会提高,至于什么减少布局层次,避免重复绘制,总结下来还是尽量少画东西.    为什么是16ms?因为现在市面上的手机一般都是60hz的,所以 16ms/ 帧 ≈ 1s / 60hz 2.方法 使用手机中的开发人员工具--->调试GP

Android开发之详解五大布局

为了适应各式各样的界面风格,Android系统提供了5种布局,这5种布局分别是: LinearLayout(线性布局) TableLayout(表格布局) RelativeLayout(相对布局) AbsoluteLayout(绝对布局) FrameLayout(框架布局) 利用这五种布局,可以在屏幕上将控件随心所欲的摆放,而且控件的大小和位置会随着屏幕大小的变化作出相应的调整.下面是这五个布局在View的继承体系中的关系:<ignore_js_op> 一,LinearLayout(线性布局)

Android开发之玩转FlexboxLayout布局

在这之前,我曾认真的研究过鸿洋大神的Android 自定义ViewGroup 实战篇 -> 实现FlowLayout,按照大神的思路写出了一个流式布局,所有的东西都是难者不会会者不难,当自己能自定义流式布局的时候就会觉得这东西原来很简单了.如果各位小伙伴也看过那篇文章的话,应该知道自定义流式布局还是非常麻烦的,不过Google今年开源了新的容器,就是这个FlexboxLayout,如果你玩过前端开发或者玩过RN,就会觉得这个FlexboxLayout真是简单,OK,那我们今天就来看看这个Flex

Android开发之补间动画-布局添加动画

布局添加动画 使用步骤: 1.获取到布局的id 1 RelativeLayout ly=(RelativeLayout)findViewById(R.id.layout); 2.设置动画样式 1 ScaleAnimation sa = new ScaleAnimation(0, 1,0,1); //设置动画效果 2 sa.setDuration(3000); 3.使用布局动画管理器 1 LayoutAnimationController lac = new LayoutAnimationCont