自定义尺寸和内部布局、手写 TagLayout

2024-04-20 19:48
文章标签 自定义 布局 内部 手写 尺寸 taglayout

本文主要是介绍自定义尺寸和内部布局、手写 TagLayout，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
第一步：
就是xml布局写的开发者的要求
第二步：第三步：

// 第二步 widthMeasureSpec  heightMeasureSpec 父view传给我的要求
//哪一类要求？具体值是多少？
//要求分三类 1具体值 2上限  3不限制
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {//第三步 结合父控件的要求做修正 自己算var width = (RADIUS + PADDING) * 2var height = (RADIUS + PADDING) * 2//        //三种测量
//        var spaceWidthMode = MeasureSpec.getMode(widthMeasureSpec)
//        var spaceWidthtSize = MeasureSpec.getSize(widthMeasureSpec)
//        //判断三种测量
//        when(spaceWidthMode) {
//            MeasureSpec.EXACTLY -> width = spaceWidthtSize //设置具体值
//            MeasureSpec.AT_MOST -> if(width > spaceWidthtSize) { width = spaceWidthtSize } //设置上限
//            MeasureSpec.UNSPECIFIED -> width = width //不限制
//        }//实际上Android已经帮我们写好了方法//（自己算出来的宽度， 父view要求的宽度）width = resolveSize(width, widthMeasureSpec)height = resolveSize(height, heightMeasureSpec)setMeasuredDimension(width, height}

@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {resolveUri();int w;int h;......

第四步：
在这里插入图片描述

第五步：layout
Layout 和 onLayout区别？
Layout是把左上右下的值 保存下来的。
在这里插入图片描述
在这里插入图片描述

onLayout是调用子view的Layout方法 进行布局
在这里插入图片描述

示例一

在这里插入图片描述

    <my.layout.SquareImageVIewandroid:layout_width="200dp"android:layout_height="300dp"android:scaleType="centerCrop"android:background="@color/colorAccent"/><Viewandroid:layout_width="200dp"android:layout_height="200dp"android:background="@mipmap/ic_launcher" />

class SquareImageVIew(context: Context?,attrs: AttributeSet?
) :AppCompatImageView(context, attrs)  {override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {//1、父view算出出来super.onMeasure(widthMeasureSpec, heightMeasureSpec)//2、拿到宽高值var width = measuredWidthvar height = measuredHeight//3、自己修改var size = Math.max(width, height)//4、保存setMeasuredDimension(size, size) //宽 高}/**这么写 显示会出现问题，因为父控件不知道你改了*/
//    override fun layout(l: Int, t: Int, r: Int, b: Int) {
        super.layout(l, t, l+200, t+200)
//        var width = r - l
//        var height = b - t
//        var size = Math.max(width, height) //哪个边长，就以哪个边做正方形
//        super.layout(l, t, l+size, t+size)
//    }}

只重写layout 会出现的问题
在这里插入图片描述

重写onMeasure方法 才正确
在这里插入图片描述

示例二

<my.layout.CircleViewandroid:layout_width="200dp"android:layout_height="100dp"/>

class CircleView(context: Context?, attrs: AttributeSet?) :View(context, attrs) {val RADIUS = 80val PADDING = 30var paint = Paint(Paint.ANTI_ALIAS_FLAG)override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {var width = (RADIUS + PADDING) * 2var height = (RADIUS + PADDING) * 2//        //三种测量
//        var spaceWidthMode = MeasureSpec.getMode(widthMeasureSpec)
//        var spaceWidthtSize = MeasureSpec.getSize(widthMeasureSpec)
//        //判断三种测量
//        when(spaceWidthMode) {
//            MeasureSpec.EXACTLY -> width = spaceWidthtSize //设置具体值
//            MeasureSpec.AT_MOST -> if(width > spaceWidthtSize) { width = spaceWidthtSize } //设置上限
//            MeasureSpec.UNSPECIFIED -> width = width //不限制
//        }//实际上Android已经帮我们写好了方法//（自己算出来的宽度， 父view要求的宽度）width = resolveSize(width, widthMeasureSpec)height = resolveSize(height, heightMeasureSpec)setMeasuredDimension(width, height)}override fun onDraw(canvas: Canvas?) {super.onDraw(canvas)canvas?.drawColor(Color.GRAY)paint.color = Color.REDcanvas?.drawCircle((RADIUS + PADDING).toFloat(), (RADIUS + PADDING).toFloat(),RADIUS.toFloat(), paint)}
}

在这里插入图片描述
在这里插入图片描述

示例三
自定义布局 TabLayout
思路：
1、每一个子view的尺寸，是由TabLayout中的onLayout方法里，去调用每个子view 的layout方法，把l t r b，传过去，并由子view保存。
2、子view的ltrb的值怎么来的呢？是在TabLayout的onMeasure方法里算出来的。
3、但是onMeasure方法和onLayout方法是两个过程，如何传递数据呢？
通过一个集合来存储。
4、onMeasure方法中，遍历child，对每个子view测量，调用child.measure(childMeasureWidthSpec, childMeasureHeightSpec)
5、把计算出来的值，保存到相对应的集合里。
6、计算出TabLayout自己本身的宽高，并存储。

细节
onMeasure方法里 measureChildWithMargins（）具体做了什么？

measureChildWithMargins(child, widthMeasureSpec, widthUsed, heightMeasureSpec, heightUsed)

//获得子控件对父控件要求的布局参数 也就是步骤一里的 开发者在xml里的要求val layoutParams = child.layoutParams//TabLayout 获取父控件对自己的要求val spacWidthMode = MeasureSpec.getMode(widthMeasureSpec)val spacWidthSize = MeasureSpec.getSize(widthMeasureSpec)//子控件的mode和sizevar childWidthMode: Intvar childWidthSize: Int//判断子控件对TabLayout 要求when (layoutParams.width) {LayoutParams.MATCH_PARENT -> when (spacWidthMode) {MeasureSpec.EXACTLY , MeasureSpec.AT_MOST-> { //上限和具体值一样，都是父控件size - 已用sizechildWidthMode =MeasureSpec.EXACTLY //因为tablayout的父控件对TabLayout的要求是具体值EXACTLYchildWidthSize = spacWidthSize - widthUsed //子控件的size = 父控件的size - 已经用过的宽度MeasureSpec.makeMeasureSpec(childWidthSize, childWidthMode) //把tablayout对子控件的要求传给子控件}MeasureSpec.UNSPECIFIED -> { //父控件对我不限制，对子控件宽度为0childWidthMode =MeasureSpec.UNSPECIFIEDchildWidthSize = 0MeasureSpec.makeMeasureSpec(childWidthSize, childWidthMode) //把tablayout对子控件的要求传给子控件}//。。。。还有很多判断 不一一举例了}}

完整代码：

class TagLayout(context: Context, attributeSet: AttributeSet) :ViewGroup(context, attributeSet) {var childBoundsList = arrayListOf<Rect>()override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {var widthUsed = 0 //使用过的宽度var heightUsed = 0 //使用过的高度 控件总体高度var lineWidthUsed = 0 //横向使用过的宽度var lineMaxHeight = 0 //整行最大高度var specMode = MeasureSpec.getMode(widthMeasureSpec)var specSWidth = MeasureSpec.getSize(widthMeasureSpec)//遍历所有的子控件for (i in 0 until childCount) {val child = getChildAt(i)
//            measureChildWithMargins(child, widthMeasureSpec, widthUsed, heightMeasureSpec, heightUsed)//可以折行measureChildWithMargins(child, widthMeasureSpec, 0, heightMeasureSpec, heightUsed)if (specMode != MeasureSpec.UNSPECIFIED &&(lineWidthUsed + child.measuredWidth) > specSWidth) {//如果 已使用的宽度 + 子控件的宽度 超出了 本身自己的 宽度  即 折行lineWidthUsed = 0  //换行 左侧怼到头heightUsed += lineMaxHeight //累计本身自己的总高度lineMaxHeight = 0 //单行高度清零//再测量一遍measureChildWithMargins(child, widthMeasureSpec, 0, heightMeasureSpec, heightUsed)}//定义childBoundlateinit var childBound: Rectif (childBoundsList.size <= i) {//把childBound 入集合childBound = Rect()childBoundsList.add(childBound)} else {//如果childBound = childBoundsList.get(i)}//设置 子view 的左上右下， 左（已经使用的宽度） 上（已经使用的高度） 右（已经使用的宽度 + 子view本身宽度） 下（已经使用的高度 + 子view本身的高度）childBound.set(lineWidthUsed,heightUsed,lineWidthUsed + child.measuredWidth,heightUsed + child.measuredHeight)//累加使用过的宽度lineWidthUsed += child.measuredWidth//整行 最大宽度 高度widthUsed = Math.max(widthUsed, lineWidthUsed)lineMaxHeight = Math.max(lineMaxHeight, child.measuredHeight)//控件本身自己的宽高var width = widthUsedvar height = heightUsed + lineMaxHeightsetMeasuredDimension(width, height)}}override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {//遍历所有的子控件for (i in 0 until childCount) {val child = getChildAt(i)//从集合里拿到对应控件的 ltrbvar childBound = childBoundsList.get(i)child.layout(childBound.left, childBound.top, childBound.right, childBound.bottom)}}//固定格式，如果不声明 child.getLayoutParams()获取的是默认值override fun generateLayoutParams(attrs: AttributeSet?): LayoutParams {return MarginLayoutParams(context, attrs)}
}
 <my.layout.TagLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><my.layout.ColoredTextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="北京市" /><my.layout.ColoredTextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="天津市" /><my.layout.ColoredTextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="上海市" /><my.layout.ColoredTextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="重庆市" /><my.layout.ColoredTextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="河北省" /><my.layout.ColoredTextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="山西省" /><my.layout.ColoredTextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="辽宁省" /></my.layout.TagLayout>

效果：
在这里插入图片描述

这篇关于自定义尺寸和内部布局、手写 TagLayout的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


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

相关文章

SpringBoot全局异常拦截与自定义错误页面实现过程解读

SpringBoot全局异常拦截与自定义错误页面实现过程解读

《SpringBoot全局异常拦截与自定义错误页面实现过程解读》本文介绍了SpringBoot中全局异常拦截与自定义错误页面的实现方法,包括异常的分类、SpringBoot默认异常处理机制、全局异常拦... 目录一、引言二、Spring Boot异常处理基础2.1 异常的分类2.2 Spring Boot默
阅读更多...
自定义注解SpringBoot防重复提交AOP方法详解

自定义注解SpringBoot防重复提交AOP方法详解

《自定义注解SpringBoot防重复提交AOP方法详解》该文章描述了一个防止重复提交的流程,通过HttpServletRequest对象获取请求信息,生成唯一标识,使用Redis分布式锁判断请求是否... 目录防重复提交流程引入依赖properties配置自定义注解切面Redis工具类controller
阅读更多...
kafka自定义分区器使用详解

kafka自定义分区器使用详解

《kafka自定义分区器使用详解》本文介绍了如何根据企业需求自定义Kafka分区器,只需实现Partitioner接口并重写partition()方法,示例中,包含cuihaida的数据发送到0号分区... 目录kafka自定义分区器假设现在有一个需求使用分区器的方法总结kafka自定义分区器根据企业需求
阅读更多...
Qt实现删除布局与布局切换功能

Qt实现删除布局与布局切换功能

《Qt实现删除布局与布局切换功能》在Qt应用开发中,动态管理布局是一个常见需求,比如根据用户操作动态删除某个布局,或在不同布局间进行切换,本文将详细介绍如何实现这些功能,并通过完整示例展示具体操作,需... 目录一、Qt动态删除布局1. 布局删除的注意事项2. 动态删除布局的实现步骤示例：删除vboxLay
阅读更多...
C#中通过Response.Headers设置自定义参数的代码示例

C#中通过Response.Headers设置自定义参数的代码示例

《C#中通过Response.Headers设置自定义参数的代码示例》：本文主要介绍C#中通过Response.Headers设置自定义响应头的方法,涵盖基础添加、安全校验、生产实践及调试技巧,强... 目录一、基础设置方法1. 直接添加自定义头2. 批量设置模式二、高级配置技巧1. 安全校验机制2. 类型
阅读更多...
SpringBoot AspectJ切面配合自定义注解实现权限校验的示例详解

SpringBoot AspectJ切面配合自定义注解实现权限校验的示例详解

《SpringBootAspectJ切面配合自定义注解实现权限校验的示例详解》本文章介绍了如何通过创建自定义的权限校验注解,配合AspectJ切面拦截注解实现权限校验,本文结合实例代码给大家介绍的非... 目录1. 创建权限校验注解2. 创建ASPectJ切面拦截注解校验权限3. 用法示例A. 参考文章本文
阅读更多...
Vite 打包目录结构自定义配置小结

Vite 打包目录结构自定义配置小结

《Vite打包目录结构自定义配置小结》在Vite工程开发中,默认打包后的dist目录资源常集中在asset目录下,不利于资源管理,本文基于Rollup配置原理,本文就来介绍一下通过Vite配置自定义... 目录一、实现原理二、具体配置步骤1. 基础配置文件2. 配置说明（1）js 资源分离（2）非 JS 资
阅读更多...
聊聊springboot中如何自定义消息转换器

聊聊springboot中如何自定义消息转换器

《聊聊springboot中如何自定义消息转换器》SpringBoot通过HttpMessageConverter处理HTTP数据转换,支持多种媒体类型,接下来通过本文给大家介绍springboot中... 目录核心接口springboot默认提供的转换器如何自定义消息转换器Spring Boot 中的消息
阅读更多...
Python自定义异常的全面指南(入门到实践)

Python自定义异常的全面指南(入门到实践)

《Python自定义异常的全面指南(入门到实践)》想象你正在开发一个银行系统,用户转账时余额不足,如果直接抛出ValueError,调用方很难区分是金额格式错误还是余额不足,这正是Python自定义异... 目录引言：为什么需要自定义异常一、异常基础：先搞懂python的异常体系1.1 异常是什么？1.2
阅读更多...
Linux中的自定义协议+序列反序列化用法

Linux中的自定义协议+序列反序列化用法

《Linux中的自定义协议+序列反序列化用法》文章探讨网络程序在应用层的实现,涉及TCP协议的数据传输机制、结构化数据的序列化与反序列化方法,以及通过JSON和自定义协议构建网络计算器的思路,强调分层... 目录一，再次理解协议二，序列化和反序列化三，实现网络计算器3.1 日志文件3.2Socket.hpp
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2