Android ConstraintLayout 约束布局详解

Android ConstraintLayout 约束布局详解

早在2016年的Google I/O大会上 ,提出的一个可以灵活控制子控件的位置和大小的新布局。并且其号称可以实现布局最大程度的扁平化。Google 发布了Android Studio 2.2预览版,同时也发布了Android 新的布局方案 ConstraintLayout , 但是最近的一年也没有大规模的使用。2017年Google发布了 Android Studio 2.3 正式版,在 Android Studio 2.3 版本中新建的Module中默认的布局就是 ConstraintLayout 。如下所示:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    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="wrap_content"
    tools:context=".Main3Activity">

    
</androidx.constraintlayout.widget.ConstraintLayout>

在使用 ConstraintLayout 的布局方案,需要在 build.gradle 引入支持库:

dependencies {
    compile 'com.android.support.constraint:constraint-layout:1.0.1'
}

为什么要使用ConstraintLayout?

上面的定义也透露出重要的信息,那就是可以实现最大程度几乎完全的扁平化。我们知道项目中的布局嵌套问题对我们的项目性能有着不小的威胁。布局能实现扁平化的话会让软件性能得到很大的提升。所以我们在开发过程中都会尽量避免布局嵌套现象,但是一些复杂的显示效果必须要嵌套才能显示(PS:可以使用merge标签,自定义布局,比较麻烦)。这就有个矛盾。下面列举几点来表明ConstraintLayout是如何能解决这个矛盾,它的强大之处。

  1. Constraint Layout可以在不嵌套view group的情况下实现非常庞大、复杂的布局。实现扁平化。
  2. Constraint Layout同时具有Relative Layout和Linear Layout的优点、特性。功能强大。
  3. 使用Constraint Layout来布局时性能要比其他布局方式高。性能比较具体参考官方文档 :
    ConstraintLayout性能优势解析-官文
  4. Constraint Layout无论是通过布局管理器拖拽,鼠标控制的形式实现还是使用XML代码去写,都比较方便。这里推荐下郭霖大神的文章,通过布局管理器拖拽的方式去实现布局的。本文说明的是通过代码的形式实现的布局效果。
    拖拽方式来使用ConstraintLayout

https://developer.android.google.cn/training/constraint-layout

另外,ConstraintLayout 还有一个优点,它可以有效地解决布局嵌套过多的问题。我们平时编写界面,复杂的布局总会伴随着多层的嵌套,而嵌套越多,程序的性能也就越差。ConstraintLayout则是使用约束的方式来指定各个控件的位置和关系的,它有点类似于 RelativeLayout,但远比RelativeLayout要更强大。

ConstraintLayout向下兼容 API 9

关于 ConstraintLayout 的基本使用方法请参照郭神的博客: 
http://blog.csdn.net/guolin_blog/article/details/53122387

说说 LinearLayout 和 RelativeLayout

说到布局的时候就会条件性的想到LinearLayout线性步局RelativeLayout相对布局。我们知道,在measure过程。RelativeLayout由于其特性是measure两次的,而LinearLayout是正常情况下只measure一次,非正常情况下呢(也不算非正常~)就是使用weight权重的情况下,LinearLayout会对没有使用weight属性的控件做第一次measure,然后再对使用过weight属性的控件做第二次measure。综合来看使用LinearLayout性能上来说比RelativeLayout好些。所以系统的decorview他就是使用的LinearLayout,上面是标题栏下面是内容ContentView。那系统使用LinearLayout却给我们MainActivity推荐RelativeLayout布局呢?这是因为,RelativeLayout由于其特性,使用它来布局的话,更方便实现扁平化,或者说更贴近扁平化。也就是说,在官方看来,实现扁平化对提升性能的帮助更大。
 

常用方法总结

layout_constraintTop_toTopOf       // 将所需视图的顶部与另一个视图的顶部对齐。 

layout_constraintTop_toBottomOf    // 将所需视图的顶部与另一个视图的底部对齐。 

layout_constraintBottom_toTopOf    // 将所需视图的底部与另一个视图的顶部对齐。 

layout_constraintBottom_toBottomOf // 将所需视图的底部与另一个视图的底部对齐。 

layout_constraintLeft_toTopOf      // 将所需视图的左侧与另一个视图的顶部对齐。 

layout_constraintLeft_toBottomOf   // 将所需视图的左侧与另一个视图的底部对齐。 

layout_constraintLeft_toLeftOf     // 将所需视图的左边与另一个视图的左边对齐。 

layout_constraintLeft_toRightOf    // 将所需视图的左边与另一个视图的右边对齐。 

layout_constraintRight_toTopOf     // 将所需视图的右对齐到另一个视图的顶部。

layout_constraintRight_toBottomOf  // 将所需视图的右对齐到另一个的底部。

layout_constraintRight_toLeftOf    // 将所需视图的右边与另一个视图的左边对齐。

layout_constraintRight_toRightOf   // 将所需视图的右边与另一个视图的右边对齐。

偏移比例

layout_constraintHorizontal_bias  //控件的水平偏移比例

layout_constraintVertical_bias   //控件的垂直偏移比例

基线约束控键

layout_constraintBaseline_toBaselineOf

以上控件属性介绍我们根据相对位置(Relative Position)

我们通过ConstraintLayout来实现下面的一个效果:

Android ConstraintLayout 约束布局详解

布局代码如下

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/content"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/got"
        android:layout_width="100dp"
        android:layout_height="120dp"
        android:layout_marginStart="10dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="6dp"
        android:scaleType="fitXY"
        android:src="@drawable/got"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/item_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="4dp"
        android:text="权利的游戏第八季(更新中)"
        android:textColor="#000"
        android:textSize="18sp"
        app:layout_constraintLeft_toRightOf="@+id/got"
        app:layout_constraintTop_toTopOf="@+id/got" />

    <TextView
        android:id="@+id/rating"
        android:layout_width="50dp"
        android:layout_height="20dp"
        android:layout_marginTop="8dp"
        android:gravity="center"
        android:text="评分"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="@+id/item_title"
        app:layout_constraintTop_toTopOf="@+id/got" />

    <TextView
        android:id="@+id/score"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="5dp"
        android:layout_marginLeft="5dp"
        android:gravity="center"
        android:text="3.3"
        app:layout_constraintBottom_toBottomOf="@+id/rating"
        app:layout_constraintLeft_toRightOf="@+id/rating"
        app:layout_constraintTop_toTopOf="@+id/rating" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="集数:6"
        android:textColor="@android:color/darker_gray"
        android:textSize="18sp"
        app:layout_constraintBottom_toBottomOf="@+id/got"
        app:layout_constraintLeft_toLeftOf="@+id/item_title" />

    <ImageView
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_marginEnd="15dp"
        android:layout_marginRight="15dp"
        android:src="@drawable/player"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Android ConstraintLayout 约束布局详解

现在我们来解读下上面的代码是如何实现这种效果的。首先我们看到了ImageView中的:

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"

这两行代码,这两行代码就是控制我们布局中控件的位置的,几乎每个控件都有,这个属性的字面意思很好理解,约束控件的左边在“parent”的左边,约束控件的上边在“parent”的上边。其实也就是约束控件的左边,上边和‘parent’的左边,上边对齐的意思。
那“parent”是什么呢?顾名思义,在这里就是ConstraintLayout。表示他的父布局。所以这两行代码也就控制了控件的位置:在ImageView位于布局的左上角。

下面再分析一下view id为item_title的TextView中使用。

app:layout_constraintLeft_toRightOf="@+id/got"
app:layout_constraintTop_toTopOf="@+id/got"

这两句的意思是,约束控件的左边在view id为photo的view的右边,约束控件的上边与view id为photo的view的上边对齐。
通过这两次的分析,大家可以细细体会一下。

 

总结

通过上面对ConstraintLayout的特性介绍,我们发现ConstraintLayout的确实很强大,有能力实现扁平化的极致。他融合了RelativeLayout和LinearLayout的优点,比如相对位置,weight chains。并且他又多出来很多RelativeLayout和LinearLayout不具备的优点。所以说ConstraintLayout的掌握还是很有必要的。书到用时方恨少,纸上得来终觉浅。祝君好运。

参考文献

https://developer.android.google.cn/training/constraint-layout

https://developer.android.com/reference/android/support/constraint/Guideline.html
https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html#CenteringPositioning
http://blog.csdn.net/lmj623565791/article/details/78011599?utm_source=tuicool&utm_medium=referral

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/115020.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • UDP发送大型文件_不丢包[通俗易懂]

    UDP发送大型文件_不丢包[通俗易懂]先上图1:如果对文件要求不高的话,可以使用UDP,UDP在实际测试中,丢包还是听验证的,但是效率高2:如果文件必须完整,还是使用TCP。Socket进行文件传输,比较稳妥近期的项目中要是用软件升级,系统文件有600M。一般的程序员会说,下载吗,直接下载安装就好了,我也是这样想的,素不知线下的网络的环境有多差,当时一个业务员和我说,要是能实现手机发送文件给设备就好了,毕竟大家都是用手机…

  • CentOS7怎么保存退出vi编辑

    CentOS7怎么保存退出vi编辑CentOS7怎么保存退出vi编辑(转自阿里云)保存命令按ESC键跳到命令模式,然后::w保存文件但不退出vi:wfile将修改另外保存到file中,不退出vi:w!强制保存,不推出vi:wq保存文件并退出vi:wq!强制保存文件,并退出viq:不保存文件,退出vi:q!不保存文件,强制退出vi:e!放弃所有修改,从上次保存文件开始再编辑…

  • 如何测试ntp时间服务器

    C:\DocumentsandSettings\Administrator>w32tm/stripchart/computer:aisa.pool.ntp.orgTrackingaisa.pool.ntp.org[180.168.41.175].Thecurrenttimeis2012-3-715:35:23(localtime).15:35:23err

  • javaint数组转list集合_数组转int

    javaint数组转list集合_数组转intJava数组和集合LIst互转

  • qml demo分析(threading-线程任务)

    qml demo分析(threading-线程任务)

  • 锐捷交换机常用命令速查[通俗易懂]

    锐捷交换机常用命令速查[通俗易懂]准备工作       >Enable进入特权模式  #Exit  返回上一级操作模式  #End  返回到特权模式  #writememory或copyrunning-configstartup-config  保存配置文件  #delflash:config.text  删除配置文件(交换机及1700系列路由器)  #erasestartup-co

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号