我有两个观点 - A和B.他们有不同的高度。
如何在ConstraintLayout
内垂直对齐这些视图的中心?
例如,在下面的XML中,我希望img_change_picture
的中心与txt_change_picture
的中心对齐。
<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"
>
<android.support.constraint.Guideline
android:id="@+id/guideline_icons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.1"/>
<android.support.constraint.Guideline
android:id="@+id/guideline_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.2"/>
<ImageView
android:id="@+id/img_change_picture"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toEndOf="@id/guideline_icons"
app:layout_constraintTop_toBottomOf="@id/img_header"
android:layout_marginTop="@dimen/settings_main_vertical_spacing"
app:srcCompat="@drawable/change_picture"/>
<TextView
android:id="@+id/txt_change_picture"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toEndOf="@id/guideline_text"
android:text="@string/settings_main_change_picture"
/>
</android.support.constraint.ConstraintLayout>
答案 0 :(得分:7)
如果没有指南,请将属性放在需要垂直对齐的每个视图上。
.bashrc
使用指南
添加水平指南,并使其与app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
垂直居中。
layout_constraintGuide_percent
对于每个视图,将它们锚定到带有属性的指南
<android.support.constraint.Guideline
android:id="@+id/guideline"
android:layout_width="1dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5"/>
使用指南,您可以更灵活,因为您可以通过移动指南轻松更改所有视图位置。
<强>更新强>
要将视图垂直居中对齐另一个视图,您只需要在属性中引用视图ID。要将app:layout_constraintTop_toTopOf="@id/guideline"
app:layout_constraintBottom_toBottomOf="@id/guideline"
垂直居中与txt_change_picture
对齐,您可以更改此布局:
img_change_picture
答案 1 :(得分:1)