商品列表布局切换效果很常见,因为淘宝京东有的界面下面很多公司都会给风模仿
当然,我们公司也不例外,最近版本更新添加了这个功能;
在项目中直接使用RecyclerView实现切换功能;
如果不了解RecyclerView的可以先看下: RecyclerView使用详解
使用RecyclerView可以非常简单的实现功能;
第一步:在adapter中重写getItemViewType()方法;添加setType(int type)方法
//点击切换布局的时候通过这个方法设置type
public void setType(int type) {
this.type = type;
}
@Override
//用来获取当前项Item是哪种类型的布局
public int getItemViewType(int position) {
return type;
}
第二步:在点击布局切换图片时三步走
if (goodsType==0){
ivGoodsType.setImageResource(R.mipmap.good_type_grid);
//1:设置布局类型
adapter.setType(1);
//2:设置对应的布局管理器
recyclerView.setLayoutManager(new GridLayoutManager(context,2));
//3:刷新adapter
adapter.notifyDataSetChanged();
goodsType=1;
}else {
ivGoodsType.setImageResource(R.mipmap.good_type_linear);
adapter.setType(0);
recyclerView.setLayoutManager(new LinearLayoutManager(context));
adapter.notifyDataSetChanged();
goodsType=0;
}
第三步:在adapter的onCreateViewHolder()方法中根据自己设置的布局类型切换item布局
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View baseView;
if (viewType == 0) {
baseView = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_listview_goods_list, parent, false);
LinearViewHolder linearViewHolder = new LinearViewHolder(baseView);
return linearViewHolder;
} else {
baseView = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_gridview_goods_list, parent, false);
GridViewHolder gridViewHolder = new GridViewHolder(baseView);
return gridViewHolder;
}
}
简单的切换功能基本实现;接下来了解下滑动置顶位置出现置顶图片,点击图片实现RecyclerView置顶的功能;
置顶图片并非一直显示在屏幕上,而是通过监听滑动到一定距离才会显示;我们需要重写RecyclerView的滑动监听;
//设置滑动监听
recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
RecyclerView.LayoutManager layoutManager = recyclerView.getLayoutManager();
if (layoutManager instanceof LinearLayoutManager) {
LinearLayoutManager linearManager = (LinearLayoutManager) layoutManager;
//获取第一个可见位置
int firstVisibleItemPosition = linearManager.findFirstVisibleItemPosition();
//当滑动到第十个以上时显示置顶图标
if (firstVisibleItemPosition>10) {
ivStick.setVisibility(View.VISIBLE);
}else {
ivStick.setVisibility(View.GONE);
}
}
}
});
点击置顶图片是执行 RecyclerView.scrollToPosition(0); 即可