列表卡片效果

向右看齐 2023-08-17 17:09 49阅读 0赞

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.以下是效果图（瀑布流效果），图片的圆角本博客中有教程  
![1264306-20190917113400261-52750427.png][]

转载于:https://www.cnblogs.com/Mr-Deng/p/11532666.html

[1264306-20190917113400261-52750427.png]: /images/20230808/a1ce6c514eda4d0ab9b272687e8da231.png