Android中FlowTextView覆盖TextView的布局问题求助

嘿，我来帮你搞定这个FlowTextView的布局问题！你的核心需求是让前三个TextView乖乖待在ImageView右侧，第四个描述文本实现环绕效果对吧？咱们一步步来解决：

问题根源分析 #

你当前的布局里，FlowTextView和其他TextView处于同一层级，又没有设置正确的位置约束，所以才会出现覆盖问题；另外ImageView被包裹在FlowTextView内部，外部的TextView没法直接绑定它的位置，自然会定位异常。

解决方案：调整布局层级+占位View实现环绕 #

我们把布局拆成三个部分：固定在ImageView右侧的前三个TextView、作为基准的ImageView、包含描述文本的FlowTextView，同时用占位View让描述文本环绕外部的ImageView。

修改后的完整布局代码 #

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        app:cardCornerRadius="8dp" >

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="8dp">

            <!-- 1. 先放ImageView作为位置基准 -->
            <ImageView
                android:id="@+id/imageView_room"
                android:layout_width="200dp"
                android:layout_height="160dp"
                android:contentDescription="@string/room_image"
                android:padding="4dp"
                android:layout_alignParentStart="true" />

            <!-- 2. 前三个TextView直接约束在ImageView右侧，位置固定不会被干扰 -->
            <TextView
                android:id="@+id/textview_room_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toEndOf="@id/imageView_room"
                android:layout_marginStart="25dp"
                android:layout_marginEnd="29dp"
                android:text="@string/living_room"
                android:textSize="18sp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/textview_length"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/textview_room_name"
                android:layout_toEndOf="@id/imageView_room"
                android:layout_marginStart="25dp"
                android:layout_marginTop="10dp"
                android:text="@string/length_12_x_6"
                android:textSize="14sp" />

            <TextView
                android:id="@+id/textview_width"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/textview_length"
                android:layout_toEndOf="@id/imageView_room"
                android:layout_marginStart="24dp"
                android:layout_marginTop="5dp"
                android:text="@string/width_10_x_8" />

            <!-- 3. FlowTextView从第三个TextView下方开始布局，实现文本环绕 -->
            <uk.co.deanwild.flowtextview.FlowTextView
                android:id="@+id/ftv"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/textview_width"
                android:layout_marginTop="10dp">

                <!-- 放置需要环绕的描述文本 -->
                <TextView
                    android:id="@+id/textview_desc"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="@string/with_a_large_window_looking_onto_the_vast_garden" />

                <!-- 添加和外部ImageView尺寸、位置完全重合的占位View（不可见），让文本环绕它 -->
                <View
                    android:layout_width="200dp"
                    android:layout_height="160dp"
                    android:layout_alignParentStart="true"
                    android:layout_marginTop="-170dp" <!-- 可根据实际显示微调这个值，确保和外部ImageView对齐 -->
                    android:visibility="invisible" />

            </uk.co.deanwild.flowtextview.FlowTextView>

        </RelativeLayout>

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

关键细节解释 #

• 分离固定文本与环绕文本：把不需要环绕的前三个TextView直接绑定到ImageView右侧，彻底避免被FlowTextView覆盖，解决定位异常问题。
• 占位View实现环绕：FlowTextView需要内部有View才能触发环绕逻辑，我们用一个不可见的占位View和外部ImageView完全对齐，这样描述文本就会自动"绕开"这个占位View，看起来就是在环绕外部的ImageView。
• 微调margin对齐：占位View的layout_marginTop需要根据前三个TextView的总高度+间距调整，确保它和外部ImageView完全重合，你可以根据实际显示效果微调数值。

更灵活的替代方案（推荐用ConstraintLayout） #

如果可以切换到ConstraintLayout，布局会更可靠，不需要手动计算margin：

<?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"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    app:cardCornerRadius="8dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="8dp">

        <ImageView
            android:id="@+id/imageView_room"
            android:layout_width="200dp"
            android:layout_height="160dp"
            android:contentDescription="@string/room_image"
            android:padding="4dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/textview_room_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="25dp"
            android:text="@string/living_room"
            android:textSize="18sp"
            android:textStyle="bold"
            app:layout_constraintStart_toEndOf="@id/imageView_room"
            app:layout_constraintTop_toTopOf="@id/imageView_room" />

        <TextView
            android:id="@+id/textview_length"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="25dp"
            android:layout_marginTop="10dp"
            android:text="@string/length_12_x_6"
            android:textSize="14sp"
            app:layout_constraintStart_toEndOf="@id/imageView_room"
            app:layout_constraintTop_toBottomOf="@id/textview_room_name" />

        <TextView
            android:id="@+id/textview_width"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="24dp"
            android:layout_marginTop="5dp"
            android:text="@string/width_10_x_8"
            app:layout_constraintStart_toEndOf="@id/imageView_room"
            app:layout_constraintTop_toBottomOf="@id/textview_length" />

        <uk.co.deanwild.flowtextview.FlowTextView
            android:id="@+id/ftv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/textview_width">

            <TextView
                android:id="@+id/textview_desc"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/with_a_large_window_looking_onto_the_vast_garden" />

            <View
                android:layout_width="200dp"
                android:layout_height="160dp"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="@id/imageView_room"
                android:visibility="invisible" />

        </uk.co.deanwild.flowtextview.FlowTextView>

    </androidx.constraintlayout.widget.ConstraintLayout>

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

这个方案里，占位View通过ConstraintLayout的约束和外部ImageView自动对齐，不需要手动计算margin，适配性更强。

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