代码之家 › 专栏 › 技术社区 › Kristy Welsh

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

android-constraintlayout kotlin button android

Kristy Welsh · 技术社区 · 7 年前

我试图通过编程使用约束布局将两个大小相等的按钮水平放置在屏幕中央。以下是我目前掌握的信息:

    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)

这导致:

如何使按钮均匀分布?

1 回复 | 直到 7 年前

Jorge E. Hernández 7 年前

我创建了这个布局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)

这是我的示例的最终结果: