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

一.项目简介和思路

接着上周项目继续，上周主要实现了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.RecyclerViewandroid: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;  }  }

    //初始化UIclass 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.Bannerandroid: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.SimpleDraweeViewandroid:id="@+id/simpleView"android:layout_width="160dp"android:layout_height="100dp"fresco:placeholderImage="@mipmap/timg"/><TextViewandroid: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();}

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

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

安卓仿手机网易新闻app项目开发系列之（一）项目简介和界面搭建
前言: 最近自己在业余时间在网上学习""磨砺新闻""项目,花了3周左右跟着把项目做完了,所以趁着热度赶紧先mark下项目的过程,与大家分享下. 顺便给磨砺营打个 ...
JQuery仿最新淘宝网首页带箭头幻灯片,JQuery轮播图
JQuery代码 <script type="text/javascript"> $(function() { var $banner = $('.banner'); ...
仿小米商城电脑官网-纯HTML+CSS（含轮播图）
来自作者的话这是我第一次写博客,也是为了激励自己学习,分享一些前端学习的知识,有写的不好的多多包涵.下面是参考的一些博客的链接 https://blog.csdn.net/weixin_439768 ...
《移动应用开发》实验报告——轮播图
代码仓库:https://gitee.com/shentuzhigang/demo-project/tree/master/vue-photos Blog:https://shentuzhigang. ...
使用开源项目【Banner】实现轮播图效果（带小圆点）
banner开源项目地址:GitHub - youth5201314/banner:
android开发banner框架,Android 轮播图最火的banner框架 (包含demo和代码解释)
在android里,轮播图的实现可以使用viewpage的控件实现,但由于实现有点繁琐,可以使用banner框架,方便快捷的实现轮播图的效果.这里首先贴上github的banner框架地址:https ...
vs2019中如何创建qt项目_在VS2015中创建Qt项目【VS+Qt项目开发系列】（二）
在VS2015中创建Qt项目[VS+Qt项目开发系列](二) 发布时间:2018-04-20 22:44, 浏览次数:1269 , 标签: VS Qt 在上一篇[VS+Qt项目开发](一)在VS201 ...
Swift项目，超美的动画和tableView,collectionView,轮播图的使用,网络请求的封装等
<一>项目介绍: 这是一个Swift语言的项目,但是其中也有使用一些OC的三方库,比SDWebImage.WebViewJavascriptBridge等,同时实现了基本App的框架功能, ...
微信小程序之网易云音乐（三）- 主页面底部导航、轮播图、歌单及歌曲模块开发
微信小程序之网易云音乐(三)- 主页面底部导航.轮播图.歌单及歌曲模块开发前言一. 主页面底部导航二. 轮播图区域三. 歌单区域四. 歌曲区域微信小程序之网易云音乐导航前言创建一个新模 ...

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

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

最新文章

热门文章