AndroidUI系列 - ViewGroup实现瀑布流

2024-02-29 07:32
文章标签 实现 系列 viewgroup 瀑布 androidui

本文主要是介绍AndroidUI系列 - ViewGroup实现瀑布流，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

其实瀑布流现在用的越来越少了，更多的是使用MD的风格了。风靡一时的瀑布流现在渐渐地开始退居后幕了。不过，瀑布流也是个不错的自定义控件练习方式。相对简单的实现逻辑，可以帮助更好的更快的上手ViewGroup的自定义，以及onMeasure和onLayout等方法的理解和学习。先看看效果。

这里写图片描述

那么再来看看，需要考虑些什么。
这里写图片描述

很简单的逻辑，外围能滑动，因为加了一层ScollView，当然也可以不加，为了方便就加了。
直接贴代码。

package com.example.administrator.myapplication.flow;import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;import com.example.administrator.myapplication.R;/*** Created by ShuWen on 2017/6/9.*/public class WaterFallLayout extends ViewGroup {private int mTop[];private int mColNumber = 3;//默认3列private int mHorozontalSpace = 20;//每列间隔20pxprivate int mVerticalSpace = 20;//每行之间private int childWidth = 0;private int maxHeight = 0;private int minColNumber = 0;public WaterFallLayout(Context context) {super(context);init(context,null);}public WaterFallLayout(Context context, AttributeSet attrs) {super(context, attrs);init(context,attrs);}public WaterFallLayout(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);init(context,attrs);}private void init(Context context, AttributeSet attrs){TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.WaterFallLayout);mColNumber = typedArray.getInt(R.styleable.WaterFallLayout_mColNumber,3);mHorozontalSpace = DensityUtil.dip2px(context,typedArray.getDimension(R.styleable.WaterFallLayout_mHorozontalSpace,20));mVerticalSpace = DensityUtil.dip2px(context,typedArray.getDimension(R.styleable.WaterFallLayout_mVerticalSpace,20));mTop = new int[mColNumber];}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);//测量模式int widthMeasureMode = MeasureSpec.getMode(widthMeasureSpec);int heightMeasureMode = MeasureSpec.getMode(heightMeasureSpec);//默认大小int widthMeasureSize = MeasureSpec.getSize(widthMeasureSpec);int heightMeasureSize = MeasureSpec.getSize(heightMeasureSpec);//测量之后的宽高int measuredWidth = 0;int measuredHeight = 0;//测量所有子控件for (int i = 0; i < getChildCount(); i++) {View view = getChildAt(i);measureChild(view,widthMeasureSpec,heightMeasureSpec);}//计算每列的宽childWidth = (widthMeasureSize - mColNumber * mHorozontalSpace) / 3;//计算控件的宽 若设置了确定的大小，就采用设置大小if (widthMeasureMode == MeasureSpec.EXACTLY) {measuredWidth = widthMeasureSize;} else {if (getChildCount() > mColNumber) {measuredWidth = widthMeasureSize;} else {measuredWidth = childWidth * getChildCount() + (getChildCount() - 1) * mHorozontalSpace;}}//计算控件的高 若设置了确定的大小，就采用设置大小if (heightMeasureMode == MeasureSpec.EXACTLY) {measuredHeight = heightMeasureSize;} else {measuredHeight = getMaxHeight();}setMeasuredDimension(measuredWidth, measuredHeight);}@Overrideprotected void onLayout(boolean changed, int l, int t, int r, int b) {int left, top, right, bottom;//再次布局时，清除上次缓存数据clearTop();int childCount = getChildCount();for (int i = 0; i < childCount; i++) {View viewChild = getChildAt(i);int measuredHeight = viewChild.getMeasuredHeight();int measuredWidth = viewChild.getMeasuredWidth();int childHeight = measuredHeight * childWidth / measuredWidth;//找到最小高度列int minColNum = getMinColNumber();left = minColNum*(mHorozontalSpace + childWidth);top = mTop[minColNum];right = left+childWidth;bottom = top + childHeight;viewChild.layout(left,top,right,bottom);//记录每一行的高mTop[minColNum] += childHeight + mVerticalSpace;}}private void clearTop() {for (int i = 0; i < mTop.length; i++) {mTop[i] = 0;}}public int getMaxHeight() {for (int i = 0; i < mTop.length; i++) {if (mTop[i] > maxHeight){maxHeight = mTop[i];}}return maxHeight;}public int getMinColNumber() {for (int i = 0; i < mTop.length; i++) {if (mTop[minColNumber] > mTop[i]){minColNumber = i;}}return minColNumber;}
}

该控件对应的一些属性值。

<?xml version="1.0" encoding="utf-8"?>
<resources><declare-styleable name="WaterFallLayout"><attr name="mColNumber" format="integer"/><attr name="mHorozontalSpace" format="dimension"/><attr name="mVerticalSpace" format="dimension"/></declare-styleable>
</resources>

还有一个方法类，将dp转px。

package com.example.administrator.myapplication.flow;import android.content.Context;/*** Created by ShuWen on 2017/6/9.*/public class DensityUtil {/*** 根据手机的分辨率从 dp 的单位 转成为 px(像素)** @param context* @param dpValue* @return* @date   2015年10月28日*/public static int dip2px(Context context, float dpValue) {final float scale = context.getResources().getDisplayMetrics().density;return (int) (dpValue * scale + 0.5f);}/*** 根据手机的分辨率从 px(像素) 的单位 转成为 dp** @param context* @param pxValue* @return* @date   2015年10月28日*/public static int px2dip(Context context, float pxValue) {final float scale = context.getResources().getDisplayMetrics().density;return (int) (pxValue / scale + 0.5f);}
}

然后看看MainActivity

package com.example.administrator.myapplication;import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.ViewGroup;
import android.widget.ImageView;import com.example.administrator.myapplication.flow.WaterFallLayout;import java.util.Random;public class MainActivity extends AppCompatActivity {WaterFallLayout waterfall;private static int IMG_COUNT = 5;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);waterfall = (WaterFallLayout) findViewById(R.id.waterfall);for (int i = 0; i < 20; i++) {ImageView imageView = new ImageView(this);imageView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));Random random = new Random();Integer num = Math.abs(random.nextInt());if (num % IMG_COUNT == 0) {imageView.setImageResource(R.drawable.a0);} else if (num % IMG_COUNT == 1) {imageView.setImageResource(R.drawable.a1);} else if (num % IMG_COUNT == 2) {imageView.setImageResource(R.drawable.a2);} else if (num % IMG_COUNT == 3) {imageView.setImageResource(R.drawable.a3);} else if (num % IMG_COUNT == 4) {imageView.setImageResource(R.drawable.a4);}else if (num % IMG_COUNT == 5) {imageView.setImageResource(R.drawable.a5);}waterfall.addView(imageView);}}}

看看布局。

<?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"xmlns:app="http://schemas.android.com/apk/res-auto"tools:context="com.example.administrator.myapplication.MainActivity"><!--<com.airbnb.lottie.LottieAnimationView--><!--android:id="@+id/animation_view"--><!--android:layout_width="wrap_content"--><!--android:layout_height="wrap_content"--><!--app:lottie_fileName="pin.json"--><!--android:layout_centerInParent="true"--><!--app:lottie_loop="true"--><!--app:lottie_autoPlay="true" />--><ScrollView
        android:layout_width="match_parent"android:layout_height="match_parent"><com.example.administrator.myapplication.flow.WaterFallLayout
            android:id="@+id/waterfall"android:layout_width="wrap_content"android:layout_height="wrap_content"app:mColNumber="3"app:mHorozontalSpace="5dp"app:mVerticalSpace="5dp"></com.example.administrator.myapplication.flow.WaterFallLayout></ScrollView></RelativeLayout>

简单粗暴，这个例子有利于理解ViewGroup的一些计算逻辑，为其他复杂自定义控件打下基础。

这篇关于AndroidUI系列 - ViewGroup实现瀑布流的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/758003。

相关文章

C++中unordered_set哈希集合的实现

C++中unordered_set哈希集合的实现

《C++中unordered_set哈希集合的实现》std::unordered_set是C++标准库中的无序关联容器,基于哈希表实现,具有元素唯一性和无序性特点,本文就来详细的介绍一下unorder... 目录一、概述二、头文件与命名空间三、常用方法与示例1. 构造与析构2. 迭代器与遍历3. 容量相关4
阅读更多...
C++中悬垂引用(Dangling Reference) 的实现

C++中悬垂引用(Dangling Reference) 的实现

《C++中悬垂引用(DanglingReference)的实现》C++中的悬垂引用指引用绑定的对象被销毁后引用仍存在的情况,会导致访问无效内存,下面就来详细的介绍一下产生的原因以及如何避免,感兴趣... 目录悬垂引用的产生原因1. 引用绑定到局部变量，变量超出作用域后销毁2. 引用绑定到动态分配的对象，对象
阅读更多...
SpringBoot基于注解实现数据库字段回填的完整方案

SpringBoot基于注解实现数据库字段回填的完整方案

《SpringBoot基于注解实现数据库字段回填的完整方案》这篇文章主要为大家详细介绍了SpringBoot如何基于注解实现数据库字段回填的相关方法,文中的示例代码讲解详细,感兴趣的小伙伴可以了解... 目录数据库表pom.XMLRelationFieldRelationFieldMapping基础的一些代
阅读更多...
Java HashMap的底层实现原理深度解析

Java HashMap的底层实现原理深度解析

《JavaHashMap的底层实现原理深度解析》HashMap基于数组+链表+红黑树结构,通过哈希算法和扩容机制优化性能,负载因子与树化阈值平衡效率,是Java开发必备的高效数据结构,本文给大家介绍... 目录一、概述：HashMap的宏观结构二、核心数据结构解析1. 数组（桶数组）2. 链表节点（Node
阅读更多...
Java AOP面向切面编程的概念和实现方式

Java AOP面向切面编程的概念和实现方式

《JavaAOP面向切面编程的概念和实现方式》AOP是面向切面编程,通过动态代理将横切关注点（如日志、事务）与核心业务逻辑分离,提升代码复用性和可维护性,本文给大家介绍JavaAOP面向切面编程的概... 目录一、AOP 是什么？二、AOP 的核心概念与实现方式核心概念实现方式三、Spring AOP 的关
阅读更多...
Python实现字典转字符串的五种方法

Python实现字典转字符串的五种方法

《Python实现字典转字符串的五种方法》本文介绍了在Python中如何将字典数据结构转换为字符串格式的多种方法,首先可以通过内置的str()函数进行简单转换;其次利用ison.dumps()函数能够... 目录1、使用json模块的dumps方法：2、使用str方法：3、使用循环和字符串拼接：4、使用字符
阅读更多...
Linux下利用select实现串口数据读取过程

Linux下利用select实现串口数据读取过程

《Linux下利用select实现串口数据读取过程》文章介绍Linux中使用select、poll或epoll实现串口数据读取,通过I/O多路复用机制在数据到达时触发读取,避免持续轮询,示例代码展示设... 目录示例代码（使用select实现）代码解释总结在 linux 系统里，我们可以借助 select、
阅读更多...
Linux挂载linux/Windows共享目录实现方式

Linux挂载linux/Windows共享目录实现方式

《Linux挂载linux/Windows共享目录实现方式》：本文主要介绍Linux挂载linux/Windows共享目录实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录文件共享协议linux环境作为服务端（NFS）在服务器端安装 NFS创建要共享的目录修改 NFS 配
阅读更多...
通过React实现页面的无限滚动效果

通过React实现页面的无限滚动效果

《通过React实现页面的无限滚动效果》今天我们来聊聊无限滚动这个现代Web开发中不可或缺的技术,无论你是刷微博、逛知乎还是看脚本,无限滚动都已经渗透到我们日常的浏览体验中,那么,如何优雅地实现它呢？... 目录1. 早期的解决方案2. 交叉观察者：IntersectionObserver2.1 Inter
阅读更多...
Spring Gateway动态路由实现方案

Spring Gateway动态路由实现方案

《SpringGateway动态路由实现方案》本文主要介绍了SpringGateway动态路由实现方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随... 目录前沿何为路由RouteDefinitionRouteLocator工作流程动态路由实现尾巴前沿S
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2