android技术程序员Android开发经验谈

MaterialDesign学习篇(八),掌握RecyclerV

2017-08-03  本文已影响402人  chaychan

RecyclerView介绍

RecyclerView是Android5.0添加的一个用于取代ListView的控件,它的灵活性比ListView和GridView更加优秀,ListView和GridView能够做到的,它都可以做到,可以说是ListView和GridView的升级版,但是它的使用又和ListView与GridView有些不同,下面将会对此进行介绍。

如何使用RecyclerView

先看下演示效果:

列表布局:

网格布局:

瀑布流布局:

可以看到,子条目的点击事件已经可以像ListView一样,通过设置回调,在回调中做相应的处理就完成了,同理,子条目长按的事件也可以通过像上面的操作实现,在这里就不再做演示了,这里只是简单介绍下思想,有兴趣的话你可以尝试去实现下。

这里向大家推荐下一个很好用的开源框架,RecyclerView万能适配器,它可以省去编写Adapter的大部分代码,使用起来非常方便,特别是多Item布局使用,只需要简单的操作就可以实现,它的github地址是

BaseRecyclerViewAdapterHelper

RecyclerView的分割线

使用ListView的时候,当我们想添加条目之间的分割线时,我们只需要在ListView中配置divider,简单的两行配置:

android:divider="#fffff"  分割线颜色  
android:dividerHeight="1px"  分割线高度 

但是RecyclerView却没有提供这些配置,而是提供了方法

recyclerView.addItemDecoration()

需要自己定制ItemDecoration,有别于ListView,ItemDecoration这种可插拔设计不仅好用,而且功能强大,ItemDecoration中主要有以下三个方法:

public void onDraw(Canvas c, RecyclerView parent, State state) //可以实现类似绘制背景的效果,内容在上面
public void onDrawOver(Canvas c, RecyclerView parent, State state) //可以绘制在内容的上面,覆盖内容
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, State state)//可以实现类似padding的效果

绘制分割线

要实现分割线效果需要重写onDraw()和getItemOffsets()这两个方法:

public class MyDividerItemDecoration extends RecyclerView.ItemDecoration{
    private Paint mPaint;
    private int mDividerHeight;

    public MyDividerItemDecoration(Context context, int dividerHeight, int dividerColor){
        mDividerHeight = dividerHeight;
        mPaint = new Paint();
        mPaint.setColor(dividerColor);
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);
        outRect.bottom = mDividerHeight;//矩形的底部赋值分割线的高度
    }

    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
        int childCount = parent.getChildCount();//获取到子View的个数
        int left = parent.getPaddingLeft();
        int right = parent.getWidth() - parent.getPaddingRight();

        for (int i = 0; i < childCount - 1; i++) {
            View view = parent.getChildAt(i);
            float top = view.getBottom();
            float bottom = view.getBottom() + mDividerHeight;//子View底部添加分割线的高度
            c.drawRect(left, top, right, bottom, mPaint);//绘制
        }
    }
}

这里简单实现了绘制分割线,其中,分割线的高度和颜色可以通过构造方法传入,代码中使用:

mRv.addItemDecoration(new MyDividerItemDecoration(this,1,getResources().getColor(R.color.divider)));

看下未添加分割线和添加分割线的效果

这里只是简单教了如何绘制分割线,对于条目之间美化和修饰,可以通过ItemDecoration实现,这些需要去学习和探索。

SwipeRefreshLayout介绍

SwipeRefreshLayout是Google提供的一个官方的下拉刷新控件,该控件和以往的下拉刷新控件不同,第一次看到的时候觉得让人耳目一新,现在大部分的App都使用SwipeRefreshLayout作为下拉刷新控件,因为它不仅看起来美观,使用起来也是相当方便。

SwipeRefreshLayout在support v4包中,要想使用它,需要导入v4包的依赖,AS创建项目的时候默认有添加v4包的依赖,所以我们可以直接使用SwipeRefreshLayout。

布局文件中,使用SwipeRefreshLayout

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SwipeRefreshLayout
    android:id="@+id/srl"
    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/rv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</android.support.v4.widget.SwipeRefreshLayout>

和ScrollView的使用相似,SwipeRefreshLayout只能有一个直接子View,如果使用其他布局,比如不是SwipeRefreshLayout + RecyclerView,那么可以使用一个ViewGroup将布局好的控件包裹起来,最外层再用SwipeRefreshLayout包裹即可。

添加下拉刷新监听

mSrlRoot = (SwipeRefreshLayout) findViewById(R.id.srl);
mSrlRoot.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
        @Override
        public void onRefresh() {
            mHandler.postDelayed(new Runnable() {
                @Override
                public void run() {
                    mSrlRoot.setRefreshing(false);//收起下拉刷新
                    Toast.makeText(RecyclerViewActivity1.this, "刷新完毕", Toast.LENGTH_SHORT).show();
                }
            },2000);
        }
    });

效果如下:

可以看到,当RecyclerView处于顶部时,向下拉动,会出现一个小圆圈在转动,这就是SwipeRefreshLayout控件的样子,我们在下拉刷新的回调中,简单模拟了刷新的过程,延时2秒后收起下拉刷新,并弹出吐司,显示“刷新完毕”,可以看到SwipeRefreshLayou的出现、加载中和消失动画看起来也是很不错的。

修改SwipeRefreshLayout显示的颜色

上图我们看到了SwipeRefreshLayout的样子,是一个小圆圈,Google为我们提供了可定制化修改的属性,比如修改它的颜色:

 mSrlRoot.setColorSchemeColors(Color.RED);

上面代码设置它的颜色为红色,看下效果:

可以看到,SwipeRefreshLayout的小圈圈变成了红色。SwipeRefreshLayout设置颜色的方法setColorSchemeColors(int...colors),参数是可变参数,接收一个或多个颜色,如果我们传入多个颜色,将会是什么效果呢?

mSrlRoot.setColorSchemeColors(Color.RED,Color.GREEN,Color.BLUE);

这里我们设置了红绿蓝三个颜色,效果如下:

可以看到,加载中时,小圈圈交替变换红绿蓝这三种颜色,变得多姿多彩。

好了,本篇介绍RecyclerView和SwipeRefreshLayout到此就结束了,需要源码的可以查看:

https://github.com/chaychan/MaterialDesignExercise

上一篇下一篇

猜你喜欢

热点阅读