文档教程移动开发【免费下载链接】android-training-course-in-chineseAndroid官方培训课程中文版项目地址https://gitcode.com/gh_mirrors/an/android-training-course-in-chinese点击查看免费下载本篇文章基于 Android 官方培训课程中文版android-training-course-in-chinese中《使用 Drawables》一课的翻译内容展开并结合仓库内 Material Design 主题、自定义动画 与 维护兼容性 等相邻课程进行源码级佐证与延伸。读者读完本文将掌握三件具体能力如何用一套资源为 Drawable 灵活染色以贴合主题色、如何从图片中自动提取并应用主色调、如何用单个 XML 矢量文件替代多密度位图资源并为其添加动画。在 Material Design 应用中图标、背景、图片与主题色之间需要保持视觉上的统一与灵活。Android 5.0API level 21引入了三类关键 Drawable 能力让开发者可以用更少的资源文件实现更丰富的视觉效果Drawable 染色Tinting用颜色资源或主题属性给位图、Nine-Patch 图片染色主色调提取Palette从图片中自动提取亮色、暗色等主色调并用于界面着色矢量 DrawableVector Drawable用单个vectorXML 文件实现无损缩放替代为每个屏幕密度准备一张位图的传统做法。本课是 Material Design 系列课程material/index.md中的独立章节与其主题、动画、阴影等课程互为补充。下文将以这三项能力为主线逐层展开完整配置与调用细节。给 Drawable 资源染色一套资源适配整套主题在 Android 5.0API level 21及以上版本你可以借助alpha mask透明度图层给位图Bitmap和 Nine-Patch 图片染色。染色的颜色既可以写死为颜色资源color/...也可以直接引用主题属性例如?android:attr/colorPrimary从而让图片颜色自动跟随当前主题变化。这样做最大的收益是你只需要创建一次颜色类资源图标、图片便可以在主题中自动匹配颜色无需为每个主题色再导出一套图片。例如当你把主题的android:colorPrimary从蓝色换成红色自定义调色板的方式参见 material/theme.md所有引用?android:attr/colorPrimary的图片染色会自动跟随更新。在代码中染色setTint()你可以用setTint()方法将一种染色方式应用到BitmapDrawable或NinePatchDrawable对象// 获取一个已有的 BitmapDrawable / NinePatchDrawable BitmapDrawable drawable (BitmapDrawable) getResources().getDrawable(R.drawable.my_icon); // 使用主题主色进行染色颜色会随主题自动变化 drawable.setTint(getResources().getColor(R.color.color_primary)); // 也可以直接引用主题属性对应的颜色值 TypedValue typedValue new TypedValue(); getTheme().resolveAttribute(android.R.attr.colorPrimary, typedValue, true); drawable.setTint(typedValue.data);注意setTint()系列 API 属于 API level 21 的新增能力在调用前应做好系统版本判断版本检查代码见下文兼容性小节。在布局中染色android:tint 与 android:tintMode除了代码调用你还可以在 Layout 中通过android:tint与android:tintMode属性直接声明染色颜色和混合模式原文档此处写作initMode标准属性名实为android:tintModeImageView android:layout_width48dp android:layout_height48dp android:srcdrawable/ic_share android:tint?android:attr/colorPrimary android:tintModesrc_in /android:tint指定染色颜色可直接使用?android:attr/colorPrimary这类主题属性实现一次定义、全主题复用android:tintMode指定颜色混合模式常见取值如src_in结果色 源与目标按 alpha 叠加常用于图标染色、multiply正片叠底等对应底层的混合模式算法决定颜色与图片原始像素的合成方式。把图标统一染成主题色是 Material Design 中保证不同状态、不同模块视觉一致性的常用手段你只需要维护黑白底图剩下的配色交给主题。从图片中提取主色调Palette 类实战在 Material Design 界面中常常需要让界面配色与用户看到的图片如封面、头像、商品图协调一致。Android Support Library v21 及更高版本提供的Palette类可以从一张图片中提取若干种代表性颜色供后续界面着色使用。Palette类可以提取以下六种色调提取色说明Vibrant亮色画面中最鲜艳明亮的颜色Vibrant dark深亮色Vibrant light浅亮色Muted暗色画面中较柔和、低饱和的暗色Muted dark深暗色Muted light浅暗色同步提取Palette.generate()在载入图片的后台线程中把已解码的Bitmap对象传给静态方法Palette.generate()即可同步完成颜色提取// 以下代码运行在后台线程中Bitmap 解码与处理本身也不应放在主线程 // 参见 [graphics/displaying-bitmaps/load-bitmap.md](https://link.gitcode.com/i/87c376cc6db2f53d965541bed18551f2) Bitmap bitmap loadBitmapFromSource(...); Palette palette Palette.generate(bitmap);之所以强调在后台线程执行是因为图片解码与主色调统计都是耗时操作若放在 UI 线程会造成卡顿仓库中 graphics/displaying-bitmaps/load-bitmap.md 一课对此有完整说明Bitmap 的裁剪、解码、下载等操作不能执行在主线程。异步提取Palette.generateAsync()如果无法使用后台线程可以调用Palette.generateAsync()方法并提供一个Palette.PaletteAsyncListener监听器在提取完成时收到回调Palette.generateAsync(bitmap, new Palette.PaletteAsyncListener() { Override public void onGenerated(Palette palette) { // 回调在后台线程完成回到主线程后更新 UI int vibrantColor palette.getVibrantColor(0xFF000000); // 应用提取到的颜色例如设置 ActionBar 或卡片背景 } });读取提取结果提取完成后可以用 Palette 类提供的 getter 方法获取具体颜色例如Palette.getVibrantColor(int defaultColor)获取亮色同理还有getVibrantDarkColor()、getVibrantLightColor()、getMutedColor()、getMutedDarkColor()、getMutedLightColor()等对应上表六种色调的 getter。这些 getter 都需要传入一个默认颜色参数用于提取结果缺失时兜底保证界面颜色总是有确定值。添加 Gradle 依赖要使用Palette类需要在应用模块的 Gradle 依赖中添加 palette-v7 Support Librarydependencies { ... compile com.android.support:palette-v7:21.0. }说明以上是课程成文年代对应 Android 5.0 / Support Library r21 时代的依赖写法在较新版本的 Android Gradle Plugin 中compile配置已更名为implementation你可以按项目实际使用的构建工具版本对应替换依赖坐标本身不变。创建矢量 Drawable一个 XML 文件代替一整套位图在 Android 5.0API level 21及以上版本你可以定义矢量 DrawableVector Drawable用于无损拉伸图片。传统位图方案中为了适配不同屏幕密度mdpi/hdpi/xhdpi/xxhdpi 等需要为同一个图标准备多份不同分辨率的 PNG而一个矢量图片只需要一个 asset 文件即可在不同密度与尺寸下保持清晰。要创建矢量图片你需要在vectorXML 元素中定义形状。以下代码定义了一个心形!-- res/drawable/heart.xml -- vector xmlns:androidhttp://schemas.android.com/apk/res/android !-- intrinsic size of the drawable -- android:height256dp android:width256dp !-- size of the virtual canvas -- android:viewportWidth32 android:viewportHeight32 !-- draw a path -- path android:fillColor#8fff android:pathDataM20.5,9.5 c-1.955,0,-3.83,1.268,-4.5,3 c-0.67,-1.732,-2.547,-3,-4.5,-3 C8.957,9.5,7,11.432,7,14 c0,3.53,3.793,6.257,9,11.5 c5.207,-5.242,9,-7.97,9,-11.5 C25,11.432,23.043,9.5,20.5,9.5z / /vector理解矢量文件的四个关键属性android:width/android:heightDrawable 的固有尺寸即 256dp决定矢量图在未显式设置大小时的默认显示尺寸android:viewportWidth/android:viewportHeight虚拟画布尺寸即 32×32pathData中的坐标均基于这个虚拟坐标系书写显示时系统会按固有尺寸对虚拟画布做无损缩放path的android:fillColor填充颜色可使用#8fff这类带 alpha 的十六进制色值path的android:pathData路径数据描述图形的轮廓语法与 SVG Path Data 一致。pathData中的字母代表绘图命令常见命令包括Mmove to移动画笔起点、C/c三次贝塞尔曲线相对/绝对坐标、L/l直线、z闭合路径等。上例的心形正是由多条相对坐标小写字母贝塞尔曲线命令绘制而成。矢量图片在 Android 中由VectorDrawable对象表示。升级让矢量 Drawable 动起来矢量 Drawable 的优势不仅在于静态显示还在于可以无损地做路径变形、旋转、平移等动画——这正是 material/animations.md 中动画矢量 Drawables一章的内容。动画矢量 Drawable 通常由三个 XML 文件配合组成在res/drawable/中用vector定义基础矢量图在res/drawable/中用animated-vector定义动画矢量 Drawable通过android:name找到要动画的group与path在res/anim/中定义一个或多个ObjectAnimator/AnimatorSet。例如先给矢量的 group 和 path 命名android:namerotationGroup、android:namev再用animated-vector通过 name 引用它们并挂接动画目标!-- res/drawable/animvectordrawable.xml -- animated-vector xmlns:androidhttp://schemas.android.com/apk/res/android android:drawabledrawable/vectordrawable target android:namerotationGroup android:animationanim/rotation / target android:namev android:animationanim/path_morph / /animated-vector其中anim/rotation是一个将 group 旋转 360° 的ObjectAnimatoranim/path_morph则将路径从一种形状 morph变形到另一种!-- res/anim/path_morph.xml -- set xmlns:androidhttp://schemas.android.com/apk/res/android objectAnimator android:duration3000 android:propertyNamepathData android:valueFromM300,70 l 0,-70 70,70 0,0 -70,70z android:valueToM300,70 l 0,-70 70,0 0,140 -70,0 z android:valueTypepathType / /set路径 morph 有一个硬性约束参与变形的两条路径必须拥有相同数量的命令且每个命令的参数数量也必须一致否则系统无法在两条路径之间做插值变形。兼容性API level 21 以下版本怎么处理本课介绍的染色、矢量 Drawable 以及 Support Library 中的Palette类大多依赖 Android 5.0API level 21的能力。按照 material/compatibility.md 的归纳以下特性仅在 API level 21 及以上可用矢量 DrawableDrawable 染色Activity 切换动画、触摸反馈、Reveal 动画、基于路径的动画Palette类本身来自 v7 Support Library可以向下兼容旧版本但 Drawable 染色与矢量 Drawable 属平台新能力。为保证兼容性可以在运行时检查系统版本再决定是否启用这些 Material 特性// Check if were running on Android 5.0 or higher if (Build.VERSION.SDK_INT Build.VERSION_CODES.LOLLIPOP) { // Call some material design APIs here } else { // Implement this feature without material design }同时仓库兼容性课程还给出了一个重要的工程化建议在res/values-v21/中提供适配新 API 的资源与样式在res/values/中提供旧版本回退资源并使用 style 继承避免代码重复。这样既能在 Android 5.0 上充分发挥矢量图与染色的优势又不会让低版本设备上出现资源缺失。小结与延伸阅读本课的核心结论可以概括为三点染色Tint借助 alpha mask 与setTint()/android:tint/android:tintMode让一套位图资源自动跟随主题色如?android:attr/colorPrimary实现资源的主题化复用主色调提取Palette用 palette-v7 的Palette.generate()后台线程或Palette.generateAsync()带回调从 Bitmap 中提取 Vibrant / Muted 等六种色调让界面配色与内容图片联动矢量 Drawable用单个vectorXMLwidth/height定义固有尺寸viewportWidth/Height定义虚拟画布pathData描述路径替代多密度位图并可通过AnimatedVectorDrawable实现无损动画。这三项能力共同服务于 Material Design 的色彩统一、图形灵活、多密度自适应目标。若想继续深入建议按以下顺序阅读同一系列的相邻课程开始使用 Material Design了解主题、Layout、Elevation、CardView 等 Material 应用的整体搭建流程使用 Material 的主题掌握colorPrimary、colorPrimaryDark、colorAccent等调色板属性它们是染色与提取色落地的载体自定义动画深入矢量 Drawable 动画、触摸反馈、Activity 切换与曲线动画的完整实现维护兼容性学习在 API level 21 以下版本中保留 Material 特性的完整策略与依赖配置。赞分享文档教程移动开发【免费下载链接】android-training-course-in-chineseAndroid官方培训课程中文版项目地址https://gitcode.com/gh_mirrors/an/android-training-course-in-chinese点击查看免费下载相关推荐IndexTTS2 情感可控零样本语音合成实战从环境搭建、WebUI 到 Python API 全解析IndexTTS2 情感可控零样本语音合成实战从环境搭建、WebUI 到 Python API 全解析 导读 本文以 Bilibili IndexTTS 团队文档教程移动开发使用 Material Design 创建现代 Android 应用Android 官方培训课程中文版实战指南使用 Material Design 创建现代 Android 应用Android 官方培训课程中文版实战指南 导读 本指南以 material/inde文档教程移动开发Android 官方培训课程中文版精读使用 Wi-Fi P2P 服务发现实战指南Android 官方培训课程中文版精读使用 Wi Fi P2P 服务发现实战指南 本文基于 android training course in chines文档教程移动开发上一篇Moodle UI 组件库入门基于 Hugo 与 Bootstrap 的组件文档中心实战指南下一篇GitHub加速完整指南三步装好Fast-GitHub告别等待进度条创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考