采用Volley,实现瀑布流

今天停下php,研究了下Volley框架的源码,实现了瀑布流的效果。

要实现最终的瀑布流效果,需要掌握几点知识:

(1)自定义布局,因为我们要监听滑到底部的事件就要实现自定义的ScrollView并通过回调函数实现监听

(2)对Vollet框架的掌握,我们需要新建一个requestQueue队列,通过研究源码发现在新建这个队列的时候传入相应的构造函数,然后会调整其中的start方法,有四个线程池收发请求,每个在一个while循环中实现队列的监听。

(3)动态布局,在自定义的scrollView里面放一个LinearLay然后在代码里面计算每列的宽度,添加ImageView到每列的布局里面。

自定义的MyScrollView

package com.fallview;

import com.android.volley.RetryPolicy;

import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.ScrollView;

public class MyScrollView extends ScrollView implements OnTouchListener {

	public MyScrollView(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
	}

	ScrollTouch scrollTouch;

	public void setScrollTouch(ScrollTouch touch) {
		scrollTouch = touch;
		this.setOnTouchListener(this);
	}

	@Override
	public boolean onTouch(View view, MotionEvent arg1) {
		// TODO Auto-generated method stub

		switch (arg1.getAction()) {
		case MotionEvent.ACTION_DOWN:

			break;
		case MotionEvent.ACTION_UP:
			if (view.getMeasuredHeight() <= getHeight() + getScrollY()) {
				scrollTouch.onButtom();
			}

			return true;

		default:
			break;
		}

		return false;
	}

	public interface ScrollTouch {

		public void onButtom();
	}

}

实现的java主类

package com.fallview;

import com.android.volley.RequestQueue;
import com.android.volley.Response.Listener;
import com.android.volley.toolbox.ImageRequest;
import com.android.volley.toolbox.Volley;
import com.example.wangyitest.R;
import com.fallview.MyScrollView.ScrollTouch;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.os.Bundle;
import android.view.ViewGroup.LayoutParams;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class FallImageAct extends Activity implements PicAdds {
	String[] myPics = pics;
	LinearLayout linearLayout;
	int culomWidth;
	int culNum;
	RequestQueue queue;
	int time = 1;

	class scrollListener implements ScrollTouch {

		@Override
		public void onButtom() {
			// TODO Auto-generated method stub
			intLayOne();
		}
	}

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.falllay);
		linearLayout = (LinearLayout) findViewById(R.id.Linearlay);
		((MyScrollView) findViewById(R.id.scroll))
				.setScrollTouch(new scrollListener());
		int screenWidth = getWindowManager().getDefaultDisplay().getWidth();
		culomWidth = (screenWidth - 4) / 3;
		culNum = myPics.length / 3;
		queue = Volley.newRequestQueue(getApplicationContext());
		iniadd3Lay();
		intLayOne();

	}

	LinearLayout.LayoutParams params;

	private void iniadd3Lay() {
		// TODO Auto-generated method stub
		layout1 = new LinearLayout(getApplicationContext());
		params = new LinearLayout.LayoutParams(culomWidth,
				LinearLayout.LayoutParams.WRAP_CONTENT);
		layout1.setPadding(2, 2, 2, 2);
		layout1.setOrientation(LinearLayout.VERTICAL);
		layout1.setLayoutParams(new LinearLayout.LayoutParams(culomWidth,
				LinearLayout.LayoutParams.WRAP_CONTENT));
		linearLayout.addView(layout1);

		layout2 = new LinearLayout(getApplicationContext());
		LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
				culomWidth, LinearLayout.LayoutParams.WRAP_CONTENT);
		layout2.setPadding(2, 2, 2, 2);
		layout2.setOrientation(LinearLayout.VERTICAL);
		layout2.setLayoutParams(new LinearLayout.LayoutParams(culomWidth,
				LinearLayout.LayoutParams.WRAP_CONTENT));
		linearLayout.addView(layout2);

		layout3 = new LinearLayout(getApplicationContext());
		params = new LinearLayout.LayoutParams(culomWidth,
				LinearLayout.LayoutParams.WRAP_CONTENT);
		layout3.setPadding(2, 2, 2, 2);
		layout3.setOrientation(LinearLayout.VERTICAL);
		layout3.setLayoutParams(new LinearLayout.LayoutParams(culomWidth,
				LinearLayout.LayoutParams.WRAP_CONTENT));
		linearLayout.addView(layout3);

	}

	LinearLayout layout1;
	LinearLayout layout2;
	LinearLayout layout3;

	private void intLayOne() {
		// TODO Auto-generated method stub

		time++;
		if (time > 5)
			return;

		for (int i = 0; i < culNum; i++) {
			ImageRequest imageRequest = new ImageRequest(pics[i],
					new Listener<Bitmap>() {

						@Override
						public void onResponse(Bitmap response) {
							// TODO Auto-generated method stub
							ImageView imageView = new ImageView(
									getApplicationContext());
							imageView.setLayoutParams(new LayoutParams(params));
							imageView.setImageBitmap(response);
							layout1.addView(imageView);
						}
					}, culomWidth, 0, Config.RGB_565, null);
			queue.add(imageRequest);
		}

		intLayTwo();
	}

	private void intLayTwo() {
		// TODO Auto-generated method stub

		for (int i = culNum; i < 2 * culNum; i++) {
			ImageRequest imageRequest = new ImageRequest(pics[i],
					new Listener<Bitmap>() {

						@Override
						public void onResponse(Bitmap response) {
							// TODO Auto-generated method stub
							ImageView imageView = new ImageView(
									getApplicationContext());
							imageView.setLayoutParams(new LayoutParams(params));
							imageView.setImageBitmap(response);
							layout2.addView(imageView);
						}
					}, culomWidth, 0, Config.RGB_565, null);
			queue.add(imageRequest);
		}
		intLaythree();
	}

	private void intLaythree() {
		// TODO Auto-generated method stub

		for (int i = 2 * culNum; i < pics.length; i++) {
			ImageRequest imageRequest = new ImageRequest(pics[i],
					new Listener<Bitmap>() {

						@Override
						public void onResponse(Bitmap response) {
							// TODO Auto-generated method stub
							ImageView imageView = new ImageView(
									getApplicationContext());
							imageView.setLayoutParams(new LayoutParams(params));
							imageView.setImageBitmap(response);
							layout3.addView(imageView);
						}
					}, culomWidth, 0, Config.RGB_565, null);
			queue.add(imageRequest);
		}

	}
}

时间: 2024-10-16 05:32:58

采用Volley,实现瀑布流的相关文章

iOS开发UI篇—自定义瀑布流控件(接口设计)

iOS开发UI篇—自定义瀑布流控件(接口设计) 一.简单说明 1.关于瀑布流 电商应用要展示商品信息通常是通过瀑布流的方式,因为每个商品的展示图片,长度和商都都不太一样. 如果不用瀑布流的话,展示这样的格子数据,还有一种办法是使用九宫格. 但利用九宫格有一个缺点,那就是每个格子的宽高是一样的,如果一定要使用九宫格来展示,那么展示的商品图片可能会变形. 为了保证商品图片能够按照原来的宽高比进行展示,一般采用的是瀑布流的方式. 2.瀑布流的特点: 由很多的格子组成,但是每个格子的宽度和高速都是不确定

IOS 瀑布流UICollectionView实现

IOS 瀑布流UICollectionView实现 在实现瀑布流之前先来看看瀑布流的雏形(此方法的雏形 UICollectionView) 对于UICollectionView我们有几点注意事项 它和tableView不一样,ContentView的内容完全需要我们自己去添加. 它与tableview相比,他的初始化需要FlowLayout并且大部分操作在其上. UIcollectionView的实用性极强,虽然有时他并不是最好的解决方案,但是它可以很灵活的实现各种效果. 图(一) 如图,模拟器

js实现瀑布流以及加载效果

一.瀑布流是个啥? 瀑布流,是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部. 最早采用瀑布流布局的网站是Pinterest,逐渐在国内流行开来,比如我们熟知的百度图片的布局,在"很久"以前,百度图片还是需要一页一页的点击进行查看更多图片,而现在的瀑布流布局使用户查找图片更加方便. 二.瀑布流的优缺点 优点: 1.节省了页面的空间,不再需要导航和页码按钮. 2.增强了用户的体验,使用户的体验更多的是在于浏览图

代码: 两列图片瀑布流(一次后台取数据,图片懒加载。下拉后分批显示图片。图片高度未知,当图片onload后才显示容器)

代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到合意的,所以根据网上找的一段代码,进行了较大改动. 需引用 zepto 或 jquery. 我这个是应用于手机上的,两列瀑布流,图片高度未知——等图片的onloaded事件触发后,才对容器进行计算和定位. 大容器是 $("#imgList"),容器格子是$(".pin"

【前端】用jQuery实现瀑布流效果

jQuery实现瀑布流效果 何为瀑布流: 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早采用此布局的网站是Pinterest,逐渐在国内流行开来.国内大多数清新站基本为这类风格. 瀑布流的应用: 瀑布流对于图片的展现,是高效而具有吸引力的,用户一眼扫过的快速阅读模式可以在短时间内获得更多的信息量,而瀑布流里懒加载模式又避免了用户鼠标点击的翻页操作,瀑布流的主要特性便是错落有致,定宽而不

Javascript之瀑布流(一)

哇,瀑布流,是的,不错,不错,真的不错,很好玩的样子,于是自己想玩玩啊,来吧,就玩起. 循序渐进,我这里采用原生的js代码来书写.为了方便大家运行代码,我就全部样式和CSS都写在html里面了,当然还需要图片,我会打包. 来上代码. 直接代码 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>哇,瀑布流啊</title> <style ty

javascript自适应宽度的瀑布流实现思路

这里主要介绍瀑布流的一种实现方法:绝对定位(css)+javascript+ajax+json.简单一点如果不做滚动加载的话就是绝对定位(css)+javascript了,ajax和json是滚动加载更多内容的时候用到的,感兴趣的你可以参考下哦 这样的布局并不陌生,从2011年Pinterest创立以来,中国互联网就迅速掀起了一股模仿Pinterest的热潮,国内有众多网站采用瀑布流的布局方式,例如花瓣网.美丽说等等.而事实上在中国互联网,模仿一些在国外被人看好的模式(当然,你也可以说是山寨或抄

产品三俗:瀑布流、动态流、奖章

有三种流行的产品要素“瀑布流.动态流.奖章”,我称之为产品三俗,容易因其流行而被滥用.PM选择它们有可能是因为“时髦”“标配”“别人都在用”,这很糟糕.恰好动态流和奖章我都折腾过,多多少少吃过一点亏,总结如下.云鼎娱乐城 瀑布流 瀑布流的鼻祖是Pinterest,Pinterest的用户97.9%是女性.有种说法是,洋妞们从小就有收集剪报的习惯,Pinterest将这个习惯移植到了网络上,故快速引爆流行.听上去挺有道理. 从交互角度来分析,瀑布流最大的好处有两个,第一是提高了“发现好图”的效率,

jquery实现无限滚动瀑布流实现原理

现在类似于pinterest这类的表现效果很火,其实我比较中意的是他的布局效果,而不是那种瀑布流. 虽然我不是特别喜欢这种瀑布流的表现样式,但是还是写了几篇关于无限滚动瀑布流效果的文章,Infinite scroll+Masonry=无限滚动瀑布流,infinite-scroll-jquery滚动条(下拉)加载数据插件之类的文章.可能是我表达描述不是很详细清楚,所以好多朋友看了不是很清楚,并发信给我求解释.所以有了今天这篇文章. 其实早在:十几款jquery无限滚动插件这 篇文章中我就提到过这种