为什么ConstraintLayout代替其他布局

最新推荐文章于 2024-04-23 18:52:22 发布
最新推荐文章于 2024-04-23 18:52:22 发布
阅读量94 收藏
点赞数
文章标签： java 移动开发
原文链接：https://my.oschina.net/dccjll/blog/1036415
版权

为什么80%的码农都做不了架构师？>>>   hot3.png

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

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

本文源码的GitHub下载地址

1240

Constraint Layout

概念

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

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

例如: 

app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"

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

演示

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

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(layoutId); // 设置页面布局, 复用布局
    }
}

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

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ListView list = (ListView) findViewById(R.id.activity_main);
        ArrayAdapter<String> adapter = new ArrayAdapter<>(this,
                android.R.layout.simple_list_item_1, LIST_ITEMS);
        list.setAdapter(adapter);
        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(intent);
            }
        });
    }
}

基础

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

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

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    android:id="@+id/constraintLayout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/cancel_button"
        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:id="@+id/next_button"
        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>

ConstraintLayout的属性设置, 最重要的就是理解属性的表示含义.

1240

Base

比例

ConstraintLayout除了指定约束, 还支持设置比例. Center按钮的全部边界与constraintLayout(父容器)边界对齐, 则为居中. 同时还可以设置水平与竖直的比例, 如Bias按钮, 在对齐父容器后, 设置水平与竖直的比例均为0.25, 表示左侧与右侧比例是1:4, 上部与下部的比例是1:4.

constraintHorizontal_bias设置水平比例, constraintVertical_bias设置竖直比例. 

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/constraintLayout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Center"
        app:layout_constraintEnd_toEndOf="@id/constraintLayout"
        app:layout_constraintStart_toStartOf="@id/constraintLayout"
        app:layout_constraintTop_toTopOf="@+id/constraintLayout"
        app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Bias"
        app:layout_constraintEnd_toEndOf="@id/constraintLayout"
        app:layout_constraintStart_toStartOf="@id/constraintLayout"
        app:layout_constraintTop_toTopOf="@+id/constraintLayout"
        app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"
        app:layout_constraintHorizontal_bias="0.25"
        app:layout_constraintVertical_bias="0.25"/>

</android.support.constraint.ConstraintLayout>

1240

Bias

引导线

ConstraintLayout除了与视图约束以外, 还支持与引导线(Guideline)约束. 如, 设置竖直引导线(Guideline)距离左侧72dp. 两个按钮的左侧都与引导线约束, 上下使用比例方式排列, 一个是0.25, 一个是0.75.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/constraintLayout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.constraint.Guideline
        android:id="@+id/guideLine"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="72dp"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Guide Up"
        app:layout_constraintStart_toStartOf="@id/guideLine"
        app:layout_constraintTop_toTopOf="@+id/constraintLayout"
        app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"
        app:layout_constraintVertical_bias="0.25"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Guide Down"
        app:layout_constraintStart_toStartOf="@id/guideLine"
        app:layout_constraintTop_toTopOf="@+id/constraintLayout"
        app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"
        app:layout_constraintVertical_bias="0.75"/>

</android.support.constraint.ConstraintLayout>

1240

Guide Line

视图尺寸

ConstraintLayout也支持自动填充宽高, 把宽高设置为0dp会根据位置自动填充. 如, Large按钮, 左侧与Small按钮的左侧对齐, 右侧与constraintLayout(父控件)的右侧对齐, 宽度设置为0dp, 则会填充全部空位.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    android:id="@+id/constraintLayout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/small"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Small"
        app:layout_constraintStart_toStartOf="@id/constraintLayout"
        app:layout_constraintTop_toTopOf="@id/constraintLayout"/>

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Large"
        app:layout_constraintBottom_toBottomOf="@id/constraintLayout"
        app:layout_constraintEnd_toEndOf="@id/constraintLayout"
        app:layout_constraintStart_toEndOf="@id/small"
        app:layout_constraintTop_toTopOf="@id/constraintLayout"/>

</android.support.constraint.ConstraintLayout>

1240

Measure

纵横比

ConstraintLayout支持使用constraintDimensionRatio设置宽高的纵横比, 把宽(layout_width)或者高(layout_height)设置为0dp, 则根据另一个属性值和比例, 计算当前属性值.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    android:id="@+id/constraintLayout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="0dp"
        android:layout_height="200dp"
        android:background="@color/colorAccent"
        android:src="@drawable/total_large"
        app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"
        app:layout_constraintLeft_toLeftOf="@+id/constraintLayout"
        app:layout_constraintRight_toRightOf="@+id/constraintLayout"
        app:layout_constraintTop_toTopOf="@+id/constraintLayout"
        app:layout_constraintDimensionRatio="16:9"/>

    <ImageView
        android:layout_width="0dp"
        android:layout_height="200dp"
        android:background="@color/colorAccent"
        android:contentDescription="@null"
        android:src="@drawable/total_large"
        app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"
        app:layout_constraintDimensionRatio="4:3"
        app:layout_constraintLeft_toLeftOf="@+id/constraintLayout"
        app:layout_constraintRight_toRightOf="@+id/constraintLayout"/>

</android.support.constraint.ConstraintLayout>

1240

Ratio

链样式

ConstraintLayout同时支持链样式, 这与LinearLayout的layout_weight属性非常类似, 通过设置不同的样式排列元素.

1240

Chain

app:layout_constraintHorizontal_chainStyle设置水平链.

<TextView
    android:id="@+id/property_tv_cst_aries"
    style="@style/MemberWidget.Constellation"
    android:layout_marginLeft="@dimen/spacing_big"
    android:layout_marginTop="@dimen/spacing_medium"
    android:onClick="@{listener::onConstellationSelected}"
    android:text="白"
    app:layout_constraintHorizontal_chainStyle="spread_inside"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/property_tv_cst_taurus"
    app:layout_constraintTop_toBottomOf="@id/property_tv_constellation" />

通过不同的链式组合, 生成复杂的视图样式.

1240

Chains

ConstraintLayout的基本使用方式就是这些, 兼顾LinearLayout与RelativeLayout的优点, 非常适合构建复杂布局, 降低布局的层级, 加快渲染速度.

转载于:https://my.oschina.net/dccjll/blog/1036415

weixin_34138521
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ConstraintLayout——约束性布局学习
自由奔跑的风
07-27 1万+
ConstraintLayout简介 Constraint Layout是Google在2016年的Google I/O大会上提出的一个可以灵活控制子控件的位置和大小的新布局。并且其号称可以实现布局最大程度的扁平化。 ConstraintLayout优点 我们知道项目中的布局嵌套问题对我们的项目性能有着不小的威胁。布局能实现扁平化的话会让软件性能得到很大的提升。所以我们在开发过程中都会尽...
ConstraintLayout的layout布局文件
11-13
ConstraintLayout的练习布局文件layout，里面有十几种常用的布局文件，讲解ConstraintLayout的属性已经使用
为什么ConstraintLayout代替其他布局?
Vegetable的博客
06-22 351
ConstraintLayout, 即约束布局, 在2016年由Google I/O推出. 从支持力度而言, 将成为主流布局样式, 完全代替其他布局, 减少布局的层级, 优化渲染性能. 在新版Android Studio中, ConstraintLayout已替代RelativeLayout, 成为HelloWorld项目的默认布局. ConstraintLayout作为非绑定(Unbundled
为什么要使用ConstraintLayout?
jingSummer的博客
11-23 1802
本文为博主原创文章，转载请注明出处：http://blog.csdn.net/jingsummer/article/details/78615360 源码地址：ConstraintLayoutDemo相信大家对ConstraintLayout并不陌生，Android Studio升级2.2之后，默认生成的XML布局已经从原来的RelativeLayout替换为ConstraintLayout，并且g
Android进阶——实战使用ConstraintLayout 替代LinearLayout、RelativeLayout和PercentLayout
热门推荐
最美不过，心中有梦，身旁有你！
09-26 2万+
ConstraintLayout 可以替代很多常规布局组件快速实现相同的效果，尤其是在使用LinearLayout、RelativeLayout、PercentLayout需要进行N层嵌套的才能实现的时候，使用约束布局简单有效的实现UI效果。
constraintlayout嵌套_使用ConstraintLayout替代你的多层嵌套布局 相关文章
weixin_39616565的博客
12-20 132
Android 入门——使用ConstraintLayout替代你的多层嵌套布局 相关文章原文信息 ：Android 入门——使用ConstraintLayout替代你的多层嵌套布局标签 android Constraint 约束布局 限制布局栏目 Android布局嵌套 多层嵌套 多层嵌套RadioButton oracle多层嵌套 嵌套使用 嵌入式布局 双层嵌套 三层嵌套 FragmentTa...
详解Android ConstraintLayout 约束布局的用法
08-28
本篇文章主要介绍了详解Android ConstraintLayout 约束布局的用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
android 布局之ConstraintLayout的使用
08-27
主要介绍了android 布局之ConstraintLayout的使用,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
android demo，ConstraintLayout （约束布局）
05-28
android demo，ConstraintLayout （约束布局），该demo详细的介绍了layout_constraint布局的所有属性。
Android-ConstraintLayout约束布局的概念与使用
08-12
ConstraintLayout(约束布局), 是2016年Google I/O最新推出的Android布局, 目前还在完善阶段. 从推出的力度而言, 应该会成为主流布局样式. 在最新版本的Android Studio中, ConstraintLayout已经成为默认布局.
尽量用RelativeLayout来代替多层嵌套的LinearLayout
Bolt 的专栏
08-31 974
在Android UI开发中，有时会遇到较复杂的布局设计，比如如下：   ---------------------------------------              标题      作者              图标                                复选框                          时间 -------------...
Android 四种布局： FrameLayout、ConstraintLayout、LinearLayout、RelativeLayout
Alpinist Wang
02-07 6514
布局类型千千万，我选择ConstraintLayout
完全替代 RelativeLayout，ConstraintLayout 入门以及实践
farmer_cc的专栏
01-12 3151
完全替代 RelativeLayout，ConstraintLayout 入门以及实践
Android 入门——ConstraintLayout详解以及使用替代你的常规布局
最美不过，心中有梦，身旁有你！
06-28 6340
使用ConstraintLayout来替代多层嵌套布局。
Android 3分种看懂 ConstraintLayout 替代LinearyLayout和RelativeLayout
深南大盗的博客
05-11 807
面试问题： 1.位置约束 2.宽高约束 width 3.重叠：gudlie 4.链：sytle 5.权重 6.动画 7.2.0特性 ConstraintLayout在项目中实践与总结 https://juejin.im/post/5a1d9ba66fb9a044fb07819e 我的理解： 2个字约束 1.位置约束 2.尺寸约束（宽高约束） Flow的用法：2.0特性 3.可以像ios一样，进行拖动 添加依赖 <span style...
mybatisPlus使用MetaObjectHandler对字段进行更新
最新发布
m0_56356631的博客
04-23 340
都是符合我们的预期的。
string模拟实现
m0_73969414的博客
04-23 1444
c++中string的模拟实现，面试必会知识点
实现自定义注解、实现自定义幂等性注解
qq_44721738的博客
04-23 612
添加 Spring AOP 依赖。创建自定义注解。创建一个新的 Java 注解类，通过@interface关键字来定义，并可以添加元注解以及属性。@Target(ElementType.METHOD) //表示作用于方法上@Retention(RetentionPolicy.RUNTIME) // 表示这个注解在运行时是可见的，这样 AOP 代理才能在运行时读取到这个注解编写 AOP 拦截（自定义注解）的逻辑代码。@Aspect@Component// 方法执行前的处理。
ConstraintLayout布局
06-08
相比其他布局，ConstraintLayout可以更灵活地适应不同屏幕尺寸和方向，同时也可以减少布局嵌套，提高布局性能。 在ConstraintLayout中，每个控件都要设置至少两个约束条件来确定其位置和大小。约束条件可以是与父...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值