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

来源：互联网发布：linux 中单引号的作用编辑：程序博客网时间：2024/06/06 02:36

一.项目简介和思路

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

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

阅读全文

0 0