RecyclerView實(shí)現(xiàn)仿支付寶應(yīng)用管理

2019-10-22 18:13:09

字體：大中小

供稿：網(wǎng)友

前言

由于公司項(xiàng)目有一個(gè)應(yīng)用管理的功能和支付寶的應(yīng)用管理功能非常像，所有的信息都是從服務(wù)端拉去的數(shù)據(jù)動(dòng)態(tài)生成，有不同的應(yīng)用分類，有標(biāo)題等等信息。對于實(shí)現(xiàn)這種效果可以用ListView 或者RecyclerView通過加載多種布局來實(shí)現(xiàn)。我們首先需要分析怎么把效果圖拆分成幾種布局

效果圖

RecyclerView,支付寶,應(yīng)用管理

從上面的圖片中我們可以把布局分為三種類型，其中第一種布局le是

RecyclerView,支付寶,應(yīng)用管理

第二種布局類型是：

RecyclerView,支付寶,應(yīng)用管理

第三種布局類型

RecyclerView,支付寶,應(yīng)用管理

使用RecyclerView加載多種布局，很多人都會(huì)，但是這里每排顯示的子應(yīng)用數(shù)量是不同的，而所有的數(shù)據(jù)都是來自同一個(gè)數(shù)據(jù)集合，而且所有的都是現(xiàn)實(shí)都是動(dòng)態(tài)生成，所以不可能寫死。這個(gè)時(shí)候是時(shí)候來了解GridLayoutManager的setSpanSizeLookup()方法了。具體使用方法我就不介紹啦，貼上官方文檔鏈接

核心代碼：

mLayoutManager = new GridLayoutManager(this, 4); mLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {  @Override  public int getSpanSize(int position) {  ApplicationBean applicationBean = mDataList.get(position);  if (applicationBean.getType() == ApplicationBean.Type.TypeOne) {   return 4;  } else if (applicationBean.getType() == ApplicationBean.Type.TypeTwo) {   return 2;  } else if (applicationBean.getType() == ApplicationBean.Type.TypeThree) {   return 1;  } else {   return 0;  }  } }); mRecyclerView.setLayoutManager(mLayoutManager); mAdapter = new ApplicationAdapter(mDataList, this); mRecyclerView.setAdapter(mAdapter);

adapter代碼

package com.huangjie.recyclerview;import android.content.Context;import android.support.v7.widget.RecyclerView;import android.util.Log;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.ImageView;import android.widget.TextView;import java.util.ArrayList;/** * Created by huangjie on 2017/11/12. */public class ApplicationAdapter extends RecyclerView.Adapter { //布局類型 private static final int VIEW_TYPE_ONE = 1; private static final int VIEW_TYPE_TWO = 2; private static final int VIEW_TYPE_THREE = 3; private LayoutInflater inflater; private Context mContext; private ArrayList<ApplicationBean> mDataList; public ApplicationAdapter(ArrayList<ApplicationBean> mDataList, Context context) { this.mDataList = mDataList; mContext = context; inflater = LayoutInflater.from(mContext); } @Override public int getItemViewType(int position) { if (mDataList.get(position).getType() == ApplicationBean.Type.TypeOne) {  return VIEW_TYPE_ONE; } else if (mDataList.get(position).getType() == ApplicationBean.Type.TypeTwo) {  return VIEW_TYPE_TWO; } else if (mDataList.get(position).getType() == ApplicationBean.Type.TypeThree) {  return VIEW_TYPE_THREE; } else {  return 0; } } @Override public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { RecyclerView.ViewHolder viewHolder = null; switch (viewType) {  case VIEW_TYPE_ONE:  viewHolder = new ViewHolderOne(inflater.inflate(R.layout.item_one, parent, false));  break;  case VIEW_TYPE_TWO:  viewHolder = new ViewHolderTwo(inflater.inflate(R.layout.item_two, parent, false));  break;  case VIEW_TYPE_THREE:  viewHolder = new ViewHolderThree(inflater.inflate(R.layout.item_three, parent, false));  break; } return viewHolder; } @Override public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) { switch (getItemViewType(position)) {  case VIEW_TYPE_ONE:  Log.e("huangjie", mDataList.get(position).getTitle());  ((ViewHolderOne) holder).title.setText(mDataList.get(position).getTitle());  break;  case VIEW_TYPE_TWO:  ((ViewHolderTwo) holder).title.setText(mDataList.get(position).getName());  ((ViewHolderTwo) holder).information.setText(mDataList.get(position).getInformation());  ((ViewHolderTwo) holder).icon.setImageDrawable(   mContext.getResources().getDrawable(mDataList.get(position).getIcon()));  break;  case VIEW_TYPE_THREE:  ((ViewHolderThree) holder).title.setText(mDataList.get(position).getName());  ((ViewHolderThree) holder).icon.setImageDrawable(   mContext.getResources().getDrawable(mDataList.get(position).getIcon()));  break; } } @Override public int getItemCount() { return mDataList.size(); } /** * 第一種布局類型ViewHolder */ public static class ViewHolderOne extends RecyclerView.ViewHolder { private TextView title; public ViewHolderOne(View itemView) {  super(itemView); } } /** * 第二種布局類型ViewHolder */ public static class ViewHolderTwo extends RecyclerView.ViewHolder { private ImageView icon; private TextView title; private TextView information; public ViewHolderTwo(View itemView) {  super(itemView);  icon = (ImageView) itemView.findViewById(R.id.image);  information = (TextView) itemView.findViewById(R.id.infor); } } /** * 第三種布局類型viewholder */ public static class ViewHolderThree extends RecyclerView.ViewHolder { private ImageView icon; private TextView title; public ViewHolderThree(View itemView) {  super(itemView);  icon = (ImageView) itemView.findViewById(R.id.image); } }}

RecyclerView,支付寶,應(yīng)用管理