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。

相关文章

Python实现对阿里云OSS对象存储的操作详解

Python实现对阿里云OSS对象存储的操作详解

《Python实现对阿里云OSS对象存储的操作详解》这篇文章主要为大家详细介绍了Python实现对阿里云OSS对象存储的操作相关知识,包括连接,上传,下载,列举等功能,感兴趣的小伙伴可以了解下... 目录一、直接使用代码二、详细使用1. 环境准备2. 初始化配置3. bucket配置创建4. 文件上传到os
阅读更多...
关于集合与数组转换实现方法

关于集合与数组转换实现方法

《关于集合与数组转换实现方法》：本文主要介绍关于集合与数组转换实现方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、Arrays.asList()1.1、方法作用1.2、内部实现1.3、修改元素的影响1.4、注意事项2、list.toArray()2.1、方
阅读更多...
使用Python实现可恢复式多线程下载器

使用Python实现可恢复式多线程下载器

《使用Python实现可恢复式多线程下载器》在数字时代,大文件下载已成为日常操作,本文将手把手教你用Python打造专业级下载器,实现断点续传,多线程加速,速度限制等功能,感兴趣的小伙伴可以了解下... 目录一、智能续传：从崩溃边缘抢救进度二、多线程加速：榨干网络带宽三、速度控制：做网络的好邻居四、终端交互
阅读更多...
java实现docker镜像上传到harbor仓库的方式

java实现docker镜像上传到harbor仓库的方式

《java实现docker镜像上传到harbor仓库的方式》：本文主要介绍java实现docker镜像上传到harbor仓库的方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录1. 前 言2. 编写工具类2.1 引入依赖包2.2 使用当前服务器的docker环境推送镜像2.2
阅读更多...
C++20管道运算符的实现示例

C++20管道运算符的实现示例

《C++20管道运算符的实现示例》本文简要介绍C++20管道运算符的使用与实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录标准库的管道运算符使用自己实现类似的管道运算符我们不打算介绍太多，因为它实际属于c++20最为重要的
阅读更多...
Java easyExcel实现导入多sheet的Excel

Java easyExcel实现导入多sheet的Excel

《JavaeasyExcel实现导入多sheet的Excel》这篇文章主要为大家详细介绍了如何使用JavaeasyExcel实现导入多sheet的Excel,文中的示例代码讲解详细,感兴趣的小伙伴可... 目录1.官网2.Excel样式3.代码1.官网easyExcel官网2.Excel样式3.代码
阅读更多...
python实现对数据公钥加密与私钥解密

python实现对数据公钥加密与私钥解密

《python实现对数据公钥加密与私钥解密》这篇文章主要为大家详细介绍了如何使用python实现对数据公钥加密与私钥解密,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录公钥私钥的生成使用公钥加密使用私钥解密公钥私钥的生成这一部分，使用python生成公钥与私钥，然后保存在两个文
阅读更多...
浏览器插件cursor实现自动注册、续杯的详细过程

浏览器插件cursor实现自动注册、续杯的详细过程

《浏览器插件cursor实现自动注册、续杯的详细过程》Cursor简易注册助手脚本通过自动化邮箱填写和验证码获取流程,大大简化了Cursor的注册过程,它不仅提高了注册效率,还通过友好的用户界面和详细... 目录前言功能概述使用方法安装脚本使用流程邮箱输入页面验证码页面实战演示技术实现核心功能实现1. 随机
阅读更多...
Golang如何对cron进行二次封装实现指定时间执行定时任务

Golang如何对cron进行二次封装实现指定时间执行定时任务

《Golang如何对cron进行二次封装实现指定时间执行定时任务》：本文主要介绍Golang如何对cron进行二次封装实现指定时间执行定时任务问题,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录背景cron库下载代码示例【1】结构体定义【2】定时任务开启【3】使用示例【4】控制台输出总结背景
阅读更多...
Golang如何用gorm实现分页的功能

Golang如何用gorm实现分页的功能

《Golang如何用gorm实现分页的功能》：本文主要介绍Golang如何用gorm实现分页的功能方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录背景go库下载初始化数据【1】建表【2】插入数据【3】查看数据4、代码示例【1】gorm结构体定义【2】分页结构体
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2