Android 高级控件(六)——RecyclerView的方方面面,让你知道他的魅力!

Android 高级控件(六)——RecyclerView的方方面面,让你知道他的魅力!


RecyclerView出来很长时间了,相信大家都已经比较了解了,这里我把知识梳理一下,其实你把他看成一个升级版的ListView也是可以的,为什么这样说呢?我们一起来学习一下!

一.RecyclerView的基本使用

使用RecyclerView的话,大家都知道,他是V7里面的控件,所以我们需要添加源,但是大家的Gradle版本都是不一样的,这里介绍一下一种比较方便的添加方法,我们右键我们的项目

选择open module settings,然后依次选择我们的app-Dependencies,点击+号,选择Library Dependency,然后搜索RecyclerView就好了

好的,添加完成之后我们就可以在Build.gradle里面看到我们添加的源了

compile ‘com.android.support:recyclerview-v7:24.2.0‘

现在我们就可以开始使用RecyclerView了,在布局里添加

<?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="match_parent">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/mRecyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

我们先来模拟一下一些基础数据,最基本的写法:

public class MainActivity extends AppCompatActivity {

    private RecyclerView mRecyclerView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();
    }

    /**
     * 初始化View
     */
    private void initView() {
        mRecyclerView = (RecyclerView) findViewById(R.id.mRecyclerView);
        //设置布局,这里我们使用线性布局
        mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
        //设置适配器
        mRecyclerView.setAdapter(new RecyclerView.Adapter() {
            @Override
            public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
                return new ViewHolder(new TextView(parent.getContext()));
            }

            @Override
            public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
                ViewHolder vh = (ViewHolder) holder;
                vh.tv.setText("我是item:" + position);
            }

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

            class ViewHolder extends RecyclerView.ViewHolder {
                private TextView tv;

                public ViewHolder(TextView itemView) {
                    super(itemView);
                    tv = itemView;
                }

                public TextView getTv() {
                    return tv;
                }
            }
        });
    }
}

OK,运行一下

成功的运行,但是你看到,他也太丑了吧,还有,你这都是什么烂代码,怎么一点扩展性都没有,没错,因为我这还只是演示的,看官仔细看,我们接下来要做的事情!

二.RecyclerView的item

我们上面那个写死了,现在我们来个扩展性强的,我们都知道listview一般是写个item,有个实体类,还有个adapter对吧,那我们也是一样的:

首先我们的item

<?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="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"/>

    <TextView
        android:id="@+id/tvContent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</LinearLayout>

然后就是我们的实体类了

package com.liuguilin.recyclerviewsample;

/*
 *  项目名:  RecyclerViewSample
 *  包名:    com.liuguilin.recyclerviewsample
 *  文件名:   ItemData
 *  创建者:   LGL
 *  创建时间:  2016/10/7 13:48
 *  描述:    实体类
 */

public class ItemData {

    private String title;
    private String content;

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }
}

再接着实现我们的adapter

package com.liuguilin.recyclerviewsample;

/*
 *  项目名:  RecyclerViewSample
 *  包名:    com.liuguilin.recyclerviewsample
 *  文件名:   RecyclerViewAdapter
 *  创建者:   LGL
 *  创建时间:  2016/10/7 13:10
 *  描述:    TODO
 */

import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import java.util.List;

public class RecyclerViewAdapter extends RecyclerView.Adapter {

    private List<ItemData> mList;

    public RecyclerViewAdapter(List<ItemData> mList) {
        this.mList = mList;
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

        return new ViewHolder(LayoutInflater.from(parent.getContext())
                .inflate(R.layout.list_item, null));
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        ViewHolder vh = (ViewHolder) holder;

        ItemData item = mList.get(position);
        vh.getTvTitle().setText(item.getTitle());
        vh.getTvContent().setText(item.getContent());
    }

    @Override
    public int getItemCount() {
        return mList.size();
    }

    class ViewHolder extends RecyclerView.ViewHolder {

        private View mView;

        private TextView tvTitle;
        private TextView tvContent;

        public ViewHolder(View mView) {
            super(mView);

            tvTitle = (TextView) mView.findViewById(R.id.tvTitle);
            tvContent = (TextView) mView.findViewById(R.id.tvContent);
        }

        public TextView getTvTitle() {
            return tvTitle;
        }

        public TextView getTvContent() {
            return tvContent;
        }
    }
}

做完这些,我们就去填充下数据

package com.liuguilin.recyclerviewsample;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private RecyclerView mRecyclerView;
    private List<ItemData> mList = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();
    }

    /**
     * 初始化View
     */
    private void initView() {
        mRecyclerView = (RecyclerView) findViewById(R.id.mRecyclerView);
        //设置布局,这里我们使用线性布局
        mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
        for (int i = 0; i < 100; i++) {
            ItemData item = new ItemData();
            item.setTitle("Title" + i);
            item.setContent("Content:" + i);
            mList.add(item);
        }
        //设置适配器
        mRecyclerView.setAdapter(new RecyclerViewAdapter(mList));
    }
}

好的,我们来运行一下:

这个扩展就比较高了对吧;我们继续来看。

三.RecyclerView的样式

你们看了这么久了肯定会觉得这个太丑了,想定义下样式,事实上,RecyclerView很灵活,很多都是通过代码来控制的不像listview一样是xml设置,我们看下setLayoutManager的具体使用姿势:

//设置布局,这里我们使用线性布局
mRecyclerView.setLayoutManager(new LinearLayoutManager(this,LinearLayoutManager.HORIZONTAL,false));

我们设置水平的,来看看效果

我们可以看到,水平了,这三个参数分别是:上下文,布局方向,是否旋转,我们现在把是否旋转设置为true再来看下效果:

显而易见,数据是倒过来的了,当然我们也不只是一种布局,我们设置表格布局

 mRecyclerView.setLayoutManager(new GridLayoutManager(this,3));

参数是3列的含义,我们来看下:

好的,基本的你学会了吗?我们还有一个属性是添加分割线的,很多同学并不知道在哪里添加,其实他是需要代码设置的;

//添加分割线
        mRecyclerView.addItemDecoration(new MyDecoration(this,MyDecoration.VERTICAL_LIST));

但是这个MyDecoration是什么?官方为我们提供了例子,这里就不演示了

package com.liuguilin.recyclerviewsample;

/*
 *  项目名:  RecyclerViewSample
 *  包名:    com.liuguilin.recyclerviewsample
 *  文件名:   MyDecoration
 *  创建者:   LGL
 *  创建时间:  2016/10/7 14:22
 *  描述:    分割线
 */

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;

public class MyDecoration extends RecyclerView.ItemDecoration{

    private Context mContext;
    private Drawable mDivider;
    private int mOrientation;
    public static final int HORIZONTAL_LIST = LinearLayoutManager.HORIZONTAL;
    public static final int VERTICAL_LIST = LinearLayoutManager.VERTICAL;

    //我们通过获取系统属性中的listDivider来添加,在系统中的AppTheme中设置
    public static final int[] ATRRS  = new int[]{
            android.R.attr.listDivider
    };

    public MyDecoration(Context context, int orientation) {
        this.mContext = context;
        final TypedArray ta = context.obtainStyledAttributes(ATRRS);
        this.mDivider = ta.getDrawable(0);
        ta.recycle();
        setOrientation(orientation);
    }

    //设置屏幕的方向
    public void setOrientation(int orientation){
        if (orientation != HORIZONTAL_LIST && orientation != VERTICAL_LIST){
            throw new IllegalArgumentException("invalid orientation");        }        mOrientation = orientation;
    }

    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
        if (mOrientation == HORIZONTAL_LIST){
            drawVerticalLine(c, parent, state);
        }else {
            drawHorizontalLine(c, parent, state);
        }
    }

    //画横线, 这里的parent其实是显示在屏幕显示的这部分
    public void drawHorizontalLine(Canvas c, RecyclerView parent, RecyclerView.State state){
        int left = parent.getPaddingLeft();
        int right = parent.getWidth() - parent.getPaddingRight();
        final int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++){
            final View child = parent.getChildAt(i);

            //获得child的布局信息
            final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams)child.getLayoutParams();
            final int top = child.getBottom() + params.bottomMargin;
            final int bottom = top + mDivider.getIntrinsicHeight();
            mDivider.setBounds(left, top, right, bottom);
            mDivider.draw(c);
            //Log.d("wnw", left + " " + top + " "+right+"   "+bottom+" "+i);
        }
    }

    //画竖线
    public void drawVerticalLine(Canvas c, RecyclerView parent, RecyclerView.State state){
        int top = parent.getPaddingTop();
        int bottom = parent.getHeight() - parent.getPaddingBottom();
        final int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++){
            final View child = parent.getChildAt(i);

            //获得child的布局信息
            final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams)child.getLayoutParams();
            final int left = child.getRight() + params.rightMargin;
            final int right = left + mDivider.getIntrinsicWidth();
            mDivider.setBounds(left, top, right, bottom);
            mDivider.draw(c);
        }
    }

    //由于Divider也有长宽高,每一个Item需要向下或者向右偏移
    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        if(mOrientation == HORIZONTAL_LIST){
            //画横线,就是往下偏移一个分割线的高度
            outRect.set(0, 0, 0, mDivider.getIntrinsicHeight());
        }else {
            //画竖线,就是往右偏移一个分割线的宽度
            outRect.set(0, 0, mDivider.getIntrinsicWidth(), 0);
        }
    }
}

设置完之后我们来运行一下

好的,分割线野有了,如果我们要自定义一下最喜欢个分割线,我们可写一个xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="@color/colorAccent"/>
    <size android:height="1dp"/>
</shape>

然后在我们的主题里面引用

   <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:listDivider">@drawable/divider</item>
    </style>

再来运行一下

OK,到这里这个样式已经基本上没什么问题了

四.RecyclerView的Adapter

我们把Adapter放后面讲,也是希望大家先去看下代码,本身代码也不多,以这个adapter为例,我简单的说话这些方法的作用

  • 构造方法

传递参数的,没什么可说的

  • onCreateViewHolder

这里我们一般是来初始化我们的布局的,也就是我们item

  • onBindViewHolder

绑定View之后就在这里面进行赋值了,分工明确

  • getItemCount

返回数据长度,没什么可说的

  • ViewHolder

继承RecyclerView.ViewHolder,对item的view进行初始化,也就是我们的缓存对象

到这里,大家是不是已经学会了呢?如果没有学会的话,请加群:555974449我们继续学习

Demo下载:http://download.csdn.net/detail/qq_26787115/9646804

时间: 2024-10-23 13:49:07

Android 高级控件(六)——RecyclerView的方方面面,让你知道他的魅力!的相关文章

Android高级控件(六)——自定义ListView高仿一个QQ可拖拽列表的实现

Android高级控件(六)--自定义ListView高仿一个QQ可拖拽列表的实现 我们做一些好友列表或者商品列表的时候,居多的需求可能就是需要列表拖拽了,而我们选择了ListView,也是因为使用ListView太久远了,导致对他已经有浓厚的感情了,我们之前也是写过几篇关于ListView的博文 Android实训案例(三)--实现时间轴效果的ListView,加入本地存储,实现恋爱日记的效果! Android高级控件(一)--ListView绑定CheckBox实现全选,增加和删除等功能 A

Android学习(六)—— Android高级控件

Android高级控件 1.ProgressBar 进度条,在运行耗时操作时来显示,可以提高软件的友好型. 常用属性 android:max:进度条的最大值 android:progress:进度条已完成进度值 android:progressDrawable:设置轨道对应的Drawable对象 android:indeterminate:如果设置成true,则进度条不精确显示进度 android:indeterminateDrawable:设置不显示进度的进度条的Drawable对象 andr

Android高级控件(五)——如何打造一个企业级应用对话列表,以QQ,微信为例

Android高级控件(五)--如何打造一个企业级应用对话列表,以QQ,微信为例 看标题这么高大上,实际上,还是运用我么拿到listview去扩展,我们讲什么呢,就是研究一下QQ,微信的这种对话列表,我们先看一个传统的ListView是怎么样的,我们做一个通讯录吧,通讯录的组成就是一个头像,一个名字,一个电话号码,一个点击拨打的按钮,既然这样,那我们的item就出来了 call_list_item.xml <?xml version="1.0" encoding="ut

Android高级控件——ViewPager、GridView、popwindow、SlideMenu(中)

Android高级控件--ViewPager.GridView.popwindow.SlideMenu(中) android:screenOrientation="locked"锁屏 android:screenOrientation="landscape"横屏锁定   <!--android:theme="@android:style/Theme.NoTitleBar.Fullscreen"  Activity 直接extends Act

Android高级控件(一)——ListView绑定CheckBox实现全选,添加和删除等功能

Android高级控件(一)--ListView绑定CheckBox实现全选,添加和删除等功能 这个控件还是挺复杂的.也是项目中应该算是比較经常使用的了,所以写了一个小Demo来讲讲,主要是自己定义adapter的使用方法.加了非常多的推断等等等等-.我们先来看看实现的效果吧! 好的,我们新建一个项目LvCheckBox 我们事先先把这两个布局写好吧,一个是主布局,另一个listview的item.xml.相信不用多说 activity_main.xml <LinearLayout xmlns:

Android高级控件——GridView ScrollView ViewPager (上)

Android高级控件--GridView ScrollView ViewPager (上) GridView 网格视图,网格视图组件,九宫图显示数据表格(一种控件) ScrollView滚动视图 是一个单一容器,只能包含一个组件. ViewPager左右滑动 SlideMenu侧边栏 PullToRefreshListView下拉刷新 ListView新闻 原声列表视图 <?xml version="1.0" encoding="utf-8"?> &l

Android高级控件--AdapterView与Adapter

在J2EE中提供过一种非常好的框架--MVC框架,实现原理:数据模型M(Model)存放数据,利用控制器C(Controller)将数据显示在视图V(View)上.在Android中有这样一种高级控件,他的实现过程就类似于MVC框架.之所以称它高级,是因为他的使用不像其他控件一样,拖拽到界面上就能用,而是需要通过适配器将某些样式的数据或控件添加到其上而使用,这样的控件就是我们今天要说的AdapterView. 一:AdapterView-->V(视图) 1:作用 以列表的形式显示数据 2: 内容

Android高级控件(下)

计时器(Chronometer) getBase() 基准时间 setFormat() 设置显示格式 start() 开始计时 stop() 停止计时 setOnChronometerListener 计时改变的监听事件 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout 3 xmlns:android="http://schemas.android.com/apk/res/a

Android高级控件

Toast信息提示框 bt1.setOnClickListener(new OnClickListener() { public void onClick(View v) { Toast.makeText(To.this, "短时间", Toast.LENGTH_SHORT).show(); tView.setText("短时间"); } }); bt2.setOnClickListener(new OnClickListener() { public void o