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。

相关文章

Java中使用Java Mail实现邮件服务功能示例

Java中使用Java Mail实现邮件服务功能示例

《Java中使用JavaMail实现邮件服务功能示例》：本文主要介绍Java中使用JavaMail实现邮件服务功能的相关资料,文章还提供了一个发送邮件的示例代码,包括创建参数类、邮件类和执行结... 目录前言一、历史背景二编程、pom依赖三、API说明（一）Session （会话）（二）Message编程客
阅读更多...
Java中List转Map的几种具体实现方式和特点

Java中List转Map的几种具体实现方式和特点

《Java中List转Map的几种具体实现方式和特点》：本文主要介绍几种常用的List转Map的方式,包括使用for循环遍历、Java8StreamAPI、ApacheCommonsCollect... 目录前言1、使用for循环遍历：2、Java8 Stream API：3、Apache Commons
阅读更多...
C#提取PDF表单数据的实现流程

C#提取PDF表单数据的实现流程

《C#提取PDF表单数据的实现流程》PDF表单是一种常见的数据收集工具,广泛应用于调查问卷、业务合同等场景,凭借出色的跨平台兼容性和标准化特点,PDF表单在各行各业中得到了广泛应用,本文将探讨如何使用... 目录引言使用工具C# 提取多个PDF表单域的数据C# 提取特定PDF表单域的数据引言PDF表单是一
阅读更多...
使用Python实现高效的端口扫描器

使用Python实现高效的端口扫描器

《使用Python实现高效的端口扫描器》在网络安全领域,端口扫描是一项基本而重要的技能,通过端口扫描,可以发现目标主机上开放的服务和端口,这对于安全评估、渗透测试等有着不可忽视的作用,本文将介绍如何使... 目录1. 端口扫描的基本原理2. 使用python实现端口扫描2.1 安装必要的库2.2 编写端口扫
阅读更多...
PyCharm接入DeepSeek实现AI编程的操作流程

PyCharm接入DeepSeek实现AI编程的操作流程

《PyCharm接入DeepSeek实现AI编程的操作流程》DeepSeek是一家专注于人工智能技术研发的公司,致力于开发高性能、低成本的AI模型,接下来,我们把DeepSeek接入到PyCharm中... 目录引言效果演示创建API key在PyCharm中下载Continue插件配置Continue引言
阅读更多...
MySQL分表自动化创建的实现方案

MySQL分表自动化创建的实现方案

《MySQL分表自动化创建的实现方案》在数据库应用场景中,随着数据量的不断增长,单表存储数据可能会面临性能瓶颈,例如查询、插入、更新等操作的效率会逐渐降低,分表是一种有效的优化策略,它将数据分散存储在... 目录一、项目目的二、实现过程（一）mysql 事件调度器结合存储过程方式1. 开启事件调度器2. 创
阅读更多...
使用Python实现操作mongodb详解

使用Python实现操作mongodb详解

《使用Python实现操作mongodb详解》这篇文章主要为大家详细介绍了使用Python实现操作mongodb的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、示例二、常用指令三、遇到的问题一、示例from pymongo import MongoClientf
阅读更多...
SQL Server使用SELECT INTO实现表备份的代码示例

SQL Server使用SELECT INTO实现表备份的代码示例

《SQLServer使用SELECTINTO实现表备份的代码示例》在数据库管理过程中,有时我们需要对表进行备份,以防数据丢失或修改错误,在SQLServer中,可以使用SELECTINT... 在数据库管理过程中，有时我们需要对表进行备份，以防数据丢失或修改错误。在 SQL Server 中，可以使用 SE
阅读更多...
基于Go语言实现一个压测工具

基于Go语言实现一个压测工具

《基于Go语言实现一个压测工具》这篇文章主要为大家详细介绍了基于Go语言实现一个简单的压测工具,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录整体架构通用数据处理模块Http请求响应数据处理Curl参数解析处理客户端模块Http客户端处理Grpc客户端处理Websocket客户端
阅读更多...
Java CompletableFuture如何实现超时功能

Java CompletableFuture如何实现超时功能

《JavaCompletableFuture如何实现超时功能》：本文主要介绍实现超时功能的基本思路以及CompletableFuture（之后简称CF）是如何通过代码实现超时功能的,需要的... 目录基本思路CompletableFuture 的实现1. 基本实现流程2. 静态条件分析3. 内存泄露 bug
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2