如何在使用ConstraintLayout时将两个按钮居中？

Question

如何在使用ConstraintLayout时将两个按钮居中？

4

我希望在使用代码A时，能够像图像A一样在屏幕中心制作两个按钮，但实际上这两个按钮位于左侧屏幕，就像图像B一样。我在代码A中犯了什么错误？我知道可以通过添加Guideline控件来实现它，但为什么代码A不能做到呢？谢谢！

图片 B

代码 A

<?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">

    <com.google.android.gms.ads.AdView xmlns:ads="http://schemas.android.com/apk/res-auto"
        android:id="@+id/adView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        ads:adSize="SMART_BANNER"
        ads:adUnitId="@string/ad_unit_id"
        app:layout_constraintTop_toTopOf="parent" />

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginLeft="7dp"
        android:layout_marginRight="7dp"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="8dp"
        android:orientation="vertical"
        app:layout_constraintBottom_toTopOf="@+id/btnAddEdit"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/adView">

        <TextView
            android:id="@+id/tvName"
            style="@style/myTextMedium"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Backup Name" />

    </LinearLayout>


    <Button
        android:id="@+id/btnAddEdit"
        style="@style/myTextMedium"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="2dp"
        android:layout_marginRight="7dp"
        android:layout_marginTop="2dp"
        android:text="One"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLefttOf="@+id/btnCancel"
        app:layout_constraintBottom_toBottomOf="parent"
         />

    <Button
        android:id="@+id/btnCancel"
        style="@style/myTextMedium"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="2dp"
        android:layout_marginLeft="7dp"
        android:layout_marginTop="2dp"
        android:text="Two"
        app:layout_constraintLeft_toRightOf="@+id/btnAddEdit"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        />


</android.support.constraint.ConstraintLayout>

致Cheticamp:

谢谢！

AA代码运行良好，为什么可以删除app:layout_constraintRight_toLefttOf="@+id/btnCancel"？

AA代码

<Button
        android:id="@+id/btnAddEdit"
        style="@style/myTextMedium"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="2dp"
        android:layout_marginRight="7dp"
        android:layout_marginTop="2dp"
        android:text="One"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/btnCancel"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintBottom_toBottomOf="parent"
        />

代码BB运行良好，为什么可以用app:layout_constraintRight_toRightOf="parent"替换app:layout_constraintEnd_toEndOf="parent"

代码BB

  <Button
        android:id="@+id/btnCancel"
        style="@style/myTextMedium"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="2dp"
        android:layout_marginLeft="7dp"
        android:layout_marginTop="2dp"
        android:text="Two"
        app:layout_constraintStart_toEndOf="@+id/btnAddEdit"
        app:layout_constraintRight_toRightOf="parent"   
        app:layout_constraintBottom_toBottomOf="parent"
  />

而且，你能告诉我 app:layout_constraintEnd_toEndOf="parent" 和 app:layout_constraintRight_toRightOf="parent" 之间的区别吗？

- HelloCW

“Start” 对应于从左到右的 LayoutDirection (LTR) 中的 “left”。对于 LTR 布局，“End” 是右侧。当布局方向为从右到左时，“Start” 和 “end” 会翻转，这意味着 “start” 变成了 “right”，而 “end” 则变成了 “left”。我建议您在布局中不要使用 right/left，而是使用 start/end，除非 Android Studio 设计师发出警告，但它不会这样做。 - Cheticamp

谢谢！你的意思是我应该总是使用 app:layout_constraintEnd_toEndOf="parent" 而不是 app:layout_constraintRight_toRightOf="parent" 吗？ - HelloCW

1

是的，那是更可取的。我的感觉是左/右将最终被淘汰，并且现在支持向后兼容性。 - Cheticamp

3个回答

0

对于您的按钮，请尝试使用此属性来设置第一个按钮

app:layout_constraintHorizontal_bias="0.4"

对于第二个按钮，请使用

app:layout_constraintHorizontal_bias="0.6"

- Ashutosh Patoa

谢谢！但我认为你的代码无法适应所有尺寸的屏幕。它是一个硬编码。 - HelloCW

这不是硬编码，请查看此链接 https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html#CenteringPositioning - Ashutosh Patoa

0

我已经更新了您的代码，现在应该可以正常工作了！

<?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">

    <com.google.android.gms.ads.AdView xmlns:ads="http://schemas.android.com/apk/res-auto"
        android:id="@+id/adView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        ads:adSize="SMART_BANNER"
        ads:adUnitId="@string/ad_unit_id"
        app:layout_constraintTop_toTopOf="parent" />

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginLeft="7dp"
        android:layout_marginRight="7dp"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="8dp"
        android:orientation="vertical"
        app:layout_constraintBottom_toTopOf="@+id/btnAddEdit"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/adView">

        <TextView
            android:id="@+id/tvName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Backup Name" />

    </LinearLayout>


    <Button
        android:id="@+id/btnAddEdit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="80dp"
        android:text="One"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLefttOf="@+id/btnCancel" />

    <Button
        android:id="@+id/btnCancel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="0dp"
        android:layout_marginEnd="80dp"
        android:text="Two"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />


</android.support.constraint.ConstraintLayout>

- Edu Salgado

谢谢，但是你的代码 android:layout_marginEnd="80dp" 是硬编码。 - HelloCW

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Cheticamp · Accepted Answer

以下是更正后的XML代码，可以像“图片A”一样布局，无需硬编码或边距：

<android.support.constraint.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.gms.ads.AdView xmlns:ads="http://schemas.android.com/apk/res-auto"
        android:id="@+id/adView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        ads:adSize="SMART_BANNER"
        ads:adUnitId="@string/ad_unit_id"
        app:layout_constraintTop_toTopOf="parent" />

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="7dp"
        android:layout_marginRight="7dp"
        android:layout_marginTop="10dp"
        android:orientation="vertical"
        app:layout_constraintBottom_toTopOf="@+id/btnAddEdit"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/adView">

        <TextView
            android:id="@+id/tvName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Backup Name" />

    </LinearLayout>

    <Button
        android:id="@+id/btnAddEdit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="One"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/btnCancel"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintRight_toLefttOf="@+id/btnCancel"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/btnCancel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="2dp"
        android:text="Two"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/btnAddEdit" />

</android.support.constraint.ConstraintLayout>

关键是将按钮“one”约束在父元素的左侧，将按钮二约束在右侧。两个按钮之间会创建一个紧密的链。请参阅文档中的链。

您可以为按钮设置起始/结束边距以将它们分开，同时保持居中对齐。

CHAIN_PACKED--链的元素将紧密地排在一起。然后，子元素的横向或纵向偏移属性会影响已打包元素的定位