1.效果图:
2、思路与上文相同 此处略掉·····
3、布局层级:代码较长请耐心使用
// An highlighted block
<?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"
android:layout_width="160dp"
android:layout_height="155dp"
app:cardCornerRadius="20dp"
android:orientation="vertical"
android:layout_marginTop="5dp">
<androidx.cardview.widget.CardView
android:outlineSpotShadowColor="@color/black"
app:cardCornerRadius="20dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<com.makeramen.roundedimageview.RoundedImageView
android:layout_marginTop="5dp"
android:layout_marginStart="5dp"
android:layout_marginEnd="5dp"
android:scaleType="center"
app:riv_corner_radius="20dp"
android:layout_width="match_parent"
android:layout_height="90dp"
android:src="@drawable/header_img"/>
</LinearLayout>
<LinearLayout
android:layout_marginTop="5dp"
android:layout_marginStart="5dp"
android:layout_marginEnd="5dp"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:textSize="12dp"
android:text="冬游川西 | 这些地方的雪季值得你说走就走!"
android:textColor="@color/black"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content">
</TextView>
<ImageView
android:src="@drawable/header_item_right"
android:layout_width="20dp"
android:layout_height="20dp"/>
</LinearLayout>
<LinearLayout
android:layout_marginStart="5dp"
android:layout_marginTop="3dp"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="2"
android:layout_height="wrap_content">
<com.makeramen.roundedimageview.RoundedImageView
android:layout_marginTop="2dp"
android:layout_width="10dp"
android:layout_height="10dp"
android:src="@drawable/headimg"
app:riv_corner_radius="100dp"/>
<TextView
android:id="@+id/header_item_num"
android:layout_marginStart="3dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="易小烊"
android:textColor="@color/index_welcome_color"
android:textSize="10sp"
/>
</LinearLayout>
<LinearLayout
android:layout_marginEnd="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.makeramen.roundedimageview.RoundedImageView
android:layout_marginTop="0.5dp"
android:layout_gravity="center"
android:layout_width="10dp"
android:layout_height="10dp"
android:src="@drawable/like"
app:riv_corner_radius="100dp"/>
<TextView
android:layout_gravity="center"
android:layout_marginEnd="5dp"
android:layout_marginStart="1dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="80"
android:textColor="@color/index_welcome_color"
android:textSize="10sp"
/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
4 备注:
1.复制粘贴代码爆红原因
a、图片素材缺失,自己将自己喜欢的图片放入@drawable文件夹里重新引用即可
b、缺少依赖 本篇文章中使用了第三方库需要在你自己的项目中的build.gradle (Modle: xxx.app)添加以下依赖
implementation 'com.makeramen:roundedimageview:2.3.0'
c、作者联系方式QQ:2293667568
d、项目工程下载 :整体项目框架
链接:上传太慢 需要的直接加我QQ