Android實(shí)現(xiàn)瀑布流社區(qū)動(dòng)態(tài)功能
引言
相信大家一定見過小紅書等社交類app的社區(qū)動(dòng)態(tài),里面有許多美輪美奐的瀑布流美景美圖,掀起了很多美食、美景、網(wǎng)紅店的浪潮。其實(shí)RecyclerView就能實(shí)現(xiàn)這種流形式的布局,LinearLayoutManager是線性布局、GridLayoutManager是網(wǎng)格式布局、而StaggeredGridLayout是瀑布流布局,也就是我們常說的流布局。
話不多說,趕快來看看怎么實(shí)現(xiàn)吧!上才藝,美圖雖好可不要貪杯哦!學(xué)好技術(shù)才是主要的!
效果預(yù)覽

用法
第一步:布局文件(父布局+子布局)
父布局(一個(gè)RecyclerView實(shí)現(xiàn))
<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.Case56"><androidx.recyclerview.widget.RecyclerViewandroid:id="@+id/case56_rv"android:background="@color/dimgray"android:layout_width="match_parent"android:layout_height="wrap_content"tools:ignore="MissingConstraints" />androidx.constraintlayout.widget.ConstraintLayout>
子布局(就是瀑布流中的item)
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="wrap_content"android:layout_height="wrap_content"xmlns:app="http://schemas.android.com/apk/res-auto"tools:ignore="MissingConstraints"android:layout_margin="3dp"><androidx.cardview.widget.CardViewandroid:layout_width="match_parent"app:cardCornerRadius="5dp"app:cardBackgroundColor="@color/white"android:layout_height="wrap_content"><androidx.constraintlayout.widget.ConstraintLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"><ImageViewandroid:id="@+id/sgl_image"android:layout_width="180dp"android:scaleType="centerCrop"android:layout_height="300dp"app:layout_constraintTop_toTopOf="parent"android:src="@mipmap/guanggao"/><TextViewandroid:id="@+id/sgl_title"android:layout_width="180dp"android:padding="10dp"android:layout_height="wrap_content"app:layout_constraintTop_toBottomOf="@id/sgl_image"android:text="測(cè)試"android:textSize="20sp" />androidx.constraintlayout.widget.ConstraintLayout>androidx.cardview.widget.CardView>androidx.constraintlayout.widget.ConstraintLayout>
第二步:創(chuàng)建適配器類(填充RecyclerView)
public class ShequRecyclerAdapter extends RecyclerView.Adapter<ShequRecyclerAdapter.MyViewHolder> {private ListfruitList; public ShequRecyclerAdapter(ListfruitList) {this.fruitList = fruitList;}public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.stag_grid_layout, parent, false);final MyViewHolder holder = new MyViewHolder(itemView);return holder;}public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {Fruit fruitItem = fruitList.get(position);holder.sgl_image.setImageResource(fruitItem.getImageId());holder.sgl_title.setText(fruitItem.getName());}public static class MyViewHolder extends RecyclerView.ViewHolder {View fruitView;//圖片public ImageView sgl_image;//標(biāo)題public TextView sgl_title;public MyViewHolder(View itemView) {super(itemView);fruitView = itemView;sgl_image = itemView.findViewById(R.id.sgl_image);sgl_title = itemView.findViewById(R.id.sgl_title);}}public int getItemCount() {return fruitList.size();}}
第三步:創(chuàng)建實(shí)體類(圖片+文字形式)
public class Fruit {private String name;private int imageId;private int type;public Fruit(String name, int imageId) {this.name = name;this.imageId = imageId;}public String getName() {return name;}public void setName(String name) {this.name = name;}public int getImageId() {return imageId;}public void setImageId(int imageId) {this.imageId = imageId;}}
第四步:在Activity中書寫業(yè)務(wù)邏輯
public class Case56 extends AppCompatActivity {private RecyclerView recyclerView;private ShequRecyclerAdapter adapter;private StaggeredGridLayoutManager layoutManager;private ListmList = new ArrayList(); @Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_case56);initView();setData();setRecycler();}private void setData() {//RecyclerViewmList.add(new Fruit("千夜零一", R.drawable.meizi));mList.add(new Fruit("RecylerView實(shí)現(xiàn)瀑布流布局StaggeredGridLayoutManager使用", R.drawable.meizi2));mList.add(new Fruit("RecylerView實(shí)現(xiàn)瀑布流布局", R.drawable.meizi));mList.add(new Fruit("RecylerView實(shí)現(xiàn)瀑布流布局StaggeredGridLayoutManager使用RecylerView實(shí)現(xiàn)瀑布流布局StaggeredGridLayoutManager使用RecylerView實(shí)現(xiàn)瀑布流布局StaggeredGridLayoutManager使用", R.drawable.meizi2));mList.add(new Fruit("RecylerView", R.drawable.meizi));mList.add(new Fruit("千夜零一千夜零一千夜零一千夜零一千夜零一", R.drawable.meizi2));mList.add(new Fruit("千夜", R.drawable.meizi2));}private void setRecycler() {adapter = new ShequRecyclerAdapter(mList);layoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL); //每行兩個(gè)瀑布流排列recyclerView.setLayoutManager(layoutManager);recyclerView.setAdapter(adapter);recyclerView.setItemAnimator(new DefaultItemAnimator());}private void initView() {recyclerView = findViewById(R.id.case56_rv);}}
大功告成!

到這里就結(jié)束啦。
評(píng)論
圖片
表情
