ConstraintLayout居中对齐图片和文本

Question

我该如何使用 ConstraintLayout 将 TextView 对齐到 ImageView 的末端，并使 TextView 在垂直方向上居中？我已经成功将其对齐到 ImageView 的末端，但是由于 ImageView 比 TextView 大一点，所以它并没有垂直居中。我知道如何使用 RelativeLayout 完成此操作，但想要遵循最佳实践，并仅使用 ConstraintLayout。以下是一个示例，显示了应该如何显示（云图标和文本“Last Backup”）。

- LeTadas

---

请上传XML文件。 - Jaymin

Answer 1

只需将app:layout_constraintTop_toTopOf和app:layout_constraintBottom_toBottomOf结合使用，就可以使TextView在垂直方向上居中对齐到ImageView。

<ImageView
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@mipmap/ic_launcher"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="16dp"
    android:text="Last Backup"
    app:layout_constraintStart_toEndOf="@+id/imageView"
    app:layout_constraintTop_toTopOf="@+id/imageView"
    app:layout_constraintBottom_toBottomOf="@+id/imageView"
    />

- Hong Duan

Answer 2

像这样使用drawable left来设置您的TextView，并根据您想要的方式通过根layout更改gravity

<TextView
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:drawablePadding="15dp"
     android:drawableLeft="@drawable/google"
     android:text="@string/textGoogle" />

- Sandeep Parish

Answer 3

您可以像使用ConstraintLayout一样操作：

将TextView的顶部和底部约束设置为ImageView的顶部和底部。 这些约束将使TextView位于ImageView的中心。

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

 <android.support.v7.widget.AppCompatImageView
    android:id="@+id/imageview"
    android:layout_width="50dp"
    android:layout_height="50dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@drawable/ic_icon"/>


 <android.support.v7.widget.AppCompatTextView
    android:id="@+id/textview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView"
    android:textColor="@android:color/white"
    android:textSize="14sp"
    app:layout_constraintStart_toEndOf="@+id/imageview"
    app:layout_constraintBottom_toBottomOf="@+id/imageview"
    app:layout_constraintTop_toTopOf="@+id/imageview"/>

</android.support.constraint.ConstraintLayout>

- Jaymin

Answer 4

<ImageView
        android:id="@+id/ivImg"
        android:layout_width="@dimen/dimen_24dp"
        android:layout_height="@dimen/dimen_24dp"
        android:layout_marginTop="@dimen/dimen_40dp"
        android:src="@android:drawable/ic_menu_search"
        android:layout_marginEnd="@dimen/dimen_20dp"
       app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintEnd_toStartOf="@+id/txtlbResult"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/txtlbResult"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/black"
        android:textSize="@dimen/text14sp"
        android:layout_marginTop="@dimen/dimen_40dp"
        android:text="@string/your_result_are_here"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/ivImg"
        app:layout_constraintTop_toTopOf="parent" />

- Rohit269

Answer 5

设置父约束的顶部和底部。这些约束将设置约束的中心 app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintEnd_toEndOf="parent"。

- PK Chahar