1.效果图:
2 思路:
a、拿到这个原型图先从上往下拆分为3个部分(图片,介绍,发布作者,定位),再在图片上分为两个部分(上下两层,上层为今日最佳文字,下层为图片层)
b、分层后对每个部分继续拆分(比如我们拿从上往下第二部分进行举例我们可以这样看 图 1-2)
将这一个小部分看成一个盒子,在盒子内部分为左右两个部分
c、这个item整体布局为
3 布局层级 :代码较长请耐心食用
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_marginTop="5dp"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="190dp"
app:cardCornerRadius="20dp"
android:orientation="vertical">
<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_width="match_parent"
android:layout_height="130dp"
android:layout_marginStart="5dp"
android:layout_marginTop="5dp"
android:layout_marginEnd="5dp"
android:scaleType="center"
android:src="@drawable/header_img1"
app:riv_corner_radius="20dp" />
</LinearLayout>
<LinearLayout
android:layout_marginTop="10dp"
android:layout_marginStart="5dp"
android:layout_marginEnd="5dp"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:text="2020年第比利斯跨年狂欢+古里多畅滑粉学"
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">
<com.makeramen.roundedimageview.RoundedImageView
android:layout_width="15dp"
android:layout_height="15dp"
android:src="@drawable/headimg"
app:riv_corner_radius="100dp"/>
<TextView
android:layout_marginStart="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="易小烊"
android:textColor="@color/black"
android:textSize="10sp"
/>
<com.makeramen.roundedimageview.RoundedImageView
android:layout_marginStart="10dp"
android:layout_width="15dp"
android:layout_height="15dp"
android:src="@drawable/gps"
app:riv_corner_radius="100dp"/>
<TextView
android:layout_marginStart="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="北京"
android:textColor="@color/black"
android:textSize="10sp"
/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_marginTop="5dp"
android:layout_marginStart="20dp"
android:layout_marginEnd="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/header_item_num"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/white"
android:textSize="14dp"
android:text="28"/>
<TextView
android:layout_marginStart="2dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/tabItem_color"
android:textSize="18dp"
android:text="|"/>
<LinearLayout
android:layout_marginTop="2dp"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<TextView
android:layout_marginStart="2dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/white"
android:textSize="7dp"
android:text="August"/>
<TextView
android:layout_marginStart="2dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/white"
android:textSize="7dp"
android:text="August"/>
</LinearLayout>
<TextView
android:layout_marginStart="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/white"
android:textSize="18dp"
android:text="今日最佳"/>
</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