自定义 CardView 以匹配模型

Question

我有一个 UI 模型需要实现，其中包含 cardViews。我设法用标题等创建了顶部，但我无法使 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 的 layout width 和 layout height 值更改为 match_parent 和 wrap_content 但这没有帮助。我也为 imageView 本身尝试过，但也没有运气。我也无法在布局预览中真正看到 CardView 本身，这使得它无法继续工作。

我应该如何设计它？

我当前的布局是什么样的：

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 以匹配模型

Customizing CardViews to match a mockup

android

android-cardview