確實(shí)因?yàn)閞ecyclerview在我們開發(fā)中太常見了湃崩，并且貌似下拉刷新以及上拉加載更多成為我們app中一種基本功能抢野，而我們一般怎么實(shí)現(xiàn)這種功能，額，github是吧逛裤，然后這樣我們也是只知道怎么用對(duì)吧瘩绒，咳咳，現(xiàn)在我們開始掰開輪子带族，看看它里面到底是怎么實(shí)現(xiàn)這種功能锁荔。我分析的案例是GitHub上面的一個(gè)開源組件，叫IRecyclerView蝙砌。然后我將從會(huì)用會(huì)看到會(huì)寫阳堕，三個(gè)步驟來解讀這個(gè)組件。這是第一篇择克，我們首先來知道怎么用他恬总。
首先我們找到案例，看看他擁有那些功能肚邢。
我們可以看到壹堰，一共擁有7個(gè)功能哈。
- 下拉刷新
- 上拉加載更多
- 自定義刷新頁面的樣式
- 自定義加載更多頁面的樣式
- 自定義頭頁面
- 自定義尾頁面
- 支持線性骡湖，grid贱纠，和瀑布流
然后我們一個(gè)一個(gè)的實(shí)現(xiàn)。建議直接下載源碼响蕴，不用gradle谆焊，因?yàn)樗锩嬗幸恍┳约赫故镜牟季治募]有放在包里面。
準(zhǔn)備工作
最開始我們肯定還是需要引入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里面申明他罐孝，給他一個(gè)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));
}
}
}
因?yàn)镮Recycle'rView是繼承自RecyclerView的懈息，所以擁有RecyclerView的所有功能肾档。我們看到除了設(shè)置adapter的時(shí)候摹恰，使用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);
}
}
}
設(shè)置下拉刷新
三個(gè)步驟：
1. 我們需要一個(gè)繼承自RefreshTrigger的view來作為我們的刷新時(shí)候的頁面
2.開啟我們的刷新功能
3.設(shè)置刷新的函數(shù)返回函數(shù)
繼承自RefreshTrigger的view
我們重寫一個(gè)view作為刷新的頁面
看到里面很多周期函數(shù)俗慈，這些都是我們?cè)谒⑿聲r(shí)候的姑宽，頁面狀態(tài)函數(shù)，我們可以在里面配置我們需要的樣式以及動(dòng)畫闺阱。
開啟我們的刷新功能
view.setRefreshEnabled(true);
設(shè)置刷新的函數(shù)返回函數(shù)
view.setRefreshHeaderView(R.layout.head_view);
然后重寫刷新的回調(diào)函數(shù)炮车，這里面寫的是我們的刷新完成后做的事情。我們?cè)O(shè)置為兩秒后結(jié)束刷新狀態(tài)，用于模擬耗時(shí)間的操作瘦穆。
@Override
public void onRefresh() {
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
iRecyclerView.setRefreshing(false);
}
},2000);
}
看一下我們現(xiàn)在的activity長(zhǎng)什么樣子
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里面就一個(gè)東西纪隙，我就是我們自己的設(shè)置的HeadView
現(xiàn)在我們來運(yùn)行一下，看一下效果扛或。
有一個(gè)刷新的基本的樣子哈绵咱，然后案例里面給我們提供了一種樣式，我們可以看一下熙兔。也就是我們平常常見的刷新的樣式悲伶。
設(shè)置加載更多
使用了下拉刷新了之后，這個(gè)就很簡(jiǎn)單了住涉。
三個(gè)步驟
- 用一個(gè)view麸锉，來作為我們的加載更多的itemview,當(dāng)讓也可以選擇不要
- 開啟我們的加載更多功能
- 設(shè)置刷新的函數(shù)返回函數(shù)
footerView
這個(gè)view我們可以隨意寫，我這里直接使用的刷新的view
開啟加載更多功能
view.setLoadMoreEnabled(true);
重寫事件函數(shù)
@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();
}
記得因?yàn)槲覀冃枰獙?shí)時(shí)更新我們footer的狀態(tài)舆声，所以我們需要獲取到這個(gè)對(duì)象花沉。然后在響應(yīng)事件函數(shù)中動(dòng)態(tài)設(shè)置他。
下面是展示的效果
添加頭節(jié)點(diǎn)和尾節(jié)點(diǎn)
這個(gè)就很簡(jiǎn)單和方便了纳寂，在我們已經(jīng)設(shè)置好我們的頭節(jié)點(diǎn)和尾節(jié)點(diǎn)的view之后主穗，直接添加即可。
addHeaderView(View headerView)
addFooterView(View headerView)
栗子
private void initHeadAndFooter() {
TextView textView = new TextView(this);
textView.setText("我是頭結(jié)點(diǎn)");
textView.setTextSize(30);
view.addHeaderView(textView);
TextView textView2 = new TextView(this);
textView2.setText("我是尾結(jié)點(diǎn)");
textView2.setTextSize(30);
view.addFooterView(textView2);
}
效果
然后今天的栗子就是這些毙芜，下一章我們將從源碼的角度來分析他忽媒。。腋粥。
未完待續(xù)晦雨。。隘冲。
