Question

我需要实现一个包含cardViews的UI样机。我设法用标题等创建了顶部。但是我无法使cardViews工作。我从没有使用过这些工具，而是尝试做类似您在下面看到的事情，但是显然看起来没有什么事情。

我的尝试：

 <HorizontalScrollView
                android:layout_width="wrap_content"
                android:layout_height="match_parent">

                <androidx.cardview.widget.CardView
                    android:layout_width="200dp"
                    android:layout_height="150dp"
                    app:cardCornerRadius="4dp">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:orientation="vertical">

                        <ImageView
                            android:id="@+id/imageView2"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            app:srcCompat="@drawable/beach_bg_placeholder" />

                        <TextView
                            android:id="@+id/textView4"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="TextView" />
                    </LinearLayout>
                </androidx.cardview.widget.CardView>
            </HorizontalScrollView>

UI样机：

我似乎无法使ImageView的背景作为占位符填充cardView的顶部，同时在其下方显示TextView。我尝试将cardView的{{1}}和layout width的值都更改为layout height和match_parent，但这没有帮助。我也尝试过wrap_content本身，但也没有运气。我也无法在布局预览中真正看到imageView本身，因此无法进行工作。

我应该如何设计它？

我当前的布局如下：

Answer 1

我认为这种布局应该适合您。

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

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <androidx.cardview.widget.CardView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="12dp"
            app:cardCornerRadius="12dp">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="200dp"
                    android:layout_height="150dp"
                    android:scaleType="centerCrop"
                    android:src="@drawable/map_loot_tier" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="4dp"
                    android:text="Beach name"
                    android:textSize="17sp"
                    android:textStyle="bold" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center_vertical"
                    android:orientation="horizontal">

                    <ImageView
                        android:layout_width="24dp"
                        android:layout_height="24dp"
                        android:src="@android:drawable/ic_lock_lock" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_margin="4dp"
                        android:text="Location of the beach" />

                </LinearLayout>

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

        <androidx.cardview.widget.CardView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="12dp"
            app:cardCornerRadius="12dp">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="200dp"
                    android:layout_height="150dp"
                    android:scaleType="centerCrop"
                    android:src="@drawable/map_loot_tier" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="4dp"
                    android:text="Beach name"
                    android:textSize="17sp"
                    android:textStyle="bold" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center_vertical"
                    android:orientation="horizontal">

                    <ImageView
                        android:layout_width="24dp"
                        android:layout_height="24dp"
                        android:src="@android:drawable/ic_lock_lock" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_margin="4dp"
                        android:text="Location of the beach" />

                </LinearLayout>

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

创建后，不要忘记在真实设备上而不是Android Studio预览版上对其进行测试。

自定义CardView以匹配模型

1 个答案: