Tabla de contenido
1. Imagen de efecto de cascada
2. Utilice RecyclerView para implementar el diseño de flujo en cascada
2.1 Uso de RecyclerView
RecyclerView es similar a ListView. Ambos usan Adapter (Adapter) para generar elementos de lista. La diferencia es que RecyclerView usa un RecyclerView.Adapter mejorado. RecyclerView.Adapter necesita implementar tres métodos.
2.1.1 onCreteViewHolder (ViewGroup viewGroup ， int i);
Este método se utiliza para crear componentes de elementos de lista.
2.1.2 onBindViewHolder (ViewHolder viewHolder, int i);
Este método es responsable de vincular datos para el componente del elemento de la lista y se ejecutará nuevamente cada vez que el componente se muestre nuevamente.
2.1.3 getItemCount ();
El valor de retorno de este método determina cuántos elementos de la lista se incluyen.
2.2 Ejemplo de código de adaptador
public class StaggeredGridAdater extends RecyclerView.Adapter<StaggeredGridAdater.HomeViewHolder> {
private Context mContext;
private List<Home> homeList = new ArrayList<>();
public StaggeredGridAdater(Context context,List<Home> homeList){
this.mContext = context;
this.homeList = homeList;
}
//创建列表组件
@NonNull
@Override
public StaggeredGridAdater.HomeViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.home_item,null);
return new StaggeredGridAdater.HomeViewHolder(view,this);
}
//绑定数据
@Override
public void onBindViewHolder(@NonNull HomeViewHolder holder, int position) {
holder.imageIdIv.setImageResource(homeList.get(position).getImageId());
holder.nameTv.setText(homeList.get(position).getName());
}
//返回列表数据总数
@Override
public int getItemCount() {
return homeList.size();
}
public class HomeViewHolder extends RecyclerView.ViewHolder{
TextView nameTv;
ImageView imageIdIv;
private RecyclerView.Adapter adapter;
public HomeViewHolder(@NonNull View itemView,RecyclerView.Adapter adapter) {
super(itemView);
this.nameTv = itemView.findViewById(R.id.home_item_text);
this.imageIdIv = itemView.findViewById(R.id.home_item_mage);
this.adapter = adapter;
}
}
}
Para gestionar de forma eficaz los subcomponentes contenidos en el elemento de la lista, se define una clase HomeViewHolder adicional. Cree un elemento de lista a través de onCreateViewHolder () y
páselo.
2.3 Código de fragmento (o actividad)
public class HomeFragment extends Fragment {
private RecyclerView recyclerView;
private List<Home> homeList = new ArrayList<>();
public View onCreateView(@NonNull LayoutInflater inflater,
ViewGroup container, Bundle savedInstanceState) {
View root = inflater.inflate(R.layout.fragment_home, container, false);
recyclerView = root.findViewById(R.id.home_recycler);
//设置RecyclerView保持固定大小,这样可以优化RecyclerView的性能
recyclerView.setHasFixedSize(true);
initData();
//设置瀑布流布局为2列，垂直方向滑动
recyclerView.setLayoutManager(new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL));
StaggeredGridAdater staggeredGridAdater = new StaggeredGridAdater(this.getActivity(),homeList);
//创建分割线对象
recyclerView.addItemDecoration(new MyDecoration());
recyclerView.setAdapter(staggeredGridAdater);
return root;
}
//数据源
private void initData() {
String[] names = new String[]{
"车位查询","车位预定","与车间距","防盗警报","停车时长","车位查询","车位预定","与车间距","防盗警报","停车时长"};
int[] ImageId = new int[]{
R.drawable.car1,R.drawable.car2,R.drawable.car3,R.drawable.car4,R.drawable.car5,R.drawable.car1,R.drawable.car2,R.drawable.car3,R.drawable.car4,R.drawable.car5};
for(int i = 0 ;i < names.length ; i++){
this.homeList.add(new Home(names[i],ImageId[i]));
}
}
//分割线的类
class MyDecoration extends RecyclerView.ItemDecoration{
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state){
super.getItemOffsets(outRect,view ,parent,state);
int gap = getResources().getDimensionPixelSize(R.dimen.dividerHeight);//5dp
outRect.set(gap,gap,gap,gap);
}
}
}
2.4 Clase local
public class Home {
private String name;
private int ImageId;
public Home(String name,int ImageId){
this.name = name;
this.ImageId = ImageId;
}
public int getImageId() {
return ImageId;
}
public void setImageId(int imageId) {
ImageId = imageId;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
2.5 Código XML de diseño principal
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--android:divider 分割线-->
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/home_recycler"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="56dp"
android:background="@color/colorWhite">
</androidx.recyclerview.widget.RecyclerView>
</LinearLayout>
2.6 Subdisposición de elementos
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/home_item_mage"
android:scaleType="centerCrop"/>
<TextView
android:id="@+id/home_item_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="2dp"
android:layout_gravity="left|bottom"
android:padding="12dip"
android:background="#85000000"
android:textColor="#ffffffff"
android:text="Golden Gate"
android:textStyle="bold"/>
</FrameLayout>