ConstraintLayout居中对齐图像和文本

ConstraintLayout center align image and text

如何使用 ConstraintLayoutTextView 对齐到 ImageView 的末尾 TextView 将是 centered vertically 我设法将它对齐到 ImageView 的末尾ImageView 但它没有垂直居中,因为 ImageViewTextView 大一点 我知道如何使用 RelativeLayout 来做到这一点,但想使用最佳实践并且只使用 ConstraintLayout

这是一个示例(云图标和文本上次备份)

像这样为您的 TextView 使用 drawable left 并根据需要更改根 layoutgravity

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

只需将 app:layout_constraintTop_toTopOfapp: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"
    />

你可以像使用 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>

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

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