自学Android第九天——RecyclerView

RecyclerView的基本用法

和百分比布局类似，RecyclerView也属于新增的控件，android团队也采取同样的方式，将RecyclerView定义在了support库当中。因此，想要用RecyclerView这个控件，首先需要在项目的build.gradle中添加相应的依赖库才行。打开app/build.gradle，在dependencies闭包中添加如下内容：

dependencies {

    compile fileTree(dir:'libs',include: ['*.jar'])

    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {

        excludegroup:'com.android.support',module:'support-annotations'

    })

    compile'com.android.support:appcompat-v7:24.2.1'

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

    testCompile'junit:junit:4.12'

}

添加完后记得点击一下Sync Now来进行同步。然后修改activity_main.xml中的代码，如下所示：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/activity_main"

    android:layout_width="match_parent"

    android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView

        android:id="@+id/recycler_view"

        android:layout_width="match_parent"

        android:layout_height="match_parent"/>

</RelativeLayout>

先为RecyclerView指定一个id，然后将宽度和高度都设置为match_parent,这样RecyclerView也就占满了整个布局的空间。需要注意的是由于RecyclerView并不是内置在系统SDK当中，所以需要把完整的包路径写出来。

把之前用到的图片，item_fruit.xml和Fruit类都复制过来。然后为RecyclerView准备一个适配器，新建FruitAdapter类，让这个适配器继承自RecyclerView.Adapter,并将泛型指定为FruitAdapter.viewHolder。其中，ViewHolder使我们在FruitAdapter中定义一个内部类，代码如下：

public class FruitAdapterextends RecyclerView.Adapter {

    private ListmFruitList;

    static class ViewHolderextends RecyclerView.ViewHolder{

        ImageViewfruitimage;

        TextViewfruitname;

        public ViewHolder(View view){

            super(view);

            fruitimage =(ImageView)view.findViewById(R.id.fruit_img);

            fruitname =(TextView)view.findViewById(R.id.fruit_name);

        }

}

public FruitAdapter(List fruitList){

    mFruitList=fruitList;

    }

@Override

    public ViewHolderonCreateViewHolder(ViewGroup parent, int viewType) {

        View view= LayoutInflater.from(parent.getContext()).inflate(R.layout.fruit_item,parent,false);

        ViewHolder viewHolder=new ViewHolder(view);

        return viewHolder;

    }

@Override

    public void onBindViewHolder(ViewHolder viewHolder,int position){

        Fruit fruit=mFruitList.get(position);

        viewHolder.fruitimage.setImageResource(fruit.getImageid());

        viewHolder.fruitname.setText(fruit.getName());

    }

@Override

    public int getItemCount(){

        return mFruitList.size();

    }

}

看着很长，但是比ListView的适配器更容易理解。我们先定义了一个内部类ViewHolder，ViewHolder要继承自RecyclerView.ViewHolder。然后ViewHolder的构造函数中要传入一个View参数，这个参数通常是RecyclerView子项的最外层布局，那么我们可以通过findViewById（）方法来获取到布局中的ImageView和TextView的实例了。

由于FruitAdapter是继承自RecyclerView.Adapter的，那么就必须重写onCreateViewHolder（）、onBindViewHolder（）和getItemCount（）这三个方法。onCreateViewHolder（）方法是用于创建ViewHolder实例的，我们在这个方法中将fruit_item布局加载进来，然后创建一个ViewHolder实例，并把加载出来的布局传入到构造函数当中，最后将ViewHolder的实例返回。onBindViewHolder（）方法是用于对RecyclerView子项的数据进行赋值的，会在每个子项被滚动到屏幕内的时候执行，这里我们通过position参数得到当前项的Fruit实例，然后再将数据设置到ViewHolder的ImageView和TextView当中即可。getItemCount（）方法就非常简单，它用于高速RecyclerView一共有多少子项，直接返回数据源的长度就可以了。

适配器准备好了，我们就可以开始RecyclerView，修改MainActivity中的代码，如下所示：

public class MainActivityextends AppCompatActivity {

    private ListfruitList=new ArrayList<>();

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        //初始化水果数据

        initFruits();

        RecyclerView recyclerview=(RecyclerView)findViewById(R.id.recycler_view);

        LinearLayoutManager lm=new LinearLayoutManager(this);

        recyclerview.setLayoutManager(lm);

        FruitAdapter adapter=new FruitAdapter(fruitList);

        recyclerview.setAdapter(adapter);

    }

private void initFruits() {

        for(int i=0;i<2;i++){

            Fruit apple =new Fruit("Apple",R.drawable.apple);

            fruitList.add(apple);

            Fruit banana=new Fruit("banana",R.drawable.banana);

            fruitList.add(banana);

            Fruit orange=new Fruit("orange",R.drawable.orange);

            fruitList.add(orange);

            Fruit water=new Fruit("watermelon",R.drawable.water);

            fruitList.add(water);

            Fruit pear=new Fruit("pear",R.drawable.pear);

            fruitList.add(pear);

            Fruit Str=new Fruit("Strawberry",R.drawable.stra);

            fruitList.add(Str);

            Fruit Cherry=new Fruit("Cherry",R.drawable.cherry);

            fruitList.add(Cherry);

            Fruit Mango=new Fruit("Mango",R.drawable.mango);

            fruitList.add(Mango);

            Fruit Grape=new Fruit("Grape",R.drawable.grape);

            fruitList.add(Grape);

        }

}

}

这里使用了一个同样的initFruits（）方法，用于初始化所以得水果数据。接着在onCreate（）方法中我们先获取到RecyclerView的实例，然后创建了一个LinearLayoutManager对象，并将它设置到RecyclerView当中。LayoutManager用于指定RecyclerView的布局方式，这里使用的LinearLayoutManager是线性布局的意思，可以实现和ListView类似的效果。接下来我们创建了FruitAdapter的实例，并将水果数据传入到FruitAdapter的构造函数中，最后调用RecyclerView的setAdapter（）方法来完成适配器设置，这样RecyclerView和数据之间的关联就建立完成了。

现在运行以下程序，看看效果吧。


RecyclerView效果图

实现横向滚动和瀑布流布局

我们已经知道ListView的扩展性并不好，它只能实现纵向滚动效果，如果想进行横向滚动的话，ListView就做不到了。那么RecyclerView就能做得更好吗？当然可以，不仅能做得更好，还简单，那么我们先试试横向滚动吧。

首先修改fruit_item.xml中的代码，如下所示：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:orientation="vertical">

    <ImageView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:id="@+id/fruit_img"

        android:layout_gravity="center_horizontal"/>

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:id="@+id/fruit_name"

        android:layout_gravity="center_horizontal"

        android:layout_marginTop="10dp"/>

</LinearLayout>

我们将LinearLayout改成垂直方向排列。然后将ImageView和TextView都设置成了在布局中水平居中。并且使用layout_marginTop属性让文字和图片之间保持距离。

接下来修改MainActivity中的代码，如下所示：

public class MainActivityextends AppCompatActivity {

    private ListfruitList=new ArrayList<>();

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        initFruits();

        RecyclerView recyclerview=(RecyclerView)findViewById(R.id.recycler_view);

        LinearLayoutManager lm=new LinearLayoutManager(this);

        //调用LinearLayoutManager的setOrientation()方法来设置布局排列方式

        lm.setOrientation(LinearLayoutManager.HORIZONTAL);

        recyclerview.setLayoutManager(lm);

        FruitAdapter adapter=new FruitAdapter(fruitList);

        recyclerview.setAdapter(adapter);

    }

private void initFruits() {

        for(int i=0;i<2;i++){

            Fruit apple =new Fruit("Apple",R.drawable.apple);

            fruitList.add(apple);

            Fruit banana=new Fruit("banana",R.drawable.banana);

            fruitList.add(banana);

            Fruit orange=new Fruit("orange",R.drawable.orange);

            fruitList.add(orange);

            Fruit water=new Fruit("watermelon",R.drawable.water);

            fruitList.add(water);

            Fruit pear=new Fruit("pear",R.drawable.pear);

            fruitList.add(pear);

            Fruit Str=new Fruit("Strawberry",R.drawable.stra);

            fruitList.add(Str);

            Fruit Cherry=new Fruit("Cherry",R.drawable.cherry);

            fruitList.add(Cherry);

            Fruit Mango=new Fruit("Mango",R.drawable.mango);

            fruitList.add(Mango);

            Fruit Grape=new Fruit("Grape",R.drawable.grape);

            fruitList.add(Grape);

        }

    }

}

MainActivity中只加入了一行代码，调用LinearLayoutManager的setOrientation()方法来设置布局的排列方向，默认是纵向排列，传入LinearLayoutManager.HORIZONTAL表示让布局横向排列。

运行一下，看看效果图吧。


RecyclerView水平排列效果图

为什么ListView很难或者根本无法实现的效果在RecyclerView上这么轻松就能解决了呢？这主要得益于RecyclerView出色的设计。ListView的布局排列室友自身去管理的，而RecyclerView则将这个工作交给了LayoutManager，LayoutManager中制定了一套可扩展的布局排列接口，子类只要按照接口的规范来实现，就能制定出各种不同排列方式的布局了。

出了LinearLayoutManager之外，还提供了GridLayoutManager和StaggeredGridLayoutManager这两种内置的布局排列方式。GridLayoutManager可以用于实现网络布局，StaggeredGridLayoutManager可以用于实现瀑布流布局。我们来试一下效果炫酷的瀑布流布局，网格布局就作为练习吧，自己查阅相关资料。

要使用StaggeredGridLayoutManager实现瀑布流布局，首先修改fruit_item.xml中的代码，如图所示：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:layout_margin="5dp"

    android:orientation="vertical">

    <ImageView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:id="@+id/fruit_img"

        android:layout_gravity="center_horizontal"/>

<TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:id="@+id/fruit_name"

        android:layout_gravity="left"

        android:layout_marginTop="10dp"/>

</LinearLayout>

至于上面的修改内容或添加的内容不在多做讲解，自己多花功夫去学习吧。

接下来，我们接着修改MainActivity中的代码，如下所示：

public class MainActivityextends AppCompatActivity {

    private ListfruitList=new ArrayList<>();

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        //初始化水果数据

        initFruits();

        RecyclerView recyclerview=(RecyclerView)findViewById(R.id.recycler_view);

        StaggeredGridLayoutManager layoutManager =new         StaggeredGridLayoutManager(3,StaggeredGridLayoutManager.VERTICAL);

        recyclerview.setLayoutManager(layoutManager);

        FruitAdapter adapter=new FruitAdapter(fruitList);

        recyclerview.setAdapter(adapter);

    }

private void initFruits() {

        for(int i=0;i<2;i++){

            Fruit apple =new Fruit(getRandomLengthName("Apple"),R.drawable.apple);

            fruitList.add(apple);

            Fruit banana=new Fruit(getRandomLengthName("banana"),R.drawable.banana);

            fruitList.add(banana);

            Fruit orange=new Fruit(getRandomLengthName("orange"),R.drawable.orange);

            fruitList.add(orange);

            Fruit water=new Fruit(getRandomLengthName("watermelon"),R.drawable.water);

            fruitList.add(water);

            Fruit pear=new Fruit(getRandomLengthName("pear"),R.drawable.pear);

            fruitList.add(pear);

            Fruit Str=new Fruit(getRandomLengthName("Strawberry"),R.drawable.stra);

            fruitList.add(Str);

            Fruit Cherry=new Fruit(getRandomLengthName("Cherry"),R.drawable.cherry);

            fruitList.add(Cherry);

            Fruit Mango=new Fruit(getRandomLengthName("Mango"),R.drawable.mango);

            fruitList.add(Mango);

            Fruit Grape=new Fruit(getRandomLengthName("Grape"),R.drawable.grape);

            fruitList.add(Grape);

        }

}

private StringgetRandomLengthName(String name) {

        Random randrom =new Random();

        int length = randrom.nextInt(20)+1;

        StringBuilder builder =new StringBuilder();

        for(int i =0;i < length;i++){

            builder.append(name);

        }

        return builder.toString();

    }

}

在onCreate（）方法中，我们创建了一个StaggeredGridLayoutManager的实例。StaggeredGridLayoutManager的构造函数接收两个参数，第一个参数用于指定布局的列数，传入3表示把布局分为3列；第二个参数用于指定布局的排列方式，传入StaggeredGridLayoutManager.VERTICAL表示让布局纵向排列，最后再把创建好的实例设置到RecyclerView中就可以了。

为了让瀑布流布局更加明显，我们使用了一个小技巧。这里我们看到getRandromLengthName（）方法上，该方法使用了Random对象来创造一个1-20之间的随机数，然后将参数中传入的字符串随机重复，然后再initFruits（）方法中，每种水果的名字都改成getRandromLengthName（）来生成，保证每种水果名字的差距不太一样了，因此高度也就不同了。

现在运行一下，看看效果吧。


瀑布流布局效果

RecyclerView的点击事件

和ListView一样，RecyclerView也必须要能够响应点击事件才可以，不然没什么实际用途。不过不同于ListView的是，RecyclerView并没有提供类似于setOnItemClickListener（）这样的注册监听器，而是需要我们自己给子项的具体的View去注册点击事件。相较于ListView要复杂。其实ListView点击事件的处理并不人性化，setOnItemClickListener（）方法注册的是子项的点击事件，如果我想点击子项里的某一按键呢？虽然也能实现，但ListView就比RecyclerView麻烦。所以RecyclerView干脆直接摒弃了子项点击事件的监听器，所有的点击事件都由具体的View去注册，就在没有这个烦恼了。

下面我们进入正题吧，先修改FruitAdapter中的代码，如下所示：

public class FruitAdapterextends RecyclerView.Adapter {

    private ListmFruitList;

    static class ViewHolderextends RecyclerView.ViewHolder{

        View fruitview;

        ImageView fruitimage;

        TextView fruitname;

        public ViewHolder(View view){

            super(view);

            fruitview = view;

            fruitimage =(ImageView)view.findViewById(R.id.fruit_img);

            fruitname =(TextView)view.findViewById(R.id.fruit_name);

        }

}

public FruitAdapter(List fruitList){

    mFruitList=fruitList;

    }

@Override

    public ViewHolderonCreateViewHolder(ViewGroup parent, int viewType) {

        View view= LayoutInflater.from(parent.getContext()).inflate(R.layout.fruit_item,parent,false);

        final ViewHolder holder =new ViewHolder(view);

        holder.fruitview.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View v) {

                int position =holder.getAdapterPosition();

                Fruit fruit =mFruitList.get(position);

                Toast.makeText(v.getContext(), "you clicked view "+fruit.getName(), Toast.LENGTH_SHORT).show();

            }

});

        holder.fruitimage.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View v) {

                int position =holder.getAdapterPosition();

                Fruit fruit =mFruitList.get(position);

                Toast.makeText(v.getContext(), "you clicked view "+fruit.getName(), Toast.LENGTH_SHORT).show();

            }

});

        return holder;

    }

@Override

    public void onBindViewHolder(ViewHolder viewHolder,int position){

Fruit fruit=mFruitList.get(position);

        viewHolder.fruitimage.setImageResource(fruit.getImageid());

        viewHolder.fruitname.setText(fruit.getName());

    }

@Override

    public int getItemCount(){

return mFruitList.size();

    }

}

我们先是在ViewHolder中添加了fruitView变量来保存子项最外层布局的实例，然后在onCreateViewHolder（）方法中注册点击事件就可以了。这里分为最外层布局和ImageView和TextView都注册了点击事件，RecyclerView的强大之处也在这里，它可以轻松实现子项中任意控件或布局的点击事件。点击事件都是先获取用户点击的position，然后通过position拿到相应的Fruit实例，在使用Toast分别弹出两种不同的内容以示区别。

运行一下吧，看看效果如何。

点击葡萄文字效果


点击橙子图片效果
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 213,335评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,895评论 3赞 387
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 158,766评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,918评论 1赞 285
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,042评论 6赞 385
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,169评论 1赞 291
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,219评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,976评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,393评论 1赞 304
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,711评论 2赞 328
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,876评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,562评论 4赞 336
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,193评论 3赞 317
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,903评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,142评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,699评论 2赞 362
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,764评论 2赞 351

推荐阅读更多精彩内容