Android实战（橘子娱乐）-首页（第四篇 MainRecyclerViewAdapter数据与布局的绑定）

前言：

前面几篇文章对MVP的基本搭建、首页的xml布局、MainActivity类的逻辑代码进行了简单的学习，在上一篇 Android实战（橘子娱乐）-首页（第三篇 IRecyclerView自定义刷新头ClassicRefreshHeaderView和SharedPreferencesUtils）中提到我们这一篇文章会讲解一下如何将数据和布局绑定在一起。数据我们先不讲从哪儿获取因为那是MVP中Model的工作，我们只要知道数据由Presenter为我们提供就好，布局是什么呢，就是就是我们的多布局RecyclerView，我们需要通过不同的布局类型加载不同的布局显示不同的数据，如果对我说的不是很理解，可以去=网上看看RecyclerView的基本使用，这里就不讲解了。

首页截图：

截图上有三类布局，当然底部还有一种布局

所以，算起来一共是四类布局，每一类布局显示不同的数据和布局，不多少上代码：

    
    
     
     package com.andy.orange.adapter;
     
     
     
     import android.content.Context;
     
     import android.support.v7.widget.RecyclerView;
     
     import android.view.LayoutInflater;
     
     import android.view.View;
     
     import android.view.ViewGroup;
     
     import android.widget.ImageView;
     
     import android.widget.RelativeLayout;
     
     import android.widget.TextView;
     
     import android.widget.Toast;
     
     
     
     import com.andy.orange.R;
     
     import com.andy.orange.bean.Film;
     
     import com.andy.orange.utils.GlideLoader;
     
     import com.andy.orange.utils.ImageLoaderUtils;
     
     import com.youth.banner.Banner;
     
     import com.youth.banner.BannerConfig;
     
     import com.youth.banner.Transformer;
     
     import com.youth.banner.listener.OnBannerListener;
     
     
     
     import java.util.ArrayList;
     
     import java.util.List;
     
     
     
     /**
     
      * Created by Andy Lau on 2017/8/9.
     
      */
     
     
     
     public class MainRecyclerViewAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
     
     
     
         private onItemClickListener mOnItemClickListener;
     
         private final Context context;
     
         private final LayoutInflater inflater;
     
         private List<Film.SubjectsBean> list;
     
         private static final int TYPE_BANNER = 0;
     
         private static final int TYPE_MOVIE_DES = 1;
     
         private static final int TYPE_MOVIE_DETAIL = 2;
     
         private static final int TYPE_FOOT =3;
     
         private List<String> mImages = new ArrayList<>();
     
     
     
         public MainRecyclerViewAdapter(Context context, List<Film.SubjectsBean> list) {
     
             this.context = context;
     
             this.inflater = LayoutInflater.from(context);
     
             this.list = list;
     
         }
     
     
     
         @Override
     
         public int getItemViewType(int position) {
     
             if (position == 0) {
     
                 return TYPE_BANNER;
     
             } else if (position == 1) {
     
                 return TYPE_MOVIE_DES;
     
             } else if(position== list.size()+2){
     
                 return TYPE_FOOT;
     
             }else {
     
                 return TYPE_MOVIE_DETAIL;
     
             }
     
         }
     
     
     
         @Override
     
         public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
     
             switch (viewType) {
     
                 case TYPE_BANNER:
     
                     return new BannerViewHolder(inflater.inflate(R.layout.item_home_banner, parent, false));
     
                 case TYPE_MOVIE_DES:
     
                     return new MovieDesViewHolder(inflater.inflate(R.layout.item_home_movie_title, parent, false));
     
                 case TYPE_MOVIE_DETAIL:
     
                     return new MovieDetailViewHolder(inflater.inflate(R.layout.item_movie, parent, false));
     
                 case TYPE_FOOT:
     
                     return new BottomViewHolder(inflater.inflate(R.layout.item_home_bottom, parent, false));
     
             }
     
             return null;
     
         }
     
     
     
         @Override
     
         public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
     
             if (holder instanceof BannerViewHolder) {
     
                 setBannerItemValues((BannerViewHolder) holder, position);
     
             } else if (holder instanceof MovieDetailViewHolder) {
     
                 setMovieDetailItemValues((MovieDetailViewHolder) holder, position);
     
             }
     
         }
     
     
     
     
     
         private void setMovieDetailItemValues(final MovieDetailViewHolder holder, final int position) {
     
     
     
             Film.SubjectsBean filmItem=list.get(position-2);
     
     
     
             //获取评分
     
             Double score=filmItem.getRating().getAverage();
     
             //获取标题
     
             String title=filmItem.getTitle();
     
     
     
             //获取海报图片路径
     
             String  poster=filmItem.getImages().getLarge();
     
     
     
     
     
             holder.mTvRating.setText(score+"");
     
             holder.mTvMovieName.setText(title);
     
     
     
             //glide显示poster
     
             ImageLoaderUtils.display(context, holder.mIvPhoto, poster);
     
     
     
             holder.mRlRoot.setOnClickListener(new View.OnClickListener() {
     
                 @Override
     
                 public void onClick(View v) {
     
                     mOnItemClickListener.onItemClick(position-2,holder.mIvPhoto);
     
                 }
     
             });
     
         }
     
     
     
         /*
     
         * 设置顶部banner的数据
     
         * */
     
         private void setBannerItemValues(final BannerViewHolder holder, int position) {
     
     
     
             //将前4个的海报设置到banner里面
     
             if (mImages.size() == 0 && list.size() >= 4) {
     
                 for (int i = 0; i < 4; i++) {
     
                     Film.SubjectsBean info = list.get(i);
     
                     mImages.add(info.getImages().getLarge());
     
                 }
     
             }
     
             holder.mBanner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR);
     
             holder.mBanner.setImageLoader(new GlideLoader());
     
             holder.mBanner.setImages(mImages);
     
             holder.mBanner.setBannerAnimation(Transformer.DepthPage);
     
             holder.mBanner.isAutoPlay(true);
     
             holder.mBanner.setDelayTime(3000);
     
             holder.mBanner.setIndicatorGravity(BannerConfig.CENTER);
     
             holder.mBanner.start();
     
             holder.mBanner.setOnBannerListener(new OnBannerListener() {
     
                 @Override
     
                 public void OnBannerClick(int position) {
     
                     Toast.makeText(context,"movie——>"+list.get(position).getTitle(),Toast.LENGTH_SHORT).show();
     
                 }
     
             });
     
         }
     
     
     
         @Override
     
         public int getItemCount() {
     
             return list.size() + 3;
     
         }
     
     
     
         /**
     
          * banner视图映射
     
          * */
     
         public class BannerViewHolder extends RecyclerView.ViewHolder {
     
             private Banner mBanner;
     
     
     
             public BannerViewHolder(View itemView) {
     
                 super(itemView);
     
                 mBanner = (Banner) itemView.findViewById(R.id.banner_home);
     
             }
     
         }
     
     
     
         /**
     
          * 热门电影标题和跟多的视图映射
     
          * */
     
         public class MovieDesViewHolder extends RecyclerView.ViewHolder {
     
             private TextView mTvMore;
     
             public MovieDesViewHolder(View itemView) {
     
                 super(itemView);
     
                 mTvMore = (TextView) itemView.findViewById(R.id.tv_more);
     
                 mTvMore.setOnClickListener(new View.OnClickListener() {
     
                     @Override
     
                     public void onClick(View v) {
     
     
     
                         Toast.makeText(context,"movie more!",Toast.LENGTH_SHORT).show();
     
                     }
     
                 });
     
             }
     
     
     
         }
     
     
     
         /**
     
          * 单个电影海报的视图映射
     
          * */
     
         public class MovieDetailViewHolder extends RecyclerView.ViewHolder {
     
             private ImageView mIvPhoto;
     
             private RelativeLayout mRlRoot;
     
             private TextView mTvRating;
     
             private TextView mTvMovieName;
     
     
     
             public MovieDetailViewHolder(View itemView) {
     
                 super(itemView);
     
                 mIvPhoto = (ImageView) itemView.findViewById(R.id.iv_photo);
     
                 mTvRating = (TextView) itemView.findViewById(R.id.tv_rating);
     
                 mTvMovieName = (TextView) itemView.findViewById(R.id.tv_name);
     
                 mRlRoot = (RelativeLayout) itemView.findViewById(R.id.rl_root);
     
             }
     
         }
     
     
     
         public class BottomViewHolder extends RecyclerView.ViewHolder {
     
     
     
             public BottomViewHolder(View itemView) {
     
                 super(itemView);
     
             }
     
         }
     
     
     
         public interface onItemClickListener{
     
             void onItemClick(int position,ImageView imageView);
     
         }
     
     
     
         public void setOnItemClickListener(onItemClickListener onItemClickListener){
     
             this.mOnItemClickListener = onItemClickListener;
     
         }
     
     
     
     }

ViewHolder对效率的优化我们就不讲了，RecyclerView Adapter的主要方法： getViewItemType() 、 getItemCount()、 onCreateViewHolder ( ViewGroup parent , int viewType )、 onBindViewHolder ( RecyclerView . ViewHolder holder , int position ) 。

getViewItemType() 的作用是根据位置设置返回显示view的类型，我们上面主要有4种ViewType: TYPE_BANNER 、 TYPE_MOVIE_DES 、 TYPE_FOOT 、 TYPE_MOVIE_DETAIL 。 getItemCount() 中返回总的item个数，至于为啥是 list . size () + 3 自己想想就能明白的，然后是 onCreateViewHolder ( ViewGroup parent , int viewType ) ，在这个方法里面我们会根据不同的Type去加载不同的布局并返回不同的viewHolder ；最后在 onBindViewHolder ( RecyclerView . ViewHolder holder , int position ) 中我们根据不同的viewHolder将数据list绑定到布局中显示。

接下来贴出四种布局的xml布局，都是一些简单的布局:

(item_home_banner.xml)

     
     
      
      <?xml version="1.0" encoding="utf-8"?>
      
      <com.youth.banner.Banner xmlns:android="http://schemas.android.com/apk/res/android"
      
          android:id="@+id/banner_home"
      
          android:layout_width="match_parent"
      
          android:layout_height="180dp" />

(item_home_movie_title.xml)

     
     
      
      <?xml version="1.0" encoding="utf-8"?>
      
      <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
      
          android:layout_marginTop="5dp"
      
          android:paddingBottom="5dp"
      
          android:paddingTop="5dp"
      
          android:layout_width="match_parent"
      
          android:layout_height="wrap_content">
      
          <ImageView
      
              android:id="@+id/iv_hot_hint"
      
              android:layout_alignParentLeft="true"
      
              android:layout_alignParentTop="true"
      
              android:layout_width="wrap_content"
      
              android:layout_height="wrap_content"
      
              android:src="@drawable/hot"/>
      
          <TextView
      
              android:textSize="16sp"
      
              android:textColor="@color/black"
      
              android:layout_toRightOf="@+id/iv_hot_hint"
      
              android:layout_marginLeft="5dp"
      
              android:layout_alignParentTop="true"
      
              android:layout_marginTop="10dp"
      
              android:id="@+id/tv_name_rec"
      
              android:layout_width="wrap_content"
      
              android:layout_height="wrap_content"
      
              android:text="热门TOP  ·  电影"/>
      
          <TextView
      
              android:layout_marginRight="5dp"
      
              android:id="@+id/tv_more"
      
              android:layout_width="wrap_content"
      
              android:layout_height="wrap_content"
      
              android:text="更多"
      
              android:layout_marginTop="10dp"
      
              android:layout_alignParentRight="true"
      
              android:layout_alignParentTop="true"/>
      
      
      
      </RelativeLayout>

(item_movie.xml)

     
     
      
      <?xml version="1.0" encoding="utf-8"?>
      
      <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
      
          xmlns:app="http://schemas.android.com/apk/res-auto"
      
          android:id="@+id/rl_root"
      
          android:layout_marginBottom="5dp"
      
          android:layout_width="wrap_content"
      
          android:layout_height="wrap_content">
      
          <android.support.v7.widget.CardView
      
              android:id="@+id/movies_info"
      
              android:layout_width="match_parent"
      
              android:layout_height="240dp"
      
              android:layout_margin="4dp"
      
              android:clickable="false"
      
              app:cardCornerRadius="5dp"
      
              app:cardElevation="8dp">
      
              <FrameLayout
      
                  android:layout_width="match_parent"
      
                  android:layout_height="match_parent">
      
                  <ImageView
      
                      android:id="@+id/iv_photo"
      
                      android:layout_width="match_parent"
      
                      android:layout_height="match_parent"
      
                      android:adjustViewBounds="true"
      
                      android:scaleType="centerCrop"
      
                      android:transitionName="@string/transition_movie_photos"/>
      
                  <TextView
      
                      android:textSize="18sp"
      
                      android:padding="5dp"
      
                      android:textColor="@color/accent_material_light"
      
                      android:layout_gravity="left|bottom"
      
                      android:layout_width="wrap_content"
      
                      android:layout_height="wrap_content"
      
                      android:id="@+id/tv_rating"
      
                      android:text="5.6"/>
      
              </FrameLayout>
      
      
      
          </android.support.v7.widget.CardView>
      
      
      
          <TextView
      
              android:maxLines="1"
      
              android:ellipsize="end"
      
              android:id="@+id/tv_name"
      
              android:textSize="16sp"
      
              android:layout_marginTop="5dp"
      
              android:textColor="@color/accent_material_light"
      
              android:layout_marginLeft="10dp"
      
              android:layout_width="wrap_content"
      
              android:layout_height="wrap_content"
      
              android:layout_below="@+id/movies_info"
      
              android:layout_marginBottom="5dp"
      
              android:text="Forrest Gump"/>
      
      </RelativeLayout>

(item_home_bottom.xml)

     
     
      
      <?xml version="1.0" encoding="utf-8"?>
      
      <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
      
          android:layout_marginTop="10dp"
      
          android:layout_marginBottom="10dp"
      
          android:padding="5dp"
      
          android:layout_width="match_parent"
      
          android:layout_height="wrap_content">
      
          <ImageView
      
              android:background="@color/accent_material_light"
      
              android:layout_gravity="center"
      
              android:layout_width="match_parent"
      
              android:layout_height="1dp"/>
      
          <com.andy.orange.widget.SuperTextView
      
              android:layout_gravity="center"
      
              android:gravity="center"
      
              android:layout_width="wrap_content"
      
              android:layout_height="match_parent"
      
              android:textColor="@color/black"
      
              android:text="我是有底线的"/>
      
      
      
      </FrameLayout>

在上面的布局和代码中，我们主要说一下 com.youth.banner.Banner 这个开源轮播组件的使用， MainRecyclerViewAdapter 中的代码如下：

     
     
      
              //设置圆点指示器
      
              holder.mBanner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR);
      
              //设置图片加载框架
      
              holder.mBanner.setImageLoader(new GlideLoader());
      
              //设置图片路径List
      
              holder.mBanner.setImages(mImages);
      
              //设置banner动画
      
              holder.mBanner.setBannerAnimation(Transformer.DepthPage);
      
              //设置自动播放
      
              holder.mBanner.isAutoPlay(true);
      
              //设置延迟
      
              holder.mBanner.setDelayTime(3000);
      
              //设置指示器位置
      
              holder.mBanner.setIndicatorGravity(BannerConfig.CENTER);
      
              //启动
      
              holder.mBanner.start();
      
              //设置点击监听
      
              holder.mBanner.setOnBannerListener(new OnBannerListener() {
      
                  @Override
      
                  public void OnBannerClick(int position) {
      
                      Toast.makeText(context,"movie——>"+list.get(position).getTitle(),Toast.LENGTH_SHORT).show();
      
                  }
      
              });

注释写的很清楚，但是不细，推荐看看轮子系列：一款能用易用好用的Android图片轮播轮子；上面可以看出我们的数据是mImages这个list，我们先不管他那儿来的，我们学习presenter的时候就自然明白了，主要是 new GlideLoader()这里面是怎样的，我们来看看：

      
      
       
       package com.andy.orange.utils;
       
       
       
       import android.content.Context;
       
       import android.widget.ImageView;
       
       
       
       import com.youth.banner.loader.ImageLoader;
       
       
       
       /**
       
        * Created by Andy lau on 2017/8/14.
       
        */
       
       public class GlideLoader extends ImageLoader {
       
       
       
           @Override
       
           public void displayImage(Context context, Object path, ImageView imageView) {
       
               ImageLoaderUtils.display(context,imageView,(String)path);
       
           }
       
       }

惊恐脸~~~~，这么少。。。，他就是继承了ImageLoader然后实现了 displayImage()这个展示图片的方法，然后我们交给了 ImageLoaderUtils 去实现，不不仅这里用到了ImageLoaderUtils，MainRecyclerViewAdapter其他地方也用到了，他的作用就是通过获取数据获取到的图片链接string值转成实实在在的图片显示到布局中去，那么 ImageLoaderUtils 的实现具体实现是怎样的呢？？？由于篇幅太长我们还是留在下一篇中进行学习吧！恩，就这样！

Android实战（橘子娱乐）-首页（第四篇 MainRecyclerViewAdapter数据与布局的绑定）

猜你喜欢