自定义 ConstraintLayout 类似乎无法水平布局 - Android - Kotlin

Question

我正在尝试子类 ConstraintLayout 来构建一个动态菜单，我可以传入项目，它将构建一个带有子视图设置的视图。在 Kotlin 中，我似乎在努力解决水平布局问题

我已经尝试了一些事情，我尝试将项目布置出来并将它们相互约束，第一个和最后一个项目被限制到父项。并且我已经尝试将 ConstraintSet 用于多链

这就是我初始化它的方式。

val menuLayout = ManageableMenu(tc,listOf(
            ManageableMenu.ManageableMenuItem("Item 1"),
            ManageableMenu.ManageableMenuItem("Item 2"),
            ManageableMenu.ManageableMenuItem("Item 3"),
            ManageableMenu.ManageableMenuItem("Item 4")
        ))
        menuLayout.listener = this
        val menuLayoutConstraint =menuLayout .layoutParams as ConstraintLayout.LayoutParams
        menuLayoutConstraint.topToBottom = actorName.id
        menuLayoutConstraint.startToStart = thisLayout.id
        menuLayoutConstraint.endToEnd = thisLayout.id
        thisLayout.addView(menuLayout)

我试过了……

class ManageableMenu(context: Context, val items: List<ManageableMenuItem>): ConstraintLayout(context) {
    var textSize: Int = 17
    var textColor: Int = Color.WHITE
    var activeFragmentTitle: String = items[0].title
    var listener: ManageableMenuChangeListener? = null



    init {
        this.id = View.generateViewId()
        this.layoutParams =
            ConstraintLayout.LayoutParams(convertToDP(100, this.context), ConstraintLayout.LayoutParams.WRAP_CONTENT)
        val baseConstraint = ConstraintLayout.LayoutParams(
            ConstraintLayout.LayoutParams.WRAP_CONTENT,
            ConstraintLayout.LayoutParams.WRAP_CONTENT
        )
        this.setBackgroundColor(Color.BLACK)

        //Build Dividers
        val dividers: MutableList<TextView> = mutableListOf()

        if (items.size > 1) {
            repeat(items.size - 1) {
                val newView = TextView(this.context)
                newView.id = View.generateViewId()
                newView.text = "|"
                newView.setTextSize(TypedValue.COMPLEX_UNIT_SP, textSize + 8.toFloat())
                newView.setTextColor(textColor)
                dividers.add(newView)
            }
        }

        val constraintSet = ConstraintSet()
        constraintSet.clone(this)

        val dividerIds: IntArray = IntArray(dividers.size)

        for ((index, divider) in dividers.withIndex()) {
            dividerIds.set(index, divider.id)
        }

        constraintSet.createHorizontalChainRtl(
            dividerIds[0],
            ConstraintSet.START,
            this.id,
            ConstraintSet.END,
            dividerIds,
            null,
            ConstraintSet.CHAIN_SPREAD
        )
        constraintSet.applyTo(this)

        for (divider in dividers) {
            this.addView(divider)
        }
    }

    data class ManageableMenuItem(val title: String) {
        var id: Int? = null
    }

    interface ManageableMenuChangeListener {
        fun onMenuItemChanged(var1: String)
    }
}

这会放入所有“|”的堆栈创建在彼此之上，一直到视图的左侧。 （如果我能附上图片我会的）

我也试过了……

class ManageableMenu(context: Context, val items: List<ManageableMenuItem>): ConstraintLayout(context) {
    var textSize: Int = 17
    var textColor: Int = Color.WHITE
    var activeFragmentTitle: String = items[0].title
    var listener: ManageableMenuChangeListener? = null



    init {
        this.id = View.generateViewId()
        this.layoutParams =
            ConstraintLayout.LayoutParams(convertToDP(100, this.context), ConstraintLayout.LayoutParams.WRAP_CONTENT)
        val baseConstraint = ConstraintLayout.LayoutParams(
            ConstraintLayout.LayoutParams.WRAP_CONTENT,
            ConstraintLayout.LayoutParams.WRAP_CONTENT
        )
        this.setBackgroundColor(Color.BLACK)

        //Build Dividers
        val dividers: MutableList<TextView> = mutableListOf()

        if (items.size > 1) {
            repeat(items.size - 1) {
                val newView = TextView(this.context)
                newView.id = View.generateViewId()
                newView.text = "|"
                newView.setTextSize(TypedValue.COMPLEX_UNIT_SP, textSize + 8.toFloat())
                newView.setTextColor(textColor)
                dividers.add(newView)
            }
        }
        for ((index, divider )in dividers.withIndex()) {
            val constraint = ConstraintLayout.LayoutParams(baseConstraint)
            constraint.topToTop = this.id
            constraint.bottomToBottom = this.id
            if (index == 0){
                constraint.leftToLeft = this.id
                constraint.rightToLeft = dividers[index+1].id
            } else if (index == dividers.lastIndex) {
                constraint.rightToRight = this.id
                constraint.leftToRight = dividers[index-1].id
            } else {
                constraint.rightToLeft = dividers[index+1].id
                constraint.leftToRight = dividers[index-1].id
            }

            divider.layoutParams = constraint
            this.addView(divider)
        }
    }
    data class ManageableMenuItem(val title: String) {
        var id: Int? = null
    }

    interface ManageableMenuChangeListener {
        fun onMenuItemChanged(var1: String)
    }
}

这会对齐一堆“|”在视图中居中。我究竟做错了什么？！任何帮助表示赞赏！谢谢。

Answer 1

根据documentationcreateHorizo​​ntalChainRtl 的参数是

public void createHorizontalChainRtl (int startId, 
                int startSide, 
                int endId, 
                int endSide, 
                int[] chainIds, 
                float[] weights, 
                int style)

您指定以下内容：

constraintSet.createHorizontalChainRtl(
    dividerIds[0],
    ConstraintSet.START,
    this.id,
    ConstraintSet.END,
    dividerIds,
    null,
    ConstraintSet.CHAIN_SPREAD
)

尝试将dividerIds[0] (startId) 和this.id (endId) 更改为ConstraintSet.PARENT_ID 以形成链。