Android布局求助：ImageView内TextView水平居中及相关布局实现

Hey there! Let's break down your two layout requirements and fix them with modern Android layout tools—ditching RelativeLayout for ConstraintLayout will make these way easier to implement cleanly.

For this, we can nest the TextView inside the ImageView (since ImageView acts as a ViewGroup in modern Android) and use ConstraintLayout to neatly position the extra view next to it. Here's a complete XML example:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="wrap_content"
    android:padding="16dp">

    <!-- ImageView with horizontally centered TextView inside -->
    <ImageView
        android:id="@+id/main_image"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:src="@drawable/your_image_resource"
        android:scaleType="centerCrop"
        app:layout_constraintStart_toStartOf="parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Centered Text"
            android:textColor="@android:color/white"
            android:textSize="16sp"
            android:layout_gravity="center_horizontal"/>

    </ImageView>

    <!-- Extra view aligned next to the ImageView -->
    <TextView
        android:id="@+id/extra_side_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="This is the extra view beside the image"
        android:paddingStart="16dp"
        app:layout_constraintStart_toEndOf="@id/main_image"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@id/main_image"
        app:layout_constraintBottom_toBottomOf="@id/main_image"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Key details:

• android:layout_gravity="center_horizontal" ensures the TextView stays horizontally centered inside the ImageView.
• The extra view is constrained to the end of the ImageView, and stretches to the parent's edge while aligning its top/bottom with the ImageView for vertical centering.

RelativeLayout can get tangled with centered elements and dashed lines, but ConstraintLayout simplifies this completely. First, create a dashed line drawable (save it as drawable/dashed_line.xml):

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">
    <stroke
        android:width="2dp"
        android:color="@android:color/darker_gray"
        android:dashWidth="8dp"
        android:dashGap="4dp"/>
</shape>

Now here's the main layout XML using ConstraintLayout:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="wrap_content"
    android:padding="16dp">

    <!-- Dashed line view -->
    <View
        android:id="@+id/dashed_side_line"
        android:layout_width="2dp"
        android:layout_height="0dp"
        android:background="@drawable/dashed_line"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <!-- ImageView centered above the TextView -->
    <ImageView
        android:id="@+id/top_centered_image"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/your_image_resource"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toEndOf="@id/dashed_side_line"
        app:layout_constraintStart_margin="16dp"
        app:layout_constraintHorizontal_center_toHorizontal_center="@id/below_centered_text"/>

    <!-- TextView aligned below the centered ImageView -->
    <TextView
        android:id="@+id/below_centered_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Text below centered image"
        android:textSize="18sp"
        android:paddingTop="12dp"
        app:layout_constraintTop_toBottomOf="@id/top_centered_image"
        app:layout_constraintStart_toEndOf="@id/dashed_side_line"
        app:layout_constraintStart_margin="16dp"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Key details:

• The dashed line is a simple View with a dashed shape drawable, constrained to the parent's start and stretching vertically.
• layout_constraintHorizontal_center_toHorizontal_center="@id/below_centered_text" locks the ImageView perfectly centered above the TextView.
• Both the ImageView and TextView are positioned to the end of the dashed line with a margin, keeping them aligned neatly next to the dashed view.

内容的提问来源于stack exchange，提问作者amodkanthe