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 ,但是加载更多或者下拉刷新的时候闪屏,对用户体验很不好 ...
随机推荐
- 类数组arguments
var isArray = function(){ return arguments; } isArray(1,2,3); // 返回[1,2,3] isArray.call(null,1,2,3); ...
- Ubuntu16.04安装Hadoop2.6+Spark1.6+开发实例
Ubuntu16.04安装Hadoop2.6+Spark1.6,并安装python开发工具Jupyter notebook,通过pyspark测试一个实例,調通整个Spark+hadoop伪分布式开发 ...
- Avro-RPC client in Flume
Avro used in Flume Define the interface of RpcClient public interface RpcClient { public int getBatc ...
- Android学习——Fragment与Activity通信(一)
学会了在Activity中加载Fragment的方法之后,接下来便需要学习Activity和Fragment之间的通信.这一节先学习如何把Activity中的信息传递给Fragment. 基本过程 在 ...
- java:网络通讯
网络标准模型:开放式系统模型OSI https://www.cnblogs.com/lydit/articles/4499928.html 理解Scoket通讯:https://www.cnblogs ...
- python 02/100例
题目 输入某年某月某日,判断这一天是这一年的第几天? 分析 例如:2018年6月19日 天数 = 19天 + 一月天数 + 2月天数 + ... + 6月天数 注意 闰年的2月是29天,如果年份是闰年 ...
- 织梦CMS调用文章列表时,怎么显示短时间格式
问题描述:织梦在上传文章的时候,默认的上传文章的时间格式都是年.月.日.小时.分钟.秒的格式,怎么才能实现仅显示年.月.日的格式呢? 解决方法: [field:pubdate function=&qu ...
- Zabbix监控 windows agent安装配置
下载Windows的zabbix客户端 载地址:http://www.zabbix.com/download.php 选择windows版本的agent下载 从官方下载Zabbix Agent后,压缩 ...
- python接口测试-项目实践(七)脚本优化
七 脚本优化:重复代码的提取成函数:与项目接口相关的都封装到一个类中:添加手工验证脚本,增加输入值的判断逻辑 将所有与该项目接口相关的封装成类 class ProjectApi: #3个数据源接口 d ...
- IOS HTML+CSS+JS 总结
一.HTML + CSS 1.能看到标签的结构* 父子关系<p> <span>123</span></p> * 属性<img src=&qu ...