首页
学习
活动
专区
圈层
工具
发布

Android – Drawable 详解

用法 在不同情况下有很多可绘制的类型,设置按钮的状态行为,创建可伸缩的按钮背景和创建复合可绘制图层。...这用于创建一个复杂的形状,然后可以作为布局或视图的背景附加在屏幕上。例如,可以使用可绘制的形状来更改按钮背景的形状,边框和渐变。 一个形状只是一个属性的集合,被合并来描述一个背景。...列表中的每个drawable都按照列表的顺序绘制 - 列表中的最后一个drawable绘制在顶部。每个drawable由单个元素内的元素表示。...LayerList可以用来绘制多个其它的drawable(形状,图像等),并将它们放置在相互之间的关系中。默认情况下,图层被放置在另一个的顶部,最后一个图层被绘制在顶部。...图层样式的常见用例包括: ① View边框阴影 ② View单边添加边框 ③ View分层背景 ④ View卡片背景 ⑤ 绘制三角形 举一个简单的例子,下面的图层列表绘制了几个相互关联的形状:

5.9K50

绘制路径:Android 中矢量图渲染

在这篇文章中,我将深入探讨这些技巧:颜色资源、主题颜色、颜色状态列表和渐变的使用。 简单的颜色 绘制路径最简单的方法是指定一种硬编码的 fill/stroke 颜色。 android:fillColor="?attr/colorPrimary" /> 复制代码 如果你希望资源中的元素依据主题有所不同,那么这是非常有用的。...这样你就可以在不同主题的屏幕上使用一个图标: ? 在明/暗屏幕上对图标进行着色,使其具有适当的颜色 使用着色的一个好处是,你不需要依赖于你的资源文件(通常来自你的设计师)是正确的颜色。对图标使用 ?...另一幅由非常有才华的 Virginia Poltrack 绘制的可爱插图 渐变在像插图这样的大型矢量图形中非常常见。矢量图非常适合插图,但是在放大时要注意内存的权衡。...使用渐变近似阴影 同样,这离完全的支持阴影还有很长的路要走,因为只能绘制线性/径向/扫描渐变,而不能沿着任意路径绘制。

3.5K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Android中的各种Drawable类详解

    因此需要有一个方法来指定位图像素转化为物理像素的映射关系,这样位图的像素才可以真正的显示在设备上。...你需要为位图指定绘制到画布上的位置以及缩放到区域的方式: //这里的android.view.Gravity参考值。...比如设置某个点的位置为(10,10)如果缩放为2则是(20,20)。也就是说构造函数中的stdWidth, stdHeight是绘制path时设定的高度和宽度。...你可以通过如下方法来设置可绘制对象的渐变类型: public void setGradientType(int gradient) //渐变的类型 既然是渐变那么就应该有一组渐变的颜色列表,因此你可以通过如下方法来设置渐变的颜色列表...: public void setColors(int[] colors) //设置渐变的颜色列表。

    1.9K20

    Carson带你学Android:源码解析自定义View Draw过程

    前言 自定义View是Android开发者必须了解的基础 网上有大量关于自定义View原理的文章,但存在一些问题:内容不全、思路不清晰、无源码分析、简单问题复杂化 等 今天,我将全面总结自定义View...储备知识 具体请看文章:Carson带你学Android:自定义View基础 3. draw过程详解 类似measure过程、layout过程,draw过程根据View的类型分为2种情况: 接下来,我将详细分析这...绘制装饰(渐变框,滑动条等等) * 注: * a. 在调用该方法之前必须要完成 layout 过程 * b....) // 优化技巧:当不需绘制 Layer 时,“保存图层“和“复原图层“这两步会跳过 // 因此在绘制时,节省 layer 可以提高绘制效率 final int viewFlags...:当不需绘制 Layer 时,“保存图层“和“复原图层“这两步会跳过 // 因此在绘制时,节省 layer 可以提高绘制效率 final int viewFlags = mViewFlags

    48320

    PAG 4.1 正式发布:新增支持微信小程序

    PAG 4.1 版本新增支持微信小程序,新增支持多个常用 AE 特性,如图层样式-渐变叠加、蒙版-羽化和不透明度、 亮度轨道遮罩/亮度轨道反转遮罩等。...AE 特性新增支持 · 图层样式-渐变叠加 · 蒙版-羽化和不透明度 · 亮度轨道遮罩/亮度轨道反转遮罩 · 文本路径选项:路径、反转路径、垂直于路径、强制对齐、首字边距、末字边距 API 接口更新...(2)小程序平台 WebGL 存在无法直接上传其它 Canvas 纹理的情况,在绘制文字和 mask 的时候,需要通过 getImageData 获取纹理数据再上传到 WebGL,从而导致性能上有所损耗...部分 AE 新增特性展示 蒙版-羽化 图层样式-渐变叠加 亮度遮罩 总结 PAG 4.1 版本新增支持了微信小程序,实现了所有常用平台(iOS、Android、macOS、Windows、Linux...PAG 4.2 版本我们将聚焦在最近开发同学频繁提出的 UI 列表场景性能问题,推出一个优化版本及在该场景下的推荐实现方案。

    1.6K20

    H5和微信小游戏 Canvas API 整理前言

    所以这就是这篇博客的内容,我们要来整理下微信小游戏Canvas的绘图api。为什么要单独写篇博客整理呢,因为微信小游戏的官方文档并没有提供(反正我是没有找到)。...(4)渐变 渐变就要涉及到渐变颜色和渐变方向,H5中渐变方向是通过起始点决定的,在createLinearGradient方法中传入两个点的坐标,这两个点的连线方向就是渐变的方向。...所以懂点色彩基础的都知道,默认就是全透明黑色。 上面例子中,我们给每个像素都赋值绿色,最后调用ctx.putImageData把像素绘制到屏幕上。...(21)图层混合模式 这个和Android中的XFermode差不多。...在目标图像上显示源图像。 source-atop 在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。 source-in 在目标图像中显示源图像。

    3.1K41

    ps快捷键

    l 选中图层按 Alt 键,点击删除。 l 图层菜单至图层至删除。 如何重命名图层: l 在图层名称上双击左键,输入,点击回车即可。 l 图层面板上的眼睛图标,点击可以隐藏或显示图层的内容。...l 在图层上单击鼠标右键,选择复制图层。 l 图层至新建至通过拷贝的图层,快捷键 Ctrl + J。 l 在笔尖形状下点击出现锁链,这叫做链接图层,链接以后可以整体的对它进行移动。...快捷键:Alt + S + M + S l 扩展:是在原有选区的基础上向外增加多少像素。快捷键:Alt + S + M + E l 收缩:是在原有的选区基础上向内收缩了多少像素。...属性栏的第三个,设置清除锯齿的方法: 创建变形,文本,认为可以,点击对号,退出文字工具。在文字图层上,单击鼠标右键,点击相册格化图层。...硬度:硬度值越大,笔刷的边缘越实,硬度越小,笔刷的边缘越虚化。 笔刷间距:调大可以变成不连续的。 如何定义画笔? 打开一幅图像,在图像上绘制一个选区,编辑菜单,定义画笔,输入名,确定。

    4.8K50

    自定义 Drawable 你还只会 吗?

    我们都知道在中可以使用标签实现边框,但是不支持渐变呀。...标签只能应用在中对整个背景进行渐变,怎么能利用这个能力来实现一个渐变的边框呢 layer-list闪亮登场 layer-list 类似 PS 里面的图层的概念,我们可以使用多个图层叠加来实现一些特殊的效果...比如我们可以在底下放置一个深色的图层,上层再放置一个白色图层,白色图层比下层宽高小 2dp,两个图层居中展示,这样就实现一个宽度为 1dp 的边框了。...在这个基础上,我们把两个图层都设置成渐变,这不就是我们要的渐变边框了吗 的,上层图层有透明度所以直接透过下层了,我们可以在中间再加一层纯白的非透明图层 <?xml version="1.0" encoding="utf-8"?

    23110

    绘图-几个较复杂统计图案例的实现分析

    UIBezierPath,把这个路径拼接上X坐标轴上的两个垂直投影点形成一个底部矩形状的封闭路径,把个路径作为渐变图层的path,并绘制一条比这个UIBezierPath顶部低一点的路径作为 渐变图层的遮罩图层...遮罩层同时做CABasicAnimation动画,渐变图层渐渐显现,渐变图层的遮罩图层由 低路径过渡到高路径,就有了上图中渐变图层渐渐显现并逐渐身高的效果。...(4) 在弹性动画的执行期间,定时器会不断的获取某一时刻的所有的子视图的 坐标 ,并修改 曲线上的点的位置的坐标,并根据 currentLinePathForWave 这个方法绘制出 渐变图层的 mask...的上沿的边界,然后绘制好整个完整的渐变图层的 mask的完成path并赋值。...,还有一个十字线,这个只要会画线段就会画十字线,这个也不多说了; 这些掌握了之后就可以绘制专属自己的K线图了,其他的都是一些细节小问题,CGContextRef还有很多用法,有兴趣的自己可以找度娘,接下来附上我的最终的绘制结果

    1.6K20

    Android字体渐变效果

    疑问 为什么这里要继承自AppCompatTextView而不是View? 答:偷个懒而已,因为不用在我来测量View,直接用父类的就行 来看看效果顺便也看看布局: 图片 出现问题 文字并没有显示。...图片 (图片来自于网络) 再来思考一下文字是为什么不显示的: 图片 虚线为BaseLine 如果此时我把字体放大到100,看一看我能不能看到文字。...从左到右渐变文字 众所周知,在android中是不能够将文字绘制一般的。...蓝色 – 1次过度绘制– 这部分的像素点只在屏幕上绘制了两次。 绿色 – 2次过度绘制 – 这部分的像素点只在屏幕上绘制了三次。...粉色 – 3次过度绘制 – 这部分的像素点只在屏幕上绘制了四次。 红色 – 4次过度绘制 – 这部分的像素点只在屏幕上绘制了五次。

    1.4K10

    Flash软件应用项目(二)

    方法二,我们可以用矩形画一个矩形,在我们的颜色中选择渐变颜色,调整好颜色,拉出渐变,之后再对齐下,选择匹配宽和高,就可以得到和背景一样大小的色块,再去除边缘描边就可以,这里我们只需要填充白色。...用直线工具绘制一个圣诞树的身体,可以在这个图层上进行填充,填充一个渐变,也可以等后期将圣诞树分成多个块状,填充不同的纯色, 装饰球 一定要新建图层将装饰球画在新建图层上并且将鼎和身子画出来后,先别慌填充颜色把没有颜色的球体设为元件...四.Deco 工具 快捷键为 U,在画笔工具的旁边,可以理解为一种提前设计好的智能填充,这个工具也是非常重要的工具可能以后不常用,但很容易忘记它的存在,所以要着重记一下它的功能和用法,在 deco 工具中的绘制效果里...,那么里面就会有很大一块区域的背景,是无法填充到的如果你再次点击的话很有可能只会有一条藤蔓伸出,不能进行延伸,因为空间太小,阻挡物太多,既然是背景那我们为什么要填充在物体上?...做背景的颜色肯定是要填充在全部的背景上不能有一丝空隙,更不能将背景颜色填充到了物体上这样看上去,物体仿佛被压在背景的下面。

    70940

    android的 drawable 这个文件夹下是放图片的?那为什么还放xml

    Android 项目中的 drawable 文件夹主要用于存放图片等可绘制资源,但不止于图片,还包括其他可被 Android 系统绘制的资源文件。...具体包含以下几类:图片文件最常见的是各种格式的图片,如 PNG(推荐,支持透明)、JPG(适合照片类)、GIF(部分场景支持简单动画)等,用于界面中的图标、背景、插图等。...XML 绘制资源这是 Android 特有的 “矢量型” 资源,通过 XML 代码定义图形,而非像素图片,包括:形状(shape):如圆角矩形、圆形、渐变背景等(例如按钮背景)。...选择器(selector):定义控件在不同状态(如点击、选中、禁用)下的样式(例如按钮点击前后的颜色变化)。图层(layer-list):将多个图形 / 图片叠加组合(例如带边框的图标)。...总结:drawable 是存放 “可被绘制到屏幕上的资源” 的文件夹,图片是其中最常见的类型,但 XML 绘制资源和简单动画也属于其范畴。

    14310

    Flash软件应用项目(一)

    3.山峦与日光 用钢笔工具画出曲线 Delete 删除不要的曲线,如果钢笔工具变成了添加锚点工具无法继续绘制,先做出形状确认闭合再次填充每一个小的闭合空间,所有的山峦图层间,在火车轨道图层的下面这样就可以更好的在删除无用线断时再次移动图像遮掩缝隙...,线段只是起到一个隔绝颜色的作用,只有一个闭合的区间才能够填充色彩并且是在一个图层上,这样大部分就已经做好了 三.小型元素构建 1....,形成一个新的闭合区间然后再填充渐变,ctrl+A 选中这个图层上所有的元素,按 Shift 不放,鼠标点击元素会取消或者重新选择我们直接点击大的色块,再用 delete 删除,就可以把旁边的轮廓线删掉...3.一辆旧世纪火车 方法,可以先在网上搜到有关火车车厢的图片然后临摹最后,删除边缘线,也可以用简单的图形概括拼接图形合并小区间 写了这么多,我觉得 Flash 最重要的是把图层分清楚,然后要有同一个图层的闭合线段即可成为形状的思想...写到最后 我想对大家说 flash 的功能远不止这些,他也相当于是一种图形的绘制软件,它最强大的功能应该是他的动画,这个案例只是让大家熟悉一些基本的使用步骤,以及区分和其他软件相同工具的区别,后期会带领大家学习这个软件最强大的动画设计功能

    1.2K20

    iOS动画系列之九:实现点赞的动画及播放起伏指示器(OC+Swift)1. CAReplicatorLayer2. CAEmitterLayer3. CAGradientLayer

    CAReplicatorLayer CAReplicatorLayer的目的是为了高效生成许多相似的图层。它会绘制一个或多个图层的子图层,并在每个复制体上应用不同的变换。什么意思?...看到例子中间的那么多条条在上下起伏了嘛?其实我并没有写那么多条条,只写了一个。把这一个写好的加入到了CAReplicatorLayer复制层中,然后就根据设置的参数自动的生成了剩下的条状物。...就是最基本的建立一个CALayer,设置了frame,设置了锚点,设置了背景颜色,加入了上下移动的动画。 等等,为什么这里背景颜色是白色吶?白色不是就看不见了嘛?别着急,第二步里面答案就揭晓啦。...instanceCount:拷贝图层的次数,包括其所有的子图层,默认值是1,也就是没有任何子图层被复制。...用Core Graphics复制一个CAGradientLayer并将内容绘制到一个普通图层的寄宿图也是有可能的,但是CAGradientLayer的真正好处在于绘制使用了硬件加速。

    1.7K20

    Android自定义View实现一个炫酷的时钟

    ,粒子透明度、半径、运动速度随机,运动超过一定距离或者时间消失 背景圆有一个从内到外的渐变色 计时模式下圆环有一个颜色渐变的顺时针rotate动画 整个背景圆颜色随着扇形角度变化而变化 指针颜色变化 数字变化是上下切换动画...1.3、从结构上分析 这个控件可以拆分为两个部分,由背景圆+数字控件两个部分构成的组合控件,之所以把数字控件单独拆分出来,也是为了方便做数字上下跳动的动画,毕竟通过控制drawText的位置实现动画感觉不方便...,比如粒子现在坐标在(5,5)``,通过update()改变粒子的坐标到(6,6),结合属性动画不停地调用update()则就能不停的改变x,y的坐标,实现粒子运动,然后当粒子移动超过一定距离,或者调用...,所以选用drawBitmap实现 至于如何实现bitmap指针图片的颜色变化呢,原本的方案是使用AvoidXfermode改变指定像素通道范围内的颜色,但是AvoidXfermode在API 24已经被移除...欢迎关注我,分享Android干货,交流Android技术。 对文章有何见解,或者有何技术问题,欢迎在评论区一起留言讨论!

    96730

    自定义View(九)-View的工作原理- View的layout()和draw()

    ---- performDraw()绘制 现在我们来看看View三大流程最后一个流程-->draw(绘制)。它的作用就是讲View绘制在屏幕上。...已进入方法就提示了绘制的过程遵循以下6个步骤: 绘制当前视图的背景。 保存当前画布的堆栈状态,并且在在当前画布上创建额外的图层,以便接下来可以用来绘制当前视图在滑动时的边框渐变效果。...绘制当前视图的内容。 绘制当前视图的子视图的内容。 绘制当前视图在滑动时的边框渐变效果。 绘制当前视图的滚动条。 在一般情况下2和5我们在自定义View时是不会去修改的。...在标记第二步开始和结束的位置之间的这段代码用来检查是否需要保存参数canvas所描述的一块画布的堆栈状态,并且创建额外的图层来绘制当前视图在滑动时的边框渐变效果。...View绘制6步分析.png 我们在来总结几个关于View绘制相关的知识点: 父类View绘制主要是绘制背景,边框渐变效果,进度条,View具体的内容绘制调用了onDraw方法,通过该方法把View内容的绘制逻辑留给子类去实现

    3.1K20

    Android-Xml绘图

    Android XML绘图 XMl在Android中可不仅仅是一个布局文件、配置列表。它甚至可以变成一张画、一张图。...line: 线形,可以画实线和虚线 ring: 环形,可以画环形进度条 通过shape可以在XML中绘制任何形状,下面展示了Shape所支持的参数 "http://schemas.android.com...:left 左内间距 android:right 右内间距 android:top 上内间距 android:bottom 下内间距 gradient: 设置形状的渐变颜色,可以是线性渐变、辐射渐变、扫描性渐变...渐变的角度,线性渐变时才有效,必须是45的倍数,0表示从左到右,90表示从下到上 android:centerX 渐变中心的相对X坐标,放射渐变时才有效,在0.0到1.0之间,默认为0.5,表示在正中间...android:centerY 渐变中心的相对X坐标,放射渐变时才有效,在0.0到1.0之间,默认为0.5,表示在正中间 android:gradientRadius 渐变的半径,只有渐变类型为radial

    1K10

    自定义View Draw过程- 最易懂的自定义View原理系列(4)

    前言 自定义View是Android开发者必须了解的基础 网上有大量关于自定义View原理的文章,但存在一些问题:内容不全、思路不清晰、无源码分析、简单问题复杂化 等 今天,我将全面总结自定义View...接下来,我将详细分析这2种情况下的draw过程 3.1 单一View的draw过程 应用场景 在无现成的控件View满足需求、需自己实现时,则使用自定义单一View 如:制作一个支持加载网络图片的...绘制装饰(渐变框,滑动条等等) * 注: * a. 在调用该方法之前必须要完成 layout 过程 * b....:当不需绘制 Layer 时,“保存图层“和“复原图层“这两步会跳过 // 因此在绘制时,节省 layer 可以提高绘制效率 final int viewFlags = mViewFlags...:当不需绘制 Layer 时,“保存图层“和“复原图层“这两步会跳过 // 因此在绘制时,节省 layer 可以提高绘制效率 final int viewFlags = mViewFlags

    68250

    Sketch for mac版 基础教学

    认识 Sketch 界面Sketch 是一款专为 UI/UX 设计师打造的矢量设计工具,界面简洁,主要包含以下区域:画布(Canvas):设计主区域,可无限扩展。...检查器(Inspector):调整图层属性(颜色、尺寸、阴影等)。图层列表(Layers List):管理画布上的所有元素。组件(Symbols):可复用的设计元素,提高效率。2....基础操作① 创建画板(Artboard)按 A 键选择画板工具,拖拽绘制。预设尺寸可选 iPhone、iPad、Web 等常见设备。...② 绘制形状 & 文字形状工具(R / O / U):矩形(R)、圆形(O)、自定义路径(U)。文字工具(T):点击画布输入文字,检查器调整字体、字号、对齐方式。...④ 样式与导出填充 & 描边:在检查器调整颜色、渐变、透明度。导出(Export):选中图层,点击 Export 导出 PNG/SVG/PDF 等格式。3.

    14210
    领券