美高梅平台下载-美高梅娱乐平台登录

热门关键词: 美高梅平台下载,美高梅娱乐平台登录

约束布局,根据基准线设置位置.

日期:2019-09-30编辑作者:美高梅平台下载

欢迎Follow我的GitHub, 关注我的简书. 其余参考Android目录.

ConstraintLayout 是什么

ConstraintLayout 是在2016年的 Google I/O 大会上推出的一种新型布局方式-约束布局,它可以灵活的控制组件在布局中的位置和大小,Google 为约束布局提供了配套的视图编辑器,让我们可以在可视化的界面中以拖拽的方式进行布局。可以认为 ConstraintLayout 是升级版本的 RelativeLayout,在相对布局的基础上,增加了比例这一概念,在下面的代码中将为大家详细介绍这一概念。

以下,我将会用 RL 表示RelativeLayout,CL 表示 ConstraintLayout,LL 表示 LinearLayout

图片 1

继承至ViewGroup

图片 2Constraint Layout

我的环境

  • Android Studio 版本:2.3
  • ConstraintLayout 版本:com.android.support.constraint:constraint-layout:1.0.2

第一步:下载最新版的Android Studio

本文的合集已经编著成书,高级Android开发强化实战,欢迎各位读友的建议和指导。在京东即可购买:

ConstraintLayout XML 属性

从 Android Studio 2.3 版本开始,我们创建新的布局会发现,默认的根布局已经变成了 CL

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="match_parent"
    tools:context="com.example.xiezhen.practice.DefaultActivity">

</android.support.constraint.ConstraintLayout>

接下来,将 CLRL 的属性进行比较,在了解了 CL 的基本属性后,将为大家介绍视图编辑器的中的各种操作,我会选择几种特有的操作进行讲解,相似的操作,大家可以自行练习

第二步:添加依赖

图片 3Android

ConstraintLayout 和 RelativeLayout

--- CL RL
与目标组件左对齐 layout_constraintLeft_toLeftOf layout_alignLeft
在目标组件的右边 layout_constraintLeft_toRightOf layout_toRightOf
与目标组件右对齐 layout_constraintRight_toRightOf layout_alignRight
在目标组件的左边 layout_constraintRight_toLeftOf layout_toLeftOf
与目标组件上对齐 layout_constraintTop_toTopOf layout_alignTop
在目标组件底部 layout_constraintTop_toBottomOf layout_below
与目标组件下对齐 layout_constraintBottom_toBottomOf layout_alignBottom
在目标组件的上部 layout_constraintBottom_toTopOf layout_above
与目标组件基线对齐 layout_constraintBaseline_toBaselineOf layout_alignBaseline

如上表格所示,RL的属性,CL都有,只不过在属性中多了 constraintXXX,这个部分,这部分代表 View 的边,表示View的上,下,左,右或者基线,只不过在RL中这一部分省略掉了。

在RL中,我们可以相对于父布局进行布局,例如将一个按钮与父布局的上边和左边对齐,XML 的布局代码是这样的:

图片 4

相对布局父布局依赖

在CL中是这样的:

图片 5

约束布局父布局

两种方式呈现的结果都是一样的:

图片 6

父布局依赖

compile 'com.android.support.constraint:constraint-layout:1.0.0'

ConstraintLayout, 即约束布局, 在2016年由Google I/O推出. 从支持力度而言, 将成为主流布局样式, 完全代替其他布局, 减少布局的层级, 优化渲染性能. 在新版Android Studio中, ConstraintLayout已替代RelativeLayout, 成为HelloWorld项目的默认布局. ConstraintLayout作为非绑定(Unbundled)的支持库, 命名空间是app:, 即来源于本地的包命名空间. 最新版本是1.0.1(2017.4.21), 在项目的build.gradle中声明.

ConstraintLayout 的比例

RelativeLayout 中,我们可以使用以下三种属性来指明组件在父布局中垂直居中,水平居中或者居中

图片 7

对齐属性

CL 中是这么做的
水平居中,建立与父布局左边和右边的依赖

图片 8

水平居中

垂直居中,建立与父布局上边和下边的依赖

图片 9

垂直居中

下面的代码展示了一个居中的按钮

图片 10

按钮居中.png-167.5kB

图片 11

按钮居中效果.png-30kB

现在来讲点和 RL 不同的东西,目前为止我们展现的效果都是 RL 或者 LL 可以实现的,让我们看看 CL 的这两个属性,这两个属性的取值范围都是[0,1]

  • layout_constraintHorizontal_bias
  • layout_constraintVertical_bias
    其实从属性名我们也可以猜出它的作用,可以认为是在水平方向或者竖直方向上偏移的百分比,上图展示的按钮居中,是因为默认的bias属性值为0.5,下面我们改变这两个属性值,将横向的 bias 改为0.9,垂直的 bias 改为 0.1,效果如下:

图片 12

Bias.png-89.6kB

图片 13

Bias 效果.png-35.5kB

概念:

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

ConstraintLayout 的尺寸

不同于其他组件,CL 内 View 的 layout_height 和 layout_width 有以下三种取值方式

  • 指定一个具体指
  • 使用 WRAP_CONTENT
  • 使用 0dp,等价于 MATCH_CONSTRAINT属性

注意:没有 MATCH_PARENT 属性,我们要注意约束的概念 0dp 就代表我们的宽高将充满约束,而不是充满父布局,举个例子,我们将中间的 Button 的顶部与上方 Button 的底部约束,将中间 Button 的底部与下方 Button 的顶约束,并且将高度设置为 0dp, 期待的表现是高度充满整个约束,效果如下:

图片 14

CL 尺寸.png-221.4kB

图片 15

CL 尺寸效果.png-31.1kB

ConstraintLayout约束布局的含义: 根据布局中的其他元素或视图, 确定View在屏幕中的位置. 包含三个重要信息, 根据其他视图设置位置, 根据父容器设置位置, 根据基准线设置位置.


本文源码的GitHub下载地址

ConstraintLayout 的宽高比

以前我们经常有需求,需要满足一定宽高比的 ImageView ,CL 给我们提供了易用的属性 layout_constraintDimentionRatio 我们只需要按照 width:height 的形式填写属性值就可以了,需要注意的是layout_height,layout_width 两个属性至少有一个属性值为0dp,如果两个都是 0dp,则需要指定一个受限制的边如下图,"h,11:3",意味着高度受限,按照宽高比11:3的比例跟随宽度进行变化

图片 16

CL 宽高比.png-200.2kB

图片 17

CL 宽高比效果.png-35.9kB

使用

ConstraintLayout约束布局的含义: 根据布局中的其他元素或视图, 确定View在屏幕中的位置, 受到三类约束, 即其他视图, 父容器, 基准线(Guideline).

ConstraintLayout chain

约束链,可以在垂直或者水平方向上提供群组行为,什么样的约束可以构成一条约束链,View 之间相互约束就可以形成链,例如下图展现一条最小的链,Button1 的底部和 Button2 的顶部相互约束

图片 18

CL Chain.png-180.4kB

图片 19

CL Chain 效果.png-35.8kB

约束链的几种形式

  1. spread:视图均匀分布
  2. spread_inside :chains 中头部和尾部的视图将会将会贴在各自的约束上,其余视图将会均匀分布
  3. spread_with_weight:在spread 或者 spread_inside 模式中,你可以像指定 LinearLayout 的 layout_weight 属性一样来设置 CL 的 layout_constraintVertical_weight 来达到和 LinearLayout weight的同样的效果
  4. packed:将视图打包在一起,默认居中,我们可以通过改变 chains 的 bias属性值,来调整整条链的偏移位置

chain,可以让我们很轻松的完成线性布局可以完成的事情,并且更方便特性更强大,盗用一张官网的图帮助理解 chains style:

图片 20

CL Style.png-14.6kB

layout_constraint[本源]_[目标]="[目标ID]"

layout_constraint[本源位置]_[目标位置]="[目标ID]"

spread

图片 21

spread

约束列表

例如:

spread_inside

图片 22

spread_inside

layout_constraintLeft_toLeftOf

app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"

spread_with_weight

图片 23

spread_with_weight.png-25.8kB

layout_constraintLeft_toRightOf

约束当前View的底部目标View的底部, 目标View是constraintLayout. 即, 把当前View的底部对齐到constraintLayout的底部.

packed

图片 24

packed.png-26.9kB

layout_constraintLeft_toRightOf

本例复用的Activity页面, 根据不同的参数设置对应的标题和布局ID.

packed bias

图片 25

packed bias.png-21.9kB

layout_constraintRight_toRightOf

public class LayoutDisplayActivity extends AppCompatActivity { private static final String TAG = LayoutDisplayActivity.class.getSimpleName(); static final String EXTRA_LAYOUT_ID = TAG + ".layoutId"; // 布局ID @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setTitle(getIntent().getStringExtra(Intent.EXTRA_TITLE)); final int layoutId = getIntent().getIntExtra(EXTRA_LAYOUT_ID, 0); setContentView; // 设置页面布局, 复用布局 }}

GuideLine

可以认为是辅助线,作用如其名了,我们可以在容器的水平或者竖直方向插入一条辅助线,容器内的 View 都可以和辅助线建立约束,这个特性非常好用,我们先来看看 GuideLine 的几个属性

  • layout_constraintGuide_begin 指定辅助线距离容器顶部或者左边的距离
  • layout_constraintGuide_end 指定辅助线距离容器底部或者右边的距离
  • layout_constraintGuide_percent 指定容器的宽或者高度的百分比

下面这个效果应该很常见,在中间插入一条垂直方向的 GuideLine,然后分别在 parent 右侧和 GuideLine,parent 左侧和 GuideLine 之间建立约束:

图片 26

CL GuideLine.png-227.5kB

图片 27

Cl GuideLine 效果.png-29.9kB

layout_constraintTop_toTopOf

主页面使用ListView展示多项, 每项对应不同的布局页面.

一些补充

  • Percent
  • Group
  • Barriers

layout_constraintTop_toBottomOf

public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ListView list =  findViewById(R.id.activity_main); ArrayAdapter<String> adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, LIST_ITEMS); list.setAdapter; list.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) { // 复用显示布局 Intent intent = new Intent(MainActivity.this, LayoutDisplayActivity.class); intent.putExtra(Intent.EXTRA_TITLE, LIST_ITEMS[i]); // 标题 intent.putExtra(LayoutDisplayActivity.EXTRA_LAYOUT_ID, LAYOUT_IDS[i]); // 布局Id startActivity; } }); }}

Percent

百分比布局,我们可以很容易的在 CL 中使用百分比布局,代码如下,将 layout_constraintHeight_default 设置为 percent 即采用百分比的方式布局,然后设置 layout_constraintHeight_percent 的属性值,来改变垂直方向的百分比,设置宽度百分比相同。

图片 28

百分比

图片 29

百分之效果

layout_constraintBottom_toTopOf

ConstraintLayout最基本的使用方式, 就是指定约束. 如, 取消按钮的底部对齐constraintLayout的底部, 左侧对齐父容器的左侧. 下一步按钮的底部对齐父容器的底部, 而左侧对齐取消按钮的右侧, 每个按钮添加Margin空隙.

Group

通过 constraint_referenced_ids 属性来指定 Group 包裹的 View,对这些 View 提供统一的可见性设置,目前感觉比较鸡肋,本来我以为可以使用 Group 来提供背景色的设置,或者其他群组行为,但是很可惜,目前提供的群组行为只有可见性而已

图片 30

Group.png-73.2kB

图片 31

Group Visible 效果.png-28.6kB

然后将 visibility 属性设置为 Gone ,可以看见两个 Button 的约束,变成了一条 Group 约束。

图片 32

Group Gone 效果.png-25.1kB

layout_constraintBottom_toBottomOf

父容器可以直接指定ID, 也可以使用parent代指.

Barriers

Barriers 可以理解为,在一组视图指定的边上创建一条 GuideLine。

  • constraint_referenced_ids属性,指定引用的视图组
  • barrierDirection属性,指定边(Barriers 的方向),有以下6种可选值 start,left,top,end,right,bottom。

如下图所示,有的时候我们可能会有类似的需求,左右两部分,左侧部分是 Title 和 Content,右侧为图像或者其他内容,如果采用 LL 和 RL 嵌套的方式,很容易解决,如果使用 CL 布局的话,我们就需要使用 Barrier 这个新特性来进行布局,在 Title 和 Content 指定为 Barrier 的引用试图组,然后在组的右边设置一条 Barrier,将图片与Barrier建立约束即可,如果不采用 Barrier ,而是直接让图片与 Title 或者 Content 建立约束,都有可能产生重叠的影响

采用 Barrier

图片 33

Barrier 效果.png-22kB

图片 34

Barrier.png-105.2kB

不采用 Barrier

图片 35

No Barrier.png-62.3kB

图片 36

No Barrier 效果.png-21.7kB

layout_constraintBaseline_toBaselineOf

<?xml version="1.0" encoding="utf-8"?><android.support.constraint.ConstraintLayout android: xmlns:andro xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <Button android: android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="16dp" android:layout_marginStart="16dp" android:text="取消" app:layout_constraintBottom_toBottomOf="@id/constraintLayout" app:layout_constraintStart_toStartOf="@id/constraintLayout"/> <Button android: android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="16dp" android:layout_marginStart="16dp" android:text="下一步" app:layout_constraintBottom_toBottomOf="@id/constraintLayout" app:layout_constraintStart_toEndOf="@id/cancel_button"/></android.support.constraint.ConstraintLayout>

总结

CL 还是很容易上手的,提供的各种特性比较强大,本文虽然是采用的 XML 的形式来介绍,但其实 CL 用视图编辑器,直接采用拖拽的方式更加的便捷,CL确实是减少了视图层级,但是有没有带来效率上的提升,就见仁见智了,到底在多复杂的布局情况下适合采用 CL 官方也没有给出明确的说法,在我测试的几个布局中,CL 的性能都没有超过 RL。另外 CL 毕竟发布只有一年,个人感觉还有很多特性不够成熟,例如 Group 的特性居然只能够改变群组可见性,Barrier的特性明明可以和 Group 结合到一起,我相信CL之后会原来越完善

本文由美高梅平台下载发布于美高梅平台下载,转载请注明出处:约束布局,根据基准线设置位置.

关键词:

注解处理器,接下我们将学习使用APT

主目录见:Android高级进阶知识我们在开发的时候为了提高效率往往会选择一个基于注解的框架,但是有时使用反射通...

详细>>

任何一个包含n个节点完全二叉树(满足从根节点开

一直以来,我都很少使用也避免使用到树和图,总觉得它们神秘而又复杂,但是树在一些运算和查找中也不可避免的要...

详细>>

实现方法,真正调用的构造

参考:Android中定时器的3种实现方法 在Android开发中,定时器一般有以下3种实现方法: 总结 Handler类的主要作用是发送...

详细>>

Android 架构师之路 目录,GUI 系统来说

在日常开发过程中时常需要用到设计模式,但是设计模式有23种,如何将这些设计模式了然于胸并且能在实际开发过程...

详细>>