【问题标题】:Android ConstraintLayout Center Aligning Horizontally With Multiple ButtonsAndroid ConstraintLayout 中心与多个按钮水平对齐
【发布时间】:2020-11-10 11:27:41
【问题描述】:

我最近开始在 android studio 中使用 ConstraintLayout(以后可能会在我的应用程序中使用它),我想创建一个布局,其中一行有 5 个按钮,并且有 10 行,每行 5 个按钮。我做对了,只是我希望按钮在填充整行的同时全部调整为相同的宽度(按钮之间没有间隙)。

A example of the problem:

我当前的xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout     xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="lotterynumbergenerator.johnferrazlopez.com.southafricanlotteryguide.other.SaveNumbers">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="01"
        android:textStyle="bold"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/button2"
        tools:layout_editor_absoluteY="16dp" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="02"
        android:textStyle="bold"
        app:layout_constraintLeft_toRightOf="@+id/button"
        app:layout_constraintRight_toLeftOf="@+id/button3"
        tools:layout_editor_absoluteY="16dp" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="03"
        android:textStyle="bold"
        app:layout_constraintLeft_toRightOf="@+id/button2"
        app:layout_constraintRight_toLeftOf="@+id/button4"
        tools:layout_editor_absoluteY="16dp" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="04"
        android:textStyle="bold"
        app:layout_constraintLeft_toRightOf="@+id/button3"
        app:layout_constraintRight_toLeftOf="@+id/button5"
        tools:layout_editor_absoluteY="16dp" />

    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="05"
        android:textStyle="bold"
        app:layout_constraintLeft_toRightOf="@+id/button4"
        app:layout_constraintRight_toRightOf="parent"
        tools:layout_editor_absoluteY="16dp" />

    <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="06"
        tools:layout_editor_absoluteY="64dp"
        app:layout_constraintRight_toLeftOf="@+id/button7"
        app:layout_constraintLeft_toLeftOf="parent" />

    <Button
        android:id="@+id/button7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="07"
        tools:layout_editor_absoluteY="64dp"
        app:layout_constraintRight_toLeftOf="@+id/button8"
        app:layout_constraintLeft_toRightOf="@+id/button6" />

    <Button
        android:id="@+id/button8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="08"
        tools:layout_editor_absoluteY="64dp"
        app:layout_constraintRight_toLeftOf="@+id/button9"
        app:layout_constraintLeft_toRightOf="@+id/button7" />

    <Button
        android:id="@+id/button9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="09"
        tools:layout_editor_absoluteY="64dp"
        app:layout_constraintRight_toLeftOf="@+id/button10"
        app:layout_constraintLeft_toRightOf="@+id/button8" />

    <Button
        android:id="@+id/button10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="10"
        tools:layout_editor_absoluteY="64dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/button9" />
</android.support.constraint.ConstraintLayout>

我在 xml 中看到的另一件事是标签中的这条消息是“此视图不受垂直约束:在运行时它将跳转到左侧,除非您添加垂直约束”

提前致谢。

编辑:

【问题讨论】:

    标签: android android-constraintlayout


    【解决方案1】:

    这里是使用10dp 作为边距的示例。我只创建了一行,但其他行将遵循相同的模式。这个模型使用水平链,链样式为“spread”。 (app:layout_constraintHorizontal_chainStyle="spread") 按钮的宽度设置为“0dp”(“匹配约束”)。开始和结束边距负责正确设置间距。该布局适用于纵向和横向以及不同的屏幕尺寸。

    添加将每个按钮绑定到父顶部的约束会处理“未垂直约束”错误消息。视图必须受到水平和垂直约束。

    肖像

    风景

    还有 XML:

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:layout_editor_absoluteX="0dp"
        tools:layout_editor_absoluteY="25dp">
    
        <Button
            android:id="@+id/button"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="10dp"
            android:layout_marginStart="10dp"
            android:layout_marginTop="8dp"
            android:text="01"
            android:textStyle="bold"
            app:layout_constraintEnd_toStartOf="@+id/button2"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintHorizontal_chainStyle="spread"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    
        <Button
            android:id="@+id/button2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="10dp"
            android:layout_marginTop="8dp"
            android:text="02"
            android:textStyle="bold"
            app:layout_constraintEnd_toStartOf="@+id/button3"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toEndOf="@+id/button"
            app:layout_constraintTop_toTopOf="parent" />
    
        <Button
            android:id="@+id/button3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="10dp"
            android:layout_marginTop="8dp"
            android:text="03"
            android:textStyle="bold"
            app:layout_constraintEnd_toStartOf="@+id/button4"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toEndOf="@+id/button2"
            app:layout_constraintTop_toTopOf="parent" />
    
        <Button
            android:id="@+id/button4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="10dp"
            android:layout_marginTop="8dp"
            android:text="04"
            android:textStyle="bold"
            app:layout_constraintEnd_toStartOf="@+id/button5"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toEndOf="@+id/button3"
            app:layout_constraintTop_toTopOf="parent" />
    
        <Button
            android:id="@+id/button5"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="10dp"
            android:layout_marginTop="8dp"
            android:text="05"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toEndOf="@+id/button4"
            app:layout_constraintTop_toTopOf="parent" />
    
    </android.support.constraint.ConstraintLayout>
    

    【讨论】:

    • 我的意思是我希望所有的按钮均匀分布。所以无论显示器是什么尺寸,按钮都会缩小或增长。基本上它们都必须具有相同的 10dp 边距。我编辑了我的答案以显示我想要的。谢谢
    【解决方案2】:

    如果您将每行的所有第一个按钮链接成一个垂直链,您将摆脱错误消息,并且您的行的高度也会自动调整大小。尝试使用0dp40dp@dimen/buttonHeight 等固定值来优化按钮的高度。

    以您的代码和 Cheticamp 的代码为基础,您可以执行以下操作:

        <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="5dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="5dp"
        android:text="01"
        android:textStyle="bold"
        app:layout_constraintEnd_toStartOf="@+id/button2"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintVertical_chainStyle="spread"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" 
        app:layout_constraintBottom_toTopOf="@+id/button6"
        />
    
    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginEnd="5dp"
        android:layout_marginStart="5dp"
        android:text="02"
        android:textStyle="bold"
        app:layout_constraintStart_toEndOf="@+id/button"
        app:layout_constraintEnd_toStartOf="@+id/button3"
        app:layout_constraintTop_toTopOf="@+id/button"
        app:layout_constraintBottom_toBottomOf="@+id/button"
        />
    
    <Button
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginEnd="5dp"
        android:layout_marginStart="5dp"
        android:text="03"
        android:textStyle="bold"
        app:layout_constraintStart_toEndOf="@+id/button2"
        app:layout_constraintEnd_toStartOf="@+id/button4"
        app:layout_constraintTop_toTopOf="@+id/button"
        app:layout_constraintBottom_toBottomOf="@+id/button"
        />
    
    <Button
        android:id="@+id/button4"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginEnd="5dp"
        android:layout_marginStart="5dp"
        android:text="04"
        android:textStyle="bold"
        app:layout_constraintStart_toEndOf="@+id/button3"
        app:layout_constraintEnd_toStartOf="@+id/button5"
        app:layout_constraintTop_toTopOf="@+id/button"
        app:layout_constraintBottom_toBottomOf="@+id/button"
        />
    
    <Button
        android:id="@+id/button5"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginEnd="10dp"
        android:layout_marginStart="5dp"
        android:text="05"
        android:textStyle="bold"
        app:layout_constraintStart_toEndOf="@+id/button4"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@+id/button"
        app:layout_constraintBottom_toBottomOf="@+id/button"
        />
    
    <Button
        android:id="@+id/button6"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="5dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp"
        android:text="06"
        android:textStyle="bold"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/button7"
        app:layout_constraintTop_toBottomOf="@+id/button" 
        app:layout_constraintBottom_toTopOf="@+id/button11"
        />
    
    <Button
        android:id="@+id/button7"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginEnd="5dp"
        android:layout_marginStart="5dp"
        android:text="07"
        android:textStyle="bold"
        app:layout_constraintStart_toEndOf="@+id/button6"
        app:layout_constraintEnd_toStartOf="@+id/button8"
        app:layout_constraintTop_toTopOf="@+id/button6"
        app:layout_constraintBottom_toBottomOf="@+id/button6"
        />
    
    <Button
        android:id="@+id/button8"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginEnd="5dp"
        android:layout_marginStart="5dp"
        android:text="08"
        android:textStyle="bold"
        app:layout_constraintStart_toEndOf="@+id/button7"
        app:layout_constraintEnd_toStartOf="@+id/button9"
        app:layout_constraintTop_toTopOf="@+id/button6"
        app:layout_constraintBottom_toBottomOf="@+id/button6"
        />
    
    <Button
        android:id="@+id/button9"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginEnd="5dp"
        android:layout_marginStart="5dp"
        android:text="09"
        android:textStyle="bold"
        app:layout_constraintStart_toEndOf="@+id/button8"
        app:layout_constraintEnd_toStartOf="@+id/button10"
        app:layout_constraintTop_toTopOf="@+id/button6"
        app:layout_constraintBottom_toBottomOf="@+id/button6"
        />
    
    <Button
        android:id="@+id/button10"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginEnd="10dp"
        android:layout_marginStart="5dp"
        android:text="10"
        android:textStyle="bold"
        app:layout_constraintStart_toEndOf="@+id/button9"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@+id/button6"
        app:layout_constraintBottom_toBottomOf="@+id/button6"
        />
    
    <Button
        android:id="@+id/button11"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="5dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="8dp"
        android:text="11"
        android:textStyle="bold"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/button7"
        app:layout_constraintTop_toBottomOf="@+id/button6" 
        app:layout_constraintBottom_toBottomOf="parent"
        />
    
    <Button
        android:id="@+id/button12"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginEnd="5dp"
        android:layout_marginStart="5dp"
        android:text="12"
        android:textStyle="bold"
        app:layout_constraintStart_toEndOf="@+id/button11"
        app:layout_constraintEnd_toStartOf="@+id/button13"
        app:layout_constraintTop_toTopOf="@+id/button11"
        app:layout_constraintBottom_toBottomOf="@+id/button11"
        />
    
    <Button
        android:id="@+id/button13"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginEnd="5dp"
        android:layout_marginStart="5dp"
        android:text="13"
        android:textStyle="bold"
        app:layout_constraintStart_toEndOf="@+id/button12"
        app:layout_constraintEnd_toStartOf="@+id/button14"
        app:layout_constraintTop_toTopOf="@+id/button11"
        app:layout_constraintBottom_toBottomOf="@+id/button11"
        />
    
    <Button
        android:id="@+id/button14"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginEnd="5dp"
        android:layout_marginStart="5dp"
        android:text="14"
        android:textStyle="bold"
        app:layout_constraintStart_toEndOf="@+id/button13"
        app:layout_constraintEnd_toStartOf="@+id/button14"
        app:layout_constraintTop_toTopOf="@+id/button11"
        app:layout_constraintBottom_toBottomOf="@+id/button11"
        />
    
    <Button
        android:id="@+id/button15"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginEnd="10dp"
        android:layout_marginStart="5dp"
        android:text="15"
        android:textStyle="bold"
        app:layout_constraintStart_toEndOf="@+id/button14"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@+id/button11"
        app:layout_constraintBottom_toBottomOf="@+id/button11"
        />
    

    【讨论】:

      【解决方案3】:

      app:layout_constraintEnd_toEndOf="父" app:layout_constraintStart_toStartOf="parent"

      【讨论】:

        猜你喜欢
        • 2020-03-14
        • 1970-01-01
        • 2020-12-20
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2020-08-07
        • 2018-10-13
        • 1970-01-01
        相关资源
        最近更新 更多