ConstraintLayout 用法就是这么简单

最新推荐文章于 2024-05-08 03:28:42 发布
最新推荐文章于 2024-05-08 03:28:42 发布
阅读量407 收藏
点赞数
分类专栏： android 项目坑 文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DeckeDeng/article/details/78482685
版权

1 .ConstraintLayout 用法:

有个刚刚入门Android的小家伙问我说ConstraintLayout中left ,right,top,bottom都是一些什,感觉比较绕,都是啥和啥呀~

为了告诉他是啥,简单写了一个, 写都写了,顺便丢上来吧~

来来来,下面布局基本揽括你写Android能用到的大部分布局, 为什么用ConstraintLayout?
很简单,看下面代码.是不是瀑布流一样,没有任何包裹?这就是它最大优点,大大提升绘制效率有么有~

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        tools:showIn="@layout/activity_main"
        tools:context=".MainActivity">


    <ImageView
            android:id="@+id/iv"
            android:layout_width="200dp"
            android:layout_height="134dp"
            android:background="@color/colorAccent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent"
    />

    <TextView
            android:id="@+id/tv1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="杭州市凯旋路x号xx幢100单元x室住宅用途房地产"
            app:layout_constraintLeft_toRightOf="@id/iv"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            android:paddingLeft="4dp"
            android:textSize="13sp"
            android:paddingTop="10dp"
    />

    <TextView
            android:id="@+id/tv2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toBottomOf="@id/tv1"
            android:text="RMB"
            app:layout_constraintLeft_toRightOf="@id/iv"
            android:paddingLeft="4dp"
            android:paddingTop="9dp"
            android:textSize="13sp"
    />

    <TextView
            android:id="@+id/tv3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="当前价"
            android:textSize="10sp"
            android:paddingLeft="4dp"
            app:layout_constraintLeft_toRightOf="@id/iv"
            app:layout_constraintTop_toBottomOf="@+id/tv2"
    />

    <TextView
            android:id="@+id/tv4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="184.5万"
            android:textSize="26sp"
            app:layout_constraintLeft_toRightOf="@id/tv3"
            app:layout_constraintBottom_toBottomOf="@id/tv3"
            android:textColor="@color/colorAccent"
            app:layout_constraintBaseline_toBaselineOf="@id/tv3"
    />
    <TextView
            android:id="@+id/tv5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="出价"
            android:textSize="12sp"
            app:layout_constraintTop_toBottomOf="@id/tv3"
            app:layout_constraintLeft_toRightOf="@id/iv"
            android:paddingLeft="4dp"
            android:paddingTop="12dp"/>
    <TextView
            android:id="@+id/tv6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="89"
            android:textSize="12sp"
            app:layout_constraintTop_toBottomOf="@id/tv3"
            app:layout_constraintLeft_toRightOf="@id/tv5"
            android:paddingLeft="4dp"
            android:paddingTop="12dp"/>
    <TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
              app:layout_constraintTop_toBottomOf="@id/tv6"
              app:layout_constraintLeft_toRightOf="@id/iv"
              android:textSize="12sp"
              android:layout_marginLeft="4dp"
              android:paddingTop="4dp"
              android:text="预计明天10：00结束"/>
    <TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
              app:layout_constraintTop_toBottomOf="@id/tv5"
              app:layout_constraintRight_toRightOf="parent"
              android:paddingRight="10dp"
              android:text="8.2km"/>

    <Button android:layout_width="100dp" android:layout_height="35dp"
            app:layout_constraintTop_toBottomOf="@id/iv"
            app:layout_constraintLeft_toLeftOf="parent"
            android:background="@drawable/tab_bg"
            android:textColor="@android:color/black"
            android:id="@+id/bt1"
            app:layout_constraintHorizontal_chainStyle="spread"
            app:layout_constraintRight_toLeftOf="@id/bt2"
            android:layout_marginTop="20dp"
            android:text="可贷款"/>

    <Button android:layout_width="100dp" android:layout_height="35dp"
            app:layout_constraintTop_toBottomOf="@id/iv"
            android:background="@drawable/tab_bg"
            android:textColor="@android:color/black"
            android:id="@+id/bt2"
            app:layout_constraintHorizontal_chainStyle="spread"
            app:layout_constraintLeft_toRightOf="@id/bt1"
            app:layout_constraintRight_toLeftOf="@id/bt3"
            android:layout_marginTop="20dp"
            android:text="不限购"/>

    <Button android:layout_width="100dp" android:layout_height="35dp"
            app:layout_constraintHorizontal_chainStyle="spread"
            app:layout_constraintTop_toBottomOf="@id/iv"
            android:background="@drawable/tab_bg"
            android:id="@+id/bt3"
            android:textColor="@android:color/black"
            app:layout_constraintLeft_toRightOf="@id/bt2"
            app:layout_constraintRight_toRightOf="parent"
            android:layout_marginTop="20dp"
            android:text="特价房"/>


    <TextView
            android:id="@+id/tab1"
            android:layout_width="0dp"
            android:layout_height="30dp"
            android:text="tab1"
            android:gravity="center"
            app:layout_constraintHorizontal_weight="1"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@+id/tab2"/>

    <TextView
            android:id="@+id/tab2"
            android:layout_width="0dp"
            android:layout_height="30dp"
            android:text="tab2"
            android:gravity="center"
            app:layout_constraintHorizontal_weight="1"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toRightOf="@id/tab1"
            app:layout_constraintRight_toLeftOf="@+id/tab3"
    />

    <TextView
            android:id="@+id/tab3"
            android:background="@drawable/tab_bg"
            android:layout_width="0dp"
            android:layout_height="30dp"
            android:gravity="center"
            app:layout_constraintHorizontal_weight="1"
            app:layout_constraintLeft_toRightOf="@+id/tab2"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            android:text="tab3"/>


</androidx.constraintlayout.widget.ConstraintLayout>

在这里插入图片描述

属性

如图:

 <ImageView
            android:id="@+id/iv"
            ...
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent"
    />

简单理解:

app:layout_constraintTop_toTopOf=“parent” — iv的顶部相对父控件顶部保持
app:layout_constraintLeft_toLeftOf=“parent” — iv的左边相对父控件左边保持

对应属性,控制一个控件: 左右上下 位置

 app:layout_constraintLeft_toLeftOf
 app:layout_constraintTop_toTopOf
 app:layout_constraintBottom_toBottomOf
 app:layout_constraintRight_toRightOf

其他差不多:

layout_constraintLeft_toRightOf
layout_constraintRight_toLeftOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
用一个图就明白了

自身左/右/上/下 对于某组件 右/左/下/上 或者 左/右/上/下 位置:
以左右位置对比:
在这里插入图片描述

字体大小不一致,又想保持在一个Baseline 如图

对应:

app:layout_constraintBaseline_toBaselineOf="@id/tv3"

在这里插入图片描述

2.上升动画,缩小动画

实现效果mBg2为上升动画，下面布局依然填充下面所有位置

布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="people.demo.MainActivity">

    <ImageView
        android:id="@+id/mBg2"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="@color/colorAccent" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@color/colorPrimary" />

</LinearLayout>

代码

//dp改变成像素
float oldHeight = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 330, getActivity().getResources().getDisplayMetrics());

float newHeight = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 200, getActivity().getResources().getDisplayMetrics());

final ValueAnimator valueAnimator = ValueAnimator.ofFloat(oldHeight, newHeight);

valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
float value = (float) valueAnimator.getAnimatedValue();
LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) mBg2.getLayoutParams();
layoutParams.height = (int) value;
mBg2.setLayoutParams(layoutParams);
}
});

valueAnimator.setDuration(500);

valueAnimator.start();
DeckeDeng
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ConstraintLayout使用详解与实战
06-13
本课程讲解ConstraintLayout布局的可视化使用方法，基础属性详解、高级属性详情、ConstraintLayout实战
详解Android ConstraintLayout 约束布局的用法
08-28
本篇文章主要介绍了详解Android ConstraintLayout 约束布局的用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Android——ConstraintLayout(约束布局)
The_onion的博客
11-03 1万+
约束布局ConstraintLayout 是一个ViewGroup，可以在Api9以上的Android系统使用它，它的出现主要是为了解决布局嵌套过多的问题，以灵活的方式定位和调整小部件。从 Android Studio 2.3 起，官方的模板默认使用 ConstraintLayout。
Android ConstraintLayout 约束布局的使用
weixin_42604414的博客
10-18 2294
目前Android的默认布局早已改成ConstraintLayout，但是很多小伙伴还是使用过去的相对布局，觉得老的布局用起来熟悉，新布局使用复杂，从而失去了探索新大陆的机会，今天就让我们一起揭开ConstraintLayout的面纱，掌握Android新布局的使用方法。传统的布局容易在版本迭代过程中，造成页面层级过多的问题（俄罗斯套娃），一是对页面渲染有影响，二是不利于开发者的后期维护。
2024年安卓最新项目需求讨论 — ConstraintLayout 详细使用教程，2024年最新vue面试题面试必问
最新发布
2401_84556528的博客
05-08 655
如果你看到了这里，觉得文章写得不错就给个赞呗？如果你觉得那里值得改进的，请给我留言。一定会认真查询，修正不足。欢迎大家一起交流讨论啊~网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化学习资料的朋友，可以戳这里获取一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
ConstraintLayout 布局详解
st526403649的博客
07-08 7359
ConstraintLayout 布局详解 简介 约束布局ConstraintLayout 是一个ViewGroup，可以在Api9以上的Android系统使用它，它的出现主要是为了解决布局嵌套过多的问题，以灵活的方式定位和调整小部件。从 Android Studio 2.3 起，官方的模板默认使用 ConstraintLayout。 优点 在开发过程中经常能遇到一些复杂的UI，可能会出现布局嵌套过多的问题，嵌套得越多，设备绘制视图所需的时间和计算功耗也就越多，ConstraintLayout使用起
ConstraintLayout基础详解(下)
听海的博客
05-15 1782
ConstraintLayout基础详解(下)
Android ConstraintLayout 属性
7758258博客
09-16 718
app:layout_constraintLeft_toLeftOf 表示此控件的左边框与某个控件的左边框对齐或者在其右边 app:layout_constraintLeft_toRightOf 表示此控件的左边框与某个控件的右边框对齐或者在其右边 app:layout_constraintRight_toLeftOf 表示此控件的右边框与某个控件的左边框对齐或在其左边 app:layo...
ConstraintLayout Demo
07-15
Android ConstraintLayout的一些特性的示例， 基于androidx.constraintlayout:constraintlayout:2.0.0-beta6, 详见我的博客: https://blog.csdn.net/EthanCo/article/details/105722610
ConstraintLayout
04-30
ConstraintLayout这个demo 的参考地址效果图自己参考写了一个demo 顺便说下自己的思路,之前一直以为约束布局它是拖拽类型的每次都是直接删除掉了这次自己把它理解为相对布局,但是不是说是,android:layout_marginLeft...
android 布局之ConstraintLayout的使用
08-27
主要介绍了android 布局之ConstraintLayout的使用,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Android ConstraintLayout布局
假装你是大灰狼的专栏
01-02 2404
前言 ConstraintLayout约束布局, 与RelativeLayout有点类似。需要添加依赖 dependencies { ... ... implementation 'com.android.support.constraint:constraint-layout:1.1.3' } 1. 相对位置 主要属性如下， layout_constraintLeft_to...
Android ConstraintLayout详解
u013706904的博客
10-28 1万+
Android ConstraintLayout layout_constraintDimensionRatio
ConstraintLayout的基本用法及优点
吴延宝
10-14 2265
为什么推荐使用ConstraintLayout ConstraintLayout（约束布局）在2016年的Google I/O大会上就推出来了，经历这两年的迭代，功能已经非常的成熟了。一次偶然的机会，在项目中尝试了使用约束布局，从此被它的功能所深深折服。它能很轻易的将你从使用层层的嵌套去实现复杂的布局中解放出来。使用ConstraintLayout后基本可以抛弃LinearLayout和Relat...
ConstraintLayout用法详解
尹东生的博文（Indson）
12-14 393
ConstraintLayout用法详解 自定义Behavior /** * <pre> * @author * time : * desc : 自定义Behavior * revise: 解决appbarLayout若干问题 * 1）快速滑动appbarLayout会出现回弹 * ...
Android约束布局ConstraintLayout的使用
热门推荐
qq_36046305的博客
12-21 2万+
Android约束布局ConstraintLayout的基本使用 约束布局ConstraintLayout面世已有很长一段时间了，但我一直没有关注这个Android 中继五大布局后的新布局的使用。近日在网友的讨论的强烈推荐下，尝试了ConstraintLayout。使用之后的最大感触就是：为什么我不早点在项目中尝试ConstraintLayout！！！ 本篇文章，旨在记录ConstraintLay...
Android Studio Layout编译报错AAPT: error: attribute layout_constraintBottom_toBottomOf
君王羔羊
07-31 1万+
AAPT: error: attribute layout_constraintBottom_toBottomOf 解决：添加依赖 implementation 'androidx.appcompat:appcompat:1.0.0-alpha1' implementation 'androidx.constraintlayout:constraintlayout:1.1.2'
[Android UI]ConstraintLayout-约束性布局的使用和注意点
tahliaL
08-29 9154
前两天在继续熟悉和记忆RecyclerView的时候，练习完Vertical和Horizontal后，新开了一个工程继续练习瀑布流。正常来说我想要得到的效果图是： 然而我得到了效果图是： 检查了一边xml文件，发现我放置RecyclerView的activity_main中使用了默认的constraintLayout，没有改成LinearLayout，虽然我检查
放大缩小动画
yufeiskyer的专栏
04-17 435
1. makeImageCard = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"makeCard_Image.png"]];     makeImageCard.frame = CGRectMake(([[UIScreen mainScreen] bounds].size.width-543/1.9)/2, sel
android 动态设置constraintlayout
06-01
以下是一个简单示例，演示如何在代码中设置 ConstraintLayout 的属性： 首先，在 XML 文件中定义 ConstraintLayout，例如： ```xml <ConstraintLayout android:id="@+id/myLayout" android:layout_width="match_...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值