Recycler实现瀑布流
(开发环境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实现瀑布流的更多相关文章
- Android-Recyclerview-GridView&瀑布流等效果
		
由于Recyclerview是在 android.support.v7.widget.包 RecyclerView,所以需要导Recycler库: 导Recycler库: 选择项目,右键--> ...
 - jquery瀑布流的制作
		
首先,还是来看一下炫酷的页面: 今天就边做边说了: 一.准备工作 新建css,js,img文件夹存放相应文件,并在demo.html文件中引入外部文件(注意要把jquery文件引入),这里就不过多描述 ...
 - js瀑布流 原理实现揭秘 javascript 原生实现
		
web,js瀑布流揭秘 瀑布流再很久之前流行,可能如我一样入行晚的 ,可能就没有机会去使用.但是这个技术终究是个挺炫酷的东西,花了一个上午来研究,用原生js实现了一个,下面会附上源码,供大家解读. 说 ...
 - CollectionView水平和竖直瀑布流的实现
		
最近在项目中需要实现一个水平的瀑布流(即每个Cell的高度是固定的,但是长度是不固定的),因为需要重写系统 UICollectionViewLayout中的一些方法通过计算去实现手动布局,所以本着代码 ...
 - 用jquery实现瀑布流案例
		
一.瀑布流是我们常见的案例,这里主要讲述,用jquery的方式实现瀑布流的功能! 引言:我们经常见到很多网站的瀑布流功能,如淘宝.京东这些商品等等.. 实现它我们首先考虑几个问题:1.获取到数据 ...
 - RecylerView完美实现瀑布流效果
		
RecylerView包含三种布局管理器,分别是LinearLayoutManager,GridLayoutManager,StaggeredGridLayoutManager,对应实现单行列表,多行 ...
 - 飞流直下的精彩 -- 淘宝UWP中瀑布流列表的实现
		
在淘宝UWP中,搜索结果列表是用户了解宝贝的重要一环,其中的图片效果对吸引用户点击搜索结果,查看宝贝详情有比较大的影响.为此手机淘宝特意在搜索结果列表上采用了2种表现方式:一种就是普通的列表模式,而另 ...
 - iOS瀑布流实现(Swift)
		
这段时间突然想到一个很久之前用到的知识-瀑布流,本来想用一个简单的方法,发现自己走入了歧途,最终只能狠下心来重写UICollectionViewFlowLayout.下面我将用两种方法实现瀑布流,以及 ...
 - 瀑布流StaggeredGridView 下拉刷新
		
1.项目中用到了瀑布流,之前用的是PinterestLikeAdapterView这个控件 然后上拉加载更多跟下拉刷新用的是XListView ,但是加载更多或者下拉刷新的时候闪屏,对用户体验很不好 ...
 
随机推荐
- scss-@mixin传参
			
混合器一个很重要特性就是可以传递参数,可以根据不同场景来定制css代码的复用.极大提高了混合器的适用性,看如下scss代码实例: @mixin makeradius($radius) { border ...
 - webAudioAPI
 - siebel 界面搭建
			
Siebel界面的初步搭建都是基于Siebel Tools工具来创建的,其搭建步骤: 1. 首先先创建一个Project项目,点击project--->点 new Record--->输入 ...
 - SharePoint 2010配置PDF文件全文检索
			
一.安装Adobe PDF 64 bit IFilter version 9合Adobe Reader 9下载地址: http://www.adobe.com/support/downloads/de ...
 - OFFICE_EXCEL_Combine text from two or more cells into one cell.
			
Excel Enter and format data Layout Combine text from two or more cells into one cell Combine t ...
 - March 8 2017 Week 10 Wednesday
			
Rules are meant to be broken. 规则就是用来被打破的. What is innovation? Some may tell you innovation is to bre ...
 - python入门20 导入模块(引包)
			
1 引包: import module 或 import module.module1 或 from module import module1,module2...等 2 import xx ...
 - typescript 添加基础类型的扩展方法
			
以时间转换为案例: //声明接口,也是在声明date这个基础类型要定义一个format的扩展方法,不写接口声明会报错 interface Date { Format(fmt:string):strin ...
 - Android(java)学习笔记36:Scanner类使用
			
1. Scanner类使用 package cn.itcast_01; /* * Scanner:用于接收键盘录入数据. * * 前面的时候: * A:导包 * B:创建对象 * C:调用方法 * * ...
 - 【翻译】苹果官网的命名规范之 Code Naming Basics-General Principles
			
苹果官方原文链接:General Principles 代码命名基本原则:通用规范 代码含义清晰 尽可能将代码写的简洁并且明白是最好的,不过代码清晰度不应该因为过度的简洁而受到影响.例如: 代码 ...