引言
RecyclerView不只能进行单页面布局，而且可以通过重写adapter中的getItemViewType方法来进行多种View布局，今天就来使用RecyclerView实现复杂的多布局效果。实现一个RecyclerView中嵌套两个RecyclerView的效果，第一个横向滚动的Recycler同时又是纵向RecyclerView的第一个ItemView。话不多说，搞定它！
效果预览
Recycler多布局效果.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"
tools:context=".blog.Case34"
tools:ignore="MissingConstraints">
<TextView
android:id="@+id/title"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="@color/green"
android:gravity="center"
android:text="Recycler多布局（两个Recycler）"
android:textColor="@color/white"
android:textSize="20sp" />
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="@id/title" />
</androidx.constraintlayout.widget.ConstraintLayout>
第二步：新建适配器类
/**
* @data on 2020/9/27 9:21 AM
* @auther armstrong
* @describe Recycler多布局（2个Recycler）效果
*/
public class RecyclerView2TypeAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
private final int HOR_RECYCLER = 0;
private final int VER_RECYCLER = 1;
private List<Fruit> banannaList;
private List<Fruit> mangguoList;
private Context mContext;
public RecyclerView2TypeAdapter(Context context, List<Fruit> fruitList1, List<Fruit> fruitList2) {
this.mContext = context;
this.banannaList = fruitList1;
this.mangguoList = fruitList2;
}
@NonNull
@Override
public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View view;
if (viewType == HOR_RECYCLER) {
view = LayoutInflater.from(parent.getContext()).inflate(R.layout.case34_hor_recycler, parent, false);
return new HorViewHolder(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 HorViewHolder) {
HorViewHolder horViewHolder = (HorViewHolder) holder;
LinearLayoutManager layoutManager = new LinearLayoutManager(mContext);
layoutManager.setOrientation(RecyclerView.HORIZONTAL);
horViewHolder.horRecycler.setLayoutManager(layoutManager);
horViewHolder.horRecycler.setAdapter(new FruitHorRecyclerVIewAdapter(banannaList));
} else if (holder instanceof VerViewHolder) {
VerViewHolder verViewHolder = (VerViewHolder) holder;
verViewHolder.fruitImage.setImageResource(mangguoList.get(position - 1).getImageId());
verViewHolder.fruitName.setText(mangguoList.get(position - 1).getName());
}
}
public static class HorViewHolder extends RecyclerView.ViewHolder {
public RecyclerView horRecycler;
public HorViewHolder(@NonNull View itemView) {
super(itemView);
horRecycler = itemView.findViewById(R.id.hor_recycler);
}
}
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 mangguoList.size() + 1;
}
@Override
public int getItemViewType(int position) {
if (position == 0) {
return HOR_RECYCLER;
} else {
return VER_RECYCLER;
}
}
}
第三步：布局文件（子）
R.layout.case34_hor_recycler
<?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">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/hor_recycler"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</androidx.constraintlayout.widget.ConstraintLayout>
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">
<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 Case34 extends AppCompatActivity {
private LinearLayoutManager layoutManager;
private List<Fruit> mList1;
private List<Fruit> mList2;
private RecyclerView recycler;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_case34);
initView();
layoutManager = new LinearLayoutManager(this);
layoutManager.setOrientation(RecyclerView.VERTICAL);
recycler.setLayoutManager(layoutManager);
recycler.setAdapter(new RecyclerView2TypeAdapter(this,mList1,mList2));
}
private void initView() {
recycler = findViewById(R.id.recycler);
mList1 = new ArrayList();
for (int i = 1; i < 7; i++) {
mList1.add(new Fruit("香蕉" + i, R.mipmap.banana)); //纵向
}
mList2 = new ArrayList();
for (int i = 0; i < 21; i++) {
mList2.add(new Fruit("芒果" + i, R.mipmap.mangguo)); //纵向
}
}
}
大功告成！
图示
rv.jpeg
网友评论