IRcyclerView从会用到会写(一)

确实因为recyclerview在我们开发中太常见了,并且貌似下拉刷新以及上拉加载更多成为我们app中一种基本功能,而我们一般怎么实现这种功能,额,github是吧,然后这样我们也是只知道怎么用对吧,咳咳,现在我们开始掰开轮子,看看它里面到底是怎么实现这种功能。我分析的案例是GitHub上面的一个开源组件,叫IRecyclerView。然后我将从会用会看到会写,三个步骤来解读这个组件。这是第一篇,我们首先来知道怎么用他。

首先我们找到案例,看看他拥有那些功能。


image.png

我们可以看到,一共拥有7个功能哈。

  • 下拉刷新
  • 上拉加载更多
  • 自定义刷新页面的样式
  • 自定义加载更多页面的样式
  • 自定义头页面
  • 自定义尾页面
  • 支持线性,grid,和瀑布流

然后我们一个一个的实现。建议直接下载源码,不用gradle,因为它里面有一些自己展示的布局文件并没有放在包里面。

准备工作

最开始我们肯定还是需要引入recyclerview的,我们需要在module的gradle中添加。

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

使用gradle配置的话,还需要引入IRecyclerView。

    compile 'com.github.Aspsine:IRecyclerView:0.0.5'

并且在app的gradle添加

allprojects {
    repositories {
        ...
        maven { url "https://jitpack.io" }     <---添加该句
    }
}

布局申明

我们还是需要在layout里面申明他,给他一个id。



    
    


在activity中申明我们的IRecyclerView

public class MainActivity extends AppCompatActivity {
    List list;
    IRecyclerView view;
    TeacherAdapter adapter;

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

        initList();
        view = findViewById(R.id.view);
        view.setLayoutManager(new LinearLayoutManager(this));
        adapter = new TeacherAdapter(this,list);
        view.setIAdapter(adapter);
    }

    private void initList() {
        list = new ArrayList<>();
        for (int i = 0; i < 10; i++) {
            list.add(new Teacher(R.drawable.teacher,"teacher "+i));
        }
    }
}

因为IRecycle'rView是继承自RecyclerView的,所以拥有RecyclerView的所有功能。我们看到除了设置adapter的时候,使用setIAdapter,其他地方和我们使用RecyclerView一样。
然后我把Teacher类和adapter的类展示如下:

public class Teacher {

    private int id;
    private String name;

    public Teacher(int id,String name){
        this.id = id;
        this.name = name;
    }

    public int getId() {        return id;    }
    public void setId(int id) {        this.id = id;    }
    public String getName() {        return name;    }    
    public void setName(String name) {        this.name = name;    }
}
public class TeacherAdapter  extends RecyclerView.Adapter{
    List list;
    Context context;

    public TeacherAdapter(Context context, List list) {
        this.list =list;
        this.context = context;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View inflate = LayoutInflater.from(parent.getContext()).inflate(R.layout.item, parent, false);
        ViewHolder holder = new ViewHolder(inflate);
        return holder;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        holder.textView.setText(list.get(position).getName());
        holder.imageView.setImageResource(list.get(position).getId());
    }

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

    public class ViewHolder extends RecyclerView.ViewHolder {
        public TextView textView;
        public ImageView imageView;
        public ViewHolder(View itemView) {
            super(itemView);
            textView = itemView.findViewById(R.id.text);
            imageView = itemView.findViewById(R.id.image);
        }
    }
}

设置下拉刷新

三个步骤:
1. 我们需要一个继承自RefreshTrigger的view来作为我们的刷新时候的页面
2.开启我们的刷新功能
3.设置刷新的函数返回函数

继承自RefreshTrigger的view
我们重写一个view作为刷新的页面

image.png

看到里面很多周期函数,这些都是我们在刷新时候的,页面状态函数,我们可以在里面配置我们需要的样式以及动画。

开启我们的刷新功能

view.setRefreshEnabled(true);

设置刷新的函数返回函数

view.setRefreshHeaderView(R.layout.head_view);

然后重写刷新的回调函数,这里面写的是我们的刷新完成后做的事情。我们设置为两秒后结束刷新状态,用于模拟耗时间的操作。

    @Override
    public void onRefresh() {
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                iRecyclerView.setRefreshing(false);
            }
        },2000);
    }

看一下我们现在的activity长什么样子

public class MainActivity extends AppCompatActivity implements OnRefreshListener {
    List list;
    IRecyclerView view;
    TeacherAdapter adapter;

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

        initList();
        view = findViewById(R.id.view);
        view.setLayoutManager(new LinearLayoutManager(this));
        initRefreshView();
        adapter = new TeacherAdapter(this,list);
        view.setIAdapter(adapter);

    }

    private void initRefreshView() {
        view.setRefreshEnabled(true);
        view.setRefreshHeaderView(R.layout.head_view);
        view.setOnRefreshListener(this);
    }

    private void initList() {
        list = new ArrayList<>();
        for (int i = 0; i < 10; i++) {
            list.add(new Teacher(R.drawable.teacher,"teacher "+i));
        }
    }

    @Override
    public void onRefresh() {
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                view.setRefreshing(false);
            }
        },2000);
    }
}

head_view里面就一个东西,我就是我们自己的设置的HeadView


image.png

现在我们来运行一下,看一下效果。


1.gif

有一个刷新的基本的样子哈,然后案例里面给我们提供了一种样式,我们可以看一下。也就是我们平常常见的刷新的样式。
2.gif

设置加载更多

使用了下拉刷新了之后,这个就很简单了。
三个步骤

  • 用一个view,来作为我们的加载更多的itemview,当让也可以选择不要
  • 开启我们的加载更多功能
  • 设置刷新的函数返回函数

footerView
这个view我们可以随意写,我这里直接使用的刷新的view

开启加载更多功能

view.setLoadMoreEnabled(true);

重写事件函数

    @Override
    public void onLoadMore() {
        footer.setVisibility(View.VISIBLE);
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                footer.setVisibility(View.GONE);
            }
        },2000);
    }

下面展示initFooterView

    private void initFooterView() {
        view.setLoadMoreFooterView(R.layout.head_view);
        view.setLoadMoreEnabled(true);
        view.setOnLoadMoreListener(this);
        footer = view.getLoadMoreFooterView();
    }

记得因为我们需要实时更新我们footer的状态,所以我们需要获取到这个对象。然后在响应事件函数中动态设置他。
下面是展示的效果


3.gif

添加头节点和尾节点

这个就很简单和方便了,在我们已经设置好我们的头节点和尾节点的view之后,直接添加即可。

addHeaderView(View headerView)
addFooterView(View headerView)

栗子

    private void initHeadAndFooter() {
        TextView textView = new TextView(this);
        textView.setText("我是头结点");
        textView.setTextSize(30);
        view.addHeaderView(textView);

        TextView textView2 = new TextView(this);
        textView2.setText("我是尾结点");
        textView2.setTextSize(30);
        view.addFooterView(textView2);
    }

效果

4.gif

然后今天的栗子就是这些,下一章我们将从源码的角度来分析他。。。

未完待续。。。

你可能感兴趣的:(IRcyclerView从会用到会写(一))