Android ConstraintLayout Barrier 以编程方式不起作用答案

【问题标题】：Android ConstraintLayout Barrier programmatically not workingAndroid ConstraintLayout Barrier 以编程方式不起作用
【发布时间】：2019-05-15 09:06:23
【问题描述】：

我正在尝试让ConstraintLayout 和Barrier 以编程方式工作。我正在使用 anko 作为我的代码。一切正常，但只要我尝试使用Barrier，连接到Barrier 的视图就会设置为视图的顶部，而不是我所说的下方。代码如下：

    constraintLayout {
        imageView = imageView {
            id = View.generateViewId()
            backgroundColorResource = R.color.black
            scaleType = ImageView.ScaleType.CENTER_CROP
        }.lparamsMargin(width = matchParent, height = imageHeight)

        val gradientView = view {
            id = View.generateViewId()
            background = getGradient(Color.TRANSPARENT, Color.BLACK, 0.5f)
        }.lparams(width = matchParent, height = gradientHeight) {
            bottomToBottom = imageView.id
        }

        titleTextView = textView {
            id = View.generateViewId()
            typeface = context.font(R.font.value_regular)
            textSize = 40f
            textColor = Color.WHITE
            gravity = Gravity.CENTER
            horizontalPadding = Dimensions.mediumViewPadding
        }.lparams(width = matchParent) {
            topToTop = imageView.id
            bottomToBottom = imageView.id
        }

        dateTextView = textView {
            id = View.generateViewId()
            typeface = context.font(R.font.value_regular)
            textSize = 21f
            textColor = Color.WHITE
            gravity = Gravity.CENTER
            horizontalPadding = Dimensions.mediumViewPadding
        }.lparams(width = matchParent) {
            bottomToTop = titleTextView.id
            bottomMargin = Dimensions.smallViewPadding
        }

        subtitleTextView = textView {
            id = View.generateViewId()
            typeface = context.font(R.font.value_regular)
            textSize = 16f
            textColorResource = R.color.textColorOffWhite
            gravity = Gravity.CENTER
            horizontalPadding = Dimensions.mediumViewPadding
        }.lparams(width = matchParent) {
            topToBottom = titleTextView.id
            topMargin = Dimensions.smallViewPadding
        }

        val textGuideline = guideline {
            id = View.generateViewId()
        }.lparams(width = matchParent) {
            topToTop = gradientView.id
            bottomToBottom = gradientView.id
            verticalBias = 0.7f
        }

        val textBarrier = barrier {
            id = View.generateViewId()
            referencedIds = intArrayOf(subtitleTextView.id, textGuideline.id)
            type = Barrier.BOTTOM
        }.lparams(width = matchParent, height = wrapContent)

        textTextView = textView {
            id = View.generateViewId()
            typeface = context.font(R.font.value_regular)
            textSize = 21f
            textColorResource = R.color.textColorOffWhite
            lineSpacingMult = 1.38f
            gravity = Gravity.CENTER
            horizontalPadding = Dimensions.mediumViewPadding
        }.lparams(width = matchParent, height = wrapContent) {
            topToBottom = textBarrier.id
        }
    }.lparams(width = matchParent, height = wrapContent)

我正在尝试做的是让文本与图像和渐变重叠，除非标题太大并将文本推低。如果我输入topToBottom = textGuideline.id，它会像预期的那样工作，但如果标题太长，我希望它把文本推低。

我使用的ConstraintLayout 版本是2.0.0-beta1。

【问题讨论】：

运气好能解决您的问题吗？我有同样的问题，我认为 Barrier 中的方法setReferenceIds() 并没有多大作用。我们应该调用 addId() 或 setIds() 但它们在基类 ConstraintHelper 中是私有的。
@JDenais 不完全是，我解决了顶部视图的问题。显然barrier in anko 不起作用。所以我使用applyConstraintSet 并使用这个：createBarrier(barrierId, Barrier.BOTTOM, subtitleTextView.id, textGuideline.id)。现在它是它应该在的地方。但我现在的问题是它不尊重guideline 的verticalBias。所以我所知道的是一个视图比guideline 效果更好，如果你将barrierId 放在ids.xml 中它也可以更好地工作，但没有设法完全解决verticalBias 问题，所以仍在努力。我会为其他人回答这个问题

标签： android android-constraintlayout anko

【解决方案1】：

barrier 在 anko 中不起作用，你必须使用 createBarrier，它可以在 applyConstraintSet 中使用。这将修复您的视图位于顶部。但对我来说，它还没有完全奏效。因为我的guideline 使用verticalBias，所以在使用barrier 时会忽略此属性。我注意到的是，使用高度为 1 的view 而不是guideline 效果更好，并且将barrierId 放在ids.xml 中也效果更好，但现在我不使用verticalBias 并且只是计算视图应该在哪里。这是我现在的代码：

            applyConstraintSet {
                gradientView {
                    connect(ConstraintSetBuilder.Side.BOTTOM to ConstraintSetBuilder.Side.BOTTOM of imageView)
                }

                titleTextView {
                    connect(
                        ConstraintSetBuilder.Side.TOP to ConstraintSetBuilder.Side.TOP of imageView,
                        ConstraintSetBuilder.Side.BOTTOM to ConstraintSetBuilder.Side.BOTTOM of imageView
                    )
                }

                dateTextView {
                    connect(ConstraintSetBuilder.Side.BOTTOM to ConstraintSetBuilder.Side.TOP of titleTextView margin Dimensions.smallViewPadding)
                }

                subtitleTextView {
                    connect(ConstraintSetBuilder.Side.TOP to ConstraintSetBuilder.Side.BOTTOM of titleTextView margin Dimensions.smallViewPadding)
                }

                textGuideline {
                    connect(
                        ConstraintSetBuilder.Side.TOP to ConstraintSetBuilder.Side.TOP of gradientView margin (gradientHeight.toFloat() * 0.7f).toInt()
                    )
                }

                val barrierId = View.generateViewId()
                createBarrier(barrierId, Barrier.BOTTOM, subtitleTextView.id, textGuideline.id)

                textTextView {
                    connect(ConstraintSetBuilder.Side.TOP to ConstraintSetBuilder.Side.BOTTOM of barrierId margin Dimensions.mediumViewPadding)
                }
            }

【讨论】：