约束布局中的按钮未拉伸到父级答案

【问题标题】：buttons in Constraint Layout not stretching to parent约束布局中的按钮未拉伸到父级
【发布时间】：2019-05-25 15:21:48
【问题描述】：

使用约束布局制作计算器 UI，但无法将按钮拉伸到不同尺寸设备的父级。想要每个设备中的第一张图片一样的布局。

这是我做的。 这是它改变对齐的地方。

<TextView
    android:id="@+id/textView"
    android:layout_width="0dp"
    android:layout_height="330dp"
    android:layout_margin="0dp"
    android:layout_marginStart="2dp"
    android:layout_marginEnd="2dp"
    android:background="@android:color/background_dark"
    android:gravity="bottom|right"
    android:maxLength="17"
    android:maxLines="2"
    android:nestedScrollingEnabled="false"
    android:text="@string/_0"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:textSize="70sp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:ignore="RtlHardcoded" />

<Button
    android:id="@+id/button25"
    android:layout_width="195px"
    android:layout_height="wrap_content"
    android:background="?attr/colorButtonNormal"
    android:text="AC"
    android:textSize="20sp"
    android:textStyle="bold"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView" />

<Button
    android:id="@+id/button26"
    android:layout_width="195px"
    android:layout_height="0dp"
    android:layout_margin="0dp"
    android:background="?attr/colorButtonNormal"
    android:text="+/-"
    android:textSize="20sp"
    android:textStyle="bold"
    app:layout_constraintBaseline_toBaselineOf="@+id/button25"
    app:layout_constraintStart_toEndOf="@+id/button25" />

代码很大，所以只添加起始行。

【问题讨论】：

一个快速的解决方案是将按钮宽度设置为0dp，然后将layout_constraintWidth_percent=0.25 添加到所有网格按钮。或者，应该可以使用左/右约束将所有网格按钮行链接在一起（这会自动赋予它们相等的宽度），但我不确定如何让它们填充所有可用宽度案例。

标签： android user-interface android-constraintlayout

【解决方案1】：

您可以添加 50%（或其他任何您想要的 percnet）percnet 水平指南，并创建一些链。使用 layout_constraintHorizontal_weight 来调整底部按钮的宽度。

<?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=".MainActivity">

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintBottom_toTopOf="@+id/button9"
        app:layout_constraintGuide_percent="0.5"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="0"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/button4"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button5"
        app:layout_constraintVertical_bias="1.0" />

    <Button
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="="
        app:layout_constraintBottom_toBottomOf="@+id/button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@+id/button4"
        app:layout_constraintTop_toTopOf="@+id/button" />

    <Button
        android:id="@+id/button4"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="."
        app:layout_constraintBottom_toBottomOf="@+id/button"
        app:layout_constraintEnd_toStartOf="@+id/button3"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@+id/button"
        app:layout_constraintTop_toTopOf="@+id/button" />

    <Button
        android:id="@+id/button5"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="1"
        app:layout_constraintBottom_toTopOf="@+id/button"
        app:layout_constraintEnd_toStartOf="@+id/button6"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button17" />

    <Button
        android:id="@+id/button6"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="2"
        app:layout_constraintBottom_toBottomOf="@+id/button5"
        app:layout_constraintEnd_toStartOf="@+id/button7"
        app:layout_constraintStart_toEndOf="@+id/button5"
        app:layout_constraintTop_toTopOf="@+id/button5" />

    <Button
        android:id="@+id/button7"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="3"
        app:layout_constraintBottom_toBottomOf="@+id/button5"
        app:layout_constraintEnd_toStartOf="@+id/button8"
        app:layout_constraintStart_toEndOf="@+id/button6"
        app:layout_constraintTop_toTopOf="@+id/button5" />

    <Button
        android:id="@+id/button8"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="+"
        app:layout_constraintBottom_toBottomOf="@+id/button5"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/button7"
        app:layout_constraintTop_toTopOf="@+id/button5" />

    <Button
        android:id="@+id/button9"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="AC"
        app:layout_constraintBottom_toTopOf="@+id/button21"
        app:layout_constraintEnd_toStartOf="@+id/button10"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline" />

    <Button
        android:id="@+id/button10"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="+/-"
        app:layout_constraintBottom_toBottomOf="@+id/button9"
        app:layout_constraintEnd_toStartOf="@+id/button11"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toEndOf="@+id/button9"
        app:layout_constraintTop_toTopOf="@+id/guideline" />

    <Button
        android:id="@+id/button11"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="%"
        app:layout_constraintBottom_toBottomOf="@+id/button9"
        app:layout_constraintEnd_toStartOf="@+id/button12"
        app:layout_constraintStart_toEndOf="@+id/button10"
        app:layout_constraintTop_toTopOf="@+id/guideline" />

    <Button
        android:id="@+id/button12"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="+"
        app:layout_constraintBottom_toBottomOf="@+id/button9"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/button11"
        app:layout_constraintTop_toTopOf="@+id/guideline" />


    <Button
        android:id="@+id/button17"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="4dp"
        android:text="4"
        app:layout_constraintBottom_toTopOf="@+id/button5"
        app:layout_constraintEnd_toStartOf="@+id/button18"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button21" />

    <Button
        android:id="@+id/button18"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="5"
        app:layout_constraintBottom_toBottomOf="@+id/button17"
        app:layout_constraintEnd_toStartOf="@+id/button19"
        app:layout_constraintStart_toEndOf="@+id/button17"
        app:layout_constraintTop_toTopOf="@+id/button17" />

    <Button
        android:id="@+id/button19"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="6"
        app:layout_constraintBottom_toBottomOf="@+id/button17"
        app:layout_constraintEnd_toStartOf="@+id/button20"
        app:layout_constraintStart_toEndOf="@+id/button18"
        app:layout_constraintTop_toTopOf="@+id/button17" />

    <Button
        android:id="@+id/button20"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="-"
        app:layout_constraintBottom_toBottomOf="@+id/button17"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/button19"
        app:layout_constraintTop_toTopOf="@+id/button17" />

    <Button
        android:id="@+id/button21"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="7"
        app:layout_constraintBottom_toTopOf="@+id/button17"
        app:layout_constraintEnd_toStartOf="@+id/button22"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button9" />

    <Button
        android:id="@+id/button22"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="8"
        app:layout_constraintBottom_toBottomOf="@+id/button21"
        app:layout_constraintEnd_toStartOf="@+id/button23"
        app:layout_constraintStart_toEndOf="@+id/button21"
        app:layout_constraintTop_toTopOf="@+id/button21" />

    <Button
        android:id="@+id/button23"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="9"
        app:layout_constraintBottom_toBottomOf="@+id/button21"
        app:layout_constraintEnd_toStartOf="@+id/button24"
        app:layout_constraintStart_toEndOf="@+id/button22"
        app:layout_constraintTop_toTopOf="@+id/button21" />

    <Button
        android:id="@+id/button24"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="x"
        android:textAllCaps="false"
        app:layout_constraintBottom_toBottomOf="@+id/button21"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/button23"
        app:layout_constraintTop_toTopOf="@+id/button21" />

</android.support.constraint.ConstraintLayout>

看起来像：

【讨论】：

【解决方案2】：

使用固定宽度会导致不同屏幕出现问题如果您希望它动态调整到每个屏幕，我建议您使用约束布局水平链接

类似这样的：

<Button
    android:id="@+id/view1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="View 1"
    app:layout_constraintRight_toLeftOf="@+id/view2"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/view2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="View 2"
    app:layout_constraintRight_toLeftOf="parent"
    app:layout_constraintVertical_chainStyle="packed"
    app:layout_constraintLeft_toRightOf="@+id/view1"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

它的工作原理与线性布局中的权重非常相似

您可以在此处查看更多参考： https://medium.com/@nomanr/constraintlayout-chains-4f3b58ea15bb

【讨论】：