引言
RecyclerView不只能进行单页面布局，而且可以通过重写adapter中的getItemViewType方法来进行多种View布局，今天就来使用RecyclerView实现简单的多布局效果。
效果预览
Recycler多布局1.gif
用法
第一步：布局文件（主）
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
android:background="@color/lightgray"
tools:context=".show.Case7">
<TextView
android:id="@+id/title_bar"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="@color/green"
android:gravity="center"
android:text="RecyclerView"
android:textColor="@color/white"
android:textSize="20sp"
tools:ignore="MissingConstraints" />
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rv_recyclerView"
app:layout_constraintTop_toBottomOf="@id/title_bar"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="5dp"
tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout>
第二步：新建适配器类
/**
* @data on 2020/9/25 5:28 PM
* @auther
* @describe Recycler多布局效果
*/
public class RecyclerViewTypeAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
private final int IMAGEVIEW = 0;
private final int VER_RECYCLERVIEW = 1;
private List<Fruit> fruitList;
public RecyclerViewTypeAdapter(List<Fruit> fruitList) {
this.fruitList = fruitList;
}
@NonNull
@Override
public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View view;
if(viewType == IMAGEVIEW){
view = LayoutInflater.from(parent.getContext()).inflate(R.layout.image_view,parent,false);
return new ImageHolder(view);
}else {
view = LayoutInflater.from(parent.getContext()).inflate(R.layout.case7_item_fruit, parent, false);
return new VerViewHolder(view);
}
}
@Override
public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
if(holder instanceof ImageHolder){
ImageHolder horViewHolder = (ImageHolder)holder;
horViewHolder.userImage.setImageResource(R.drawable.user_img);
}else if(holder instanceof VerViewHolder){
VerViewHolder verViewHolder = (VerViewHolder)holder;
verViewHolder.fruitImage.setImageResource(fruitList.get(position).getImageId());
verViewHolder.fruitName.setText(fruitList.get(position).getName());
}
}
public static class ImageHolder extends RecyclerView.ViewHolder {
public ImageView userImage;
public ImageHolder(@NonNull View itemView) {
super(itemView);
userImage = itemView.findViewById(R.id.user_image);
}
}
public static class VerViewHolder extends RecyclerView.ViewHolder {
public ImageView fruitImage;
public TextView fruitName;
public VerViewHolder(@NonNull View itemView) {
super(itemView);
fruitImage = itemView.findViewById(R.id.fruit_image);
fruitName = itemView.findViewById(R.id.fruit_name);
}
}
@Override
public int getItemCount() {
return fruitList.size();
}
@Override
public int getItemViewType(int position) {
if(position==0){
return IMAGEVIEW;
}else {
return VER_RECYCLERVIEW;
}
}
}
第三步：布局文件（子）R.layout.image_view和R.layout.case7_item_fruit
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:ignore="MissingConstraints">
<ImageView
android:id="@+id/user_image"
android:layout_width="match_parent"
android:layout_height="300dp"
android:src="@drawable/user_img" />
</androidx.constraintlayout.widget.ConstraintLayout>
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:orientation="horizontal"
android:padding="5dp"
tools:ignore="MissingConstraints">
<ImageView
android:id="@+id/fruit_image"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
tools:ignore="MissingConstraints" />
<TextView
android:id="@+id/fruit_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="10dp"
android:layout_weight="1"
android:gravity="center"
android:textColor="@color/black"
android:textSize="20sp"
tools:ignore="MissingConstraints" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
第四步：在Activity中书写逻辑代码
public class Case33 extends AppCompatActivity {
private LinearLayoutManager layoutManager;
private List<Fruit> mList;
private RecyclerView recyclerView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_case33);
initView();
//RecyclerView瀑布流布局
layoutManager = new LinearLayoutManager(this);
layoutManager.setOrientation(RecyclerView.VERTICAL);
recyclerView.setLayoutManager(layoutManager);
recyclerView.setAdapter(new RecyclerViewTypeAdapter(mList));
recyclerView.setItemAnimator(new DefaultItemAnimator());
}
private void initView() {
recyclerView = findViewById(R.id.rv_recyclerView);
mList = new ArrayList<Fruit>();
for (int i = 0; i < 21; i++) {
mList.add(new Fruit("apple" + i, R.mipmap.apple)); //纵向
}
}
}
大功告成！
图示
iv.jpeg
网友评论