涉及到kotlin语法的相关知识我就不多说了，今天就项目需求，自定义一个viewgroup作标签视图来使用进项目中去。...1、开写继承constructor 一般在java语言中，constructor直接在继承viewgroup后会报错，然后根据自定义快捷键，默认为alt+enter【博主是用的eclipse 的keymap...然而到了kotlin它的constructor很特别，可以根据语法如下书写： class Test constructor (private val context:Context) : ViewGroup...View.MeasureSpec.EXACTLY) sizeHeight else resultHeight) } } 通过以上方法我们控制了子view的显示，同时让我们现在的viewgroup
文章目录 一、清除浮动简介 二、清除浮动语法 三、清除浮动 - 额外标签法 1、额外标签法 - 语法说明 2、问题代码示例 3、额外标签法代码示例 一、清除浮动简介 ---- 在开发页面时 , 遇到下面的情况...right : 清除右侧浮动 ; both : 同时清除左右两侧浮动 ; 一般在使用的时候 , 只使用 clear: both; 一种样式 ; 三、清除浮动 - 额外标签法 ---- 1、额外标签法...- 语法说明 推荐使用 " 额外标签法 " , 在最后一个浮动元素的末尾 , 添加一个额外标签 , 如下 : 使用 其它标签 也可以 , 如 : 浮动清除 - 额外标签法...DOCTYPE html> 浮动清除 - 额外标签法
元素标签 不再受 标准流 控制 ; ( 块级元素 , 行内元素 , 行内块元素 的布局方式 ) 元素标签 可以 放置在指定的位置 , 靠左 或 靠右 ; CSS 浮动语法 : 选择器 { float:...: 父容器 检测高度时 , 会考虑 浮动子元素 的高度 , 将浮动元素的高度 计算在父容器的总高度中 ; 2、清除浮动 语法 - 额外标签法 清除浮动语法 : CSS 选择器 { clear: 属性值..." 额外标签法 " , 在最后一个浮动元素的末尾 , 添加一个额外标签 , 如下 : 使用 其它标签 也可以 , 如 : 优点 : 容易理解 , 使用方便 ; 缺点 : 添加的 额外标签 无意义 , 使得 HTML 结构混乱 ; 3、清除浮动 语法 - 父级元素设置 overflow 样式 父级元素设置 overflow...; 4、额外标签法 和 overflow 样式法弊端 额外标签法 清除浮动 , 会 新增很多无意义标签 , 使得 HTML 标签结构混乱 ; 父级元素设置 overflow 属性 , 会 将溢出元素隐藏
现在带浮动标签的输入框也是一个很常见的东西了，在材料设计里面有一个 TextInputLayout 的控件，我们可以用它实现这个效果。但是材料设计控件的样式比较固定，并不能满足我们产品设计的脑洞。...还是先看看效果吧： image.png 大概的思路是这样的： 控件有两层，一层是浮动的标签，一层是输入框。...当点击控件后，标签同时执行一个横向和纵向的缩放动画，还有一个向上移动的动画，让输入框获取到焦点并弹出键盘。 当输入框失去焦点时，判断是否有内容，如果没有则让标签执行一个复原的动画。...然后我们创建标签向上缩放的方法，代码如下： public void animationUp() { ObjectAnimator scaleX = ObjectAnimator.ofFloat(...TextUtils.isEmpty(etContent.getText())) { animationDown(); } } }); 复制代码 这样就已经完成了一个带浮动标签的输入框
文章目录 一、浮动语法简介 1、语法说明 2、没有浮动的效果 3、左浮动的效果 4、右浮动的效果 5、右浮动 + 外边距效果 二、完整代码示例 一、浮动语法简介 ---- 1、语法说明 为 元素 设置了...浮动 CSS 属性 , 可以实现 : 元素标签 不再受 标准流 控制 ; ( 块级元素 , 行内元素 , 行内块元素 的布局方式 ) 元素标签 可以 放置在指定的位置 , 靠左 或 靠右 ; CSS...浮动语法 : 选择器 { float: 浮动属性值; } 浮动属性值 取值 : none : 默认设置 , 元素没有浮动效果 ; left : 元素 左浮动 ; right : 元素 右浮动 ; 2、...没有浮动的效果 浮动效果需要结合文字来进行对比 , 浮动可以实现 使用文字环绕图片 的效果 ; 设置没有浮动效果 : /* 默认无浮动效果 */ float: none; 展示效果 : 图片是 行内块元素...> /* 清除标签默认的内外边距 */ * { padding: 0; margin: 0; } /* 盒子大小 */ div { width
自定义 ViewGroup 之流式标签控件 对于软件开发者而言，流式标签控件想必大家一定见过，如下图： ? 至于为什么叫做流式标签呢？...上面的这个控件的场景比较像，所以叫流式标签控件。也许讲得不对，但便于自己的理解，如有错误希望热心网友批评指出。...显然这个流式标签控件是一个 ViewGroup，所以我们就需要自定义这样一个 ViewGroup，取名字叫做 TagView，后方中所有的 TagView 都是指代要实现的这个流式标签控件。...但是，测量了子 View 只是第一步，接下来的这一步麻烦的地方是要结合布局来确定一个 ViewGroup 它最终在某个维度上的尺寸。...而每个 ViewGroup 要实现的业务需求不一样，所以也没有用一种规格来适用于所有的 ViewGroup，只能是具体情况具体分析了。下面我们就来具体分析下 TagView。 ?
浮动 float半脱离文档流（对元素，脱离文档流；对内容，在文档流） 浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。...float:left | right | none | inherit; 浮动的特征： 1、块在一排显示 2、内联支持宽高 3、默认内容撑开宽度 4、脱离文档流 5、提升层级 清除浮动：...1.加高 问题：扩展性不好 2.父级浮动 问题：页面中所有元素都加浮动，margin左右自动失效 3.inline-block 清浮动方法： 问题：margin左右auto失效； 4.空标签清浮动...问题：IE6 最小高度 19px；（解决后IE6下还有2px偏差） 5.br清浮动 问题：不符合工作中：结构、样式、行为，三者分离的要求。...； 8.position:absolute; 绝对定位元素子级的浮动可以不用写清浮动方法； position:fixed; 固定定位元素子级的浮动可以不用写清浮动方法；（IE6不兼容）
这次我们来分析下viewgroup的。 可能有人会想，怎么又是源码分析，肯定又是一大通。其实没你想的那么复杂。仔细分析一波就行了。...而这一整套的机制就是在ViewGroup中体现出来的。我们先来看一张图： ?...接下来才是我们熟悉的触摸事件流程：首先是最顶端的ViewGroup(这边便是DecorView)的dispatchTouchEvent接收到事件。...总结 1.ViewGroup包涵多个子view的时候，我们是从后遍历，判断当前view是否可以点击，然后分发给需要处理的子view。...3.我们可以发现ViewGroup没有onTouchEvent事件，说明他的处理逻辑和View是一样的。 4.子view如果消耗了事件，那么ViewGroup就不会在接受到事件了。
3.相对定位 4.绝对定位 5.固定定位 3.浮动定位(俯视) 1.什么是浮动定位或者特点 1.会将元素排除在文档流之外...float: 取值: right 右浮动 left 左浮动 none ...块元素浮动处理则展现在一行显示，排序body内div排布顺序按照顺序排列。 ?...， 那么最后一个将会换行 2.浮动元素如果不设置宽的话， 那么元素的宽度将会自适应 3.所有浮动起来的元素都会变成块元素... 块元素：能设置宽和高 4.浮动元素对 文字 行内元素 有特殊的影响 特殊的影响:文本环绕
Android 5.0之后ViewGroup的dispatchEvent源码更加复杂，由于方法含义不变，遂采用5.0之前的源码进行分析 dispatchTouchEvent 分析 mFirstTouchTarget...= 0; //这个返回为true根据是否调用parent.requestDisllowInterceptTouchEvent方法并设置false,就交给viewgroup的 onInterceptTouchEvent...处理，子view没有处理，就会交给子view上层viewgroup处理。...false事件才会回溯，交给viewgroup处理事件 if (mFirstTouchTarget == null) { // No touch targets...transformedEvent.recycle(); return handled; } ViewGroup dispatchTouchEvent 分析总结 Android事件分发先从ViewGroup
---- 首先我们自定义一个ViewGroup和一个View，然后重写相关事件进行打印: 场景一:正常返回super，TouchView设置click和onTouchListener事件(onTouch...可以看到触发的DOWN MOVE UP事件顺序都为: ViewGroup.dispatchTouchEvent -> ViewGroup.onInterceptTouchEvent -> View.dispatchTouchEvent...这时候发现除了，执行的顺序变为了： ViewGroup.dispatchTouchEvent -> ViewGroup.onInterceptTouchEvent -> View.dispatchTouchEvent...-> View.onTouch -> View.onTouchEven->ViewGroup.onTouchEven 并且只有DOWN事件，其他事件就没有了。...这个时候就只有DOWN事件，并且顺序为: ViewGroup.dispatchTouchEvent -> ViewGroup.onInterceptTouchEvent -> ViewGroup.onTouchEvent
文章目录 一、清除浮动 - 使用双伪元素清除浮动 二、代码示例 一、清除浮动 - 使用双伪元素清除浮动 ---- 为 .clearfix:before 和 .clearfix:after 并集选择器 ,...设置如下样式 : /* 清除浮动 - 使用双伪元素清除浮动 */ .clearfix:before, .clearfix:after { content: ""; display...DOCTYPE html> 清除浮动 - 使用双伪元素清除浮动 /* 清除标签默认的内外边距 */ * { padding: 0; margin: 0; } /* 清除列表默认样式 ( 主要是前面的点...- 额外标签法 ( 方法一 ) */ /*.son3 { clear: both; }*/ <div class="father1 clearfix
display:inline 注意： 1. disply:inline-block 行内块元素 2. position:absolute|fixed 会将元素变为行内块 使用盒模型 创建浮动盒...可以使用float属性创建浮动盒（脱离文本流），浮动盒将元素的左边界或右边界移动到包含块或者另一个浮动盒的边界。...值 说明 left 移动元素，使其左边界挨着包含块的左边界，或者另一个浮动元素的右边界 right 移动元素，使其右边界挨着包含块的右边界，或者另一个浮动元素的右边界 none 元素位置固定 注意事项...： 同级的一个元素浮动其他的元素也要浮动 浮动脱离文本流，父元素的宽、高不会被撑开 子元素浮动父元素一定要清除浮动 浮动的行内元素可以设置宽、高 示例：父元素不设置高、宽 <div class="content...margin padding不能按设置值正常展示： 清除浮动方法 浮动元素的同级元素添加一个空标签 .clear{clear: both} div> 浮动元素的父级元素添加下述样式
浮动 布局的三种基本方式： 标准流 按照标签默认的特性摆放盒子即为标准流 浮动流 利用浮动摆放盒子即为浮动流 定位流 利用定位摆放盒子即为定位流 浮动最开始是做图文绕排的。 <!...image.png 利用浮动实现布局,一个靠左一个靠右 <!...（按照默认的规则排列的） 脱标的元素不占标准流的位置 浮动因为脱标的特性（脱离标准流了，不占位置，会盖住其他的标准流的盒子）， 所以，在使用上有一个口诀：要浮全浮（要浮动的话兄弟元素都浮动） 浮动是在盒子内容区域浮动，不会超出padding区域（水平方向） 浮动的盒子一排装不下的时候会掉下来（掉下来的位置会根据上一个浮动盒子的高度决定...） 右浮动会颠倒盒子顺序 浮动的盒子压不住文字和图片 尽量在标准流的盒子里面浮动 闭合浮动 浮动带来的问题：浮动元素撑不开父级容器 解决办法（闭合浮动）： 强行给父盒子添加高度 （不推荐，不利于后期维护
>{props.title} 我想要div里面的子标签垂直居中... 可以做到垂直居中了，但是可是input组件不右浮动了
浮动（float） 标准流：就是标签按照规定好默认方式排列 块级元素独占一行，从上向下顺序排列 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行 一个标准的网页基本都包含这三种布局方式：标准流...因为浮动可以改变元素标签默认的排序方式。...语法 选择器{clear：属性值;} 属性值 描述 left 不允许左侧有浮动元素（清除左侧浮动的影响） right 不允许右侧有浮动元素（清除右侧浮动的影响） both 同时清除左右浮动的影响 额外标签法...在浮动元素末尾加上一个空标签（块级元素)，然后给这个标签清除浮动（关门） 父级添加 overflow 注意：是给父元素添加overflow:hidden; 属性值为：hidden、auto、scroll...visibility: hidden; } .clearfix { /* 用来兼容低版本浏览器 */ *zoom: 1; } 相当于额外标签法的升级版
1.浮动的定义 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。 2....3.1.1 可以看到，如果需要清除浮动的元素与浮动元素同级，可以直接在需要清除浮动的元素上添加clear属性。 3.1.2 额外标签清除浮动 <!...3.1.2 可以看到，不同级的外部元素想要清除浮动影响，如果使用直接添加clear的方法，无法解决浮动元素的高度坍塌问题。可以在需要清楚浮动的末尾添加一个空标签，用来清除浮动。...3.1.3 其实原理上和添加空标签类似。有几点需要注意： zoom:1是为了兼容性，因为ie6/7不能使用伪类。 content:' ....清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法 CSS复习笔记二：浮动和清除浮动 彻底理解浮动float CSS浮动详解 清除浮动的方法 经验分享：CSS浮动(float,clear)通俗讲解
普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。...后来，我们发现浮动有个很有意思的事情：就是让任何盒子可以一行排列,因此我们就慢慢的偏离主题，用浮动的特性来布局了。 ? 什么是浮动？...在CSS中，通过float属性来定义浮动，其基本语法格式如下： 选择器{float:属性值;} 属性值 描述 left 元素向左浮动 right 元素向右浮动 none 元素不浮动（默认值） 浮动详细内幕特性...浮动只有左右浮动。 浮动首先创建包含块的概念（包裹）。就是说， 浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。 ? 浮动的元素排列位置，跟上一个元素（块级）有关系。...元素的大小完全取决于定义的大小或者默认的内容多少浮动根据元素书写的位置来显示相应的浮动。 总结： 浮动 ---> 浮动的目的就是为了让多个块级元素同一行上显示。
1、浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?...浮动元素：浮动元素的框可以向左或者向右移动，直到它的外边缘碰到父元素包含框或者另一个浮动元素的边框为止；浮动元素不在文档普通流之中，因此文档普通流中的块级元素感知不到浮动元素的存在。...对其他浮动元素的影响：父容器足够宽，与其他浮动元素同一水平方向依次排列。...对普通元素的影响：浮动元素之前的普通元素不受影响。浮动元素之后的普通元素因感知不到浮动元素的存在会被浮动元素覆盖。 对文字的影响：文字所在行框因为浮动元素的挤压而缩短，从而围绕浮动元素排列。...2、清除浮动指什么? 如何清除浮动? 两种以上方法 清除浮动指：消除浮动元素对其他元素因浮动元素造成的高度塌陷的问题。
自定义ViewGroup可不像自定义View那么简单 今日聚焦: 1.自定义ViewGroup中花样布局子View 2.移动View用layout、translation、TranslationAnimation...3.ViewGroup里怎么给孩子加动画 4.惯性移动?...也许你可以了解一下 效果 1 效果 2 一、前置知识: 1.生命函数 这是我曾经测试画出的一张图,描述了ViewGroup+两个孩子的生命函数调用情况 在这补充一点，ViewGroup...这里使用适配器模式，跟ListView一个套路,其实是非常简单，看箭头所指 这里暂时不对ViewGroup进行测量，先填满。...对子View用自带的测量方法measureChildren public class FlowerLayout extends ViewGroup { private int mRadius
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
