RecyclerView学习笔记
一、RecyclerView的定义
在以前的开发中，我们经常使用ListView来实现列表的功能。现在Google为我们提供了一个更强大的滚动控件RecyclerView，他不仅可以实现ListView的功能，还优化了ListView的效率问题。RecyclerView还支持横向滚动和瀑布流，所以现在Google官方更加推荐使用RecyclerView进行开发。
二、RecyclerView的用法
-
打开Android Studio的project structrue设置，在dependencies的闭包中导入RecyclerView的依赖库。
image.png 在布局文件中添加以下代码加入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/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
- 创建数据源Sport
public class Sport {
private String name;
private int imageId;
public Sport(String name, int imageId) {
this.name = name;
this.imageId = imageId;
}
// 获取项目名称
public String getName() {
return name;
}
// 获取项目图片ID
public int getImageId() {
return imageId;
}
}
- 为RecyclerView准备一个适配器，新建SportAdapter类，继承自RecyclerView.adapter，适配器的泛型指定为内部类SportAdapter.ViewHolder。
public class SportAdapter extends RecyclerView.Adapter<SportAdapter.ViewHolder> {
private List<Sport> sportList;
// 静态内部类ViewHolder保存控件
static class ViewHolder extends RecyclerView.ViewHolder {
ImageView sportImage;
TextView sportName;
// item为RecyclerView子项的外层布局
public ViewHolder(View itemView) {
super(itemView);
sportImage = itemView.findViewById(R.id.sport_image);
sportName = itemView.findViewById(R.id.sport_name);
}
}
// 传入数据源sportList赋值给全局变量
public SportAdapter(List<Sport> sportList) {
this.sportList = sportList;
}
// 创建ViewHolder实例,先加载布局，再把布局传入viweHolder的实例中
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext())
.inflate(R.layout.sport_item, parent, false);
ViewHolder holder = new ViewHolder(view);
return holder;
}
// 通过position获取当前实例，对于RecyclerView子项的数据进行赋值
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
Sport sport = sportList.get(position);
holder.sportImage.setImageResource(sport.getImageId());
holder.sportName.setText(sport.getName());
}
// RecyclerView的子项个数
@Override
public int getItemCount() {
return sportList.size();
}
}
- 修改MainActivity的代码
public class MainActivity extends AppCompatActivity {
private List<Sport> sportList = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 初始化数据
initSport();
RecyclerView recyclerView = findViewById(R.id.recycler_view);
// 为RecyclerView指定线性布局
LinearLayoutManager layoutManager = new LinearLayoutManager(this);
recyclerView.setLayoutManager(layoutManager);
// 设置适配器
SportAdapter adapter = new SportAdapter(sportList);
recyclerView.setAdapter(adapter);
}
private void initSport() {
for (int i = 0; i < 2; i++) {
Sport archer = new Sport("archer", R.drawable.archer);
sportList.add(archer);
Sport athlete = new Sport("athlete", R.drawable.athlete);
sportList.add(athlete);
Sport badminton = new Sport("badminton", R.drawable.badminton);
sportList.add(badminton);
Sport bicycle = new Sport("bicycle", R.drawable.bicycle);
sportList.add(bicycle);
Sport diving = new Sport("diving", R.drawable.diving);
sportList.add(diving);
Sport fisher = new Sport("fisher", R.drawable.fisher);
sportList.add(fisher);
Sport pingpong = new Sport("pingpong", R.drawable.pingpong);
sportList.add(pingpong);
Sport swimming = new Sport("swimming", R.drawable.swimming);
sportList.add(swimming);
Sport volleyball = new Sport("volleyball", R.drawable.volleyball);
sportList.add(volleyball);
}
}
}
这样就实现了RecyclerView的纵向滚动功能，效果图如下：
image.png
三、实现横向滚动和瀑布流
实现横向滚动的效果
- 修改sport_item布局文件代码,让图片和文字纵向排列,指定宽度让每个item一样大。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:showDividers="middle">
<ImageView
android:id="@+id/sport_image"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_gravity="center_horizontal"/>
<TextView
android:id="@+id/sport_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp" />
</LinearLayout>
- 修改MainActivity，在layoutManager中传入LinearLayoutManager.HORIZONTAL
public class MainActivity extends AppCompatActivity {
private List<Sport> sportList = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
... ...
// 为RecyclerView指定线性布局
LinearLayoutManager layoutManager = new LinearLayoutManager(this);
layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
recyclerView.setLayoutManager(layoutManager);
... ...
}
... ...
}
}
这样就实现了RecyclerView的横向滚动功能，效果图如下：
image.png
RecyclerView因为提供了LayoutManager,LayoutManager制定了一套可拓展的布局接口，子类（例如LinearLayoutManager）只要按照接口来实现就可以呈现不同的效果。
除了LinearLayoutManager之外，RecyclerView还提供了GirdLayouManager实现网格布局和StaggeredGridLayoutManager实现瀑布流布局。
实现瀑布流的效果
- 修改sport_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="wrap_content"
android:layout_margin="5dp">
<ImageView
android:id="@+id/sport_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"/>
<TextView
android:id="@+id/sport_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_marginTop="10dp" />
</LinearLayout>
- 修改MainActivity，指定RecyclerView的布局为StaggeredGrildLayout，布局分为4列。设置getRandomLengthName()来使每个item的文字段不一样长，方便看出瀑布流效果。
public class MainActivity extends AppCompatActivity {
private List<Sport> sportList = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 初始化数据
initSport();
RecyclerView recyclerView = findViewById(R.id.recycler_view);
// 为RecyclerView指定线性布局
// LinearLayoutManager layoutManager = new LinearLayoutManager(this);
// layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
// 为RecyclerView指定4列的瀑布流布局
StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(
4, StaggeredGridLayoutManager.VERTICAL);
recyclerView.setLayoutManager(layoutManager);
// 设置适配器
SportAdapter adapter = new SportAdapter(sportList);
recyclerView.setAdapter(adapter);
}
// 写死的本地数据
private void initSport() {
for (int i = 0; i < 3; i++) {
Sport archer = new Sport(getRamdomLengthName("archer"), R.drawable.archer);
sportList.add(archer);
... ...
Sport volleyball = new Sport(getRamdomLengthName("volleyball"), R.drawable.volleyball);
sportList.add(volleyball);
}
}
// 把名称copy随机次形成一段文字，使每个item不一样长
private String getRamdomLengthName(String sportName) {
Random random = new Random();
int length = random.nextInt(15) + 1;
StringBuilder builder = new StringBuilder();
for (int i = 0; i < length; i++) {
builder.append(sportName);
}
return builder.toString();
}
}
这样就实现了RecyclerView的瀑布流布局，效果图如下：
image.png
四、RecyclerView的点击事件
一般来说，无论是ListView还是RecyclerView每个item都应该有点击事件，例如我们的新闻列表，点击进去应该都有新闻内容。RecyclerView没有像ListView一样的API去setOnItemClickListener()，点击事件由View去注册，但也更加灵活了。
- 修改apapter的代码，在ViewHolder中添加view变量来保存item布局实例，然后在onCreateViewHolder()中为item和image分别注册不同的点击事件，由于image是item布局的子View，所以当我们点击事件的时候，image会拦截并处理点击事件，事件消耗完之后父View item的点击事件就不会响应。
public class SportAdapter extends RecyclerView.Adapter<SportAdapter.ViewHolder> {
private List<Sport> sportList;
// 静态内部类ViewHolder保存控件
static class ViewHolder extends RecyclerView.ViewHolder {
View sportView;
public ImageView getSportImage() {
return sportImage;
}
ImageView sportImage;
TextView sportName;
// item为RecyclerView子项的外层布局
public ViewHolder(View itemView) {
super(itemView);
sportView = itemView;
sportImage = itemView.findViewById(R.id.sport_image);
sportName = itemView.findViewById(R.id.sport_name);
}
}
// 传入数据源sportList赋值给全局变量
public SportAdapter(List<Sport> sportList) {
this.sportList = sportList;
}
// 创建ViewHolder实例,先加载布局，再把布局传入viweHolder的实例中
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext())
.inflate(R.layout.sport_item, parent, false);
final ViewHolder holder = new ViewHolder(view);
// 设置item项的点击事件
holder.sportView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
int position = holder.getAdapterPosition();
Sport sport = sportList.get(position);
Toast.makeText(view.getContext(), "you click item " + sport.getName(),Toast.LENGTH_SHORT).show();
}
});
// 设置image的点击事件
holder.sportImage.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
int position = holder.getAdapterPosition();
Sport sport = sportList.get(position);
Toast.makeText(view.getContext(), "you click image " + sport.getName(),Toast.LENGTH_SHORT).show();
}
});
return holder;
}
... ...
}
