IRcyclerView从会用到会写（一）
2017-12-22 本文已影响0人
JokerHerry
确实因为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。
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="co.example.hzq.irecycercopy.MainActivity">
<!--布局中添加irecyclerview-->
<com.aspsine.irecyclerview.IRecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/view"/>
</android.support.constraint.ConstraintLayout>
在activity中申明我们的IRecyclerView
public class MainActivity extends AppCompatActivity {
List<Teacher> 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<TeacherAdapter.ViewHolder>{
List<Teacher> list;
Context context;
public TeacherAdapter(Context context, List<Teacher> 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<Teacher> 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
然后今天的栗子就是这些，下一章我们将从源码的角度来分析他。。。
未完待续。。。
