Android高仿京東淘寶商品列表佈局切換效果
阿新 • • 發佈:2018-12-30
商品列表佈局切換效果很常見,因為淘寶京東有的介面下面很多公司都會給風模仿
當然,我們公司也不例外,最近版本更新添加了這個功能;
在專案中直接使用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; }
第三步:在adapter的onCreateViewHolder()方法中根據自己設定的佈局型別切換item佈局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; }
簡單的切換功能基本實現;接下來了解下滑動置頂位置出現置頂圖片,點選圖片實現RecyclerView置頂的功能;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.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); 即可
點選開啟連結免費下載原始碼