ConstraintLayout 用法就是这么简单

最新推荐文章于 2025-10-27 18:20:11 发布

原创最新推荐文章于 2025-10-27 18:20:11 发布 · 525 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android

android 项目坑专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍ConstraintLayout的使用方法及特点，通过实例演示如何利用其进行高效布局，并附带介绍如何实现元素的位置动画。

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();