瀑布流（圆角，卡片效果）

墨蓝 2023-08-17 17:09 75阅读 0赞

附上效果图

![1264306-20190917140904730-580127062.gif][]

1.先加入需要的依赖

2.瀑布流的适配器

3.修改图片圆角类

4.创建一个实体类

5.MainActivity的主页代码

6.MainActivity的布局文件

7.列表布局文件

8.最后附上项目

加入需要的依赖

implementation 'com.android.support:recyclerview-v7:25.3.1' //设置瀑布流列表
    implementation 'com.github.bumptech.glide:glide:4.9.0' //获取图片以及圆角
    implementation 'com.google.android.material:material:1.0.0' //卡片效果

在加入网络权限

<uses-permission android:name="android.permission.INTERNET"/>

瀑布流的适配器(RecyclerViewAdapter)

1 public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.MyViewHolder> {
     2 
     3     private Context context;
     4     private List<Menu> list;//数据
     5     private List<Integer> heightList;//装产出的随机数
     6 
     7     public RecyclerViewAdapter(Context context, List<Menu> list) {
     8         this.context = context;
     9         this.list = list;
    10         //记录为每个控件产生的随机高度,避免滑回到顶部出现空白
    11         heightList = new ArrayList<>();
    12         for (int i = 0; i < list.size(); i++) {
    13             int height = new Random().nextInt(300) + 500;//[100,300)的随机数
    14             heightList.add(height);
    15         }
    16     }
    17 
    18     @Override
    19     public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    20         //找到item的布局
    21         View view = LayoutInflater.from(context).inflate(R.layout.item_layout, parent, false);
    22         return new MyViewHolder(view);//将布局设置给holder
    23     }
    24 
    25     @Override
    26     public int getItemCount() {
    27         return list.size();
    28     }
    29 
    30     @Override
    31     public void onBindViewHolder(final MyViewHolder holder, final int position) {
    32         //填充数据
    33         RequestOptions options = new RequestOptions()
    34                 .centerCrop()
    35                 .placeholder(R.mipmap.ic_launcher_round) //预加载图片
    36                 .error(R.drawable.ic_launcher_foreground) //加载失败图片
    37                 .priority(Priority.HIGH) //优先级
    38                 .diskCacheStrategy(DiskCacheStrategy.NONE) //缓存
    39                 .transform(new GlideRoundTransform(5)); //圆角
    40         Glide.with(context).load(list.get(position).getImage()).apply(options).into(holder.imageView);
    41         holder.menu.setText(list.get(position).getName());
    42         holder.price.setText(list.get(position).getPrice());
    43         //由于需要实现瀑布流的效果,所以就需要动态的改变控件的高度了
    44         ViewGroup.LayoutParams params = holder.imageView.getLayoutParams();
    45         params.height = heightList.get(position);
    46         holder.imageView.setLayoutParams(params);
    47 
    48     }
    49 
    50     class MyViewHolder extends RecyclerView.ViewHolder {
    51         ImageView imageView;
    52         TextView menu,price;
    53 
    54         public MyViewHolder(View itemView) {
    55             super(itemView);
    56             imageView = (ImageView) itemView.findViewById(R.id.imageView);
    57             menu = (TextView)itemView.findViewById(R.id.text_menu);
    58             price = (TextView)itemView.findViewById(R.id.text_money);
    59         }
    60     }
    61 }

修改图片圆角类(GlideRoundTransform)

1 public class GlideRoundTransform extends BitmapTransformation {
     2     private static float radius = 0f;
     3 
     4     public GlideRoundTransform() {
     5         this(4);
     6     }
     7 
     8     public GlideRoundTransform(int dp) {
     9         super();
    10         this.radius = Resources.getSystem().getDisplayMetrics().density * dp;
    11     }
    12 
    13 
    14     @Override
    15     protected Bitmap transform(@NonNull BitmapPool pool, @NonNull Bitmap toTransform, int outWidth, int outHeight) {
    16         //变换的时候裁切
    17         Bitmap bitmap = TransformationUtils.centerCrop(pool, toTransform, outWidth, outHeight);
    18         return roundCrop(pool, bitmap);
    19     }
    20 
    21     @Override
    22     public void updateDiskCacheKey(MessageDigest messageDigest) {
    23 
    24     }
    25 
    26 
    27     private static Bitmap roundCrop(BitmapPool pool, Bitmap source) {
    28         if (source == null) {
    29             return null;
    30         }
    31         Bitmap result = pool.get(source.getWidth(), source.getHeight(), Bitmap.Config.ARGB_8888);
    32         if (result == null) {
    33             result = Bitmap.createBitmap(source.getWidth(), source.getHeight(), Bitmap.Config.ARGB_8888);
    34         }
    35         Canvas canvas = new Canvas(result);
    36         Paint paint = new Paint();
    37         paint.setShader(new BitmapShader(source, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));
    38         paint.setAntiAlias(true);
    39         RectF rectF = new RectF(0f, 0f, source.getWidth(), source.getHeight());
    40         canvas.drawRoundRect(rectF, radius, radius, paint);
    41         //左上角、右上角圆角
    42 //        RectF rectRound = new RectF(0f, 100f, source.getWidth(), source.getHeight());
    43 //        canvas.drawRect(rectRound, paint);
    44         return result;
    45     }
    46 }

创建一个实体类(Menu)

1 public class Menu {
     2     private String name;
     3     private String price;
     4     private String image;
     5     public Menu(String name,String price,String image){
     6         this.name = name;
     7         this.price = price;
     8         this.image = image;
     9     }
    10 
    11     public String getName() {
    12         return name;
    13     }
    14 
    15     public void setName(String name) {
    16         this.name = name;
    17     }
    18 
    19     public String getPrice() {
    20         return price;
    21     }
    22 
    23     public void setPrice(String price) {
    24         this.price = price;
    25     }
    26 
    27     public String getImage() {
    28         return image;
    29     }
    30 
    31     public void setImage(String image) {
    32         this.image = image;
    33     }
    34 }

MainActivity的主页代码(MainActivity)

1 public class MainActivity extends AppCompatActivity {
     2     private RecyclerViewAdapter adapter;
     3     private RecyclerView recyclerView;
     4     private List<Menu> list;
     5 
     6     @Override
     7     protected void onCreate(Bundle savedInstanceState) {
     8         super.onCreate(savedInstanceState);
     9         setContentView(R.layout.activity_main);
    10         initView();
    11     }
    12 
    13     private void initView(){
    14         recyclerView = (RecyclerView)findViewById(R.id.recyclerView);
    15         //声明为瀑布流的布局，2列，垂直方向
    16         StaggeredGridLayoutManager manager = new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL);
    17         recyclerView.setLayoutManager(manager); //recyclerView设置布局管理器
    18         initData();
    19         adapter = new RecyclerViewAdapter(this,list);
    20         recyclerView.setItemAnimator(new DefaultItemAnimator());
    21         recyclerView.setAdapter(adapter);
    22     }
    23 
    24     private void initData(){
    25         list = new ArrayList<>();
    26         String imgUrl = "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=410202080,573076394&fm=26&gp=0.jpg";
    27         for (int i = 0; i < 50; i++) {
    28             list.add(new Menu("黄焖排骨" + i,"20",imgUrl));
    29         }
    30     }
    31 }

MainActivity的布局文件（activity\_main.xml）

1 <?xml version="1.0" encoding="utf-8"?>
     2 <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
     3     xmlns:app="http://schemas.android.com/apk/res-auto"
     4     xmlns:tools="http://schemas.android.com/tools"
     5     android:layout_width="match_parent"
     6     android:layout_height="match_parent"
     7     tools:context=".MainActivity">
     8 
     9     <androidx.recyclerview.widget.RecyclerView
    10         android:id="@+id/recyclerView"
    11         android:layout_width="match_parent"
    12         android:layout_height="match_parent"/>
    13 
    14 </androidx.constraintlayout.widget.ConstraintLayout>

列表布局文件（item\_layout.xml）

1 <?xml version="1.0" encoding="utf-8"?>
     2 <androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
     3     xmlns:app="http://schemas.android.com/apk/res-auto"
     4     app:cardCornerRadius="5dp"
     5     android:padding="5dp"
     6     android:layout_margin="3dp"
     7     android:layout_width="match_parent"
     8     android:layout_height="wrap_content">
     9     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    10         android:orientation="vertical"
    11         android:background="#F0F0F0"
    12         android:layout_width="match_parent"
    13         android:layout_height="wrap_content">
    14         <ImageView
    15             android:id="@+id/imageView"
    16             android:layout_width="match_parent"
    17             android:layout_height="200dp"
    18             android:layout_margin="4dp"
    19             android:scaleType="fitXY"/>
    20         <TextView
    21             android:id="@+id/text_menu"
    22             android:text="商品"
    23             android:layout_marginLeft="5dp"
    24             android:layout_marginTop="2dp"
    25             android:textSize="15sp"
    26             android:layout_width="wrap_content"
    27             android:layout_height="wrap_content" />
    28         <LinearLayout
    29             android:paddingLeft="5dp"
    30             android:orientation="horizontal"
    31             android:gravity="center_vertical"
    32             android:layout_width="match_parent"
    33             android:layout_height="25dp">
    34             <TextView
    35                 android:text="￥"
    36                 android:layout_marginTop="1dp"
    37                 android:textColor="#FF00"
    38                 android:textSize="9sp"
    39                 android:layout_width="wrap_content"
    40                 android:layout_height="wrap_content" />
    41             <TextView
    42                 android:id="@+id/text_money"
    43                 android:text="18"
    44                 android:layout_margin="2dp"
    45                 android:textColor="#FF00"
    46                 android:textSize="15sp"
    47                 android:layout_width="wrap_content"
    48                 android:layout_height="wrap_content" />
    49         </LinearLayout>
    50     </LinearLayout>
    51 </androidx.cardview.widget.CardView>

最后附上项目([点我跳转][Link 1]，提取码：0iuk)

转载于:https://www.cnblogs.com/Mr-Deng/p/11533226.html

[1264306-20190917140904730-580127062.gif]: /images/20230808/03d8b652b06a4eaea93bc92e0ea12aef.png
[Link 1]: https://pan.baidu.com/s/1CtDLONvcd3J-1iKLbKsIdg