之前總結(jié)了ListView的用法（鏈接：http://www.reibang.com/p/0c30f59e0280），但是ListView的擴展性不夠好阱持，只能實現(xiàn)數(shù)據(jù)縱向滾動的效果，如果我們想實現(xiàn)橫向滾動的話逃顶，ListView是做不到的搞挣。因此炫七，我們需要一個更強大的滾動控件RecyclerView差牛。
RecyclerView的基本用法
RecyclerView是屬于新增的控件命锄，為了讓RecyclerView在所有Android版本上都能使用，Android團隊將其定義在了support庫當(dāng)中多糠。因此累舷，想要使用RecyclerView 控件浩考，首先需要在項目的app/build.gradle中添加相應(yīng)的依賴庫才行
- 打開app/build.gradle文件夹孔，在dependenceies閉包中添加如下內(nèi)容：
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation 'com.android.support:appcompat-v7:28.0.0'
implementation 'com.android.support.constraint:constraint-layout:1.1.3'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'com.android.support.test:runner:1.0.2'
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
// 添加的依賴庫
implementation'com.android.support:recyclerview-v7:28.0.0'
}
添加之后記得要點擊一下Sync Now來進行同步
- 修改activity_main中的代碼如下所示：
<?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"
>
<!-- 因為RecyclerView并不是內(nèi)置在系統(tǒng)SDK當(dāng)中的，所以需要把完整的包路徑寫出來 -->
<android.support.v7.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
在布局中加入RecyclerView控件，為其制定一個id搭伤，并將寬度和高度都設(shè)置為match_parent只怎，這樣RecyclerView就可以占滿整個布局空間
- 為了實現(xiàn)和ListView一樣的效果，我們將之前的Fruit類和fruit_item代碼復(fù)制過來
Fruit類代碼：
public class Fruit {
private String name;
private int imageId;
public Fruit(String name,int imageId){
this.name=name;
this.imageId=imageId;
}
public String getName(){
return name;
}
public int getImageId(){
return imageId;
}
}
fruit_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="50dp">
<ImageView
android:id="@+id/fruit_image"
android:layout_width="50dp"
android:layout_height="50dp" />
<TextView
android:id="@+id/fruit_name"
android:layout_width="100dp"
android:layout_height="50dp"
android:layout_marginLeft="10dp"
/>
</LinearLayout>
這里我們需要注意怜俐，fruit_item中的LinearLayout的高度指定了為50dp身堡，運行的效果是這樣的：
image.png
如果我們將高度指定為match_parent，則得到的效果如下：
image.png
這是為什么呢拍鲤？這是因為贴谎，如果將高度指定為match_parent，那么一個fruit_item就會占滿了整個布局的空間季稳，因此我們就只能看到一個選項
- 接下來需要為RecyclerView準(zhǔn)備一個適配器FruitAdapter擅这，讓這個適配器繼承自RecyclerView.Adapter，并將泛型指定為FruitAdapter.ViewHolder景鼠。其中ViewHolder是我們在FruitAdapter中定義的一個內(nèi)部類仲翎，代碼如下所示：
package com.example.apple.recyclerview;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.List;
public class FruitAdapter extends RecyclerView.Adapter<FruitAdapter.ViewHolder> {
private List<Fruit> mFruitList;
// 定義一個內(nèi)部類ViewHolder，繼承自RecyclerView.ViewHolder铛漓。然后ViewHolder的構(gòu)造函數(shù)中要傳入一個
// view參數(shù)溯香，這個參數(shù)通常就是RecyclerView子項的最外層布局，那么我們就可以通過findViewById（）方法
// 來獲取到布局中的ImageView等的實例了
static class ViewHolder extends RecyclerView.ViewHolder{
ImageView fruitImage;
TextView fruitName;
public ViewHolder(View view){
super(view);
fruitImage=view.findViewById(R.id.fruit_image);
fruitName=view.findViewById(R.id.fruit_name);
}
}
// 用于把要展示的數(shù)據(jù)傳進來 浓恶，并賦值給一個全局變量mFruitList玫坛，后續(xù)的操作都將在這個數(shù)據(jù)源的基礎(chǔ)上進行
public FruitAdapter(List<Fruit> fruitList){
mFruitList=fruitList;
}
// 用于創(chuàng)建ViewHolder實例，我們在這個方法中將fruit_item布局加載進來包晰，然后創(chuàng)建一個ViewHolder實例昂秃，
// 并把加載出來的布局傳入到構(gòu)造函數(shù)當(dāng)中，最后將ViewHolder的實例返回
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType){
View view=LayoutInflater.from(parent.getContext()).inflate(R.layout.fruit_item,parent,false);
ViewHolder holder=new ViewHolder(view);
return holder;
}
// 用于對RecyclerView子項的數(shù)據(jù)進行賦值的杜窄，會在每個子項被滾動到屏幕內(nèi)的時候執(zhí)行肠骆，這里我們通過position
// 參數(shù)得到當(dāng)前項的Fruit實例，然后再將數(shù)據(jù)設(shè)置到ViewHolder的ImageView和TextView當(dāng)中
@Override
public void onBindViewHolder(ViewHolder holder,int position){
Fruit fruit=mFruitList.get(position);
holder.fruitImage.setImageResource(fruit.getImageId());
holder.fruitName.setText(fruit.getName());
}
// 用于告訴RecyclerView一共有多少子項塞耕，直接返回數(shù)據(jù)源長度
@Override
public int getItemCount(){
return mFruitList.size();
}
}
其中內(nèi)部的函數(shù)的作用均在代碼中有注釋
- 適配器準(zhǔn)備好了之后蚀腿，我們就可以開始使用RecyclerView了，修改MainActivity中的代碼扫外，如下所示：
package com.example.apple.recyclerview;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
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 List<Fruit> fruitList=new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 初始化水果數(shù)據(jù)
initFruits();
RecyclerView recyclerView=findViewById(R.id.recycler_view);
// 創(chuàng)建一個LinearLayoutManager對象莉钙，并把它設(shè)置到RecyclerView當(dāng)中
// LayoutManager用于指定RecyclerView的布局方式，這里是線性布局的意思
LinearLayoutManager layoutManager=new LinearLayoutManager(this);
recyclerView.setLayoutManager(layoutManager);
// 創(chuàng)建FruitAdapter的實例筛谚，并將水果數(shù)據(jù)傳入到FruitAdapter的構(gòu)造函數(shù)中
FruitAdapter adapter=new FruitAdapter(fruitList);
recyclerView.setAdapter(adapter);
}
// 初始化數(shù)據(jù)
private void initFruits(){
for(int i=0;i<10;i++){
Fruit a=new Fruit("a",R.drawable.a);
fruitList.add(a);
Fruit b=new Fruit("B",R.drawable.b);
fruitList.add(b);
Fruit c=new Fruit("C",R.drawable.c);
fruitList.add(c);
Fruit d=new Fruit("D",R.drawable.d);
fruitList.add(d);
}
}
}
現(xiàn)在運行一下程序磁玉，效果如下圖所示：
image.png
可以看到，我們使用RecyclerView實現(xiàn)了和ListView幾乎一模一樣的效果驾讲，雖說代碼量方面并沒有明顯的減少蚊伞，但是邏輯變得更加清晰了席赂。當(dāng)然這只是RecyclerView的基本用法而已，接下來我們就看一看RecyclerView如何實現(xiàn)橫向滾動和瀑布流布局
實現(xiàn)橫向滾動和瀑布流布局
- 要實現(xiàn)橫向滾動的效果时迫，首先要對fruit_item布局進行修改颅停，因為目前這個布局里面的元素是水平排列的，使用于縱向滾動的場景掠拳，而如果要實現(xiàn)橫向滾動的話癞揉，應(yīng)該把fruit_item里的元素改成垂直排列的才比較合理。修改fruit_item中的代碼溺欧，如下所示：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="100dp"
android:layout_height="100dp">
<ImageView
android:id="@+id/fruit_image"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="center_horizontal"
/>
<TextView
android:id="@+id/fruit_name"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="3dp"
android:gravity="center"
/>
</LinearLayout>
可以看到我們把LinearLayout改成豎直方向喊熟，并把寬度設(shè)置為100dp
- 接下來修改MainActivity中的代碼，如下所示：
package com.example.apple.recyclerview;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
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 List<Fruit> fruitList=new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 初始化水果數(shù)據(jù)
initFruits();
RecyclerView recyclerView=findViewById(R.id.recycler_view);
// 創(chuàng)建一個LinearLayoutManager對象姐刁，并把它設(shè)置到RecyclerView當(dāng)中
// LayoutManager用于指定RecyclerView的布局方式逊移，這里是線性布局的意思
LinearLayoutManager layoutManager=new LinearLayoutManager(this);
layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL); //新加入的代碼
recyclerView.setLayoutManager(layoutManager);
// 創(chuàng)建FruitAdapter的實例，并將水果數(shù)據(jù)傳入到FruitAdapter的構(gòu)造函數(shù)中
FruitAdapter adapter=new FruitAdapter(fruitList);
recyclerView.setAdapter(adapter);
}
// 初始化數(shù)據(jù)
private void initFruits(){
for(int i=0;i<10;i++){
Fruit a=new Fruit("a",R.drawable.a);
fruitList.add(a);
Fruit b=new Fruit("B",R.drawable.b);
fruitList.add(b);
Fruit c=new Fruit("C",R.drawable.c);
fruitList.add(c);
Fruit d=new Fruit("D",R.drawable.d);
fruitList.add(d);
}
}
}
MainActivity中只加入了一行代碼龙填，調(diào)用LinearLayoutManager的setOrientation()方法來設(shè)置布局的排列方向胳泉，默認是縱向排列的，我們傳入LinearLayoutManager.HORIZONTAL表示讓布局橫行排列岩遗。重新運行一下程序扇商，效果如下圖所示：
image.png
除了LinearLayoutManager之外，RecyclerView還給我們提供了GridLayoutManager和StaggeredGridLayoutManager兩種內(nèi)置的布局排列方式宿礁。GridLayoutManager用于實現(xiàn)網(wǎng)格布局案铺，StaggeredGridLayoutManager用于實現(xiàn)瀑布流布局。
瀑布流布局
- 下面我們來實現(xiàn)一下瀑布流布局梆靖，首先還是修改一下fruit_item中的代碼控汉，如下所示：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_margin="5dp"
>
<ImageView
android:id="@+id/fruit_image"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="center_horizontal"
/>
<TextView
android:id="@+id/fruit_name"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="3dp"
android:gravity="left"
/>
</LinearLayout>
這里做了幾處小的調(diào)整，首先將LinearLayout的寬度由100dp改成了match_parent返吻，因為瀑布流布局的寬度是根據(jù)布局的列數(shù)來自動適配的姑子，而不是一個固定的值。
- 接著修改MainActivity中的代碼测僵，如下所示：
package com.example.apple.recyclerview;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager;
import java.util.ArrayList;
import java.util.List;
import java.util.Random;
public class MainActivity extends AppCompatActivity {
private List<Fruit> fruitList=new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 初始化水果數(shù)據(jù)
initFruits();
RecyclerView recyclerView=findViewById(R.id.recycler_view);
// 創(chuàng)建一個瀑布流布局對象
StaggeredGridLayoutManager layoutManager=new StaggeredGridLayoutManager(3,StaggeredGridLayoutManager.VERTICAL);
recyclerView.setLayoutManager(layoutManager);
// 創(chuàng)建FruitAdapter的實例街佑，并將水果數(shù)據(jù)傳入到FruitAdapter的構(gòu)造函數(shù)中
FruitAdapter adapter=new FruitAdapter(fruitList);
recyclerView.setAdapter(adapter);
}
// 初始化數(shù)據(jù)
private void initFruits(){
for(int i=0;i<10;i++){
Fruit a=new Fruit(getRandomLengthName("a"),R.drawable.a);
fruitList.add(a);
Fruit b=new Fruit(getRandomLengthName("b"),R.drawable.b);
fruitList.add(b);
Fruit c=new Fruit(getRandomLengthName("c"),R.drawable.c);
fruitList.add(c);
Fruit d=new Fruit(getRandomLengthName("d"),R.drawable.d);
fruitList.add(d);
}
}
private String getRandomLengthName(String name){
Random random=new Random();
int length=random.nextInt(20)+1;
StringBuilder builder=new StringBuilder();
for (int i=0;i<length;i++){
builder.append(name);
}
return builder.toString();
}
}
首先，在onCreate()方法中捍靠，我們創(chuàng)建了一個StaggeredGridLayoutManager的實例沐旨，它的構(gòu)造函數(shù)接收兩個參數(shù)，第一個參數(shù)用于指定布局的列數(shù)榨婆，傳入3表示會把布局分為3列磁携；第二個參數(shù)用于指定布局的排列方向，傳入StaggeredGridLayoutManager.VERTICAL表示會讓布局縱向排列良风，最后再把創(chuàng)建好的實例設(shè)置到RecyclerView當(dāng)中就可以了谊迄。效果如下圖所示：
image.png
看起來效果還是不錯的闷供，接下來繼續(xù)看看RecyclerView的點擊事件
RecyclerView的點擊事件
不同于ListView，RecyclerView并沒有提供類似于setOnItemClickListener()這樣的注冊監(jiān)聽器方法鳞上，而是需要我們自己給子項具體的View去注冊點擊事件。下面我們就來看一看如何在RecyclerView中注冊點擊事件
- 修改FruitAdapter中的代碼吊档，如下所示：
package com.example.apple.recyclerview;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
import java.util.List;
public class FruitAdapter extends RecyclerView.Adapter<FruitAdapter.ViewHolder> {
private List<Fruit> mFruitList;
// 定義一個內(nèi)部類ViewHolder篙议，繼承自RecyclerView.ViewHolder。然后ViewHolder的構(gòu)造函數(shù)中要傳入一個
// view參數(shù)怠硼，這個參數(shù)通常就是RecyclerView子項的最外層布局鬼贱，那么我們就可以通過findViewById（）方法
// 來獲取到布局中的ImageView等的實例了
static class ViewHolder extends RecyclerView.ViewHolder{
View fruitView; // 新加
ImageView fruitImage;
TextView fruitName;
public ViewHolder(View view){
super(view);
fruitView=view; // 新加
fruitImage=view.findViewById(R.id.fruit_image);
fruitName=view.findViewById(R.id.fruit_name);
}
}
// 用于把要展示的數(shù)據(jù)傳進來 ，并賦值給一個全局變量mFruitList香璃，后續(xù)的操作都將在這個數(shù)據(jù)源的基礎(chǔ)上進行
public FruitAdapter(List<Fruit> fruitList){
mFruitList=fruitList;
}
// 用于創(chuàng)建ViewHolder實例这难，我們在這個方法中將fruit_item布局加載進來，然后創(chuàng)建一個ViewHolder實例葡秒，
// 并把加載出來的布局傳入到構(gòu)造函數(shù)當(dāng)中姻乓，最后將ViewHolder的實例返回
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType){
View view=LayoutInflater.from(parent.getContext()).inflate(R.layout.fruit_item,parent,false);
final ViewHolder holder=new ViewHolder(view);
holder.fruitView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
int position=holder.getAdapterPosition();
Fruit fruit=mFruitList.get(position);
Toast.makeText(v.getContext(),"you clicked view"+fruit.getName(),Toast.LENGTH_SHORT).show();
}
});
holder.fruitImage.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
int position=holder.getAdapterPosition();
Fruit fruit=mFruitList.get(position);
Toast.makeText(v.getContext(),"you clicked image"+fruit.getName(),Toast.LENGTH_SHORT).show();
}
});
return holder;
}
// 用于對RecyclerView子項的數(shù)據(jù)進行賦值的，會在每個子項被滾動到屏幕內(nèi)的時候執(zhí)行眯牧，這里我們通過position
// 參數(shù)得到當(dāng)前項的Fruit實例蹋岩，然后再將數(shù)據(jù)設(shè)置到ViewHolder的ImageView和TextView當(dāng)中
@Override
public void onBindViewHolder(ViewHolder holder,int position){
Fruit fruit=mFruitList.get(position);
holder.fruitImage.setImageResource(fruit.getImageId());
holder.fruitName.setText(fruit.getName());
}
// 用于告訴RecyclerView一共有多少子項，直接返回數(shù)據(jù)源長度
@Override
public int getItemCount(){
return mFruitList.size();
}
}
我們先是修改了ViewHolder,在ViewHolder中添加了fruitView變量來保存子項最外層布局的實例学少，然后在onCreateViewholder()方法中注冊點擊事件就可以了剪个。這里分別為最外層布局和ImageView都注冊了點擊事件。我們在兩個點擊事件中先獲取了用戶點擊的position版确，然后通過position拿到相應(yīng)的Fruit實例扣囊，再使用Toast分別彈出兩種不同的內(nèi)容以示區(qū)別。
注意：在ListView中绒疗，注冊監(jiān)聽器是在MainActivity中侵歇；而在RecyclerView中，注冊事件是在適配器FruitAdapter中注冊
文章來源：《第一行代碼第2版》
