android瀑布流效果(仿蘑菇街)
我们还是来看一款示例:(蘑菇街)
看起来很像我们的gridview吧,不过又不像,因为item大小不固定的,看起来是不是别有一番风味,确实如此.就如我们的方角图形,斯通见惯后也就出现了圆角.下面我简单介绍下实现方法.
第一种:
我们在配置文件中定义好列数.如上图也就是3列.我们需要定义三个LinearLayout,然后把获取到的图片add里面就ok了.
main.xml
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:background="@android:color/background_light"
- android:orientation="vertical" >
- <include
- android:id="@+id/progressbar"
- layout="@layout/loading" />
- <com.jj.waterfall.LazyScrollView
- android:id="@+id/lazyscrollview"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:layout_weight="1"
- android:scrollbars="@null" >
- <LinearLayout
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:background="@android:color/background_light"
- android:orientation="horizontal"
- android:padding="2dp" >
- <LinearLayout
- android:id="@+id/layout01"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:layout_weight="1"
- android:orientation="vertical" >
- </LinearLayout>
- <LinearLayout
- android:id="@+id/layout02"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:layout_weight="1"
- android:orientation="vertical" >
- </LinearLayout>
- <LinearLayout
- android:id="@+id/layout03"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:layout_weight="1"
- android:orientation="vertical" >
- </LinearLayout>
- </LinearLayout>
- </com.jj.waterfall.LazyScrollView>
- <TextView
- android:id="@+id/loadtext"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:background="@drawable/loading_bg"
- android:gravity="center"
- android:padding="10dp"
- android:text="Loading..."
- android:textColor="@android:color/background_dark" />
- </LinearLayout>
在这里因为图片很多就把图片放在assets文件中,如果想从网上拉取数据,自己写额外部分.
- @Override
- public void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- InitView();
- assetManager = this.getAssets();
- // 获取显示图片宽度
- Image_width = (getWindowManager().getDefaultDisplay().getWidth() - 4) / 3;
- try {
- image_filenames = Arrays.asList(assetManager.list("images"));// 获取图片名称
- } catch (IOException e) {
- e.printStackTrace();
- }
- addImage(current_page, count);
- }
- /***
- * 加载更多
- *
- * @param current_page
- * 当前页数
- * @param count
- * 每页显示个数
- */
- private void addImage(int current_page, int count) {
- for (int x = current_page * count; x < (current_page + 1) * count
- && x < image_filenames.size(); x++) {
- addBitMapToImage(image_filenames.get(x), y, x);
- y++;
- if (y >= 3)
- y = 0;
- }
- }
- /***
- * 添加imageview 到layout
- *
- * @param imagePath 图片name
- * @param j 列
- * @param i 行
- */
- public void addBitMapToImage(String imagePath, int j, int i) {
- ImageView imageView = getImageview();
- asyncTask = new ImageDownLoadAsyncTask(this, imagePath, imageView,
- Image_width);
- asyncTask.setProgressbar(progressbar);
- asyncTask.setLoadtext(loadtext);
- asyncTask.execute();
- imageView.setTag(i);
- if (j == 0) {
- layout01.addView(imageView);
- } else if (j == 1) {
- layout02.addView(imageView);
- } else if (j == 2) {
- layout03.addView(imageView);
- }
- imageView.setOnClickListener(new OnClickListener() {
- @Override
- public void onClick(View v) {
- Toast.makeText(MainActivity.this,
- "您点击了" + v.getTag() + "个Item", Toast.LENGTH_SHORT)
- .show();
- }
- });
- }
注释已经很明确,相信大家都看的明白,我就不过多解释了.
因为瀑布流不是一个规则的试图,所以我们不可能用listview那种“底部加一个按钮试图,点击加载更多,这样看起来很难看”。因此我们最好滑动到低端自动加载.
我们这里用到的自定义ScrollView,因为我们要实现下滑分页,这里要判断是否要进行分页等操作.
LazyScrollView.Java (这个法很实用哦.)
- /***
- * 自定义ScrollView
- *
- * @author zhangjia
- *
- */
- public class LazyScrollView extends ScrollView {
- private static final String tag = "LazyScrollView";
- private Handler handler;
- private View view;
- public LazyScrollView(Context context) {
- super(context);
- }
- public LazyScrollView(Context context, AttributeSet attrs) {
- super(context, attrs);
- }
- public LazyScrollView(Context context, AttributeSet attrs, int defStyle) {
- super(context, attrs, defStyle);
- }
- // 这个获得总的高度
- public int computeVerticalScrollRange() {
- return super.computeHorizontalScrollRange();
- }
- public int computeVerticalScrollOffset() {
- return super.computeVerticalScrollOffset();
- }
- /***
- * 初始化
- */
- private void init() {
- this.setOnTouchListener(onTouchListener);
- handler = new Handler() {
- @Override
- public void handleMessage(Message msg) {
- // process incoming messages here
- super.handleMessage(msg);
- switch (msg.what) {
- case 1:
- if (view.getMeasuredHeight() <= getScrollY() + getHeight()) {
- if (onScrollListener != null) {
- onScrollListener.onBottom();
- }
- } else if (getScrollY() == 0) {
- if (onScrollListener != null) {
- onScrollListener.onTop();
- }
- } else {
- if (onScrollListener != null) {
- onScrollListener.onScroll();
- }
- }
- break;
- default:
- break;
- }
- }
- };
- }
- OnTouchListener onTouchListener = new OnTouchListener() {
- @Override
- public boolean onTouch(View v, MotionEvent event) {
- // TODO Auto-generated method stub
- switch (event.getAction()) {
- case MotionEvent.ACTION_DOWN:
- break;
- case MotionEvent.ACTION_UP:
- if (view != null && onScrollListener != null) {
- handler.sendMessageDelayed(handler.obtainMessage(1), 200);
- }
- break;
- default:
- break;
- }
- return false;
- }
- };
- /**
- * 获得参考的View,主要是为了获得它的MeasuredHeight,然后和滚动条的ScrollY+getHeight作比较。
- */
- public void getView() {
- this.view = getChildAt(0);
- if (view != null) {
- init();
- }
- }
- /**
- * 定义接口
- *
- * @author admin
- *
- */
- public interface OnScrollListener {
- void onBottom();
- void onTop();
- void onScroll();
- }
- private OnScrollListener onScrollListener;
- public void setOnScrollListener(OnScrollListener onScrollListener) {
- this.onScrollListener = onScrollListener;
- }
我们还需要一个类,异步加载实现,我想有开发经验的朋友一定用过好多次了,这里就不展示代码了,想看的朋友,可以点击下载(如果认为还不错的话,请您一定要表示一下哦.)
对了,忘记一点,我们还需要对MainActivity 中的lazyScrollView实现OnScrollListener接口,对滑动到底部进行监听.
效果图:
/**************************************************************************/
下面我介绍另外一种做法:(相对上面更灵活)
我们动态添加列.
配置文件就不贴了,和上面那例子一样,只不过里面值包含一个LinearLayout布局.
在这里我们动态添加列布局.
- /***
- * init view
- */
- public void initView() {
- setContentView(R.layout.main);
- lazyScrollView = (LazyScrollView) findViewById(R.id.waterfall_scroll);
- lazyScrollView.getView();
- lazyScrollView.setOnScrollListener(this);
- waterfall_container = (LinearLayout) findViewById(R.id.waterfall_container);
- progressbar = (LinearLayout) findViewById(R.id.progressbar);
- loadtext = (TextView) findViewById(R.id.loadtext);
- item_width = getWindowManager().getDefaultDisplay().getWidth() / column;
- linearLayouts = new ArrayList<LinearLayout>();
- // 添加列到waterfall_container
- for (int i = 0; i < column; i++) {
- LinearLayout layout = new LinearLayout(this);
- LinearLayout.LayoutParams itemParam = new LinearLayout.LayoutParams(
- item_width, LayoutParams.WRAP_CONTENT);
- layout.setOrientation(LinearLayout.VERTICAL);
- layout.setLayoutParams(itemParam);
- linearLayouts.add(layout);
- waterfall_container.addView(layout);
- }
- }
- /***
- * 获取imageview
- *
- * @param imageName
- * @return
- */
- public ImageView getImageview(String imageName) {
- BitmapFactory.Options options = getBitmapBounds(imageName);
- // 创建显示图片的对象
- ImageView imageView = new ImageView(this);
- LayoutParams layoutParams = new LayoutParams(LayoutParams.WRAP_CONTENT,
- LayoutParams.FILL_PARENT);
- imageView.setLayoutParams(layoutParams);
- //
- imageView.setMinimumHeight(options.outHeight);
- imageView.setMinimumWidth(options.outWidth);
- imageView.setPadding(2, 0, 2, 2);
- imageView.setBackgroundResource(R.drawable.image_border);
- if (options != null)
- options = null;
- return imageView;
- }
- /***
- *
- * 获取相应图片的 BitmapFactory.Options
- */
- public BitmapFactory.Options getBitmapBounds(String imageName) {
- int h, w;
- BitmapFactory.Options options = new BitmapFactory.Options();
- options.inJustDecodeBounds = true;// 只返回bitmap的大小,可以减少内存使用,防止OOM.
- InputStream is = null;
- try {
- is = assetManager.open(file + "/" + imageName);
- } catch (IOException e) {
- e.printStackTrace();
- }
- BitmapFactory.decodeStream(is, null, options);
- return options;
- }
在这里我稍微修改了下,为要显示的iamgeview添加一个边框,这样看起来效果不错,我们动态滑动的同时, 然后图片陆续的填充边框.蘑菇街就是这种效果哦.
效果图:
显示成4列,因此图片有点小,仔细看的话,你应该可以看到有好多边框,然后图片陆续的填充边框.这种效果感觉对上面那个用户体验更友好些.
最后简单总结下:针对瀑布流最好使用第二种方法,这种可扩展性比较大,哪天老大说四列太丑了,改成三列,那么我们只需要把column改成3就ok了,简单吧。
注意:由于图片量太多,占用空间太大,因此我将图片上传到网上,获取源码的同学下载该文件放到项目的assets文件夹下,然后运行就ok了.
如果有不足之处,请留言指出,
想要源码请留邮箱.Thanks for you 。
由于比较繁忙,我将源码上传网上,如有需要,自行下载,如有问题,请留言.(记得下载图片导入项目里面)
图片下载
示例二源码(第一种方式)
示例一源码(第二种方式)
哈哈,如果对您又帮助的话,记得赞一个哦.
原帖地址:http://blog.csdn.net/jj120522/article/details/8022545
另一个开源框架(EOE):http://www.eoeandroid.com/thread-157448-1-1.html
- 上一篇Eclipse背景设置
- 下一篇Android 个人学习笔记之---SAX解析XML文件(有一个坑爹的问题)
android瀑布流效果(仿蘑菇街)相关推荐
- Android瀑布流,类似于蘑菇街和迷尚 应用里的排列
我在gitHub里开了一个项目,方便大家获取代码 https://github.com/dodola/android_waterfall 已使用应用: 雨滴阅读 应用使用了这个效果,非常感谢.希望大家 ...
- android 瀑布流效果 保存地址
http://tech.ddvip.com/2013-09/1379785198203013_2.html 转载于:https://www.cnblogs.com/lx0551/p/3881230.h ...
- Android UI 之WaterFall瀑布流效果 [复制链接]
2019独角兽企业重金招聘Python工程师标准>>> 所谓瀑布流效果,简单说就是宽度相同但是高度不同的一大堆图片,分成几列,然后像水流一样向下排列,并随着用户的上下滑动自动加载更多 ...
- Android UI 之WaterFall瀑布流效果
所谓瀑布流效果,简单说就是宽度相同但是高度不同的一大堆图片,分成几列,然后像水流一样向下排列,并随着用户的上下滑动自动加载更多的图片内容. 语言描述比较抽象,具体效果看下面的截图: ...
- SwipeRefreshLayout+CardView+RecyclerView 精美瀑布流效果
博主声明: 转载请在开头附加本文链接及作者信息,并标记为转载.本文由博主 威威喵 原创,请多支持与指教. 本文首发于此 博主:威威喵 | 博客主页:https://blog.csdn.net/ ...
- javascript瀑布流效果
javascript瀑布流效果 其实javascript瀑布流 前几年都已经很流行了(特别是美丽说,蘑菇街),最近看到网上有人问这个瀑布流效果,所以自己有空的时候就研究了下,其实也是研究别人的代码,研 ...
- 前端如何实现音乐盒胶盘的转动_干货来袭!web前端开发工程师必看之如何使用CSS3实现瀑布流效果?...
首先,我们来看一下什么是瀑布流布局效果,比如电商网站 蘑菇街 原理图: 在一个大盒子里,放置多个小盒子,小盒子的大小可以不一致,长短不一样,呈现一种瀑布流的效果. 使用CSS3S实现只需要如下4步: ...
- 图片流_干货来袭!web前端开发工程师必看之如何使用CSS3实现瀑布流效果?
首先,我们来看一下什么是瀑布流布局效果,比如电商网站 蘑菇街 原理图: 在一个大盒子里,放置多个小盒子,小盒子的大小可以不一致,长短不一样,呈现一种瀑布流的效果. 使用CSS3S实现只需要如下4步: ...
- swift瀑布流实现_蘑菇街PC首页瀑布流实践
零.介绍 这篇文章主要是介绍网站页面瀑布流布局的实现,主要包括: 瀑布流是什么 瀑布流的实现原理 瀑布流的使用场景 实现中有哪些问题 & 如何解决 可扩展的使用场景 一.瀑布流是什么 瀑布流, ...
最新文章
- MATLAB【五】———— matlab 调用C++生成exe文件,高斯核函数
- java检测按键_java – 在控制台中检测按键
- (理论篇)从基础文件IO说起虚拟内存,内存文件映射,零拷贝
- netty权威指南学习笔记五——分隔符和定长解码器的应用
- api接口rsa加密
- 服务器母鸡系统,母鸡云服务器
- Android应用中Back键的监听及处理
- mysql5.6.20安装详解_MySql 5.6.20 安装 使用
- OpenCv平滑与模糊
- python实现将将输入的可约分数化简为不可约分数
- GBK字符串转Unicode字符串
- C语言极速学习开发——51单片机入门编程之使用KeilC51进行代码编译(点亮你心中学习的精神之灯-上)
- Python做一份简易旅行攻略——疫情之后,若条件允许,可愿意用一场旅行“弥补”自己
- oracle general ledger,处理 Oracle General Ledger 调整期间
- SI4455程序调试问题总结
- [Python3] 超级码力在线编程大赛初赛 第2场 题解
- 21个经典数据科学面试题及答案(上)
- 金蝶K3登录后提示“你的金蝶标准支持服务已到期”补丁修复
- 投入≠成效,近百项指标为企业数字化把把脉
- stm32学习笔记-翻译官ADC
热门文章
- Test.ai完成1100万美元A轮融资,Google人工智能基金领投
- PyTorch更新了:支持Windows,新增零维张量
- Hinton:今年AI没有重大突破,但三件事值得关注
- 论文自动转代码!IBM印度大三实习生搞了个神奇研究(已中AAAI)
- Task10.Bert
- 电商数据库设计及架构优化实战(一) - 制定数据库开发规范
- SparkMLlib分类算法之决策树学习
- SQL Server2008R无法登录的解决方案(系统文件损坏)1814 18456....不看别后悔,有用请点赞...
- Spring Security学习总结
- 【SPOJ1297】Palindrome (SA+RMQ)