自定义ConstraintLayout类似乎无法横向排列 - Android - Kotlin

Posted 2021-04-01

我试图将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)
    }
}

这对齐了一堆“|”以视图为中心。我究竟做错了什么？！任何帮助赞赏！谢谢。

答案

根据documentation创建Horizo​​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以形成链。