Andorid UI篇——RecyclerView
上一篇文章简单的介绍了ListView,如果没有一些技巧来提升它的运行效率,它的性能就会非常差,并且它不能实现横向的滚动。
为此,Android提供了一个更强大的滚动控件——RecyclerView。
RecyclerView的基本用法
由于RecyclerView是新增的控件,所以他要在build.gradle中添加相应的依赖库:
在app/build.gradle中的dependencies闭包中添加如下内容(写博客时所用的依赖库,可能由于时间问题依赖库不同):
implementation 'androidx.recyclerview:recyclerview:1.1.0’
更新同步后,我们修改activity_main.xml中的代码:
<?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">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
这里我们做出上一篇文章葫芦兄弟的同样效果,我们把Brothers类和brothers_item.xml以及用到的图片也复制过来:
Brothers类:
package com.example.listviewtest;
public class Brothers {
private String name;
private int imageId;
public Brothers(String name,int imageId){
this.imageId = imageId;
this.name = name;
}
public String getName() {
return name;
}
public int getImageId() {
return imageId;
}
}
brothers_item.xml:
<?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="wrap_content">
<ImageView
android:id="@+id/brothers_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:id="@+id/brothers_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:textSize="18sp"/>
</LinearLayout>
接下来我们同样需要为RecyclerView准备一个适配器,新建一个BrothersAdapter类,让它继承RecyclerView.Adapter,并将泛型指定为BrothersAdapter.ViewHolder。BrotherAdapter代码如下:
package com.example.listviewtest;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import java.util.List;
public class BrothersAdapter extends RecyclerView.Adapter<BrothersAdapter.ViewHolder> {
private List<Brothers> mBrotherList;
static class ViewHolder extends RecyclerView.ViewHolder{
ImageView brotherImage;
TextView brotherName;
public ViewHolder(View view){
super(view);
brotherImage = view.findViewById(R.id.brothers_image);
brotherName = view.findViewById(R.id.brothers_name);
}
}
public BrothersAdapter(List<Brothers> brothersList){
mBrotherList = brothersList;
}
@NonNull
@Override
public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.brothers_item,parent,false);
ViewHolder viewHolder = new ViewHolder(view);
return viewHolder;
}
@Override
public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
Brothers brother = mBrotherList.get(position);
holder.brotherName.setText(brother.getName());
holder.brotherImage.setImageResource(brother.getImageId());
}
@Override
public int getItemCount() {
return mBrotherList.size();
}
}
这段代码比起ListView更容易让人理解,我们在内部定义了一个ViewHolder类继承于RecyclerView.ViewHolder。然后在这个ViewHolder的构造函数中传入RecyclerView子项的最外层布局,这样我们就可以通过findViewById()方法找到对应的控件实例。
这里我们的BrothersAdapter继承于RecyclerView.Adapter,所以我们必须重写三个方法,onCreateViewHolder(),onBindViewHolder(),getItemCount(),这三个方法分别对应的作用是:创建ViewHolder实例,对 RecyclerView中的子项进行数据赋值,告知RecyclerView共有多少子项。
这样我们适配器就做好了,接下来我们修改MainActivity中的代码:
package com.example.listviewtest;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import android.os.Bundle;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private List<Brothers> brothersList = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initBrothers();
RecyclerView recyclerView = findViewById(R.id.recycler_view);
RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(this);
recyclerView.setLayoutManager(layoutManager);
BrothersAdapter brothersAdapter = new BrothersAdapter(brothersList);
recyclerView.setAdapter(brothersAdapter);
}
private void initBrothers(){
Brothers dawa = new Brothers("我是大娃",R.drawable.dawa);
brothersList.add(dawa);
Brothers erwa = new Brothers("我是二娃",R.drawable.erwa);
brothersList.add(erwa);
Brothers sanwa = new Brothers("我是三娃",R.drawable.sanwa);
brothersList.add(sanwa);
Brothers siwa = new Brothers("我是四娃",R.drawable.siwa);
brothersList.add(siwa);
Brothers wuwa = new Brothers("我是五娃",R.drawable.wuwa);
brothersList.add(wuwa);
Brothers liuwa = new Brothers("我是六娃",R.drawable.liuwa);
brothersList.add(liuwa);
Brothers qiwa = new Brothers("我是七娃",R.drawable.qiwa);
brothersList.add(qiwa);
}
}
这里的LayoutManager用于指定RecyclerView的布局方式,这里我们默认用的是线性布局,也就是竖向滑动。
最后我们看一下效果吧:
![](https://i-blog.csdnimg.cn/blog_migrate/dfb38204f69668dafddb1e7ff65ec0ae.png)
实现横向滚动
RecyclerView能做到ListView做不到的横向滚动。
首先我们修改brothers_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="wrap_content">
<ImageView
android:id="@+id/brothers_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"/>
<TextView
android:id="@+id/brothers_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:textSize="18sp"
android:layout_marginTop="10dp" />
</LinearLayout>
接下来修改MainActivity中的代码:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initBrothers();
RecyclerView recyclerView = findViewById(R.id.recycler_view);
LinearLayoutManager layoutManager = new LinearLayoutManager(this);
layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
recyclerView.setLayoutManager(layoutManager);
BrothersAdapter brothersAdapter = new BrothersAdapter(brothersList);
recyclerView.setAdapter(brothersAdapter);
}
我们在layoutManager实例中设置了滚动方向。重新运行程序,如图所示:
![](https://i-blog.csdnimg.cn/blog_migrate/7e35ac6c9b00aabdf1ff0508549aefcf.png)
RecyclerView的点击事件
如果我们为RecyclerView设置点击事件,我们不能像ListView一样直接利用setOnItemCliclListener()方法注册监听器,而是需要我们为每一个子项注册点击事件,这要比ListView麻烦一点。
RecyclerView直接摒弃了子项点击事件的监听器,所有的点击事件都由具体的View去注册。
package com.example.listviewtest;
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 androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import java.util.List;
public class BrothersAdapter extends RecyclerView.Adapter<BrothersAdapter.ViewHolder> {
private List<Brothers> mBrotherList;
static class ViewHolder extends RecyclerView.ViewHolder{
View brotherView;
ImageView brotherImage;
TextView brotherName;
public ViewHolder(View view){
super(view);
brotherView = view;
brotherImage = view.findViewById(R.id.brothers_image);
brotherName = view.findViewById(R.id.brothers_name);
}
}
public BrothersAdapter(List<Brothers> brothersList){
mBrotherList = brothersList;
}
@NonNull
@Override
public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.brothers_item,parent,false);
final ViewHolder viewHolder = new ViewHolder(view);
viewHolder.brotherView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
int position = viewHolder.getAdapterPosition();
Brothers brothers = mBrotherList.get(position);
Toast.makeText(view.getContext(),"You clicked view "+ brothers.getName(),Toast.LENGTH_SHORT).show();
}
});
viewHolder.brotherImage.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
int position = viewHolder.getAdapterPosition();
Brothers brothers = mBrotherList.get(position);
Toast.makeText(view.getContext(),"You clicked image "+brothers.getName(),Toast.LENGTH_SHORT).show();
}
});
return viewHolder;
}
@Override
public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
Brothers brother = mBrotherList.get(position);
holder.brotherName.setText(brother.getName());
holder.brotherImage.setImageResource(brother.getImageId());
}
@Override
public int getItemCount() {
return mBrotherList.size();
}
}
这里我们分别为最外层的布局和ImageView注册了点击事件,我们先通过position拿到了Brothers实例,再利用Toast分别弹出两种不同的提示内容。