自定义尺寸和内部布局、手写 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。

相关文章

HarmonyOS学习(七)——UI（五）常用布局总结

HarmonyOS学习(七)——UI（五）常用布局总结

自适应布局 1.1、线性布局（LinearLayout） 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列，Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距，达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式，且在各类尺寸屏幕上表现一致，其中交叉轴为垂直时，取值为Vert
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
自定义类型：结构体(续)

自定义类型：结构体(续)

目录 一. 结构体的内存对齐 1.1 为什么存在内存对齐？ 1.2 修改默认对齐数 二. 结构体传参 三. 结构体实现位段 一. 结构体的内存对齐 在前面的文章里我们已经讲过一部分的内存对齐的知识，并举出了两个例子，我们再举出两个例子继续说明： struct S3{double a;int b;char c;};int mian(){printf("%zd\n",s
阅读更多...
Spring 源码解读：自定义实现Bean定义的注册与解析

Spring 源码解读：自定义实现Bean定义的注册与解析

引言 在Spring框架中，Bean的注册与解析是整个依赖注入流程的核心步骤。通过Bean定义，Spring容器知道如何创建、配置和管理每个Bean实例。本篇文章将通过实现一个简化版的Bean定义注册与解析机制，帮助你理解Spring框架背后的设计逻辑。我们还将对比Spring中的BeanDefinition和BeanDefinitionRegistry，以全面掌握Bean注册和解析的核心原理。
阅读更多...
STM32内部闪存FLASH（内部ROM）、IAP

STM32内部闪存FLASH（内部ROM）、IAP

1 FLASH简介  1 利用程序存储器的剩余空间来保存掉电不丢失的用户数据 2 通过在程序中编程(IAP)实现程序的自我更新 （OTA） 3在线编程（ICP把整个程序都更新掉） 1 系统的Bootloader写死了，只能用串口下载到指定的位置，启动方式也不方便需要配置BOOT引脚触发启动  4 IAP(自己写的Bootloader，实现程序升级) 1 比如蓝牙转串口，
阅读更多...
Oracle type （自定义类型的使用）

Oracle type （自定义类型的使用）

oracle - type   type定义： oracle中自定义数据类型 oracle中有基本的数据类型，如number，varchar2，date，numeric，float....但有时候我们需要特殊的格式， 如将name定义为（firstname,lastname）的形式，我们想把这个作为一个表的一列看待，这时候就要我们自己定义一个数据类型 格式 ：create or repla
阅读更多...
lvgl8.3.6 控件垂直布局 label控件在image控件的下方显示

lvgl8.3.6 控件垂直布局 label控件在image控件的下方显示

在使用 LVGL 8.3.6 创建一个垂直布局，其中 label 控件位于 image 控件下方，你可以使用 lv_obj_set_flex_flow 来设置布局为垂直，并确保 label 控件在 image 控件后添加。这里是如何步骤性地实现它的一个基本示例： 创建父容器：首先创建一个容器对象，该对象将作为布局的基础。设置容器为垂直布局：使用 lv_obj_set_flex_flow 设置容器
阅读更多...
FreeRTOS内部机制学习03（事件组内部机制）

FreeRTOS内部机制学习03（事件组内部机制）

文章目录 事件组使用的场景事件组的核心以及Set事件API做的事情事件组的特殊之处事件组为什么不关闭中断xEventGroupSetBitsFromISR内部是怎么做的？ 事件组使用的场景 学校组织秋游，组长在等待： 张三：我到了 李四：我到了 王五：我到了 组长说：好，大家都到齐了，出发！ 秋游回来第二天就要提交一篇心得报告，组长在焦急等待：张三、李四、王五谁先写好就交谁的
阅读更多...
java线程深度解析（一）——java new 接口？匿名内部类给你答案

java线程深度解析（一）——java new 接口？匿名内部类给你答案

http://blog.csdn.net/daybreak1209/article/details/51305477 一、内部类 1、内部类初识 一般，一个类里主要包含类的方法和属性，但在Java中还提出在类中继续定义类（内部类）的概念。 内部类的定义：类的内部定义类 先来看一个实例 [html]  view plain copy pu
阅读更多...
HTML5自定义属性对象Dataset

HTML5自定义属性对象Dataset

原文转自HTML5自定义属性对象Dataset简介 一、html5 自定义属性介绍 之前翻译的“你必须知道的28个HTML5特征、窍门和技术”一文中对于HTML5中自定义合法属性data-已经做过些介绍，就是在HTML5中我们可以使用data-前缀设置我们需要的自定义属性，来进行一些数据的存放，例如我们要在一个文字按钮上存放相对应的id： <a href="javascript:" d
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2