让代码更简单

当前位置:代码狗 > 经验教程 > 网友经验 > 正文

安卓ConstraintLayout布局简单使用

ConstraintLayout是Android Studio 2.2中主要的新增功能之一,也是Google在去年的I/O大会上重点宣传的一个功能。我们都知道,在传统的Android开发当中,界面基本都是靠编写XML代码完成的,虽然Android Studio也支持可视化的方式来编写界面,但是操作起来并不方便,我也一直都不推荐使用可视化的方式来编写Android应用程序的界面。

而ConstraintLayout就是为了解决这一现状而出现的。它和传统编写界面的方式恰恰相反,ConstraintLayout非常适合使用可视化的方式来编写界面,但并不太适合使用XML的方式来进行编写。当然,可视化操作的背后仍然还是使用的XML代码来实现的,只不过这些代码是由Android Studio根据我们的操作自动生成的。

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

使用

我使用的Android studio3.0新建activity时会默认使用ConstraintLayout布局,如果你的编译器没有使用它你可以在build中添加依赖

dependencies {
 implementation 'com.android.support.constraint:constraint-layout:1.0.2'
}

注:compile已被implementation替代,请使用implementation添加依赖。

基本操作

下面我们来学习一些具体的操作吧,ConstraintLayout的基本用法很简单,比如我们想要向布局中添加一个按钮,那么只需要从左侧的Palette区域拖一个Button进去就可以了,如下图所示。

安卓ConstraintLayout布局完全解析

安卓ConstraintLayout布局简单使用

虽说现在Button已经添加到界面上了,但是由于我们还没有给Button添加任何的约束,因此Button并不知道自己应该出现在什么位置。现在我们在预览界面上看到的Button位置并不是它最终运行后的实际位置,如果一个控件没有添加任何约束的话,它在运行之后会自动位于界面的左上角。

那么下面我们就来给Button添加约束,每个控件的约束都分为垂直和水平两类,一共可以在四个方向上给控件添加约束,如下图所示。

安卓ConstraintLayout布局完全解析

安卓ConstraintLayout布局简单使用

上图中Button的上下左右各有一个圆圈,这圆圈就是用来添加约束的,我们可以将约束添加到ConstraintLayout,也可以将约束添加到另一个控件。比如说,想让Button位于布局的右下角,就可以这样添加约束,如下图所示。

安卓ConstraintLayout布局简单使用

安卓ConstraintLayout布局简单使用

我们给Button的右边和下边添加了约束,因此Button就会将自己定位到布局的右下角了。类似地,如果我们想要让Button居中显示,那么就需要给它的上下左右都添加约束,如下图所示。

安卓ConstraintLayout布局简单使用

安卓ConstraintLayout布局简单使用

这就是添加约束最基本的用法了。

除此之外,我们还可以使用约束让一个控件相对于另一个控件进行定位。比如说,我们希望再添加一个Button,让它位于第一个Button的正下方,并且间距64dp,那么操作如下所示。

安卓ConstraintLayout布局简单使用

安卓ConstraintLayout布局简单使用

现在添加约束的方式我们已经学完了,那么该怎样删除约束呢?其实也很简单,删除约束的方式一共有三种,第一种用于删除一个单独的约束,将鼠标悬浮在某个约束的圆圈上,然后该圆圈会变成红色,这个时候单击一下就能删除了,如下图所示。

安卓ConstraintLayout布局简单使用

安卓ConstraintLayout布局简单使用

第二种用于删除某一个控件的所有约束,选中一个控件,然后它的左下角会出现一个删除约束的图标,点击该图标就能删除当前控件的所有约束了,如下所示。

安卓ConstraintLayout布局简单使用

安卓ConstraintLayout布局简单使用

第三种用于删除当前界面中的所有约束,点击工具栏中的删除约束图标即可,如下图所示。

安卓ConstraintLayout布局简单使用

安卓ConstraintLayout布局简单使用

文章来自guolin的CSDN博客:https://blog.csdn.net/guolin_blog/article/details/53122387

感觉很棒!可以赞赏支持我哟~

赞(0) 打赏

评论 2

  1. #2

    文章不错非常喜欢

    女装品牌1年前 (2018-10-23)回复
  2. #1

    谢谢分享 ,会一直关注博主的,内容很赞

    找果树1年前 (2018-10-23)回复
×

请作者吃根烤肠!

支付宝