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 ,但是加载更多或者下拉刷新的时候闪屏,对用户体验很不好 ...
随机推荐
- csharp:汉字转带拼音声调
{ ...
- BZOJ5249: [2018多省省队联测]IIIDX(线段树 贪心)
题意 题目链接 Sol 不难发现题目给出的是一个树,其中\(\frac{i}{K}\)是\(i\)的父亲节点 首先,当\(d_i\)互不相同时,一个显然的贪心策略就是优先给编号小的分配较大的权值.可以 ...
- scale 和 zoom,以及zoom的一些变态用法
zoom和scale这两个东西都是用于对元素的缩放,一下是其中一些区别: 1.scale的缩小是以图片的中心,zoom的缩小是以图片的左上角. 2.zoom的缩放改变了元素占据的空间大小:而scale ...
- 【阿里云产品公测】简单粗暴30S完成PTS测试配置附tornado服务器测试结果
作者:阿里云用户morenocjm [阿里云产品公测]简单粗暴 30S完成PTS测试配置(附tornado服务器测试结果) -------------------------------------- ...
- Pairwise ranking methods: RankNet与LambdaRank
转自:http://blog.csdn.net/u014374284/article/details/49385065, 感谢分享! LamdaMart 介绍见博客http://blog.csdn.n ...
- Android应用开发基础之八:广播与服务(二)
服务两种启动方式 startService:服务被启动之后,跟启动它的组件没有一毛钱关系 bindService:跟启动它的组件同生共死 绑定服务和解绑服务的生命周期方法:onCreate->o ...
- 微软开源 PowerShell 并支持 Linux 和 OS X
微软近日宣布开源 PowerShell,开始支持 Linux 和 OSX.PowerShell 是面向 Windows 和 Windows Server 的自动化平台和可扩展脚本语言,可帮助用户简化系 ...
- mongodb 3.4 学习 (一) 安装
https://www.mongodb.com/blog/post/capacity-planning-and-hardware-provisioning-mongodb-ten-minutes 安装 ...
- WCF如何使用X509证书
如何创建证书: makecert.exe -sr LocalMachine -ss My -a sha1 -n CN=JiangServer -sky exchange -pe (服务端证书) ...
- PWM----调节LED亮度
- - --调节两个LED灯亮度 module led_pwm ( clk, rst, //cnt1_pwm, out1, out2, out3, out4 ); input clk, rst; // ...