锐客网

  1. 首页 > 生活百科 > it技术 > >

Android商城开发系列—— 使用RecyclerView展示首页数据

IT知识RecyclerView开发系列

一卷旌收千骑虏，万全身出百重围。这篇文章主要讲述Android商城开发系列—— 使用RecyclerView展示首页数据相关的知识，希望能为你提供帮助。
前面我们讲到了使用OkHttp请求网络和FastJson解析数据了，接下来我们就开始把获取到的数据通过数据适配器展示在页面上了。Adapter是用来帮助填充数据的中间桥梁，简单点说就是：将各种数据以合适的形式显示到view上,提供给用户看！
商城首页的数据是使用RecyclerView进行展示的，下面我们来讲讲如何将获取到的数据通过RecyclerView展示。
首先看一下HomeFragment的布局代码，代码如下：

1 < ?xml version="1.0" encoding="utf-8"?> 2 < RelativeLayout 3xmlns:android="http://schemas.android.com/apk/res/android" 4android:layout_width="match_parent" 5android:layout_height="match_parent"> 6 7< !--搜索框布局--> 8< include 9android:id="@+id/titlebar" 10layout="@layout/titlebar"/> 11 12< !--展示数据的RecyclerView--> 13< android.support.v7.widget.RecyclerView 14android:id="@+id/rv_home" 15android:layout_width="match_parent" 16android:layout_height="match_parent" 17android:layout_below="@id/titlebar" /> 18 19< !--回到顶部图片按钮--> 20< ImageButton 21android:id="@+id/ib_top" 22android:layout_width="40dp" 23android:layout_height="40dp" 24android:layout_alignParentBottom="true" 25android:layout_alignParentRight="true" 26android:layout_marginBottom="20dp" 27android:layout_marginRight="20dp" 28android:background="@mipmap/ic_launcher" 29android:visibility="gone" /> 30 31 32 < /RelativeLayout>

布局代码很简单，整体是一个RelativeLayout布局，里面有一个RecyclerView，用于展示数据，接下来我们看一下HomeFragment的代码：
1 package com.nyl.shoppingmall.home.fragment; 2 3 import android.support.v7.widget.GridLayoutManager; 4 import android.support.v7.widget.RecyclerView; 5 import android.util.Log; 6 import android.view.View; 7 import android.widget.ImageView; 8 import android.widget.TextView; 9 import android.widget.Toast; 10 11 import com.alibaba.fastjson.JSON; 12 import com.nyl.shoppingmall.R; 13 import com.nyl.shoppingmall.base.BaseFragment; 14 import com.nyl.shoppingmall.home.adapter.HomeFragmentAdapter; 15 import com.nyl.shoppingmall.home.bean.ResultBeanData; 16 import com.nyl.shoppingmall.utils.Constants; 17 import com.zhy.http.okhttp.OkHttpUtils; 18 import com.zhy.http.okhttp.callback.StringCallback; 19 20 import okhttp3.Call; 21 22 /** 23* 首页Fragment 24*/ 25 public class HomeFragment extends BaseFragment implements View.OnClickListener { 26 27private final static String TAG = HomeFragment.class.getSimpleName(); 28 29private TextView tv_search_home; 30private TextView tv_message_home; 31private RecyclerView rv_home; 32private ImageView ib_top; 33private HomeFragmentAdapter adapter; 34//返回的数据 35private ResultBeanData.ResultBean resultBean; 36 37@Override 38public View initView() { 39Log.e(TAG,"主页面的Fragment的UI被初始化了"); 40View view = View.inflate(mContext,R.layout.fragment_home,null); 41//初始化布局控件 42tv_search_home = (TextView) view.findViewById(R.id.tv_search_home); 43tv_message_home = (TextView) view.findViewById(R.id.tv_message_home); 44rv_home = (RecyclerView) view.findViewById(R.id.rv_home); 45ib_top = (ImageView) view.findViewById(R.id.ib_top); 46 47//设置点击事件 48ib_top.setOnClickListener(this); 49tv_search_home.setOnClickListener(this); 50tv_message_home.setOnClickListener(this); 51return view; 52} 53 54 55@Override 56public void initData() { 57super.initData(); 58Log.e(TAG,"主页面的Fragment的数据被初始化了"); 59 60//联网请求首页数据 61getDataFromNet(); 62} 63 64private void getDataFromNet() { 65// String url = Constants.HOME_URL; 66OkHttpUtils 67.get() 68.url(Constants.HOME_URL) 69.build() 70.execute(new StringCallback() 71{ 72 73/** 74* 请求失败的时候回调 75* @param call 76* @param e 77* @param id 78*/ 79@Override 80public void onError(Call call, Exception e, int id) { 81 82Log.e(TAG,"首页请求失败=="+e.getMessage()); 83} 84 85/** 86* 当联网成功的时候回调 87* @param response 请求成功数据 88* @param id 89*/ 90@Override 91public void onResponse(String response, int id) { 92 93Log.e(TAG,"首页请求成功=="+response); 94//解析数据 95processData(response); 96} 97}); 98} 99 100/** 101* 解析数据 102* @param json 103*/ 104private void processData(String json) { 105//使用FastJson去解析数据，将Json字符串转换成一个ResultBeanData对象 106ResultBeanData resultBeanData = https://www.songbingjia.com/android/JSON.parseObject(json,ResultBeanData.class); 107resultBean = resultBeanData.getResult(); 108 109if (resultBean != null){ 110//有数据就设置适配器 111adapter = new HomeFragmentAdapter(mContext,resultBean); 112rv_home.setAdapter(adapter); 113 114GridLayoutManager manager = new GridLayoutManager(mContext,1); 115//设置跨度大小监听 116manager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() { 117@Override 118public int getSpanSize(int position) { 119if (position < = 3){ 120//隐藏 121ib_top.setVisibility(View.GONE); 122}else { 123//显示 124ib_top.setVisibility(View.VISIBLE); 125} 126//只能返回1 127return 1; 128} 129}); 130//设置布局管理者 131rv_home.setLayoutManager(manager); 132}else { 133//没有数据 134 135} 136 137Log.e(TAG,"解析成功=="+resultBean.getHot_info().get(0).getName()); 138} 139 140@Override 141public void onClick(View view) { 142switch (view.getId()){ 143case R.id.ib_top: //置顶的监听 144rv_home.scrollToPosition(0); 145break; 146case R.id.tv_search_home://搜索的监听 147Toast.makeText(mContext,"搜索",Toast.LENGTH_SHORT).show(); 148break; 149case R.id.tv_message_home: //消息监听 150Toast.makeText(mContext,"进入消息中心",Toast.LENGTH_SHORT).show(); 151break; 152} 153} 154 }

HomeFragmet的代码也很简单，首先是初始化视图，然后联网调用接口获取数据，通过FastJson解析数据，然后将数据传入到HomeFragmentAdapter进行展示，接下来我们看一下HomeFragmentAdapter，这个适配器是展示数据的具体实现：
【Android商城开发系列—— 使用RecyclerView展示首页数据】HomeFragmentAdapter类代码如下所示：
1 package com.nyl.shoppingmall.home.adapter; 2 3 import android.content.Context; 4 import android.content.Intent; 5 import android.os.Handler; 6 import android.os.Message; 7 import android.support.v4.view.PagerAdapter; 8 import android.support.v4.view.ViewPager; 9 import android.support.v7.widget.LinearLayoutManager; 10 import android.support.v7.widget.RecyclerView; 11 import android.view.LayoutInflater; 12 import android.view.View; 13 import android.view.ViewGroup; 14 import android.widget.AdapterView; 15 import android.widget.GridView; 16 import android.widget.ImageView; 17 import android.widget.TextView; 18 import android.widget.Toast; 19 20 import com.bumptech.glide.Glide; 21 import com.nyl.shoppingmall.R; 22 import com.nyl.shoppingmall.app.activity.GoodsInfoActivity; 23 import com.nyl.shoppingmall.home.bean.ResultBeanData; 24 import com.nyl.shoppingmall.utils.Constants; 25 import com.youth.banner.Banner; 26 import com.youth.banner.BannerConfig; 27 import com.youth.banner.Transformer; 28 import com.youth.banner.listener.OnBannerClickListener; 29 import com.youth.banner.listener.OnLoadImageListener; 30 import com.zhy.magicviewpager.transformer.ScaleInTransformer; 31 32 import java.text.SimpleDateFormat; 33 import java.util.ArrayList; 34 import java.util.Date; 35 import java.util.List; 36 37 /** 38* 首页适配器 39*/ 40 41 public class HomeFragmentAdapter extends RecyclerView.Adapter{ 42 43/** 44* 广告幅类型 45*/ 46public static final int BANNER = 0; 47 48/** 49* 频道类型 50*/ 51public static final int CHANNEL = 1; 52 53/** 54* 活动类型 55*/ 56public static final int ACT = 2; 57 58/** 59* 秒杀类型 60*/ 61public static final int SECKILL = 3; 62 63/** 64* 推荐类型 65*/ 66public static final int RECOMMEND = 4; 67 68/** 69* 热卖类型 70*/ 71public static final int HOT = 5; 72 73/** 74* 初始化布局 75*/ 76private LayoutInflater mLayoutInflater; 77 78/** 79* 数据 80*/ 81private ResultBeanData.ResultBean resultBean; 82 83 84private Context mContext; 85 86/** 87* 当前类型 88*/ 89private int currenType = BANNER; 90 91public HomeFragmentAdapter(Context mContext, ResultBeanData.ResultBean resultBean) { 92this.mContext = mContext; 93this.resultBean = resultBean; 94mLayoutInflater = LayoutInflater.from(mContext); 95} 96 97/** 98* 根据视图类型创建ViewHolder 99* @param parent 100* @param viewType 当前的视图类型 101* @return RecyclerView.ViewHolder 102*/ 103@Override 104public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { 105//广告福 106if (viewType == BANNER){ 107//创建BannerViewHolder，Banner里面传布局文件 108return new BannerViewHolder(mContext,mLayoutInflater.inflate(R.layout.banner_viewpager,null)); 109//频道 110}else if (viewType == CHANNEL){ 111return new ChannelViewHolder(mContext,mLayoutInflater.inflate(R.layout.channel_item,null)); 112//活动 113}else if (viewType == ACT){ 114return new ActViewHolder(mContext,mLayoutInflater.inflate(R.layout.act_item,null)); 115//秒杀 116}else if (viewType == SECKILL){ 117return new SeckillViewHolder(mContext,mLayoutInflater.inflate(R.layout.seckkill_item,null)); 118//推荐 119}else if (viewType == RECOMMEND){ 120return new RecommendViewHolder(mContext,mLayoutInflater.inflate(R.layout.recommend_item,null)); 121//热卖 122}else if (viewType == HOT){ 123return new HotViewHolder(mContext,mLayoutInflater.inflate(R.layout.hot_item,null)); 124} 125return null; 126} 127 128/** 129* 绑定数据到ViewHolder 130* @param holder 131* @param position 132*/ 133@Override 134public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) { 135/** 136* 轮循广告 137*/ 138if (getItemViewType(position) == BANNER){ 139BannerViewHolder bannerViewHolder = (BannerViewHolder) holder; 140bannerViewHolder.setData(resultBean.getBanner_info()); 141 142} 143/** 144* 频道 145*/ 146else if (getItemViewType(position) == CHANNEL){ 147ChannelViewHolder channelViewHolder = (ChannelViewHolder) holder; 148channelViewHolder.setData(resultBean.getChannel_info()); 149 150} 151/** 152* 活动 153*/ 154else if (getItemViewType(position) == ACT){ 155ActViewHolder actViewHolder = (ActViewHolder) holder; 156actViewHolder.setData(resultBean.getAct_info()); 157 158} 159/** 160* 秒杀 161*/ 162else if (getItemViewType(position) == SECKILL){ 163SeckillViewHolder seckillViewHolder = (SeckillViewHolder) holder; 164seckillViewHolder.setData(resultBean.getSeckill_info()); 165 166} 167/** 168* 推荐 169*/ 170else if (getItemViewType(position) == RECOMMEND){ 171RecommendViewHolder recommendViewHolder = (RecommendViewHolder) holder; 172recommendViewHolder.setData(resultBean.getRecommend_info()); 173 174} 175/** 176* 热卖 177*/ 178else if (getItemViewType(position) == HOT){ 179HotViewHolder hotViewHolder = (HotViewHolder) holder; 180hotViewHolder.setData(resultBean.getHot_info()); 181} 182} 183 184/** 185* 广告幅 186*/ 187class BannerViewHolder extends RecyclerView.ViewHolder{ 188 189private Context mContext; 190private Banner banner; 191 192public BannerViewHolder(Context mContext, View itemView) { 193super(itemView); 194this.mContext = mContext; 195this.banner = (Banner) itemView.findViewById(R.id.banner); 196} 197 198public void setData(List< ResultBeanData.ResultBean.BannerInfoEntity> banner_info) { 199//得到图片集合地址 200List< String> imagesUrl = new ArrayList< > (); 201for (int i = 0; i< banner_info.size(); i++){ 202String imageUrl = banner_info.get(i).getImage(); 203imagesUrl.add(imageUrl); 204} 205//设置循环指示点 206banner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR); 207//设置手风琴效果 208banner.setBannerAnimation(Transformer.Accordion); 209//设置Banner图片数据 210banner.setImages(imagesUrl, new OnLoadImageListener() { 211@Override 212public void OnLoadImage(ImageView view, Object url) { 213//联网请求图片-Glide 214Glide.with(mContext).load(Constants.BASE_URL_IMAGE + url).into(view); 215} 216}); 217//设置点击事件 218banner.setOnBannerClickListener(new OnBannerClickListener() { 219@Override 220public void OnBannerClick(

    推荐阅读


    上一篇：安卓开发中Sqlte的学习心得

    下一篇：cmake编译android平台的libPoco