安卓仿手机网易新闻app项目开发系列之（二）轮播图显示和RecyclerView适配器编写

最新推荐文章于 2023-06-29 09:31:56 发布

hongaer24

最新推荐文章于 2023-06-29 09:31:56 发布

阅读量1.3k

点赞数

分类专栏：安卓，app，网易新闻移动开发，安卓文章标签： app 新闻网易手机 android

本文链接：https://blog.csdn.net/hongaer24/article/details/73291832

版权

移动开发，安卓同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

安卓，app，网易新闻

6 篇文章 0 订阅

订阅专栏

一.项目简介和思路

接着上周项目继续，上周主要实现了tablayout的标题栏界面和屏幕切换效果。这次咱们来实现给屏幕页面填充些网页图片数据。看看大致效果图：

可以看出界面有两部分构成，上面是轮播图，下面是类似listview的列表控件，在这里分别采用的是banner和recycleview来实现效果，接下来是具体的流程

二.项目的流程

1.编写recycleview布局

新建一个fragment的xml文件，代码如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
   <android.support.v7.widget.RecyclerView
     android:id="@+id/recycle_view"
     android:layout_width="match_parent"
     android:layout_height="match_parent"/>
      </LinearLayout>

2.编写recycleview适配器

1）设置数据填充

public class FirstPageAdapter extends RecyclerView.Adapter{  
    private final int TYPE_HEAD=0; //表示首个位置，显示轮播视图  
    private final int TYPE_NORMAL=1; //表示下面的itemview  
    private final Context mcontext;  
    private List<String> banner_url; //轮播图片路径  
    //这个构造函数的用于把要展示的数据传进来  
    public FirstPageAdapter(Context context, List<String> banner_url){  
        this.mcontext=context;  
        this.banner_url=banner_url;  
    }  
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {  
        RecyclerView.ViewHolder holder=null; 
       if(viewType==TYPE_HEAD){  
          //此处创建顶部banner的viewholder  
    holder=new BannerViewHolder(LayoutInflater.from(mcontext).inflate(R.layout.itemheader_banner,parent,false));  
 //把最外层布局加载然后传到构造函数BannerViewHolder（）； 此句语句等同于：  
// View view=LayoutInflater.from(mcontext).inflate(R.layout.itemheader_banner,parent,false);  
// RecyclerView.ViewHolder holder=new BannerViewHolder(view) ;  
        }else (viewType==TYPE_NORMAL) {  
  holder=new ItemViewHolder(LayoutInflater.from(mcontext).inflate(R.layout.item_firstfragment,parent,false));  
        }  
          return holder;  
    }  
 public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {  
        //判断holder是不是BannerViewHolder  
        if (holder instanceof BannerViewHolder) {  
            BannerViewHolder bannerViewHolder = (BannerViewHolder) holder;  // 把指向子类对象的父类引用holder赋给子类的引用 bannerViewHolder，  
            //属于向下转换，需要强制转换类型  
  
            bannerViewHolder.banner.setImages(banner_url);  
//            bannerViewHolder.banner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR_TITLE);  
//            bannerViewHolder.banner.setBannerTitle(bean.getTitle());  
//            bannerViewHolder.banner.setImages( bean.getImg_url());  
            // Log.i("tag","--------------------------onbindview");  
        } else if (holder instanceof ItemViewHolder) {  
            ItemViewHolder itemViewHolder = (ItemViewHolder) holder;  
            itemViewHolder.textView.setText(banner_url.get(position - 1));  
            itemViewHolder.simpleView.setImageURI(banner_url.get(position - 1));  // 
        }  
    }  
  //返回数据源长度  
    public int getItemCount() {  
        return  banner_url.size()+1;}  
  //告诉创建什么类型viewholder  
    public int getItemViewType(int position) {  
        if(position==0){  
            return TYPE_HEAD;  
    }  
        else {  
            return  TYPE_NORMAL;  
        }  
    }

    //初始化UI
   class ItemViewHolder extends RecyclerView.ViewHolder{  
             SimpleDraweeView simpleView;  
             TextView textView;  
        public ItemViewHolder(View itemView) {  
            super(itemView);  
            simpleView= (SimpleDraweeView) itemView.findViewById(R.id.simpleView);  
            textView= (TextView) itemView.findViewById(R.id.news_text);  
        }  
    }  
         // 首位的banner  
    class BannerViewHolder extends  RecyclerView.ViewHolder{  
             Banner banner;  
        public BannerViewHolder(View itemView) {  
            super(itemView);  
            banner= (Banner) itemView.findViewById(R.id.banner);  
            //Log.i("tag","------------------66666");  
        }  
    }

此部分代码有点多，但是具体功能也不是很复杂。就是重写了几个适配器的方法和一个构造方法。首先调用getitemcount（）返回数据总长度；然后调用oncreatviewhodler()l来创建itemview视图，然后返回相应的viewhodler 。最后，调用onbindviewholder( )，把位置和相应的viewholder传入，adapter会根据对应的位置找到相应viewholder的视图（itemview），然后把数据与其绑定，即将数据填充到视图上。整个代码执行完后，recycleview上就可以在屏幕显示出itemview数据了。

到这里有人可能会问viewholder是什么呢？可以理解viewholer就是一个装着itemview的容器。具体的一些内容可以参考这篇文章，写的很详细，还详解了recycleview的基本结构。我也是参考了这篇文章RecyclerView详细解释

2）模拟数据源关联适配器

public class FirstpageFragment extends Fragment{
    private RecyclerView mRecyclerView;
    private FirstPageAdapter adapter;
    private List<String> banner_url;

public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
                    View v=getActivity().getLayoutInflater().inflate(R.layout.fragment_layout,
                                 (ViewGroup)getActivity().findViewById(R.id.view_pager),false);
        banner_url=new ArrayList<>();
        banner_url.add("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1495535521175&di=abf42742f3808e2c9f3ad7889b60c5d3&imgtype=0&src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20161108%2Fad0cb46844754d1b9844e5edd37e6990_th.jpeg");
        banner_url.add("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1495535647123&di=1bfb6b6e626ac5deb329fdeb0fc5abab&imgtype=0&src=http%3A%2F%2Folpic.tgbusdata.cn%2Fuploads%2Fallimg%2F141106%2F22-141106112011.jpg");
        banner_url.add("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1495535647123&di=1bfb6b6e626ac5deb329fdeb0fc5abab&imgtype=0&src=http%3A%2F%2Folpic.tgbusdata.cn%2Fuploads%2Fallimg%2F141106%2F22-141106112011.jpg");
        mRecyclerView= (RecyclerView) v.findViewById(R.id.recycle_view);
        adapter=new FirstPageAdapter(getActivity(),banner_url);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(getContext()));
        mRecyclerView.setAdapter(adapter);
        return v;
    }

这部分代码主要是模拟数据源，然后把数据和适配器绑定，最后通过适配器把数据在视图recycleview上显示出来。在这里需要注意的是关联适配器的时候多了一步，也比较关键，没设置的话可能会有问题，就是15//代码写的，这是recycview控件显示布局的设置，在这里我们设置的是一般的线性布局，默认是纵向布局。

3）轮播图和itemview的布局

轮播图banner

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <com.youth.banner.Banner
        android:id="@+id/banner"
        android:layout_width="match_parent"
        android:layout_height="200dp"/>
</LinearLayout>

普通itemview

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    android:orientation="horizontal"
    android:padding="5dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
   <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/simpleView"
        android:layout_width="160dp"
        android:layout_height="100dp"
        fresco:placeholderImage="@mipmap/timg"/>
    <TextView
        android:id="@+id/news_text"
        android:layout_marginLeft="5dp"
        android:textSize="20sp"
        android:text="我爱鸿哥"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
   </LinearLayout>

要引用这两种控件需要添加依赖，一个是banner的，另一个是fresco，banner就是轮播图的控件，具体的使用可以点击此处链接看看点击打开链接，在这里我用是compile 'com.youth.banner:banner:1.2.6' ； fresco是一个比较强大的图片加载的框架，可以支持各种格式的图片，它的包是'com.facebook.fresco:fresco:1.3.0'；

banner的布局文件比较简单，就简单给个id和宽高；而fresco布局是使用左边一张图片，右边对应文字。

4）添加网络访问

因为要上网访问图片，所以需要添加网络权限，在Androidmanifest.xml里添加：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.hongaer.molinews">

    <uses-permission android:name="android.permission.INTERNET" />

5）fresco初始化

在这里有个点大家得注意，可能会遇到item图片加载不出来的问题，就是在main.activity中需要fresco初始化，代码如下：

 protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Fresco.initialize(this);
        initData();
        initView();
    }

这样大体代码写完了，看看运行后的效果图（这里也是和之前原因一样，所以先借用磨砺新闻的视频图）：