1.基本使用
1.1 先准备一个model
public class User {
public User(String userName, int age, String address) {
this.userName = userName;
this.age = age;
this.imageUrl = address;
}
String userName;
int age;
String imageUrl;
public String getUserName() {
return userName;
}
public void setUserName(String userName) {
this.userName = userName;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getImageUrl() {
return imageUrl;
}
public void setImageUrl(String imageUrl) {
this.imageUrl = imageUrl;
}
}
1.2 定义每个item的布局
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="150dp"
android:layout_height="match_parent"
android:background="#ccc"
android:padding="10dp">
<TextView
android:id="@+id/leftTv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true" />
<TextView
android:id="@+id/rightTv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
tools:ignore="RelativeOverlap" />
<ImageView
android:id="@+id/image"
android:layout_below="@id/leftTv"
android:scaleType="fitCenter"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
1.3 写好给RecyclerView使用的Adapter
public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> {
private final List<User> mList;
private final Context mContext;
private final LayoutInflater mInflater;
// constructor
public RecyclerViewAdapter(List<User> list, Context context, LayoutInflater inflater) {
this.mList = list;
this.mContext = context;
this.mInflater = inflater;
}
/**
* 创建条目ViewHolder
*
* @param parent RecyclerView
* @param viewType view的类型可以用来显示多种列表布局
* @return recyclerview中单个的item
*/
@NonNull
@Override
public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
// 创建item
View itemView = mInflater.inflate(R.layout.recycler_view_item, parent, false);
// 创建ViewHolder
return new ViewHolder(itemView);
}
@Override
public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
// 将数据填充到ViewHolder
User user = mList.get(position);
holder.mLeftTv.setText(user.getUserName());
holder.mRightTv.setText(String.valueOf(user.getAge()));
}
@Override
public int getItemCount() {
return mList.size();
}
public static class ViewHolder extends RecyclerView.ViewHolder {
public TextView mLeftTv;
public TextView mRightTv;
public ImageView mImage;
public ViewHolder(@NonNull View itemView) {
super(itemView);
mLeftTv = itemView.findViewById(R.id.leftTv);
mRightTv = itemView.findViewById(R.id.rightTv);
mImage = itemView.findViewById(R.id.image);
}
}
}
1.4 使用RecyclerView
在测试Activity中添加如下代码
RecyclerView recyclerView = findViewById(R.id.recycler);
List<User> users = new ArrayList<>();
for (int i = 0; i < 100; i++) {
users.add(new User("hjcai" + i, i, "http://goo.gl/gEgYUd"));
}
RecyclerViewAdapter adapter = new RecyclerViewAdapter(users, this, this.getLayoutInflater());
LinearLayoutManager layoutManager = new LinearLayoutManager(this);
layoutManager.setOrientation(RecyclerView.VERTICAL);
// 必须指定LayoutManager
recyclerView.setLayoutManager(layoutManager);
// recyclerView.setLayoutManager(new GridLayoutManager(this,2));
recyclerView.setAdapter(adapter);
2.使用Glide加载图片
2.1 添加权限
<uses-permission android:name="android.permission.INTERNET" />
如果是7.0以上 需要动态添加权限
2.2 添加gradle依赖
implementation 'com.github.bumptech.glide:glide:4.12.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.12.0'
2.3 显示图片
在Adapter onBindViewHolder中添加如下代码
// 加载图片
Glide.with(mContext).load(user.getImageUrl())
.placeholder(R.mipmap.ic_launcher)
.centerCrop()
.into(holder.mImage);
3.使用自定义分割线
3.1 自定义分割线
首先需要创建自定义分割线 注意这里的分割线只给LinearLayoutManager的Recycler View使用 如果要用在GridLayoutManager上 可以参考并写出另外的自定义分割线 该自定义分割线适用于横着的和竖着的分割线,支持纯色的分割线和使用Drawable资源的分割线
如果使用Drawable类型的分割线并且横着的和竖着的分割线差异较大 则需要分别定义drawable
/**
* Created by hjcai on 2021/5/14.
* 注意:该分割线不算在recycler view item总高度中
* 如 假设Recycler View为横向
* 我们设置每个item宽度100dp 如果ItemDecoration的宽度2dp
* 那么Recycler View item总宽度其实为102dp
*/
public class RecyclerViewItemDecoration extends RecyclerView.ItemDecoration {
private final Paint mPaint;
private final int mDividerHeightOrWidth;
private final int mOrientation;
private Drawable mDividerDrawable;
public RecyclerViewItemDecoration(Drawable dividerDrawable, int orientation) {
mOrientation = orientation;
mDividerDrawable = dividerDrawable;
mDividerHeightOrWidth = mOrientation == RecyclerView.VERTICAL ? dividerDrawable.getIntrinsicHeight() : dividerDrawable.getIntrinsicWidth();
mPaint = new Paint();
mPaint.setAntiAlias(true);
}
public RecyclerViewItemDecoration(int color, int dividerHeightOrWidth, int orientation) {
mOrientation = orientation;
mDividerHeightOrWidth = dividerHeightOrWidth;
mPaint = new Paint();
mPaint.setColor(color);
mPaint.setAntiAlias(true);
}
@Override
public void onDraw(@NonNull Canvas c, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
super.onDraw(c, parent, state);
if (mDividerDrawable != null) {
drawDividerByDrawable(c, parent);
} else {
drawDividerByColor(c, parent);
}
}
private void drawDividerByColor(Canvas c, RecyclerView parent) {
int childCount = parent.getChildCount();
// 获取需要绘制的区域
Rect rect = new Rect();
if (mOrientation == RecyclerView.VERTICAL) {
// left right取自recycler view
rect.left = parent.getPaddingLeft();
rect.right = parent.getMeasuredWidth() - parent.getPaddingRight();
for (int i = 0; i < childCount; i++) {
View childView = parent.getChildAt(i);
rect.top = childView.getBottom();
rect.bottom = rect.top + mDividerHeightOrWidth;
// 直接利用Canvas去绘制一个矩形 在留出来的地方
c.drawRect(rect, mPaint);
}
} else {
// top bottom取自recycler view
rect.top = parent.getPaddingTop();
rect.bottom = parent.getMeasuredHeight() - parent.getPaddingBottom();
for (int i = 0; i < childCount; i++) {
View childView = parent.getChildAt(i);
rect.left = childView.getRight();
rect.right = rect.left + mDividerHeightOrWidth;
// 直接利用Canvas去绘制一个矩形 在留出来的地方
c.drawRect(rect, mPaint);
}
}
}
private void drawDividerByDrawable(Canvas c, RecyclerView parent) {
int childCount = parent.getChildCount();
// 获取需要绘制的区域
Rect rect = new Rect();
if (mOrientation == RecyclerView.VERTICAL) {
// left right取自recycler view
rect.left = parent.getPaddingLeft();
rect.right = parent.getMeasuredWidth() - parent.getPaddingRight();
for (int i = 0; i < childCount; i++) {
View childView = parent.getChildAt(i);
rect.top = childView.getBottom();
rect.bottom = rect.top + mDividerHeightOrWidth;
// 直接利用Canvas去绘制一个矩形 在留出来的地方
mDividerDrawable.setBounds(rect);
mDividerDrawable.draw(c);
}
} else {
// top bottom取自recycler view
rect.top = parent.getPaddingTop();
rect.bottom = parent.getMeasuredHeight() - parent.getPaddingBottom();
for (int i = 0; i < childCount; i++) {
View childView = parent.getChildAt(i);
rect.left = childView.getRight();
rect.right = rect.left + mDividerHeightOrWidth;
// 直接利用Canvas去绘制一个矩形 在留出来的地方
mDividerDrawable.setBounds(rect);
mDividerDrawable.draw(c);
}
}
}
@Override
public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
super.getItemOffsets(outRect, view, parent, state);
if (mOrientation == RecyclerView.VERTICAL) {
outRect.bottom += mDividerHeightOrWidth;
} else {
outRect.right += mDividerHeightOrWidth;
}
}
}
3.2 使用drawable的分割线
如横着的分割线
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:height="5dp"
android:gravity="bottom|right">
<shape android:shape="rectangle">
<solid android:color="#678" />
</shape>
</item>
</layer-list>
竖着的分割线
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<size android:width="5dp" />
<gradient
android:angle="90"
android:startColor="@color/black"
android:centerColor="#f00"
android:endColor="#fff"
/>
</shape>
3.3 应用到RecyclerView上
在setAdapter附近添加如下代码
recyclerView.addItemDecoration(new RecyclerViewItemDecoration(ContextCompat.getDrawable(this, R.drawable.recycler_view_divider), layoutManager.getOrientation()));
4.自己添加点击事件
recyclerView本身不直接支持点击事件 因此我们需要利用Adapter给出回调
需要在Adapter下给出如下定义
public void setItemClickListener(OnItemClickListener itemClickListener) {
this.mItemClickListener = itemClickListener;
}
public interface OnItemClickListener {
public void onItemClick(int position,ViewHolder holder);
}
public OnItemClickListener mItemClickListener;
@Override
public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
// 将数据填充到ViewHolder
User user = mList.get(position);
holder.mLeftTv.setText(user.getUserName());
holder.mRightTv.setText(String.valueOf(user.getAge()));
// 添加点击事件
if(mItemClickListener != null){
holder.itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mItemClickListener.onItemClick(position,holder);
}
});
}
// 加载图片
Glide.with(mContext).load(user.getImageUrl())
.placeholder(R.mipmap.ic_launcher)
.centerCrop()
.into(holder.mImage);
}
最后在adapter中设置点击事件
adapter.setItemClickListener((position, holder) -> Toast.makeText(MainActivity.this, holder.mLeftTv.getText().toString() + " " + position, Toast.LENGTH_SHORT).show());
最后给出Activity和Adapter的完整代码
/**
* Created by hjcai on 2021/5/13.
*/
public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> {
private final List<User> mList;
private final Context mContext;
private final LayoutInflater mInflater;
public OnItemClickListener mItemClickListener;
// constructor
public RecyclerViewAdapter(List<User> list, Context context, LayoutInflater inflater) {
this.mList = list;
this.mContext = context;
this.mInflater = inflater;
}
/**
* 创建条目ViewHolder
*
* @param parent RecyclerView
* @param viewType view的类型可以用来显示多种列表布局
* @return recyclerview中单个的item
*/
@NonNull
@Override
public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
// 创建item
View itemView = mInflater.inflate(R.layout.recycler_view_item, parent, false);
// 创建ViewHolder
return new ViewHolder(itemView);
}
@Override
public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
// 将数据填充到ViewHolder
User user = mList.get(position);
holder.mLeftTv.setText(user.getUserName());
holder.mRightTv.setText(String.valueOf(user.getAge()));
if(mItemClickListener != null){
holder.itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mItemClickListener.onItemClick(position,holder);
}
});
}
// 加载图片
Glide.with(mContext).load(user.getImageUrl())
.placeholder(R.mipmap.ic_launcher)
.centerCrop()
.into(holder.mImage);
}
@Override
public int getItemCount() {
return mList.size();
}
public static class ViewHolder extends RecyclerView.ViewHolder {
public TextView mLeftTv;
public TextView mRightTv;
public ImageView mImage;
public ViewHolder(@NonNull View itemView) {
super(itemView);
mLeftTv = itemView.findViewById(R.id.leftTv);
mRightTv = itemView.findViewById(R.id.rightTv);
mImage = itemView.findViewById(R.id.image);
}
}
public void setItemClickListener(OnItemClickListener itemClickListener) {
this.mItemClickListener = itemClickListener;
}
public interface OnItemClickListener {
public void onItemClick(int position,ViewHolder holder);
}
}
public class MainActivity extends AppCompatActivity {
private RecyclerView recyclerView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
recyclerView = findViewById(R.id.recycler);
List<User> users = new ArrayList<>();
for (int i = 0; i < 100; i++) {
users.add(new User("hjcai" + i, i, "http://goo.gl/gEgYUd"));
}
RecyclerViewAdapter adapter = new RecyclerViewAdapter(users, this, this.getLayoutInflater());
LinearLayoutManager layoutManager = new LinearLayoutManager(this);
layoutManager.setOrientation(RecyclerView.VERTICAL);
recyclerView.setLayoutManager(layoutManager);
// recyclerView.setLayoutManager(new GridLayoutManager(this,2));
recyclerView.addItemDecoration(new RecyclerViewItemDecoration(ContextCompat.getDrawable(this, R.drawable.recycler_view_divider), layoutManager.getOrientation()));
adapter.setItemClickListener((position, holder) -> Toast.makeText(MainActivity.this, holder.mLeftTv.getText().toString() + " " + position, Toast.LENGTH_SHORT).show());
recyclerView.setAdapter(adapter);
}
}