Question

我正在尝试以编程方式使用约束布局将两个大小相等的按钮水平居中在屏幕中央。这是我到目前为止所做的：

    val view = super.onCreateView(inflater, container, savedInstanceState)


    buttonTrue = Button(activity, null, 0, R.style.NeutrifProText_BooleanButton)
    buttonTrue?.id = View.generateViewId()
    buttonTrue?.text = task?.booleanTrueLabel() ?: getString(R.string.button_yes)
    buttonTrue?.gravity = Gravity.CENTER_HORIZONTAL
    buttonTrue?.setOnClickListener { listener?.onTaskContinue(getAnswer(true)) }

    buttonFalse = Button(activity, null, 0, R.style.NeutrifProText_BooleanButton)
    buttonFalse?.id = View.generateViewId()
    buttonFalse?.text = task?.booleanFalseLabel() ?: getString(R.string.button_no)
    buttonFalse?.gravity = Gravity.CENTER_HORIZONTAL
    buttonFalse?.setOnClickListener { listener?.onTaskContinue(getAnswer(false)) }

    buttonTrue?.layoutParams = ConstraintLayout.LayoutParams(0, ConstraintLayout.LayoutParams.WRAP_CONTENT)
    buttonFalse?.layoutParams = ConstraintLayout.LayoutParams(0, ConstraintLayout.LayoutParams.WRAP_CONTENT)
    view?.task_constraint_layout?.addView(buttonTrue)
    view?.task_constraint_layout?.addView(buttonFalse)

    val idYes = buttonTrue?.id ?: 0
    val idNo = buttonFalse?.id ?: 0
    val descid = view?.task_description?.id ?: 0

    val clid = view?.task_constraint_layout?.id ?: 0
    val constraintSet = ConstraintSet()
    constraintSet.clone(view?.task_constraint_layout)
    constraintSet.connect(idYes, ConstraintSet.TOP, descid, ConstraintSet.BOTTOM, topMargin)
    constraintSet.connect(idNo, ConstraintSet.TOP, descid, ConstraintSet.BOTTOM, topMargin)

    constraintSet.connect(idYes, ConstraintSet.START, clid, ConstraintSet.START, buttonSideMargin)

    constraintSet.connect(idNo, ConstraintSet.START, idYes, ConstraintSet.END, buttonSideMargin)
    constraintSet.connect(idNo, ConstraintSet.END, clid, ConstraintSet.END, buttonSideMargin)
    constraintSet.applyTo(view?.task_constraint_layout)

这导致：

如何让按钮均匀分布？

Answer 1

我创建了这个布局XML：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/myConstraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2" />
</android.support.constraint.ConstraintLayout>

正如您所看到的，没有约束，这是为了简单起见，因为您是以编程方式创建Button。

现在，在onCreate()方法中（你可以在任何你想要的地方做到），我这样做：

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    val constraintLayout = findViewById<ConstraintLayout>(R.id.myConstraintLayout)

    val constraintSet = ConstraintSet()
    constraintSet.clone(constraintLayout)
    constraintSet.connect(R.id.button1, ConstraintSet.START, ConstraintSet.PARENT_ID, ConstraintSet.START)
    constraintSet.connect(R.id.button1, ConstraintSet.END, R.id.button2, ConstraintSet.START)
    constraintSet.setHorizontalChainStyle(R.id.button1, ConstraintSet.CHAIN_SPREAD)

    constraintSet.connect(R.id.button2, ConstraintSet.END, ConstraintSet.PARENT_ID, ConstraintSet.END)
    constraintSet.connect(R.id.button2, ConstraintSet.START, R.id.button1, ConstraintSet.END)
    constraintSet.applyTo(constraintLayout)
}

注意，这是神奇的界限：

constraintSet.setHorizontalChainStyle(R.id.button1, ConstraintSet.CHAIN_SPREAD)

因此，您的ConstraintSet代码应如下所示：

val clid = view?.task_constraint_layout?.id ?: 0
val constraintSet = ConstraintSet()
constraintSet.clone(view?.task_constraint_layout)
constraintSet.connect(idYes, ConstraintSet.TOP, descid, ConstraintSet.BOTTOM, topMargin)
constraintSet.connect(idNo, ConstraintSet.TOP, descid, ConstraintSet.BOTTOM, topMargin)

constraintSet.connect(idYes, ConstraintSet.START, ConstraintSet.PARENT_ID, ConstraintSet.START, buttonSideMargin)
constraintSet.connect(idYes, ConstraintSet.END, idNo, ConstraintSet.START)
// This line does the magic
constraintSet.setHorizontalChainStyle(idYes, ConstraintSet.CHAIN_SPREAD)

constraintSet.connect(idNo, ConstraintSet.START, idYes, ConstraintSet.END)
constraintSet.connect(idNo, ConstraintSet.END, ConstraintSet.PARENT_ID, ConstraintSet.END, buttonSideMargin)
constraintSet.applyTo(view?.task_constraint_layout)

编辑：

验证您的样式R.style.NeutrifProText_BooleanButton不适用于按钮的大边距。否则，如果按钮之间没有空格，请尝试在它们之间添加一些边距：

constraintSet.connect(idYes, ConstraintSet.START, ConstraintSet.PARENT_ID, ConstraintSet.START, buttonSideMargin)
constraintSet.connect(idYes, ConstraintSet.END, idNo, ConstraintSet.START, yourMarginValue /* Get it the same way you are getting buttonSideMargin */)
// This line does the magic
constraintSet.setHorizontalChainStyle(idYes, ConstraintSet.CHAIN_SPREAD)

constraintSet.connect(idNo, ConstraintSet.START, idYes, ConstraintSet.END, yourMarginValue /* Get it the same way you are getting buttonSideMargin */)
constraintSet.connect(idNo, ConstraintSet.END, ConstraintSet.PARENT_ID, ConstraintSet.END, buttonSideMargin)
constraintSet.applyTo(view?.task_constraint_layout)

这是我的例子的最终结果：

使用约束布局以编程方式将两个按钮水平对齐

1 个答案: