Android仿Tinder滑动卡片TextView重叠问题修复求助

问题根源 #

1. RelativeLayout+卡片旋转的布局冲突：你给SwipeFlingAdapterView设置了rotation_degrees="15.0"，卡片根布局用RelativeLayout时，旋转会导致位置计算异常，引发TextView重叠。
2. 无效布局属性：FrameLayout上的layout_weight在RelativeLayout中不生效，可能导致高度计算错误。
3. 不必要的VideoView重建：每次getView都删除原有VideoView并创建新实例，容易引发布局不稳定。

具体修复步骤 #

1. 修改item.xml布局

将根布局换成垂直方向的LinearLayout，去掉无效的layout_weight，并添加不透明背景避免下层卡片内容透显：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@android:color/white">

    <FrameLayout
        android:id="@+id/videoContainer"
        android:layout_width="match_parent"
        android:layout_height="337dp">

        <VideoView
            android:id="@+id/videoView"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </FrameLayout>

    <TextView
        android:id="@+id/textViewName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="TextView2"
        android:textColor="@color/black"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/textViewAddress"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="TextView3"
        android:textColor="@color/black"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/textViewPaying"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="TextView1"
        android:textColor="@color/black"
        android:textSize="20sp" />

</LinearLayout>

2. 修改VideoAdapter的getView方法

复用布局中原有的VideoView，避免每次重建：

@NonNull
@Override
public View getView(int position, View convertView, @NonNull ViewGroup parent) {
    if (convertView == null) {
        convertView = LayoutInflater.from(getContext()).inflate(R.layout.item, parent, false);
    }

    // 直接复用布局内的VideoView，无需重新创建
    VideoView videoView = convertView.findViewById(R.id.videoView);

    Person person = getItem(position);
    if (person != null) {
        String videoUrl = person.getVideoLink();
        if (videoUrl != null) {
            Uri uri = Uri.parse(videoUrl);
            videoView.setVideoURI(uri);

            TextView nameTextView = convertView.findViewById(R.id.textViewName);
            TextView addressTextView = convertView.findViewById(R.id.textViewAddress);
            TextView payingTextView = convertView.findViewById(R.id.textViewPaying);

            nameTextView.setText(person.getName());
            addressTextView.setText(person.getPlace());
            payingTextView.setText(person.getPayment());

            final MediaController mediaController = new MediaController(getContext());
            mediaController.setAnchorView(videoView);
            videoView.setMediaController(mediaController);

            videoView.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {
                @Override
                public void onPrepared(MediaPlayer mediaPlayer) {
                    if (position == currentPosition) {
                        videoView.start();
                    }
                }
            });

            videoView.requestFocus();
        }
    }

    return convertView;
}

3. 修正Person对象创建的语法错误

你代码中创建第二、三个Person时多了一层括号，修正为：

persons.add(new Person("https://xxxxxxxxx.mp4", "KingFisher Restaurant", "James", "Together", "45"));
persons.add(new Person("https://xxxxxxxxx.mp4", "The Place Restaurant", "Angel", "Separately", "33"));

原理说明 #

• LinearLayout垂直排列能保证TextView按顺序向下布局，不受旋转操作影响；
• 复用原有VideoView避免了频繁的视图增删，减少布局波动；
• 不透明背景防止下层卡片的TextView透显到上层，消除视觉上的重叠假象。

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