主要為大家介紹如何用RecycleView來實現(xiàn)淘寶首頁復雜的布局，做電商類app的小伙伴們可以略作參考。

首先上效果圖：

下面說一下實現(xiàn)方式，主要思路就是根據(jù)不同的數(shù)據(jù)類型去制定不同的item類型，然后動態(tài)地去設置這些item的寬高，設置item的類型相信大家都會，我這里就不做闡述了，主要是說一下給不同類型的item設置不同的寬度。

首先，我們給RecyclerView設置一個列數(shù)為x的GridLayoutManager，然后再動態(tài)地為不同類型的item分別設置SpanSize。比如GridLayoutManager列數(shù)為4，item的SpanSize也為4，那么這個item的寬度就是RecyclerView寬度的100%，最終的效果就跟列表一樣。同理，item的SpanSize如果是2，那么就占一行的一半寬度，item的SpanSize是1，占1/4寬度…

比如我在demo里面是把列數(shù)設為12：

HomeAdapter adapter = new HomeAdapter(this); GridLayoutManager layoutManger = new GridLayoutManager(this, 12); rcHome.setLayoutManager(layoutManger); rcHome.setAdapter(adapter);

然后在adapter里面重寫onAttachedToRecyclerView方法，為不同的ItemViewType設置不同的SpanSize：

@Overridepublic void onAttachedToRecyclerView(RecyclerView recyclerView) {super.onAttachedToRecyclerView(recyclerView);RecyclerView.LayoutManager manager = recyclerView.getLayoutManager();if (manager instanceof GridLayoutManager) {final GridLayoutManager gridManager = ((GridLayoutManager) manager);gridManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {@Overridepublic int getSpanSize(int position) {int type = getItemViewType(position);switch (type) {case BANNER:return 12;case COLUMN:return 3;case MARQUEE:return 12;case NUM_TWO:return 6;case TITLE:return 12;case NUM_THREE:return 4;case NORMAL:return 6;default:return 12;}}});}}

12代表寬度占滿全屏，3代表占屏幕的1/4，6代表占屏幕的1/2等等，最終就可以實現(xiàn)上圖中的效果。

代碼不多，就直接貼在下面了：

MainActivity

public class MainActivity extends AppCompatActivity {private Unbinder mUnBinder;@BindView(R.id.rc_home)RecyclerView rcHome;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mUnBinder = ButterKnife.bind(this);initView();}private void initView() {HomeAdapter adapter = new HomeAdapter(this);GridLayoutManager layoutManger = new GridLayoutManager(this, 12);rcHome.setLayoutManager(layoutManger);rcHome.setAdapter(adapter);}@Overrideprotected void onDestroy() {super.onDestroy();mUnBinder.unbind();} }

HomeAdapter

public class HomeAdapter extends RecyclerView.Adapter {private LayoutInflater inflater;private List<Integer> imgList;private List<String> marqueeList;private static final int BANNER = 0;private static final int COLUMN = 1;private static final int MARQUEE = 2;private static final int NUM_TWO = 3;private static final int TITLE = 4;private static final int NUM_THREE = 5;private static final int NORMAL = 6;public HomeAdapter(Context mContext) {inflater = LayoutInflater.from(mContext);//添加輪播數(shù)據(jù)addBannerData();//添加跑馬燈數(shù)據(jù)addMarqueeData();}@Overridepublic int getItemCount() {return 25;}@Overridepublic int getItemViewType(int position) {if (position == 0) {return BANNER;} else if (position >= 1 && position <= 8) {return COLUMN;} else if (position == 9) {return MARQUEE;} else if (position >= 10 && position <= 13) {return NUM_TWO;} else if (position == 14 || position == 18) {return TITLE;} else if (position >= 15 && position <= 17) {return NUM_THREE;} else if (position >= 19 && position <= 24) {return NORMAL;}return super.getItemViewType(position);}@Overridepublic RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {switch (viewType) {case BANNER:View itemBanner = inflater.inflate(R.layout.item_banner, parent, false);return new BannerHolder(itemBanner);case COLUMN:View itemColumn = inflater.inflate(R.layout.item_column, parent, false);return new ColumnHolder(itemColumn);case MARQUEE:View itemMarquee = inflater.inflate(R.layout.item_marquee, parent, false);return new MarqueeHolder(itemMarquee);case NUM_TWO:View itemNumTwo = inflater.inflate(R.layout.item_num_two, parent, false);return new NumTwoHolder(itemNumTwo);case TITLE:View itemTitle = inflater.inflate(R.layout.item_title, parent, false);return new TitleHolder(itemTitle);case NUM_THREE:View itemNumThree = inflater.inflate(R.layout.item_num_three, parent, false);return new NumThreeHolder(itemNumThree);case NORMAL:View itemNormal = inflater.inflate(R.layout.item_normal, parent, false);return new NormalHolder(itemNormal);default:return null;}}@Overridepublic void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {if (holder instanceof BannerHolder) {setBanner((BannerHolder) holder);} else if (holder instanceof ColumnHolder) {} else if (holder instanceof MarqueeHolder && marqueeList != null) {setMarquee((MarqueeHolder) holder);} else if (holder instanceof NumTwoHolder) {} else if (holder instanceof TitleHolder) {setTitle((TitleHolder) holder, position);} else if (holder instanceof NumThreeHolder) {} else if (holder instanceof NormalHolder) {}}@Overridepublic void onAttachedToRecyclerView(RecyclerView recyclerView) {super.onAttachedToRecyclerView(recyclerView);RecyclerView.LayoutManager manager = recyclerView.getLayoutManager();if (manager instanceof GridLayoutManager) {final GridLayoutManager gridManager = ((GridLayoutManager) manager);gridManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {@Overridepublic int getSpanSize(int position) {int type = getItemViewType(position);switch (type) {case BANNER:return 12;case COLUMN:return 3;case MARQUEE:return 12;case NUM_TWO:return 6;case TITLE:return 12;case NUM_THREE:return 4;case NORMAL:return 6;default:return 12;}}});}}public class BannerHolder extends RecyclerView.ViewHolder {@BindView(R.id.banner)Banner banner;BannerHolder(View itemView) {super(itemView);ButterKnife.bind(this, itemView);}}public class ColumnHolder extends RecyclerView.ViewHolder {public ColumnHolder(View itemView) {super(itemView);}}public class MarqueeHolder extends RecyclerView.ViewHolder {@BindView(R.id.marquee)UPMarqueeView marquee;public MarqueeHolder(View itemView) {super(itemView);ButterKnife.bind(this, itemView);}}public class NumTwoHolder extends RecyclerView.ViewHolder {public NumTwoHolder(View itemView) {super(itemView);}}public class TitleHolder extends RecyclerView.ViewHolder {@BindView(R.id.tv_title)TextView tvTitle;public TitleHolder(View itemView) {super(itemView);ButterKnife.bind(this, itemView);}}public class NumThreeHolder extends RecyclerView.ViewHolder {public NumThreeHolder(View itemView) {super(itemView);}}public class NormalHolder extends RecyclerView.ViewHolder {public NormalHolder(View itemView) {super(itemView);}}/*** 輪播圖圖片列表*/private void addBannerData() {imgList = new ArrayList<>();imgList.add(R.drawable.home_pic);imgList.add(R.drawable.home_pic);imgList.add(R.drawable.home_pic);}/*** 添加跑馬燈數(shù)據(jù)*/private void addMarqueeData() {marqueeList = new ArrayList<>();marqueeList.add("太瘋狂！IPhone X首批1分鐘賣光。");marqueeList.add("家人給2歲孩子喝這個，孩子智力倒退10歲!");marqueeList.add("自助餐里面的潛規(guī)則，想要吃回本其實很簡單。");marqueeList.add("簡直是白菜價！日本玩家33萬甩賣15萬張游戲王卡。");}/*** 綁定輪播圖數(shù)據(jù)*/private void setBanner(BannerHolder holder) {holder.banner.setBannerStyle(BannerConfig.NUM_INDICATOR);holder.banner.setImageLoader(new GlideImageLoader());holder.banner.setImages(imgList);holder.banner.setBannerAnimation(Transformer.Default);holder.banner.isAutoPlay(true);holder.banner.setDelayTime(3000);holder.banner.setIndicatorGravity(BannerConfig.CENTER);holder.banner.start();}/*** 設置跑馬燈*/private void setMarquee(MarqueeHolder holder) {List<View> views = new ArrayList<>();for (int i = 0; i < marqueeList.size(); i = i + 2) {LinearLayout view = (LinearLayout) inflater.inflate(R.layout.marquee_text, null);TextView textTop = (TextView) view.findViewById(R.id.text_top);TextView textBottom = (TextView) view.findViewById(R.id.text_bottom);textTop.setText(marqueeList.get(i));if (marqueeList.size() > i + 1) {textBottom.setText(marqueeList.get(i + 1));}views.add(view);}holder.marquee.setViews(views);}/*** 模塊標題*/private void setTitle(TitleHolder holder, int position) {switch (position) {case 14:holder.tvTitle.setText("精品推薦");break;case 18:holder.tvTitle.setText("猜你喜歡");break;}} }

最后附上完整的Demo下載：
http://download.csdn.net/download/a466302603/10048064

總結(jié)

以上是生活随笔為你收集整理的RecyclerView加载多类型item 实现淘宝首页布局的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。