Android约束布局水平居中对齐TextView和ImageView无效

Question

Android约束布局水平居中对齐TextView和ImageView无效

androidandroid-layoutandroid-constraintlayout

8

我希望我的Textview和ImageView能像上面的图片一样。

1.我想使用约束布局将

2.Textview不能居中到ImageView的中心位置（左右位置）。

3.由于约束布局，layout gravity无法起作用，以使Textview居中。

4.请帮助我实现这一点。

提前感谢。

  <android.support.v7.widget.CardView
            android:id="@+id/cv2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            app:cardCornerRadius="4dp"
            app:layout_constraintTop_toBottomOf="@+id/cv1">

            <android.support.constraint.ConstraintLayout
                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <TextView
                    android:id="@+id/title1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:paddingLeft="10dp"
                    android:text="Hero"
                    android:textColor="@color/colorPrimary"
                    android:textSize="16dp"
                    android:textStyle="bold"
                    app:layout_constraintLeft_toLeftOf="parent"
                    app:layout_constraintRight_toLeftOf="@+id/display_pic"
                    />


                <ImageView
                    android:id="@+id/display_pic"
                    android:layout_width="80dp"
                    android:layout_height="80dp"
                    android:layout_alignParentEnd="true"
                    android:layout_margin="16dp"
                    android:adjustViewBounds="false"
                    android:scaleType="centerCrop"
                    app:layout_constraintLeft_toLeftOf="@+id/title1"
                    app:layout_constraintRight_toRightOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:srcCompat="@android:color/holo_red_light" />


            </android.support.constraint.ConstraintLayout>

</android.support.v7.widget.CardView>

- Kumar

我想使用约束布局将TextView和ImageView设置为水平居中，而不是垂直居中。 - Kumar

你想要重叠ImageView和TextView吗？这不是很清楚。 - Juan Cruz Soler

@JuanCruzSoler 在父视图的左侧我想要 TextView，TextView 的右侧我想要 ImageView。 - Kumar

好的，请检查我发布的答案，它应该有效。 - Juan Cruz Soler

@JuanCruzSoler，请查看我的更新问题。 - Kumar

请检查更新后的答案。 - Juan Cruz Soler

3个回答

2

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="80dp"
        android:layout_height="80dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hero"
        android:textColor="@color/colorPrimary"
        android:textSize="16dp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="@+id/imageView2"
        app:layout_constraintEnd_toEndOf="@+id/imageView2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintStart_toStartOf="@+id/imageView2"
        app:layout_constraintTop_toTopOf="@+id/imageView2" />


</android.support.constraint.ConstraintLayout>

通过上述代码，您可以将文本视图保持在图像视图的中心。要定位图像视图，请调整垂直和水平偏差。希望这能帮助到您。

- SKG

嗨，请看一下我更新的带有图片的问题。 - Kumar

1

我想这就是你想要的！查看图片并发表评论。

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    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.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dp">

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="@+id/textView2"
            app:layout_constraintEnd_toEndOf="@+id/textView2"
            app:layout_constraintTop_toTopOf="@+id/textView2"
            app:srcCompat="@drawable/ic_favorite_border_black_24dp"
            tools:ignore="VectorDrawableCompat" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:text="TextView"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toEndOf="@+id/imageView2"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginLeft="8dp" />


    </android.support.constraint.ConstraintLayout>


</android.support.v7.widget.CardView>

- Rizwan Atta

图片视图大小不会增加，它是固定的。这不是预期的答案。 - Kumar

@kumar，我刚刚检查了代码，并增加了图像的大小并设置了我的片段图像的比例类型，它在这里完美对齐！无论图像大小如何。 - Rizwan Atta

嗨，请检查我的更新问题。 - Kumar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Juan Cruz Soler · Accepted Answer

如果您想要将 ImageView 放置在父容器的右侧，请移除此属性：

app:layout_constraintLeft_toLeftOf="@+id/title1"

如果您想要垂直对齐TextView，请添加以下属性：

app:layout_constraintTop_toTopOf="@id/display_pic"
app:layout_constraintBottom_toBottomOf="@id/display_pic"

更改后的 XML：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    android:id="@+id/cv2"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    app:cardCornerRadius="4dp"
    app:layout_constraintTop_toBottomOf="@+id/cv1">

    <android.support.constraint.ConstraintLayout
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/title1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:paddingLeft="10dp"
            android:text="Hero"
            android:textColor="@color/colorPrimary"
            android:textSize="16dp"
            android:textStyle="bold"
            app:layout_constraintTop_toTopOf="@id/display_pic"
            app:layout_constraintBottom_toBottomOf="@id/display_pic"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@+id/display_pic"/>


        <ImageView
            android:id="@+id/display_pic"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_alignParentEnd="true"
            android:adjustViewBounds="false"
            android:scaleType="centerCrop"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@android:color/holo_red_light"/>

    </android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>

结果：