Question

我希望在使用代码A时在屏幕中央创建两个按钮，就像图像A一样，但实际上左边的两个按钮就像图像B一样，我在代码A中做了什么错误代码？我知道我可以通过添加一个Guideline控件来实现它，但为什么Code 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>

To 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_constraintEnd_toEndOf="parent"

替换app:layout_constraintRight_toRightOf="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"

之间的区别吗？

Answer 1

以下是更正的XML，其布局类似于＆＃34;图像A＆＃34;没有任何硬编码或边距：

var target_id = 3
data.sort((a,b)=>{ return b.value - a.value })
var rank = data.map(function(e) { return e.id; }).indexOf(target_id);

要做的关键是约束按钮＆＃34;一个＆＃34;在父母的左侧，按钮2在右侧。在两个按钮之间创建一个打包链。请参阅文档中的Chains。

您可以在按钮上设置开始/结束边距，以便在保持居中的同时将它们分开。

CHAIN_PACKED - 链的元素将被打包在一起。然后，子项的水平或垂直偏差属性将影响打包元素的定位

Answer 2

对于您的按钮，请尝试将此属性用于按钮1

app:layout_constraintHorizontal_bias="0.4"

和按钮2使用

app:layout_constraintHorizontal_bias="0.6"

Answer 3

我已经更新了您的代码，它现在应该正常运行！

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

当我使用ConstraintLayout时，如何使两个按钮成为中心？

3 个答案: