列表卡片效果

Posted 2022-11-06 mr-deng

1.加入依赖

implementation ‘com.google.android.material:material:1.0.0‘ 

 2.然后直接在.xml布局文件中使用，先贴上布局文件代码，结尾附上效果图

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:app="http://schemas.android.com/apk/res-auto"
 4     app:cardCornerRadius="5dp"
 5     android:padding="5dp"
 6     android:layout_margin="3dp"
 7     android:layout_width="match_parent"
 8     android:layout_height="wrap_content">
 9     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
10         android:orientation="vertical"
11         android:background="#F0F0F0"
12         android:layout_width="match_parent"
13         android:layout_height="wrap_content">
14         <ImageView
15             android:id="@+id/imageView"
16             android:layout_width="match_parent"
17             android:layout_height="200dp"
18             android:layout_margin="4dp"
19             android:scaleType="fitXY"/>
20         <TextView
21             android:id="@+id/text_menu"
22             android:text="商品"
23             android:layout_marginLeft="5dp"
24             android:layout_marginTop="2dp"
25             android:textSize="15sp"
26             android:layout_width="wrap_content"
27             android:layout_height="wrap_content" />
28         <LinearLayout
29             android:paddingLeft="5dp"
30             android:orientation="horizontal"
31             android:gravity="center_vertical"
32             android:layout_width="match_parent"
33             android:layout_height="25dp">
34             <TextView
35                 android:text="￥"
36                 android:layout_marginTop="1dp"
37                 android:textColor="#FF00"
38                 android:textSize="9sp"
39                 android:layout_width="wrap_content"
40                 android:layout_height="wrap_content" />
41             <TextView
42                 android:id="@+id/text_money"
43                 android:text="18"
44                 android:layout_margin="2dp"
45                 android:textColor="#FF00"
46                 android:textSize="15sp"
47                 android:layout_width="wrap_content"
48                 android:layout_height="wrap_content" />
49         </LinearLayout>
50     </LinearLayout>
51 </androidx.cardview.widget.CardView>

3.以下是效果图（瀑布流效果），图片的圆角本博客中有教程