使用ConstraintLayout时如何让两个按钮居中?

How can make the two buttons to be center when I use ConstraintLayout?

我希望用代码A的时候像图A一样在屏幕中央做两个按钮,但实际上像图B一样在屏幕左侧的两个按钮,我在我的代码中犯了什么错误代码代码A?我知道我可以通过添加一个Guideline控件来实现,但是为什么代码A做不到呢?谢谢!

图片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>

前往切蒂坎普:

谢谢!

代码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"有什么不同吗

对于您的按钮,尝试将此属性用于按钮一

app:layout_constraintHorizontal_bias="0.4"

和按钮二用

app:layout_constraintHorizontal_bias="0.6"

我已经更新了您的代码,现在应该可以使用了!

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

这是更正后的 XML,布局类似于 "Image 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" 限制在父项的左侧,将按钮二限制在右侧。在两个按钮之间创建了一个打包链。请参阅文档中的 Chains

您可以在按钮上设置 start/end 边距以在保持居中的同时将它们分开。

CHAIN_PACKED -- the elements of the chain will be packed together. The horizontal or vertical bias attribute of the child will then affect the positioning of the packed elements