RecylerView完美实现瀑布流效果
RecylerView包含三种布局管理器,分别是LinearLayoutManager,GridLayoutManager,StaggeredGridLayoutManager,对应实现单行列表,多行列表,瀑布流式布局。
也分别都具备水平跟垂直方向。
第一步:添加依赖
//noinspection GradleCompatible
compile 'com.android.support:cardview-v7:24.0.0-alpha1'
//noinspection GradleCompatible
compile 'com.android.support:recyclerview-v7:24.0.0-alpha1'
compile 'com.github.bumptech.glide:glide:3.7.0'
因为加载的是网络图片,所以采用的是Glide图片加载框架。
第二步:recylerview布局
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.wangchang.testpalette.MainActivity">
<android.support.v7.widget.RecyclerView
android:id="@+id/recylerview"
android:padding="4dp"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
第三步:RecylerView初始化
recyclerView = (RecyclerView) findViewById(R.id.recylerview);
recyclerView.setHasFixedSize(true);
recyclerView.setLayoutManager(new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL));
recyclerView.setAdapter(adapter = new DemoAdapter());
adapter.replaceAll(getData());
这里主要是 recyclerView.setLayoutManager(new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL)); 设置StaggeredGridLayoutManager布局管理器,参数分别是列数,方向。
第四步:适配器的实现
package com.example.wangchang.testpalette;
import android.app.Activity;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.graphics.Palette;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.TextView;
import com.bumptech.glide.Glide;
import com.bumptech.glide.load.engine.DiskCacheStrategy;
import java.util.ArrayList;
import java.util.List;
/**
* Created by WangChang on 2016/4/1.
*/
public class DemoAdapter extends RecyclerView.Adapter<DemoAdapter.BaseViewHolder> {
private ArrayList<String> dataList = new ArrayList<>();
public void replaceAll(ArrayList<String> list) {
dataList.clear();
if (list != null && list.size() > 0) {
dataList.addAll(list);
}
notifyDataSetChanged();
}
@Override
public DemoAdapter.BaseViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
return new OneViewHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.one, parent, false));
}
@Override
public void onBindViewHolder(DemoAdapter.BaseViewHolder holder, int position) {
holder.setData(dataList.get(position));
}
@Override
public int getItemCount() {
return dataList != null ? dataList.size() : 0;
}
public class BaseViewHolder extends RecyclerView.ViewHolder {
public BaseViewHolder(View itemView) {
super(itemView);
}
void setData(Object data) {
}
}
private class OneViewHolder extends BaseViewHolder {
private ImageView ivImage;
public OneViewHolder(View view) {
super(view);
ivImage = (ImageView) view.findViewById(R.id.ivImage);
int width = ((Activity) ivImage.getContext()).getWindowManager().getDefaultDisplay().getWidth();
ViewGroup.LayoutParams params = ivImage.getLayoutParams();
//设置图片的相对于屏幕的宽高比
params.width = width/3;
params.height = (int) (200 + Math.random() * 400) ;
ivImage.setLayoutParams(params);
}
@Override
void setData(Object data) {
if (data != null) {
String text = (String) data;
Glide.with(itemView.getContext()).load(text).diskCacheStrategy(DiskCacheStrategy.ALL).placeholder(R.mipmap.ic_launcher).crossFade().into(ivImage);
}
}
}
}
这里值得一提的就是如何动态设置宽高,因为要实现瀑布流效果,就是高度随机,参差不齐那种视觉效果。
我原来还以为StaggeredGridLayoutManager会为我们考虑这些事,实际上NO!!!
搞了大半夜,参考翔哥的例子,才了解,尼玛,随机高度还需要我们自己去设置。
真坑,因为这样我就搞不懂GridLayoutManager和StaggeredGridLayoutManager有啥区别了,因为GridLayoutManager也能实现瀑布流效果,这就让我有点萌逼了。
有大神了解的话,希望能留言不吝赐教。
下面来说实现方式
ivImage.getContext()).getWindowManager().getDefaultDisplay().getWidth();
ViewGroup.LayoutParams params = ivImage.getLayoutParams();
//设置图片的相对于屏幕的宽高比
params.width = width/3;
params.height = (int) (200 + Math.random() * 400) ;
ivImage.setLayoutParams(params);
这里是获取屏幕宽度,因为是三列,所以设置图片宽度取屏幕三分之一。
高度设置随机,200-600之间,就这样完事了。
RecylerView完美实现瀑布流效果的更多相关文章
- 使用JS实现图片展示瀑布流效果
不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流 就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候, 下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度 ...
- WPF下制作的简单瀑布流效果
最近又在搞点小东西,美化界面的时候发现瀑布流效果比较不错.顺便就搬到了WPF,下面是界面 我对WEB前端不熟,JS和CSS怎么实现的,我没去研究过,这里就说下WPF的实现思路,相当简单. 1.最重要的 ...
- [Android Pro] RecyclerView实现瀑布流效果(二)
referece to : http://blog.csdn.net/u010687392 在上篇中我们知道RecyclerView中默认给我们提供了三种布局管理器,分别是LinearLayoutMa ...
- RecyclerView实现瀑布流效果(图文详解+源码奉送)
最近有时间研究了一下RecyclerView,果然功能强大啊,能实现的效果还是比较多的,那么今天给大家介绍一个用RecyclerView实现的瀑布流效果. 先来一张效果图: 看看怎么实现吧: 整体工程 ...
- 用jQuery实现瀑布流效果学习笔记
jQuery一直没系统的学,只知道是js库,封装了好多js函数,方便了开发.以前做过一个原生的图片网站瀑布流效果,超级麻烦,这次用了jQuery方法,瞬间代码浓缩了,只有56行js代码.神奇的让我来把 ...
- css浮动+应用(瀑布流效果的实现)
首先是index.html文件: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- 手把手教你js原生瀑布流效果实现
手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...
- 利用JS实现简单的瀑布流效果
哈哈, 我又来啦, 在这一段时间里, 我简单的学习了一下javascript(JS), 虽然不是很懂啦, 但是我也简单的尝试着做了点小东西, 就比如现在流行的瀑布流效果, 经过我的努力终于成功的完成了 ...
- css基础之 图片瀑布流布局:用CSS+DIV等宽格子堆砌瀑布流效果 (一)
<!doctype html> <html> <head> <meta charset="UTF-8"/> <title> ...
随机推荐
- Servlet引擎tomcat之安装
原文来自:https://www.digitalocean.com/community/tutorials/how-to-install-apache-tomcat-8-on-ubuntu-14-04 ...
- linux作业
第二单元 (1)以root用户登录GNOME图形界面 语言支持选择为汉语 (2)使用快捷键切换到虚拟终端2,使用普通用户身份登录,查看系统提示符 (3)使用命令退出虚拟终端2上登录的用户 (4)使用快 ...
- C# 取整函数
向上取整math.ceiling(1) = 1math.ceiling(1.1) = 2math.ceiling(1.5) = 2向下取整math.float(1) = 1math.float(1.1 ...
- Coming
Hi,there, I am coming here to keep a great habit-one day a blog to share what new I have learned tod ...
- nodejs复习02
process 这个模块是单线程的,无法完全利用多核CPU 基本信息 //程序目录 process.cwd(); //应用程序当前目录 process.chdir('/home'); //改变应用程序 ...
- xpath使用
一.安装(win7 64) 1.安装lxml,pip install lxml 2.如果安装出错,下载lxml-3.5.0b1.win-amd64-py2.7.exe: 地址:http://www.l ...
- js遍历json
function test1(){ var json = [{name:'wang',age:22,sex:1},{name:'tang',age:25,sex:1},{name:'yuan',age ...
- 从业十余年谈谈对dotnet看法与坚持
前言 园子经常在讨论关于.Net发展的问题,我也这些年在工作乃至创业过程中使用.Net碰到的一些问题和看法.个人擅长的技术面,C/C++/MFC/STL.ASM.JAVA.VB.Javascript/ ...
- Mac系统中配置Tomcat环境
第一步:下载Tomcat 下载地址:http://tomcat.apache.org/download-80.cgi 直接下载如图选中的即可 第二步: 下载完成后,解压,随意放入目录.如我就把它放在/ ...
- Spring MVC篇一、搭建Spring MVC框架
本项目旨在搭建一个简单的Spring MVC框架,了解Spring MVC的基础配置等内容. 一.项目结构 本项目使用idea intellij创建,配合maven管理.整体的目录结构如图: 其中ja ...