Android玩 --- Material Design（1） --- Recycleview基本使用（1）

一不小心就写了个很长的题目啊，估计大家也能猜到这样做的意图（intent！）是啥了，作为一个小白开发者，能做的就是不断整理笔记，既方便了自己，也为更多小白指引道路，何乐而不为呢。我的标题分了三级，Android玩，表示这是Android的文章（废话！），Material Design，代表这一系列是MD的专题，在后面我加了一个（1），说明还有（2，3，4……）咯，Recycleview基本使用（1），也说明后面还有（2），学习就是个不断探索积累的过程，所以从小开始，慢慢的成长。

废话不多说了，开始我们今天的工作。

一.开发工具

Android Studio，真机一部，一根数据线……

二.基本介绍

Material Design，中文名：材料设计语言，是由Google在Android5.0系统时推出的全新的设计语言，谷歌表示，这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。

在Material Design里包含了很多新奇的效果，控件，让你一眼看上去就能爱上的那种有木有！！！

那么今天要讨论的Recycleview是个什么东东，顾名思义，这是一个“回收”视图，那回收视图是啥，联想一下我们用的Listview，学习Android基础的时候，学到Listview发现，这玩意好简单啊，并没有想象中那么难，但是当你开始踩优化的坑的时候，你会发现，这什么玩意，还要有这么多讲究，所以今天我们的主角登场了。
下面是Google官方的介绍，这个话有点拗口，
大概就是“为有限数据集提供有限窗口的灵活视图”。

A flexible view for providing a limited window into a large data set.

Recycleview的核心优点已经提到了，那就是你不必再为回收item而犯愁了，系统自己帮你做好了，这也是他为什么不叫SuperListView……等等名字的原因。

另外Recycleview的灵活定制：LayoutManager，ItemDecoration，ItemAnimator等可以让开发者定义各种样式

好了，到此结束吧，下面进入正式敲代码阶段。

三.简易Demo

一.新建一个工程

我们在Android Studio里新建一个项目，这里我的包名命名为
com.surine.recycleviewdemo，系统为我们生成好代码，截图如下

这里的话，如果系统没有添加support库支持，可以先在Gradle里面添加好，添加好记得Sync now

compile 'com.android.support:recyclerview-v7:25.3.1'

二.创建一个item布局

创建item布局，这个地方和Listview一样，需要创建item布局，我就简单的加一个按钮，一个文字。

//文件名：item.xml


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

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="TextView"/>

    <Button
        android:id="@+id/button"
        style="@style/Widget.AppCompat.Button.Colored"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"/>
</LinearLayout>

很简单的布局，相信不会难倒你们

三.添加一个Recycleview

在我们的主界面添加一个Recycleview，

//文件名 ： activity_main

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

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rec_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true"/>
</RelativeLayout>

四.创建一个自定义适配器

在Listview的时候我们就知道，Adapter是data与view的交互桥梁，在Recycleview里面同样是这样。
其实适配器的代码虽然多，但是我们可以通过IAS的补全，纠错等功能快速建立Adapter，另外网络上有很多的万能适配器，有兴趣可以研究一下。

下面就按照我的方法来实现这个适配器。（放大招啦！！！）

A：新建一个MainAdapter.java的文件

B：填好继承类和内部类

这里我们需要继承自Recycleview.Adapter，并且添加内部类ViewHolder

C：这时候会出现报错

我们把光标指到ViewHolder上面按Alt+Enter键

选择创建ViewHolder，然后我们会发现viewholder已经出现了。

 public class ViewHolder {
    }

D：接着消除重写错误
在第一行比较长的报错上面按Alt+Enter

选择抽象方法一项，然后就多了好多方法（注意遇到选择方法的窗口时候，要选中全部方法）

@Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return null;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {

    }

    @Override
    public int getItemCount() {
        return 0;
    }

E：修改ViewHolder

选择第一项，我们的ViewHolder变成了这样

public class ViewHolder extends RecyclerView.ViewHolder {
    }

但是这个还是有错误，同样Alt+Enter，第一项，OK。
ViewHolder里多了这么一个构造方法。

public ViewHolder(View itemView) {
            super(itemView);
        }

F：添加构造方法
构造方法是adapter很重要的方法，我们的值也是通过构造方法传进去的
这里我们在类内添加两个属性

 private Context mContext;  //上下文
    private List<String> mStrings;   //数据集
    //这里我用string类型的，我们还可以实现自己的bean来填充

然后在类内（大括号之间）按Alt+Insert，出现下面的情况

我貌似看到了一些神奇的东西，Constructor，Getter，Setter，点击Constructor自动生成了构造方法，嗯就是这样，压根就不用写。
同样注意，属性全选。

 public MainAdapter(Context context, List<String> strings) {
        mContext = context;
        mStrings = strings;
    }

那么你会想到我以后写Bean类的时候怎么办了吧。

G：Find控件
我们修改ViewHolder代码如下
在ViewHolder中声明自己的控件

 public class ViewHolder extends RecyclerView.ViewHolder {
        //这里定义属性
        TextView mTextView;
        Button mButton;
        public ViewHolder(View itemView) {
            super(itemView);
            //这里找到控件
            mTextView = (TextView) itemView.findViewById(R.id.textView);
            mButton = (Button) itemView.findViewById(R.id.button);
        }
    }

H：反射布局
我们修改onCreateViewHolder方法，以找到我们的item布局

  @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    //创建一个view对象，利用LayoutInflater加载视图，inflate参数分别是，布局，viewgroup，attachToRoot（默认false就可以）
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item,parent,false);
        //创建viewholder对象，构造方法传入view
        ViewHolder holder = new ViewHolder(view);
        return holder;
    }

I：加载数据
我们修改onBindViewHolder方法，加载我们的数据
在这里绑定数据

 @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
    //position是item的位置
       holder.mTextView.setText(mStrings.get(position));
        holder.mButton.setText("按钮"+mStrings.get(position));
    }

J：还有很重要的一个东西
能不能显示出来就靠它了。

   @Override
    public int getItemCount() {
    //返回列表长度
        return mStrings.size();
    }

适配器到此结束，你会发现瞬间不想继续了，怎么这么多东西……这还多？基本上都是As给你生成的有木有！如果你还嫌多，那就用AS动态模板帮你实现吧。
更多的还在后头呢，继续探索吧！（完整的适配器可以参考我的项目地址，文后）

五.最后一步—–显示

激动人心的时候到了，马上就可以看到效果了。

代码贴一边：

private List<String> mStrings = new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_recycleview);
        //加载数据
        for(int i = 0;i<=20;i++){
            mStrings.add("我是"+i);
        }
        //激动人心的时候到了，马上就可以看到效果了。
        RecyclerView recyclerView = (RecyclerView) findViewById(R.id.rec_main);
        //这里必须设置LayoutManager，你可以根据你的需要选择不同的Manager，当然你也可以自定义。
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        //必须设置Adapter
        recyclerView.setAdapter(new MainAdapter(this,mStrings));

现在我想我们可以run一下试试了。

As跑的真慢，我要静静的喝杯Java去。
终于好了，因为我的马虎出现了一些小错误，已经纠正好，界面如下
额，就在这时，肚子超级疼…………As也瞬间黑屏，还是先跑去厕所，回来继续

回来了，看看我们的截图

不知道该怎么形容它，反正我们做成功了。

不满足与现在?
我们还有GridLayout，

//修改文件RecycleviewActivity里的recyclerView的setLayoutManager方法，一行代码实现网格布局！！！好神奇！ GirdLayoutManager构造方法接受的参数有上下文，和网格列数

recyclerView.setLayoutManager(new GridLayoutManager(this,2));

还不喜欢？我们还有瀑布流！！！
瀑布流不知道是啥？……自行百度吧

//参数的含义是：列数，瀑布方向
recyclerView.setLayoutManager(new StaggeredGridLayoutManager(3,StaggeredGridLayoutManager.VERTICAL));

由于我的数据不是长短不一的，所以我这里没有截图，如果设置了长短不一的文字也看不出效果，那就得检查一下item布局了

此外我们可以横向显示布局

LinearLayoutManager linearLayoutManager  = new LinearLayoutManager(this);
linearLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL)

更多方法，以后再探索。

六.真正的最后一步—–事件

话说我们才刚刚弄了个列表显示，点击按钮都没反应啊，你会说，这简单，设置个
setOnitemClickListener不就ok了……错！Google爸爸不屑于使用这种方法，所以Recycleview根本没有！！！
这就完蛋了，各种百度，找到了各种各样的方法，不过我还是更喜欢《第一行代码》的写法。

我们在适配器里完成各种点击事件
修改onCreateViewHolder方法，添加button点击事件，这个监听器都写烂了，相信你可以的，获取点击位置是由holder来完成的。

 @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item,parent,false);
        final ViewHolder holder = new ViewHolder(view);
        holder.mButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //获取点击位置
                int position = holder.getAdapterPosition();
                Toast.makeText(mContext,"点击了"+mStrings.get(position),Toast.LENGTH_SHORT).show();
            }
        });

        return holder;
    }

接下来你就可以测试一下点击事件了，以后所有的点击事件都可以写在这里面。

四.本篇总结

在本篇文章中，我们认识了Recycleview，了解了它的基本使用，还收获了Adapter的大招，作为本系列的第一篇文章，写了好多，按照最基本的方式，我想我这个小白都能看懂的，再没有小白看不懂了吧，好东西就要一起分享哦，你们有什么新的玩法都可以跟我说哦

五.相关及预告

Android玩 — Material Design（1） — Recycleview的装饰（2）
分割线，侧边栏，动画效果

Android玩 — Material Design（1） — Recycleview侧滑移位（3）
侧滑删除，移动换位。

Android玩 — Material Design（1） — Recycleview刷新（4）
下拉刷新，上拉刷新

六.纠错及更新日志

2017年6月4日12:48:17 更新了部分细节，语言描述

七.资源地址

https://github.com/Surine/RecycleviewDemo