(开发环境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. setTimeout的实现原理以及setTimeout(0)的使用场景

      先看一段代码: var start = new Date(); setTimeout(function(){ var end = new Date(); console.log("Tim ...

  2. Easy deployment

    Use simple ssh and shell scripts to deploy, upgrade, rollback and reconfigure linux servers. https:/ ...

  3. Automapper 实现自动映射

    出于安全考虑,在后台与前台进行数据传输时,往往不会直接传输实体模型,而是使用Dto(Data transfer object 数据传输对象),这样在后台往前台传递数据时可以省略不必要的信息,只保留必要 ...

  4. 上传文件到Maven仓库

    1.上传jar到本地仓库 mvn install:install-file -DgroupId=org.csource -DartifactId=fastdfs-client-java -Dversi ...

  5. io饥饿

    看书,在书上看到一句话,防止io饥饿,google了一下,也没有找到相关的解释,究竟什么是io饥饿.

  6. GO Lang学习笔记 - 基础知识

    Go lang Learn Note 标签(空格分隔): Go Go安装和Go目录 设置环境变量GOROOT和GOPATH,前者是go的安装目录,后者是开发工作目录.go get包只会将包下载到第一个 ...

  7. PHP程序员应当如何保持与时俱进?

    记得之前在某个论坛上看到别人说php程序员土,作为一名php程序员内心当然是不乐意的.不过别人这么说也不是完全没有道理,其实他说php程序员土应该指的就是php程序员不懂得与时俱进. 当然,这也不全是 ...

  8. Linux --Mysql基础命令

    mysql>create database a; --创建一个名为a的新库 mysql>create table a: --创建一个名为a新表 mysql>use a: --进入一个 ...

  9. mysql分析慢查询日志工具mysqlsla安装

    1    配置perlperl -MCPAN -e shell cpan[1]>install Time:HiRescpan[1]>install File::Tempcpan[1]> ...

  10. Scrum _GoodJob

    作为长大的大三老腊肉,我们已经在长大生活了两年多,对于什么是长大人最想完善的校园需求.最想拥有的校园服务媒介也有了更加深切的体会. 于是,GoodJob小团队blingbling闪现啦!! GoodJ ...