-
实现效果：
image.png -
布局效果：
image.png - 布局代码：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="@dimen/dp_3">
<androidx.cardview.widget.CardView
android:id="@+id/cvLay"
android:layout_width="@dimen/dp_167"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_margin="@dimen/dp_1"
app:cardCornerRadius="@dimen/dp_10"
app:cardElevation="@dimen/dp_0">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
android:orientation="vertical">
<ImageView
android:id="@+id/ivImg"
android:layout_width="match_parent"
android:layout_height="@dimen/dp_167"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="@mipmap/ic_image_6" />
<TextView
android:id="@+id/tvName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/dp_10"
android:layout_marginTop="@dimen/dp_5"
android:layout_marginRight="@dimen/dp_10"
android:layout_marginBottom="@dimen/dp_3"
android:maxLines="2"
android:ellipsize="end"
android:text="闪魔iphoneX钢化膜11pro 防偷窥膜苹果x防窥XR…"
android:textColor="@color/hui_ff6"
android:textSize="@dimen/sp_14" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/dp_10"
android:layout_marginTop="@dimen/dp_10"
android:orientation="horizontal">
<TextView
android:layout_width="@dimen/dp_15"
android:layout_height="@dimen/dp_15"
android:background="@drawable/orange_3_circle_shape"
android:gravity="center"
android:text="市"
android:textColor="@color/white"
android:textSize="@dimen/sp_10" />
<TextView
android:id="@+id/tvOldMoney"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/dp_4"
android:text="¥28"
android:textColor="@color/hui_ff9"
android:textSize="@dimen/sp_10" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/dp_4"
android:text="市场价"
android:textColor="@color/hui_ff9"
android:textSize="@dimen/sp_10" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/dp_10"
android:layout_marginRight="@dimen/dp_10"
android:layout_marginTop="@dimen/dp_5"
android:layout_marginBottom="@dimen/dp_10"
android:orientation="horizontal">
<TextView
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="@dimen/dp_15"
android:background="@drawable/red_3_circle_shape"
android:gravity="center"
android:text="活动"
android:paddingLeft="@dimen/dp_2"
android:paddingRight="@dimen/dp_2"
android:textColor="@color/white"
android:textSize="@dimen/sp_10" />
<TextView
android:id="@+id/tvJmoney"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/dp_4"
android:text="¥20.8"
android:textColor="@color/red_ffe"
android:textSize="@dimen/sp_12" />
<TextView
android:id="@+id/tvSaleCount"
android:gravity="right"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/dp_4"
android:text="已售：115"
android:textColor="@color/hui_ff6"
android:textSize="@dimen/sp_10" />
</LinearLayout>
</LinearLayout>
</androidx.cardview.widget.CardView>
</RelativeLayout>
- 实现adapter并设置给RecycleView
sglm = StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL)
goodsAdapter = SelfUneGoodsAdapter(this,skuList)
goodsAdapter?.setAdapterClickListener(this)
with(rvList){
addItemDecoration(GridSpaceItemDecoration(2,10,10))
adapter = goodsAdapter
layoutManager = sglm
}
- 间距
import android.graphics.Rect;
import android.util.Log;
import android.view.View;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
/**
* 描述 : RecyclerView GridLayoutManager 等间距。
* <p>
* 等间距需满足两个条件：
* 1.各个模块的大小相等，即 各列的left+right 值相等；
* 2.各列的间距相等，即 前列的right + 后列的left = 列间距；
* <p>
* 在{@link #getItemOffsets(Rect, View, RecyclerView, RecyclerView.State)} 中针对 outRect 的left 和right 满足这两个条件即可
* <p>
* 作者 : shiguotao
* 版本 : V1
* 创建时间 : 2020/3/19 4:54 PM
*/
public class GridSpaceItemDecoration extends RecyclerView.ItemDecoration {
private final String TAG = "GridSpaceItemDecoration";
private int mSpanCount;//横条目数量
private int mRowSpacing;//行间距
private int mColumnSpacing;// 列间距
/**
* @param spanCount 列数
* @param rowSpacing 行间距
* @param columnSpacing 列间距
*/
public GridSpaceItemDecoration(int spanCount, int rowSpacing, int columnSpacing) {
this.mSpanCount = spanCount;
this.mRowSpacing = rowSpacing;
this.mColumnSpacing = columnSpacing;
}
@Override
public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
int position = parent.getChildAdapterPosition(view); // 获取view 在adapter中的位置。
int column = position % mSpanCount; // view 所在的列
outRect.left = column * mColumnSpacing / mSpanCount; // column * (列间距 * (1f / 列数))
outRect.right = mColumnSpacing - (column + 1) * mColumnSpacing / mSpanCount; // 列间距 - (column + 1) * (列间距 * (1f /列数))
// 如果position > 行数，说明不是在第一行，则不指定行高，其他行的上间距为 top=mRowSpacing
if (position >= mSpanCount) {
outRect.top = mRowSpacing; // item top
}
}
}
- 解决滑动到顶部位置错乱：
可以在
如果导致不能显示在顶部，可以听添加一下设置：
//scroView是NestedScrollView的id，这种写法会有一种过渡的动画效果
scroView.fling(0)
scroView.smoothScrollTo(0,0)
以上解决方法，是项目中遇到的问题，如果有更好的方法，可以在下方进行评论，留下您的宝贵方法和思路，谢谢！！！
