动态调整ConstaintLayout元素位置

最新推荐文章于 2023-07-07 17:25:59 发布
最新推荐文章于 2023-07-07 17:25:59 发布
阅读量4.1k 收藏
点赞数
分类专栏： Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lihenair/article/details/110276398
版权

背景

最近一个需求需要动态添加删除ConstraintLayout里的元素，一时不知道如何处理。虽然ConstraintLayout确实减少了层级，提升了绘制效率，但对于动态增删却一直没有尝试过。借着这个需求也好好调研了下ConstraintLayout的一些相关属性。

按照以往的经验，增删view应该也跟RelativityLayout或者LinearLayout一样，直接添加就行了。不过在查阅了开发文档和Stack Overflow之后，发现并不是这么简单。这里有个核心的类ConstraintSet，控制了元素的位置。相当于原来RelativityLayout里的addRule方法，但确实另外一个类来处理这些。

实操

需求如下：

点击button_addtop时添加一个textview在image之下button_addtop之上。
点击button_addbottom时添加一个textview在button_addbottom之下。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@color/colorAccent">

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/dice_1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <Button
        android:id="@+id/button_addtop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="addtop"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@id/image"/>

    <Button
        android:id="@+id/button_addbottom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="addbottom"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@id/button_addtop"/>

</androidx.constraintlayout.widget.ConstraintLayout>
代码如下：
override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
): View? {
    val root : ConstraintLayout = inflater.inflate(R.layout.fragment_fourth, container, false) as ConstraintLayout
    root.findViewById<Button>(R.id.button_addtop).setOnClickListener(object : View.OnClickListener {
        override fun onClick(v: View?) {
            textView = TextView(context)
            textView.text = "Naruto"
            textView.id = View.generateViewId()
            textView.background = ColorDrawable(resources.getColor(R.color.colorPrimaryDark, null))
            root.addView(textView)

            val set = ConstraintSet()
            set.clone(root)
            set.connect(textView.id, ConstraintSet.TOP, R.id.image, ConstraintSet.BOTTOM, 500)
            set.connect(textView.id, ConstraintSet.LEFT, ConstraintSet.PARENT_ID, ConstraintSet.LEFT, 200)
            set.connect(textView.id, ConstraintSet.BOTTOM, R.id.button_addtop, ConstraintSet.TOP, 200)
            set.applyTo(root)

            val setaddtop = ConstraintSet()
            setaddtop.clone(root)
            setaddtop.connect(R.id.button_addtop, ConstraintSet.TOP, textView.id, ConstraintSet.BOTTOM)
            setaddtop.applyTo(root)
        }
    })
    root.findViewById<Button>(R.id.button_addbottom).setOnClickListener(object : View.OnClickListener {
        override fun onClick(v: View?) {
            textView = TextView(context)
            textView.text = "Kagawa"
            textView.id = View.generateViewId()
            textView.background = ColorDrawable(resources.getColor(R.color.colorPrimaryDark, null))
            root.addView(textView)

            val set = ConstraintSet()
            set.clone(root)
            set.connect(textView.id, ConstraintSet.TOP, R.id.button_addbottom, ConstraintSet.BOTTOM)
            set.applyTo(root)
        }
    })
    return root
}

分析

Constraint是ConstraintSet的内部静态类，包括75个属性，是个工具类。这些属性都是ConstraintLayout在布局时设置的xml设置项。
clone方法复制根布局的ConstraintSet值，将所有view的Constraints.LayoutParams都拷贝到ConstraintSet的mConstraints对象里，这是一个HashMap。

public void clone(ConstraintLayout constraintLayout) {
	// 获取当前布局的子View数量
    int count = constraintLayout.getChildCount();
    // 清空当前ConstraintSet的mConstraints
    this.mConstraints.clear();
	// 循环拷贝当前布局的子view param到mConstraints中
    for(int i = 0; i < count; ++i) {
        View view = constraintLayout.getChildAt(i);
        LayoutParams param = (LayoutParams)view.getLayoutParams();
        int id = view.getId();
        if (id == -1) {
            throw new RuntimeException("All children of ConstraintLayout must have ids to use ConstraintSet");
        }

        if (!this.mConstraints.containsKey(id)) {
            this.mConstraints.put(id, new ConstraintSet.Constraint());
        }

        ConstraintSet.Constraint constraint = (ConstraintSet.Constraint)this.mConstraints.get(id);
        constraint.fillFrom(id, param);
        constraint.visibility = view.getVisibility();
        if (VERSION.SDK_INT >= 17) {
            constraint.alpha = view.getAlpha();
            constraint.rotation = view.getRotation();
            constraint.rotationX = view.getRotationX();
            constraint.rotationY = view.getRotationY();
            constraint.scaleX = view.getScaleX();
            constraint.scaleY = view.getScaleY();
            float pivotX = view.getPivotX();
            float pivotY = view.getPivotY();
            if ((double)pivotX != 0.0D || (double)pivotY != 0.0D) {
                constraint.transformPivotX = pivotX;
                constraint.transformPivotY = pivotY;
            }

            constraint.translationX = view.getTranslationX();
            constraint.translationY = view.getTranslationY();
            if (VERSION.SDK_INT >= 21) {
                constraint.translationZ = view.getTranslationZ();
                if (constraint.applyElevation) {
                    constraint.elevation = view.getElevation();
                }
            }
        }

        if (view instanceof Barrier) {
            Barrier barrier = (Barrier)view;
            constraint.mBarrierAllowsGoneWidgets = barrier.allowsGoneWidget();
            constraint.mReferenceIds = barrier.getReferencedIds();
            constraint.mBarrierDirection = barrier.getType();
        }
    }

}

connect方法则根据不同的属性对应的整型值将需要修改的属性进行赋值。
public void connect(int startID, int startSide, int endID, int endSide)
public void connect(int startID, int startSide, int endID, int endSide, int margin)
以带margin的方法为例：


 public void connect(int startID, int startSide, int endID, int endSide, int margin) {
    // 查找View.getId对应的限制是否存在，不存在则创建一个value
    if (!mConstraints.containsKey(startID)) {
        mConstraints.put(startID, new Constraint());
    }
    // 找到对应的值
    Constraint constraint = mConstraints.get(startID);
    switch (startSide) {
        case LEFT: // 设置LEFT侧属性，endID是对应的约束布局对象
            if (endSide == LEFT) {
                constraint.layout.leftToLeft = endID;
                constraint.layout.leftToRight = Layout.UNSET;
            } else if (endSide == RIGHT) {
                constraint.layout.leftToRight = endID;
                constraint.layout.leftToLeft = Layout.UNSET;

            } else {
                throw new IllegalArgumentException("Left to " + sideToString(endSide) + " undefined");
            }
            // 设置距left依赖的margin
            constraint.layout.leftMargin = margin;
            break;
        case RIGHT: // 设置RIGHT侧属性，endID是对应的约束布局对象
            if (endSide == LEFT) {
                constraint.layout.rightToLeft = endID;
                constraint.layout.rightToRight = Layout.UNSET;

            } else if (endSide == RIGHT) {
                constraint.layout.rightToRight = endID;
                constraint.layout.rightToLeft = Layout.UNSET;

            } else {
                throw new IllegalArgumentException("right to " + sideToString(endSide) + " undefined");
            }
            // 设置距right依赖的margin
            constraint.layout.rightMargin = margin;
            break;
        case TOP: // 设置TOP侧属性，endID是对应的约束布局对象
            if (endSide == TOP) {
                constraint.layout.topToTop = endID;
                constraint.layout.topToBottom = Layout.UNSET;
                constraint.layout.baselineToBaseline = Layout.UNSET;
            } else if (endSide == BOTTOM) {
                constraint.layout.topToBottom = endID;
                constraint.layout.topToTop = Layout.UNSET;
                constraint.layout.baselineToBaseline = Layout.UNSET;

            } else {
                throw new IllegalArgumentException("right to " + sideToString(endSide) + " undefined");
            }
            // 设置距top依赖的margin
            constraint.layout.topMargin = margin;
            break;
        case BOTTOM: // 设置BOTTOM侧属性，endID是对应的约束布局对象
            if (endSide == BOTTOM) {
                constraint.layout.bottomToBottom = endID;
                constraint.layout.bottomToTop = Layout.UNSET;
                constraint.layout.baselineToBaseline = Layout.UNSET;

            } else if (endSide == TOP) {
                constraint.layout.bottomToTop = endID;
                constraint.layout.bottomToBottom = Layout.UNSET;
                constraint.layout.baselineToBaseline = Layout.UNSET;

            } else {
                throw new IllegalArgumentException("right to " + sideToString(endSide) + " undefined");
            }
            // 设置距bottom依赖的margin
            constraint.layout.bottomMargin = margin;
            break;
        case BASELINE: // 设置BASELINE属性，endID是对应的约束布局对象
            if (endSide == BASELINE) {
                constraint.layout.baselineToBaseline = endID;
                constraint.layout.bottomToBottom = Layout.UNSET;
                constraint.layout.bottomToTop = Layout.UNSET;
                constraint.layout.topToTop = Layout.UNSET;
                constraint.layout.topToBottom = Layout.UNSET;
            } else {
                throw new IllegalArgumentException("right to " + sideToString(endSide) + " undefined");
            }
            break;
        case START: // 设置START侧属性，endID是对应的约束布局对象
            if (endSide == START) {
                constraint.layout.startToStart = endID;
                constraint.layout.startToEnd = Layout.UNSET;
            } else if (endSide == END) {
                constraint.layout.startToEnd = endID;
                constraint.layout.startToStart = Layout.UNSET;
            } else {
                throw new IllegalArgumentException("right to " + sideToString(endSide) + " undefined");
            }
            // 设置距start依赖的margin
            constraint.layout.startMargin = margin;
            break;
        case END: // 设置END侧属性，endID是对应的约束布局对象
            if (endSide == END) {
                constraint.layout.endToEnd = endID;
                constraint.layout.endToStart = Layout.UNSET;
            } else if (endSide == START) {
                constraint.layout.endToStart = endID;
                constraint.layout.endToEnd = Layout.UNSET;
            } else {
                throw new IllegalArgumentException("right to " + sideToString(endSide) + " undefined");
            }
            // 设置距end依赖的margin
            constraint.layout.endMargin = margin;
            break;
        default:
            throw new IllegalArgumentException(
                    sideToString(startSide) + " to " + sideToString(endSide) + " unknown");
    }
}

applyto方法将属性设置给布局

public void applyTo(ConstraintLayout constraintLayout) {
    this.applyToInternal(constraintLayout);
    constraintLayout.setConstraintSet((ConstraintSet)null);
}

实际干活的是applyToInternal。

void applyToInternal(ConstraintLayout constraintLayout, boolean applyPostLayout) {
    int count = constraintLayout.getChildCount();
    HashSet<Integer> used = new HashSet<Integer>(mConstraints.keySet());
    for (int i = 0; i < count; i++) {

        View view = constraintLayout.getChildAt(i);
        int id = view.getId();
        if (!mConstraints.containsKey(id)) {
            Log.w(TAG, "id unknown " + Debug.getName(view));
            continue;
        }

        if (mForceId && id == -1) {
            throw new RuntimeException("All children of ConstraintLayout must have ids to use ConstraintSet");
        }
        if (id == -1) {
            continue;
        }

        if (mConstraints.containsKey(id)) {
            used.remove(id);
            Constraint constraint = mConstraints.get(id);
            if (view instanceof Barrier) {
                constraint.layout.mHelperType = BARRIER_TYPE;
            }
            if (constraint.layout.mHelperType != UNSET) {
                switch (constraint.layout.mHelperType) {
                    case BARRIER_TYPE:
                        Barrier barrier = (Barrier) view;
                        barrier.setId(id);
                        barrier.setType(constraint.layout.mBarrierDirection);
                        barrier.setMargin(constraint.layout.mBarrierMargin);

                        barrier.setAllowsGoneWidget(constraint.layout.mBarrierAllowsGoneWidgets);
                        if (constraint.layout.mReferenceIds != null) {
                            barrier.setReferencedIds(constraint.layout.mReferenceIds);
                        } else if (constraint.layout.mReferenceIdString != null) {
                            constraint.layout.mReferenceIds = convertReferenceString(barrier,
                                    constraint.layout.mReferenceIdString);
                            barrier.setReferencedIds(constraint.layout.mReferenceIds);
                        }
                        break;
                }
            }
            ConstraintLayout.LayoutParams param = (ConstraintLayout.LayoutParams) view
                    .getLayoutParams();
            param.validate();
            constraint.applyTo(param);

            if (applyPostLayout) {
                ConstraintAttribute.setAttributes(view, constraint.mCustomConstraints);
            }
            view.setLayoutParams(param);
            if (constraint.propertySet.mVisibilityMode == VISIBILITY_MODE_NORMAL) {
                view.setVisibility(constraint.propertySet.visibility);
            }
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
                view.setAlpha(constraint.propertySet.alpha);
                view.setRotation(constraint.transform.rotation);
                view.setRotationX(constraint.transform.rotationX);
                view.setRotationY(constraint.transform.rotationY);
                view.setScaleX(constraint.transform.scaleX);
                view.setScaleY(constraint.transform.scaleY);
                if (constraint.transform.transformPivotTarget != UNSET) {
                    View layout = (View) view.getParent();
                    View center = layout.findViewById(constraint.transform.transformPivotTarget);
                    if (center != null) {
                        float cy = (center.getTop() + center.getBottom()) / 2.0f;
                        float cx = (center.getLeft() + center.getRight()) / 2.0f;
                        if (view.getRight() - view.getLeft() > 0 && view.getBottom() - view.getTop() > 0) {
                            float px = (cx - view.getLeft());
                            float py = (cy - view.getTop());
                            view.setPivotX(px);
                            view.setPivotY(py);
                        }
                    }
                } else {
                    if (!Float.isNaN(constraint.transform.transformPivotX)) {
                        view.setPivotX(constraint.transform.transformPivotX);
                    }
                    if (!Float.isNaN(constraint.transform.transformPivotY)) {
                        view.setPivotY(constraint.transform.transformPivotY);
                    }
                }
                view.setTranslationX(constraint.transform.translationX);
                view.setTranslationY(constraint.transform.translationY);
                if (Build.VERSION.SDK_INT >= VERSION_CODES.LOLLIPOP) {
                    view.setTranslationZ(constraint.transform.translationZ);
                    if (constraint.transform.applyElevation) {
                        view.setElevation(constraint.transform.elevation);
                    }
                }
            }
        } else {
            Log.v(TAG, "WARNING NO CONSTRAINTS for view " + id);
        }
    }
    for (Integer id : used) {
        Constraint constraint = mConstraints.get(id);
        if (constraint.layout.mHelperType != UNSET) {
            switch (constraint.layout.mHelperType) {
                case BARRIER_TYPE:
                    Barrier barrier = new Barrier(constraintLayout.getContext());
                    barrier.setId(id);
                    if (constraint.layout.mReferenceIds != null) {
                        barrier.setReferencedIds(constraint.layout.mReferenceIds);
                    } else if (constraint.layout.mReferenceIdString != null) {
                        constraint.layout.mReferenceIds = convertReferenceString(barrier,
                                constraint.layout.mReferenceIdString);
                        barrier.setReferencedIds(constraint.layout.mReferenceIds);
                    }
                    barrier.setType(constraint.layout.mBarrierDirection);
                    barrier.setMargin(constraint.layout.mBarrierMargin);
                    ConstraintLayout.LayoutParams param = constraintLayout
                            .generateDefaultLayoutParams();
                    barrier.validateParams();
                    constraint.applyTo(param);
                    constraintLayout.addView(barrier, param);
                    break;
            }
        }
        if (constraint.layout.mIsGuideline) {
            Guideline g = new Guideline(constraintLayout.getContext());
            g.setId(id);
            ConstraintLayout.LayoutParams param = constraintLayout.generateDefaultLayoutParams();
            constraint.applyTo(param);
            constraintLayout.addView(g, param);
        }
    }
}

实际上是把所有子view的param再赋值给对应的view，并刷新布局。

参考

https://www.zoftino.com/adding-views-&-constraints-to-android-constraint-layout-programmatically

https://stackoverflow.com/questions/45263159/constraintlayout-change-constraints-programmatically

lihenair
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
动态设置ConstraintLayout的约束
Sean豆子
09-06 4035
动态设置ConstraintLayout约束 以前一直是在布局里直接设置ConstraintLayout的约束，前几天遇到了一个有点特殊的需求，需要动态设置布局，xml布局使用的ConstraintLayout，所以就立马恶补动态设置ConstraintLayout约束的知识，总结如下。 获取要设置目标控件的父布局。 val constraintLayoutRoot = getView<ConstraintLayout>(R.id.constraint_dynamics_root) 实例
Android开发之ConstraintLayout代码动态控制约束布局-已踩坑(跟Compose的约束布局基本一个套路)
xiayiye5的博客
08-26 4767
需求如上图我需要手动点击按钮改变文字的位置，在约束布局中唯一快速想到的我就是动态设置。兄弟们上面的坑我已经踩完了，都已注释，具体可以看注释，在此非常感谢二位大佬无私分享。
Android动态改变控件的位置
08-12
博客地址：http://blog.csdn.net/zhouhui520w/article/details/47441311
ConstraintLayout常用属性
延成的博客
01-19 2448
ConstraintLayout 常用属性
ConstraintLayout 动态修改约束
域名转让：chinabeaut.com、unienv.com
05-05 560
ConstraintLayout 动态修改约束
View 使用 - ConstraintLayout
HugMua的博客
05-05 1905
解决布局嵌套过多的问题，采用方向约束的方式对控件进行定位，至少要保证水平和垂直方向都至少有一个约束才能确定控件的位置。
android 动态设置约束,ConstraintLayout 在代码中动态设置约束
bark2003的专栏
09-20 1203
https://blog.csdn.net/weixin_39822423/article/details/117485330
手动封装jar包并导入AndroidStudio项目使用
特立独行的博客
11-03 2538
手动封装jar包并导入AndroidStudio项目使用
史上最全ConstraintLayout使用详解
柳的博客
12-27 945
constraintlayout
Android——基于ConstraintLayout实现的可拖拽位置控件
化身孤岛的瓜
09-10 3426
最近在研究使用android实现平板和电脑端一些应用的效果，话不多说先上个图 可以看到，实现了中间的绿色区域换到父布局最左侧的功能。在拖动的过程中，父布局会出现上下左右四个箭头按钮，当光标移动到箭头上并放下时，拖动的视图会移动到指定的方向上去。 实现思路： 中间的绿色组件，经历了以下几个过程： 1.长按实现视图的拖拽。 2.拖拽移动过程中，父布局出现四个方向的箭头按钮，当光标在箭头上时显示黄色圆圈表示被选中。 3.选中以后，将拖拽的组件移动到视图的最左侧。 技术难点： 1.首先是如何创造
Android动态布局之 ConstraintLayout(通过代码参数控制子View的布局)
weixin_43959610的博客
11-22 5485
Android动态布局之Constraintlayout基本介绍及其使用方法和代码Demo.(所谓的动态布局就是以代码的形式，可以实时动态的改变子View，而不是以xml的形式去实现)
ConstraintLayout 通过setVerticalBias 实现动态设置控制位置
d773689630的专栏
04-25 1493
* 使用场景：设置布局的时候，想通过ConstraintLayout实现滑块与文字同步移动 * 思路：ConstraintLayout在xml布局中有layout_constraintvertical_bias设置项能否找到一个功能类来完成？ * ConstraintLaout控件引入后可以看到 constraintLayout.setConstraintSet(ConstraintSet set); * 关键操作是：ConstraintSet constraintSet.setVerticalBias(.
ConstraintLayout 动态设置 子view
最新发布
hello_Ya的博客
07-07 475
代码动态设置 ConstraintLayout 子view 位置
ConstraintLayout 终极秘籍（上）
fallfollowernolisten的博客
03-10 5735
ConstraintLayout 终极秘籍（上） 时间 2017-02-25 12:25:49  云在千峰 原文  http://blog.chengyunfeng.com/?p=1030 主题 安卓开发 ConstraintLayout 终于 正式发布 1.0 版本 了,是时候来详细介绍下这个 Android 布局的终极武器了。 为何需要 Constrain
问题记录 - 动态设置布局属性LayoutParams无效
MrJarvisDong的博客
06-06 5899
动态设置LayoutParam 无效; 问题描述 布局如下所示: <FrameLayout android:layout_width="match_parent" android:layout_height="160dp" android:background="@drawable/fullscreen_bg_gradient"> ...
android设置padding单位,Android 设置与外部控件距离(setPadding 和setMargin的使用)
weixin_31089065的博客
05-26 1731
一.问题描述在设计UI过程中，想使图片处于屏幕的特定位置(如下图1)，但发现图片总是在顶端(如下图2)：图一：欲实现的界面 图二：实际的界面二.解决办法2.1使用setPadding如下所示：RelativeLayout relativeLayout =(RelativeLayout) findViewById(R.id.login);re...
约束布局ConstraintLayout通过xml和代码添加约束
Heijinbaitu的博客
10-21 3529
1、xml设置ConstraintLayout约束。 2、代码设置ConstraintLayout约束。
Android ConstraintLayout约束布局的使用
https://juejin.cn/user/1654096907477549/posts
12-03 6320
前言：回廊一寸相思地，落月成孤，背灯和月花阴，已是十年踪迹十年心。 ——虞美人 一、概述 AndroidStudio3.0之前默认的根布局是RelativeLayout，但是3.0之后默认的根布局是ConstraintLayout(约束布局)，它作为一款强大的调整View位置和大小的ViewGroup被Google所推荐，ConstraintLayout能够以支持库的形式支持到最小的API 9，同时也在不断丰富API和功能，它能在复杂布局中有效降低布局层级，提高
使用ConstraintSet修改ConstraintLayout某个子view
android开发笔记
08-10 2000
如果父View是ConstraintLayout约束布局，当修改某个view时候，直接创建ConstraintLayout.LayoutParams会有问题,没办法直接满足需求。 所有使用ConstraintSet绝对没错 具体使用步骤 ConstraintSet set= new ConstraintSet(); //获取一新的ConstraintLayout //mConstra...
Android ConstrainLayout布局中View位置的介绍与使用
07-02 853
ConstrainLayout是一款布局View，再Design库中，现已被大家广泛接受并使用。ConstrainLayout的布局采用的方式和其他都不同，他的对其方式是类似RelativeLayout，但是和RelativeLayout有明显的区别。 在布局渲染的时候，ConstrainLayout的子View是通过在一个容器中找到自己的位置，通过位置和对其方式来固定，所以在布局优化中，尝尝被提起到。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值