ConstraintLayout 想说爱你不容易!

简介:       ConstraintLayout 约束布局 的发布已经很长时间了,小菜用的比较少,测试时看到同事用的 ConstraintLayout 布局方式编辑的 xml,觉得有必要学习一下,并记录一下小菜在学习过程中遇到的小问题。

      ConstraintLayout 约束布局 的发布已经很长时间了,小菜用的比较少,测试时看到同事用的 ConstraintLayout 布局方式编辑的 xml,觉得有必要学习一下,并记录一下小菜在学习过程中遇到的小问题。
      小菜理解的约束布局是相对布局的升级版,相对位置,更依赖于其他控件位置,关联性更强。


小菜的测试小结如下:

  1. 命名空间需要用 xmlns:app="http://schemas.android.com/apk/res-auto" 类似于自定义属性效果;如果只是随意添加一个控件,而不做任何操作,会提示如下:
    提醒.png
  2. 控件的居中与对齐方式,约束布局中并没有类似于 LinearLayout/RelativeLatout 可以直接设置居中的属性,需要关联周围的布局,相互约束,例如:
<LinearLayout
    android:id="@+id/linearLayout"
    android:layout_width="0dp"
    android:layout_height="100dp"
    android:orientation="horizontal"
    android:padding="6dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent" />

Tips:
      2.1 约束布局中建议每个控件都设置 id,这样在互相关联约束中会更便捷;没有设置 id 时,若关联父类布局控件关联 id 为 parent:如 app:layout_constraintLeft_toLeftOf="parent",若关联同级布局控件,AndroidStudio 会自动在关联控件中添加默认 id,如 app:layout_constraintLeft_toLeftOf="@id/test_left_lay"
      2.2 小菜对于这种关联方式 app:layout_constraintLeft_toLeftOf="parent" 的方便理解可以作为拆分理解,如图:

拆分.png

      2.3 约束布局的关联性很强,如果【控件 B】的位置时根据【控件 A】的位置关联设置的,那么鼠标滑动调整【控件 A】的位置,【控件 B】的位置也会共同移动,如图:
关联移动.png

  1. 在 Design 模式下点击任意一个控件,可看到有几个可操作的快捷方式:

第一个:控件四周的实心正方型,鼠标拖动拉伸即可调整控件的整体大小,按比例缩放:
拉伸.png

第二个:控件四个边框中心的空心圆,鼠标点击拖动即可调整与其他控件的关联关系:
关联.png

第三个:控件左下角带箭头的红×,点击即可清空本控件与其他控件的关联关系,并在 xml 中自动添加一个绝对位置的坐标:

tools:layout_editor_absoluteX="142dp"
tools:layout_editor_absoluteY="501dp"
位置清空.png

第四个:控件为 TextView 时,左下角会出现一个 ab 样式小图标,点击即在文字下出现一个实心长条矩形,用来与其他 TextView 进行文字对齐:
内容关联.png
  1. 控件相对于布局的比例/权重,这个就像第二条中居中对齐的功能,如图,控件左侧距左边框长度控件右侧距右边框长度 即图中 x/y 的比例即为相对于布局的水平权重: app:layout_constraintHorizontal_bias="0.3";控件顶部距上边框长度控件底部距下边框长度 即图中 a/b 的比例即为相对于布局的垂直权重:app:layout_constraintVertical_bias="0.273";当为 0.5 时即为居中;

    权重.png

  2. 自身控件的比例,这也是小菜最喜欢的属性,根据 app:layout_constraintDimensionRatio="4:3" 即可设置自身的的比例,即长度/高度,对于图片的各种比例设置会非常的方便,注意,使用该属性时,控件宽度可固定或 wrap_content,高度则应设为 0dp,若高度设为 wrap_content,则该属性不起作用,如图:
    自身比例.png

Tips:
      小菜对这个布局很不熟悉,学习测试过程中也是各种尝试,七零八散的,仅记录一下小菜觉得很有意思的地方。
      小菜认为,约束布局更适合直接将控件拖拽进布局然后进行大致设置位置,然后再对具体的控件进行样式位置的具体调整,适合页面布局相对简单的页面,例如登录注册等。
      同时,约束布局有太多的东西需要学习和挖掘,熟练应用会对于布局方面的优化会有很大帮助。


      很多看起来很细小的问题有时候也很值得研究,下面的是小菜的公众号,欢迎闲来吐槽哦~


公众号
目录
相关文章
|
2月前
|
XML Android开发 UED
💥Android UI设计新风尚!掌握Material Design精髓,让你的界面颜值爆表!🎨
随着移动应用市场的蓬勃发展,用户对界面设计的要求日益提高。为此,掌握由Google推出的Material Design设计语言成为提升应用颜值和用户体验的关键。本文将带你深入了解Material Design的核心原则,如真实感、统一性和创新性,并通过丰富的组件库及示例代码,助你轻松打造美观且一致的应用界面。无论是色彩搭配还是动画效果,Material Design都能为你的Android应用增添无限魅力。
69 1
|
XML Java Android开发
Android ExpandableListView 使用中遇到的问题集锦
Android ExpandableListView 使用中遇到的问题集锦
|
编解码 安全 机器人
【Android从零单排系列一】《Android系统发展史》
本文系统介绍了Android系统的由来、发展历史,各版本发展演变过程及特性。
【Android从零单排系列一】《Android系统发展史》
|
IDE Java Apache
【Android从零单排系列二】《Android开发介绍》
Android app开发使用的主流语言是Java。Java语言最大的特点就是提高了软件交互的可能性。 可以说Android手机的应用几乎都是用Java语言写的。使用Java语言开发的软件库、数据库和运行时是android手机软件的一个主要特点。
【Android从零单排系列二】《Android开发介绍》
|
缓存 IDE 前端开发
致终将逝去的 Android
致终将逝去的 Android
109 0
致终将逝去的 Android
|
Android开发
android自定义控件——画一个海底世界
android自定义控件——画一个海底世界
177 0
android自定义控件——画一个海底世界
|
XML Android开发 数据格式
ConstraintLayout 想说爱你不容易 (二)
日常补漏,学习一下 ConstraintLayout 基本用法!
502 0
ConstraintLayout 想说爱你不容易 (二)
|
机器学习/深度学习 Java 程序员
Android 凉了?聊聊Android的出路,架构必备技术
从现在很多 Android 培训广告来看,Android 没凉,似乎还回暖了,不过不可否认,现在做 Android 确实比以前难过,其实每个行业发展到一定程度都会饱和,这都是属于正常情况,如果你第一份工作是 Android,如今工作三四年,想必也会遇到技术瓶颈,无关 Android 是否没人要,也...
|
Android开发
Android开发 - 掌握ConstraintLayout(七)辅助线(Guideline)
了解过UI设计的同学都知道,在设计的时候,我们经常在界面上拖进一些辅助线来帮我们对齐UI元素,或者方便我们统一的页边距。 在ConstraintLayout的编辑器中,同样也支持这样的功能,我们可以创建一些横向的或者纵向的Guideline,在布局界面的时候可以充分利用这些辅助线,对齐我们的View,避免重复写一些marginXXX。
1594 0
|
算法 Android开发 API
Android开发 - 掌握ConstraintLayout(二)介绍
介绍 发布时间 ConstraintLayout是在2016的Google I/O大会上发布的,经过这么长时间的更新,现在已经非常稳定。 支持Android 2.3(API 9)+ 目前的Android设置几乎没有低于Android4.4(Api 19)的,所以ConstraintLayout可以支持所有的设备。
1247 0