You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

Android开发:CardView内添加水平LinearLayout出现重叠问题求助

解决CardView内LinearLayout重叠问题

这个问题的核心原因是你的CardView内部没有一个垂直方向的根容器来管理多个水平LinearLayout——CardView继承自FrameLayout,默认会让子视图重叠在左上角,这就是松开鼠标后布局重叠的根本原因。

下面是修复后的完整布局代码,我做了这些关键调整:

  1. 在CardView内部添加一个垂直方向的LinearLayout作为根容器,让两个水平布局可以自动垂直排列
  2. 把第一个水平LinearLayout的android:layout_width从固定的374dp改成match_parent,避免在不同屏幕尺寸上出现布局溢出或错位
  3. 将CardView的固定高度200dp改为wrap_content,让它自适应内部内容高度
  4. 给原水平布局的子视图改用layout_weight平分空间,替代固定宽度,提升多屏幕适配性
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#E4E8F8"
    android:orientation="vertical"
    android:padding="10dp"
    android:visibility="visible"
    tools:context=".MainActivity"
    tools:visibility="visible">

    <androidx.cardview.widget.CardView
        android:id="@+id/current1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardBackgroundColor="#ffffe0">

        <!-- 新增垂直LinearLayout作为CardView的根容器 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="10dp">

            <!-- 原有的水平布局 -->
            <LinearLayout
                android:id="@+id/card_head2"
                android:layout_width="match_parent"
                android:layout_height="49dp"
                android:orientation="horizontal">

                <ImageView
                    android:id="@+id/imageView1"
                    android:layout_width="0dp"
                    android:layout_height="46dp"
                    android:layout_weight="1"
                    android:adjustViewBounds="true"
                    android:baselineAligned="false"
                    android:contentDescription="@string/todo"
                    app:srcCompat="@drawable/ic_map" />

                <TextView
                    android:id="@+id/textView1"
                    android:layout_width="0dp"
                    android:layout_height="46dp"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:text="@string/map"
                    android:textColor="#0F0F0F"
                    android:textSize="15sp"
                    android:textStyle="bold" />

                <ImageView
                    android:id="@+id/imageView2"
                    android:layout_width="0dp"
                    android:layout_height="46dp"
                    android:layout_weight="1"
                    android:adjustViewBounds="true"
                    android:baselineAligned="false"
                    android:contentDescription="@string/todo"
                    app:srcCompat="@drawable/ic_calendar" />

                <TextView
                    android:id="@+id/textView2"
                    android:layout_width="0dp"
                    android:layout_height="46dp"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:text="@string/date"
                    android:textColor="#0F0F0F"
                    android:textSize="15sp"
                    android:textStyle="bold" />

                <ImageView
                    android:id="@+id/imageView3"
                    android:layout_width="0dp"
                    android:layout_height="46dp"
                    android:layout_weight="1"
                    android:adjustViewBounds="true"
                    android:baselineAligned="false"
                    android:contentDescription="@string/todo"
                    app:srcCompat="@drawable/ic_watch" />

                <TextView
                    android:id="@+id/textView3"
                    android:layout_width="0dp"
                    android:layout_height="46dp"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:text="@string/time"
                    android:textColor="#0F0F0F"
                    android:textSize="15sp"
                    android:textStyle="bold" />
            </LinearLayout>

            <!-- 新增的第二个水平LinearLayout,自动排列在上方布局下方 -->
            <LinearLayout
                android:id="@+id/card_content"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:orientation="horizontal">

                <!-- 这里可以添加你需要的子视图,比如文本、按钮等 -->
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="新增的内容区域"
                    android:textSize="16sp" />
            </LinearLayout>

        </LinearLayout>
    </androidx.cardview.widget.CardView>
</LinearLayout>

额外优化提示:

  • 给新增的布局添加layout_marginTop可以提升视觉层次感,避免布局拥挤
  • layout_weight替代固定宽度,能让你的布局在手机、平板等不同尺寸设备上都保持良好的显示效果

内容的提问来源于stack exchange,提问作者Sachin Rathod

火山引擎 最新活动