(开发环境Android studio)

首先,在开发环境中添加引用(在外层的build.gradle文件下的dependencies里面添加如下引用)

implementation 'com.android.support:recyclerview-v7:28.0.0'
implementation 'com.android.support:cardview-v7:28.0.0'

创造我们需要的Java Bean对象类 myDogs.java

对应代码如下:

public class myDogs {

    private String dogName;

    private int imgId;

    public String getDogName() {
return dogName;
} public void setDogName(String dogName) {
this.dogName = dogName;
} public int getImgId() {
return imgId;
} public void setImgId(int imgId) {
this.imgId = imgId;
}
}

对于我们的RecyclelerView子项,我们创建子项布局文件

my_dog_item.xml(对于子项,我们使用cardview布局,这也就是第刚开始的时候第二行引用的作用)

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_margin="5dp"
android:padding="4dp"
app:cardBackgroundColor="#ffffffff"
app:cardCornerRadius="15dp"> <LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical"> <ImageView
android:id="@+id/myDog_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerCrop" /> <TextView
android:id="@+id/myDog_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v7.widget.CardView>

其中:

cardCornerRadius="15dp"

保证每一个子项拥有15dp的圆角

然后创建适配器myDogAdapter.java从RecyclerView.Adapter<>继承

import android.content.Context;
import android.support.annotation.NonNull;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView; import java.util.List; public class myDogAdapter extends RecyclerView.Adapter<myDogAdapter.myDogViewHolder> { private Context mcontext; private List<myDog> myDogs; public myDogAdapter(List<myDog> myDogs , Context context){
this.myDogs = myDogs;
this.mcontext = context;
} @NonNull
@Override
public myDogAdapter.myDogViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.my_dog_item,viewGroup,false);
return new myDogViewHolder(view);
} @Override
public void onBindViewHolder(@NonNull myDogAdapter.myDogViewHolder holder, int position) {
myDog myDogDemo = myDogs.get(position);
holder.myDogImage.setImageResource(myDogDemo.getImgId());
holder.myDogName.setText(myDogDemo.getDogName());
} @Override
public int getItemCount() {
return myDogs.size();
} class myDogViewHolder extends RecyclerView.ViewHolder{
ImageView myDogImage;
TextView myDogName;
public myDogViewHolder(@NonNull View itemView) {
super(itemView);
myDogImage = itemView.findViewById(R.id.myDog_image);
myDogName = itemView.findViewById(R.id.myDog_name);
}
}
}

然后,编写MainActivity里面的内容:

<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"> <android.support.v7.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent" /> </LinearLayout>

这里面只放置了一个RecyclerView并让它填充布局

然后我们开始编写MainActivity.java里面的内容

package edu.henu.www.recyclelerview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager; import java.util.ArrayList;
import java.util.Collection;
import java.util.Iterator;
import java.util.List;
import java.util.ListIterator; public class MainActivity extends AppCompatActivity { //创建与布局中相对应的对象;
private RecyclerView recyclerView;
//创建用于显示的对象集;
private List<myDog> myDogs = new ArrayList<>(); @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); //将布局中相应的对象传入
recyclerView = this.findViewById(R.id.recycler_view); //设置瀑布流核心代码,设置瀑布流列数,并设置瀑布流方向;
StaggeredGridLayoutManager recyclerViewLayoutManager = new StaggeredGridLayoutManager(2 , StaggeredGridLayoutManager.VERTICAL); //设置布局管理器
recyclerView.setLayoutManager(recyclerViewLayoutManager); //初始化对象;
initDogs(); //创建Adapter对象;
myDogAdapter adapter = new myDogAdapter(this.myDogs , this); //设置适配器
recyclerView.setAdapter(adapter); } private void initDogs(){
myDog dog;
for (int i = 0; i < 10; i++) {
dog = new myDog("小狗狗" + i,R.drawable.d1);
myDogs.add(dog);
dog = new myDog("小狗狗" + i ,R.drawable.d2);
myDogs.add(dog);
dog = new myDog("小狗狗" + i,R.drawable.d3);
myDogs.add(dog);
dog = new myDog("小狗狗" + i,R.drawable.d4);
myDogs.add(dog);
dog = new myDog("小狗狗" + i,R.drawable.d5);
myDogs.add(dog);
dog = new myDog("小狗狗" + i,R.drawable.d6);
myDogs.add(dog);
dog = new myDog("小狗狗" + i,R.drawable.d6);
myDogs.add(dog);
dog = new myDog("小狗狗" + i,R.drawable.d7);
myDogs.add(dog);
dog = new myDog("小狗狗" + i,R.drawable.d8);
myDogs.add(dog);
dog = new myDog("小狗狗" + i,R.drawable.d9);
myDogs.add(dog);
}
} }

图片资源需要自己填充到Android项目目录下

实现效果如图

参考文章:https://www.jianshu.com/p/02be426fda0a

Recycler实现瀑布流的更多相关文章

  1. Android-Recyclerview-GridView&瀑布流等效果

    由于Recyclerview是在 android.support.v7.widget.包 RecyclerView,所以需要导Recycler库: 导Recycler库: 选择项目,右键-->  ...

  2. jquery瀑布流的制作

    首先,还是来看一下炫酷的页面: 今天就边做边说了: 一.准备工作 新建css,js,img文件夹存放相应文件,并在demo.html文件中引入外部文件(注意要把jquery文件引入),这里就不过多描述 ...

  3. js瀑布流 原理实现揭秘 javascript 原生实现

    web,js瀑布流揭秘 瀑布流再很久之前流行,可能如我一样入行晚的 ,可能就没有机会去使用.但是这个技术终究是个挺炫酷的东西,花了一个上午来研究,用原生js实现了一个,下面会附上源码,供大家解读. 说 ...

  4. CollectionView水平和竖直瀑布流的实现

    最近在项目中需要实现一个水平的瀑布流(即每个Cell的高度是固定的,但是长度是不固定的),因为需要重写系统 UICollectionViewLayout中的一些方法通过计算去实现手动布局,所以本着代码 ...

  5. 用jquery实现瀑布流案例

    一.瀑布流是我们常见的案例,这里主要讲述,用jquery的方式实现瀑布流的功能! 引言:我们经常见到很多网站的瀑布流功能,如淘宝.京东这些商品等等.. 实现它我们首先考虑几个问题:1.获取到数据   ...

  6. RecylerView完美实现瀑布流效果

    RecylerView包含三种布局管理器,分别是LinearLayoutManager,GridLayoutManager,StaggeredGridLayoutManager,对应实现单行列表,多行 ...

  7. 飞流直下的精彩 -- 淘宝UWP中瀑布流列表的实现

    在淘宝UWP中,搜索结果列表是用户了解宝贝的重要一环,其中的图片效果对吸引用户点击搜索结果,查看宝贝详情有比较大的影响.为此手机淘宝特意在搜索结果列表上采用了2种表现方式:一种就是普通的列表模式,而另 ...

  8. iOS瀑布流实现(Swift)

    这段时间突然想到一个很久之前用到的知识-瀑布流,本来想用一个简单的方法,发现自己走入了歧途,最终只能狠下心来重写UICollectionViewFlowLayout.下面我将用两种方法实现瀑布流,以及 ...

  9. 瀑布流StaggeredGridView 下拉刷新

    1.项目中用到了瀑布流,之前用的是PinterestLikeAdapterView这个控件  然后上拉加载更多跟下拉刷新用的是XListView ,但是加载更多或者下拉刷新的时候闪屏,对用户体验很不好 ...

随机推荐

  1. ATL模板库中的OLEDB与ADO

    上次将OLEDB的所有内容基本上都说完了,从之前的示例上来看OLEDB中有许多变量的定义,什么结果集对象.session对象.命令对象,还有各种缓冲等等,总体上来说直接使用OLEDB写程序很麻烦,用很 ...

  2. OLEDB 调用存储过程

    除了常规调用sql语句和进行简单的插入删除操作外,OLEDB还提供了调用存储过程的功能,存储过程就好像是用SQL语句写成的一个函数,可以有参数,有返回值. 存储过程除了像普通函数那样返回一般的值以外, ...

  3. 我为什么不用Django而用Flask?

    前言 对于初学者来说,找到一个好的框架来学习或者项目开发都是非常有必要的,而当你有一定开发经验后,你应该选择适合当前业务需要的框架.我这里并不想探讨哪个框架好哪个不好,这个永恒的话题就跟探讨“世界上哪 ...

  4. 不定宽高的文字在div中垂直居中

    本人在面试的时候被问到:如何使一段不定宽高的文字垂直居中呢? 现在来总结一下: 在body中写入结构 <div id="main">    <div id=&qu ...

  5. JSP初学者1

    native2ascii.exe 是 Java 的一个文件转码工具,是将特殊各异的内容 转为 用指定的编码标准文体形式统一的表现出来,它通常位于 JDK_home\bin 目录下, 安装好 Java ...

  6. Java NIO(四) Scatter/Gather

    Java NIO开始支持scatter/gather,scatter/gather用于描述从Channel(译者注:Channel在中文经常翻译为通道)中读取或者写入到Channel的操作.分散(sc ...

  7. maven学习(二)maven常用的命令

    参考博客:(http://blog.csdn.net/keda8997110/article/details/20925449) 以下命令都是基于命令行的操作,也可以直接在eclipse等IDE上ma ...

  8. koa2获取用户ip

    调用下面方法即可获取 // koa2 中 req 为 ctx.req const getUserIp = (req) => { return req.headers['x-forwarded-f ...

  9. java maven项目 导入jar包注意

    1.将jar 包放到lib目录下 2.build path 3.点击maven主项目右键选择properties 4.选择myeclipse 下的第一个选项 5.点击add   选择archives ...

  10. redis 笔记(二)

    在上一篇中提到了数据类型 ,在本章中就具体说说这几种数据类型: sting :set /get / del / append /strlen 简单的对key-->value 写入读取删除增减 i ...