table of Contents
1. Effect picture of waterfall
2. Use RecyclerView to implement waterfall flow layout
2.1 Usage of RecyclerView
RecyclerView is similar to ListView. Both use Adapter (Adapter) to generate list items. The difference is that RecyclerView uses an improved RecyclerView.Adapter. RecyclerView.Adapter needs to implement three methods.
2.1.1 onCreteViewHolder(ViewGroup viewGroup，int i);
This method is used to create list item components.
2.1.2 onBindViewHolder(ViewHolder viewHolder,int i);
This method is responsible for binding data for the list item component, and it will be executed again every time the component is displayed again.
2.1.3 getItemCount ();
The return value of this method determines how many list items are included.
2.2 Adapter code example
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;
}
}
}
In order to effectively manage the sub-components contained in the list item, an additional HomeViewHolder class is defined. Create a list item through onCreateViewHolder() and
pass in.
2.3 Fragment (or Activity) code
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 Home class
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 Main layout xml code
<?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 Item sub-layout
<?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>