效果 第三方库: //依赖: compile 'com.hyman:flowlayout-lib:1.1.2' 布局文件 <com.zhy.view.flowlayout.TagFlowLayout
响应式布局：根据不同的尺寸适配 viewport width=device-width 设置视口的宽度等于设备的宽度，如果不设置的话，默认视口的宽度是980px 通俗理解：我们这个操作其实展示当前这个页面一共有多宽...（浏览器的宽度） 高清屏幕：苹果手机是二倍高清屏幕，也就是我们在手机上看到的那张100100的图片，其实苹果手机是按照200200的尺寸进行渲染的， 如果真实图片是100100，最后呈现出来的就是被拉伸后边模糊的效果...苹果手机上需要的素材图片都需要比看到的尺寸大一倍才可以，安卓不用 DPI适配思想:我们在做页面的时候，最好每一张图片都准备两套或三套比如： logo.png 100100 logo@2x.png...当前的宽度是小于320像素的 } @media all and (min-width:320px) and (max-width:359px){ //大于等于320小于360 } 响应式布局的解决方案...：流式布局法 1、容器或者盒子的宽度一般都不写固定的值，而是使用百分比（相对于视口区域的百分比） 其余的样式：字体、高度、margin、padding都按照设计稿上标注尺寸的一半来设置 对于有些屏幕尺寸下我们设置的固定值看起来不是特别好看的话我们使用
:text="你是我的" android:textSize="18sp" /> 直接添加到xml布局中
移动开发-百分比布局 流失布局案例: 京东商城: 点击查看 通过盒子宽度设置百分比来根据屏幕宽度来进行伸缩，不受固定像素限制，内容向两侧填充 流式布局，就是百分比布局，也称非固定像素布局 max-width...最大宽度 – max-height 最大高度 min-width 最小宽度 – min-height 最小高度 图片 CSS初始化 normalize.css: 移动端CSS初始化推荐使用normalize.css...，布局视口就多宽 二倍图: 一个px能显示的物理像素点的个数，称为物理像素比或屏幕像素比，1CSS像素=1物理像素 多倍图: 在标准viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题...属性 多倍图切图 cutterman: 图片 移动端主流方案: 单独制作移动端页面 (主流)，通过判断设备，如果是移动设备打开，则跳到移动端页面 响应式兼容移动端 (其次)，通过判断屏幕宽度来改变样式...需要花很大精力去调兼容性问题 移动端浏览器: 移动端浏览器基本以**webkit 内核**为主，因此我们就考虑webkit兼容性问题 同时我们浏览器的私有前缀我们只需要考虑添加 webkit 即可 图片
二倍图 当设备像素比很大时，图片会被放大，而放大会让图片看起来模糊。为此，我们可以使用二倍图的方式来提高图片的清晰度。...对于一张 50px * 50px 的图片，在手机 Retina 屏中打开 按照原本的物理像素比会放大倍速 这样会造成图片模糊 通过使用二倍图，提高图片质量 解决在高清设备中的模糊问题。...width=device-width"> Myself img:nth-child(2) { width: 50px; /*移动设备中的图片会被放大...流式布局 流式布局是一种等比例缩放布局方式，在 CSS 代码中使用百分比来设置宽度，也称百分比自适应的布局。 流式布局实现方法是将 CSS 固定像素宽度换算为百分比宽度。
移动web开发流式布局 1.0 移动端基础 1.1浏览器现状 PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。...对于一张 50px * 50px 的图片,在手机或 Retina 屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊 在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题...: 背景图片宽度 背景图片高度; 单位： 长度|百分比|cover|contain; cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。...移动端单独制作 流式布局（百分比布局） flex 弹性布局（强烈推荐） less+rem+媒体查询布局 混合布局 响应式 媒体查询 bootstarp 流式布局： 流式布局，就是百分比布局，也称非固定像素布局...流式布局方式是移动web开发使用的比较常见的布局方式。
一个可以横向或纵向显示的流式布局的widget 使用场景：一行显示不下需要换行的时候 源码 Wrap({ Key key, this.direction = Axis.horizontal
在真实项目中设计师给我们一般是：640960 6401136 750*1334 响应式布局的解决方案： 1>流式布局法 容器或者是盒子一般都不写固定值，而是使用百分比（相对于视口区域的百分比...padding等都按照设计稿上标注尺寸的一半来设置 对于有些屏幕尺寸下，我们设置的固定值看起来不是特别的好看，需要用@media微调 特殊情况是设计稿是640px，在iphone6 6p会虚化,我们需要的图片是...苹果手机的尺寸：5s是320px 6是375px 6plus是414宽度 常用的安卓尺寸：320、360、480、540、640、720..... 6plus是三倍高清屏屏幕的尺寸，一般设计师给的图片是
1 什么是流式布局/标签 说白了呢，就是一种参差不齐的视图，比如： 水平的流式布局 ? 垂直的流式布局 ? 多条目类型流式布局 ? 2实现方式有哪些？...实现流式布局的方式大致有如下五种： 自定义FlowLayout ChipGroups RecyclerView+StaggeredGridLayoutManager RecyclerView+FlexboxLayoutManager...Chip本身具有选中和点击状态，也可以加入图片，可以修改文本（颜色、字号、字体等）。当然了，因为ChipGroup本质上是一个ViewGroup,所以，我们也可以向其中放置我们需要的任意View。...这是代码添加的chip" ll_parent.addView(chip) (3)、StaggeredGridLayoutManager 借助StaggeredGridLayoutManager我们可以很方便的实现流式布局...(2)、示例代码 FlowImplActivity.kt /** * CnPeng 2018/12/6 5:35 PM * 功用：流式布局/标签实现方式的总结 * 说明： * 1、流式布局/标签的实现方式大致有
下面就是这种流式布局的效果图： ? 2.垂直数量约束布局。...下面就是这种流式布局的效果图： ?...同样在流式布局中我们也可以通过gravity属性来设置流式布局中的所有子视图都整体停靠在布局视图的某个特定的区域。...在实际的应用中流式布局更加适合于用来建立那些标签流、九宫格菜单功能、枚举功能等方面的布局。下面的图片展示了流式布局的几个DEMO效果： ?...六、总结 关于流式布局的功能就介绍到这了，流式布局是MyLayout布局系统里面的5大布局视图之一，主要用于建立那些有规律排列和对齐的视图的应用场景，而且通过使用流式布局来建立界面布局使用的代码量是最少而且最灵活的
流式布局（百分比布局） 流式布局就是百分比布局，也称非固定像素布局。 通过盒子宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素限制，内容向两侧填充。...流式布局方式是移动web开发使用的比较常见的布局方式 max-width 最大宽度（max-height 最大高度） min-width 最小宽度（min-hight 最小高度） 京东首页案例... 注意：里面的图片默认和文字基线对齐，注意要添加vertical-align: middle; 让图片和文字中线对齐，解决图片底部留白问题。
实现思路： 这是一个继承ViewGourp来实现的自定义布局。他的核心只有一个，即当子View的宽度超出自身最大宽度时，自动换行。...width = totalWidth; } setMeasuredDimension(width, height); } 毫无疑问，onMeasure是这个自定义布局的核心
一、流式布局简介 流式布局 又称为 百分比布局 / 非固定像素布局 ; 为 流式布局 中 盒子模型 设置 百分比宽度 , 其大小可以根据屏幕宽度自适应伸缩 , 该盒子没有像素限制 , 内容自动向左右两边填充...; 流式布局 可以 根据 设备屏幕尺寸 和 设备类型 自动调整 网页布局 和 标签元素大小 , 以适应不同尺寸的 设备屏幕 ; 当 设备屏幕尺寸 发生变化时 , 标签元素的尺寸也会相应地调整 ; 移动端流式布局注意事项...最小宽度 : min-width ; 最大宽度 : max-width ; max-width: 980px; min-width: 320px; 使用响应式图片 : 在移动端流式布局中，图片大小也需要自适应调整...可以使用响应式图片，通过设置不同的图片尺寸和分辨率来实现。 使用媒体查询 : 使用媒体查询可以 根据不同的屏幕尺寸和设备类型，设置不同的CSS样式。...测试不同设备的显示效果 : 在完成布局之后，需要 在不同的设备上测试显示效果，以确保布局在不同设备上都能正常显示。 二、流式布局代码示例 ---- 代码示例 : <!
JS 实现瀑布流布局 前言 一、JS 实现瀑布流 二、column 多行布局实现瀑布流 三、flex 弹性布局实现瀑布流 四、3种方式对比 前言 今天逛闲鱼的时候观察到每一行的高度不是相同的，经了解才知道原来这是一种瀑布流布局...一、JS 实现瀑布流 思路分析 瀑布流布局的特点是等宽不等高。 为了让最后一行的差距最小，从第二行开始，需要将图片放在第一行最矮的图片下面，以此类推。...父元素设置为相对定位，图片所在元素设置为绝对定位。然后通过设置 top 值和 left 值定位每个元素。 代码实现 布局。...如果需要动态添加数据，或者动态设置列数，就需要使用到 JS + jQuery。
css流式布局的介绍 说明 1、流式布局使用非固定像素来定义网页内容，即百分比布局。 2、通过将盒子的宽度设置为百分比根据屏幕的宽度进行伸缩，不受固定像素的限制，内容向两侧填充。...分类 左侧固定,右侧自适应 右侧固定左侧自适应 两侧固定,中间自适应(圣杯布局) 等分布局 实例 .masonry { -moz-column-count:3; /* 火狐 */ -webkit-column-count...(max-width: 500px) { .masonry { column-count: 1; // two columns on larger phones } } 以上就是css流式布局的介绍
：手把手实战，自定义View 原文： https://juejin.cn/post/6969132819855441934 View的生命周期 先onMeasure()测量 、 再onLayout()布局...onLayout()看需求 自定义ViewGroup 继承自ViewGroup或各种Layout onMeasure()--> onLayout()都会执行， onDraw()看需求 自定义View包含什么 布局...text绘制 frameWork： 交互： onTouchEvent ：组合的viewGroup LayoutParams与MeasureSpec LayoutParams LayoutParams(布局参数...位表示view的Size image.png image.png 1.unspecified--无限制 2.exactly -- 确定的大小 3.at_most -- 最大不超过 image.png 实现流式布局...onLayout（） 9.因为度量的时候，已经确定了每一行存哪几个View，把他存到数组里，这样布局的时候简单很多 image.png 10.布局onLayout()重要的就是确定上下左右。
流式布局（Liquid Layout） 流式布局（Liquid）的特点（也叫"Fluid") 是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统（网格系统）。...图片也作类似处理（width:100%, max-width一般设定为图片本身的尺寸，防止被拉伸而失真）。 1、布局特点：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。...2、设计方法：媒体查询+流式布局。...其实，使用vw、vh等后起之秀的单位，可以实现完美的流式布局（高度和文字大小都可以变得“流式”），弹性布局就不再必要了。...结论： 1.如果只做pc端，那么静态布局（定宽度）是最好的选择； 2.如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，一份css+一份js调节font-size
/0fa6f5d09040 源码地址 https://github.com/LRH1993/AutoFlowLayout 文章目录 前言 应用场景 实现效果 使用 原理 0 前言 近期工作需要用到流式布局...发现流式布局与网格布局的自定义很有意思，是学习自定义控件的一个很好的方式，所以就撸了个几百行代码的控件，既实用又具有学习价值。...1 应用场景 流式布局，在很多标签类的场景中可以用的；而网格布局在分类中以及自拍九宫格等场景很常见。如下所示： ? 如此使用频繁而又实现简单的控件，怎能不自己撸一个呢？控件，还是定制的好啊。...1.功能 流式布局 自动换行 行数自定：单行/多行 支持单选/多选 支持行居中/靠左显示 支持添加/删除子View 支持子View点击/长按事件 网格布局 行数/列数自定 支持单选/多选 支持添加/删除子...流式布局 ? ? 网格布局 ? 最后一个是带间隔以及分割线的，由于录屏原因，只在跳过去的一瞬间显示了粉红色的一条线。真实如下图所示，可以定义横竖间距的大小，以及分割线的颜色，宽度。 ?
, 则会自动换行 ; 3、设置浮动及宽度 该布局距离上面的布局有 5 像素的上外边距 ; 如果要令 10 个坐标 , 水平排成两排 , 每排 5 个 , 为其设置左浮动即可实现 , 同事设置其宽度为...20 像素 ; 除了图片外 , 每个链接中还有一行文字 , 设置文字水平对对齐 nav { /* 整个导航布局距离顶部 5 像素 */ padding-top: 5px; } nav...在每个布局中 , 每张图片都是 40 x 40 像素 , 并且上下有 10 像素的外边距 ; 图片标签的样式为 : nav a img { /* 图片宽度为 40 像素 高度自适应 */...-- 引入要开发的 CSS 文件 --> 流式布局示例 流式布局示例 </head
近期工作需要用到流式布局，网上也有很多关于这方面的资料。发现流式布局与网格布局的自定义很有意思，是学习自定义控件的一个很好的方式，所以就撸了个几百行代码的控件，既实用又具有学习价值。...一、AutoFlowLayout应用场景 流式布局，在很多标签类的场景中可以用的；而网格布局在分类中以及自拍九宫格等场景很常见。如下所示： ? 如此使用频繁而又实现简单的控件，怎能不自己撸一个呢？...1.功能 流式布局 - 自动换行 - 行数自定：单行/多行 - 支持单选/多选 - 支持行居中/靠左显示 - 支持添加/删除子View - 支持子View点击/长按事件 网格布局 - 行数/列数自定...流式布局 ? ? 网格布局 ? 最后一个是带间隔以及分割线的，由于录屏原因，只在跳过去的一瞬间显示了粉红色的一条线。真实如下图所示，可以定义横竖间距的大小，以及分割线的颜色，宽度。 ?...四、AutoFlowLayout原理 ViewGroup的测量、布局及绘制顺序如下所示： ? 详细的自定义View原理参考：图解View测量、布局及绘制原理 下面具体介绍自定义实现网格布局的过程。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
