使用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
我希望用代码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