Android-Bootstrap 自定义图标字体(Icon Set)接入实战指南 UI组件移动开发【免费下载链接】Android-BootstrapBootstrap style widgets for Android, with Glyph Icons项目地址https://gitcode.com/gh_mirrors/an/Android-Bootstrap点击查看免费下载本文基于仓库根目录的 ADD_FONT.md 官方扩展指南结合 Android-Bootstrap 库的 TypefaceProvider、IconSet 及内置图标集源码系统讲解如何为 Android-Bootstrap 接入一套全新的图标字体并覆盖 IconSet 接口实现、TTF 资源放置、TypefaceProvider 注册、BootstrapText 拼接图标与常见踩坑点帮助读者快速将任意开源图标字体变成项目可用的 Glyph Icon 集。AwesomeTextView 是承载各 Icon Set 字体图标的容器控件新接入的图标字体最终都通过它渲染图片来源仓库 images 目录1. 为什么 Android-Bootstrap 需要“字体图标集”Android-Bootstrap 通过Typeface Icon Sets字体图标集提供可缩放的图形其核心思路是把图标字形放进 TTF 字体文件用 unicode 码位代替图片资源。这样做的好处是无需为不同屏幕密度mdpi / hdpi / xhdpi / xxhdpi / xxxhdpi准备多套 drawable图标随字体大小、颜色缩放而自动适配这正是 ADD_FONT.md 开篇点明的设计动机。仓库默认在 AndroidBootstrap/src/main/assets 下内置了三套字体文件字体文件对应 IconSet 实现字体路径常量fontawesome-webfont-v470.ttfFontAwesome.javaFontAwesome.FONT_PATHtypicons-v207.ttfTypicon.javaTypicon.FONT_PATHMaterialIcons-Regular.ttfMaterialIcons.javaMaterialIcons.FONT_PATH三者的字体路径常量分别对应fontawesome-webfont-v470.ttf、typicons-v207.ttf与MaterialIcons-Regular.ttf均以 assets 目录为起点。官方鼓励社区提交新字体按本指南完成接入后可以向项目发送 Pull Request 请求将新图标集默认集成进库中见 ADD_FONT.md 第 1 步末尾的说明。2. 接入自定义字体官方六步流程ADD_FONT.md 给出了一套明确的六步接入流程以下逐步展开并结合源码补充实现细节。步骤 1找到字体的 Reference Sheet 并编写解析脚本接入的第一步是找到目标字体官方的reference sheet图标速查表——它列出了每个图标对应的字体 unicode 码位。例如 FontAwesome 官方 Cheatsheet、Typicons 官网图标表。拿到表格后用脚本解析成“图标名 → unicode 字符”的映射数据供后续填充到 IconSet 实现中。官方提示FontAwesome 与 Typicon 两套内置图标集都曾借助解析脚本自动生成两者类内均有// Auto-generated Icon Set from 2015-10-05的注释标记见 FontAwesome.java 与 Typicon.java如果你也编写了解析脚本欢迎连同脚本一起提交 Pull Request。步骤 2实现 IconSet 接口新建一个类实现 IconSet 接口。该接口用三个方法描述“字体在 assets 中的位置”与“图标码到 unicode 字符的映射”public interface IconSet { /** * 根据图标 code如 my_icon返回对应的 unicode 字符 */ CharSequence unicodeForKey(CharSequence key); /** * 根据 XML 属性中的枚举索引返回图标 code供布局文件属性使用 */ CharSequence iconCodeForAttrIndex(int index); /** * 返回字体文件在 assets 目录下的路径例如 myicons.ttf */ CharSequence fontPath(); }参照内置实现如 FontAwesome.java一个自定义图标集大致长这样public class MyIcons implements IconSet { public static final String FONT_PATH myicons.ttf; private static final MapString, String ICON_MAP new HashMap(); private static final MapInteger, String ATTR_MAP new HashMap(); static { // 步骤 1 解析脚本生成的映射数据填充于此例如 ICON_MAP.put(my_heart, \ue001); ICON_MAP.put(my_star, \ue002); // ATTR_MAP为每个图标分配一个 XML 枚举索引 ATTR_MAP.put(0, my_heart); ATTR_MAP.put(1, my_star); } Override public CharSequence unicodeForKey(CharSequence key) { return ICON_MAP.get(key); } Override public CharSequence iconCodeForAttrIndex(int index) { return ATTR_MAP.get(index); } Override public CharSequence fontPath() { return FONT_PATH; } }命名与映射要点源码明文约束库内图标 code 统一使用下划线而非连字符。FontAwesome 的 Javadoc 明确说明“icon codes use underscores rather than hyphens in this library. For example, fa-play would become fa_play”原因是 Android 属性Attribute命名不允许使用连字符unicodeForKey与iconCodeForAttrIndex返回CharSequence而不是String实现时注意类型一致性。步骤 3将字体 TTF 文件拷贝到 assets 目录把下载好的 TTF 文件放入库/应用的assets/目录文件名必须与fontPath()返回值严格一致例如myicons.ttf。仓库内置三套字体的放置方式可直接参考 AndroidBootstrap/src/main/assetsassets/ ├── MaterialIcons-Regular.ttf ├── fontawesome-webfont-v470.ttf └── typicons-v207.ttf步骤 4通过 TypefaceProvider 注册自定义图标集调用 TypefaceProvider.registerCustomIconSet() 完成注册使新图标集在整个应用内可用TypefaceProvider.registerCustomIconSet(new MyIcons());从源码看TypefaceProvider 内部维护了两张静态缓存表TYPEFACE_MAPMapCharSequence, Typeface按字体路径缓存Typeface.createFromAsset()创建的字体实例避免反复初始化开销REGISTERED_ICON_SETSMapCharSequence, IconSet按字体路径缓存已注册的 IconSet。registerCustomIconSet本质就是把(iconSet.fontPath(), iconSet)放入REGISTERED_ICON_SETS。若在运行时视图向retrieveRegisteredIconSet()请求一个未注册字体路径会直接抛出RuntimeException提示 “Font xxx not properly registered”因此注册动作务必在视图创建前完成。推荐做法与内置示例应用一致——在自定义Application的onCreate()中注册。仓库示例 SampleApplication.java 展示了默认图标集的注册方式public class SampleApplication extends Application { Override public void onCreate() { super.onCreate(); // 注册默认图标集FontAwesome、Typicon、MaterialIcons TypefaceProvider.registerDefaultIconSets(); // 自定义图标集追加注册 TypefaceProvider.registerCustomIconSet(new MyIcons()); } }注意registerDefaultIconSets()与registerCustomIconSet()并不互斥——默认注册的三个图标集同样是以“按字体路径写入注册表”的方式登记的见 TypefaceProvider.java自定义图标集追加注册即可共存。步骤 5用 BootstrapText 在文本中插入新图标注册完成后即可使用 BootstrapText.Builder 在富文本中拼接图标。Builder提供了多种追加方法其中面向自定义图标集的核心方法是addIcon(CharSequence iconCode, IconSet iconSet)BootstrapText text new BootstrapText.Builder(this) .addText(点个赞) .addIcon(my_heart, new MyIcons()) // 自定义图标 .addFontAwesomeIcon(FA_ANDROID) // 内置 FontAwesome 图标 .build(); awesomeTextView.setBootstrapText(text);从 BootstrapText.java 源码可以看出addIcon的底层逻辑先把iconSet.unicodeForKey(iconCode)查到的 unicode 字符追加进StringBuilder再在fontIndicesMap中记录该字符的结束位置与对应 IconSetbuild()时遍历该 Map用 AwesomeTypefaceSpan 为每个图标字符打上对应字体的 Span——最终渲染时AwesomeTypefaceSpan.updateDrawState()通过TypefaceProvider.getTypeface()取出字体并应用到 TextPaint。BootstrapText继承自SpannableString并实现了Serializable因此可以直接作为控件文本也能随 Activity 状态一起序列化保存恢复见 AwesomeTextView.java 的onSaveInstanceState/onRestoreInstanceState。步骤 6测试、提交 Pull Request 或报告 Issue完成上述步骤后在模拟器/真机上验证新图标集的显示效果图标是否渲染、大小是否随字号缩放、颜色是否跟随 BootstrapBrand 变化。若一切正常可按官方建议发送 Pull Request 请求将图标集加入库的默认集合若发现问题则按 README.md 的指引提交 Issue。3. 除了 Builder还能怎么用图标XML 属性与 Markdown接入自定义图标集后有三条使用途径对应 attrs.xml 中AwesomeTextView的声明方式一XML 属性需额外声明 attr 枚举内置三套图标分别通过fontAwesomeIcon、typicon、materialIcon三个属性在布局中使用其枚举值定义在 attrs_font_awesome.xml、attrs_typicons.xml、attrs_materialIcon.xml。渲染时 AwesomeTextView 通过iconCodeForAttrIndex(ordinal)反查图标 code。com.beardedhen.androidbootstrap.AwesomeTextView android:layout_widthwrap_content android:layout_heightwrap_content app:bootstrapBrandsuccess app:fontAwesomeIconfa_android /若希望自定义图标集也支持 XML 属性需要参照上述 attrs 文件为自己的图标集补充attr namemyIcon formatenum枚举声明并在AwesomeTextView的declare-styleable中挂接该属性。方式二BootstrapText.Builder推荐已在上节演示通过addIcon(iconCode, iconSet)可在任意位置混合普通文本、不同图标集的图标灵活度最高。方式三Markdown 字符串AwesomeTextView支持setMarkdownText()/app:bootstrapText属性用{图标code}语法内联图标。解析逻辑位于 IconResolver.javaFontAwesome{fa_android}正则(fa_|fa-)[a-z_0-9]Typicon{ty_weather_cloudy}正则(ty_|ty-)[a-z_0-9]MaterialIcons{md_share}正则(md_)[a-z_0-9]自定义图标集IconResolver.resolveIconSet()会遍历所有已注册的 IconSet跳过内置三套调用unicodeForKey()逐一匹配匹配不到则抛出IllegalArgumentException见 IconResolver.java。因此自定义图标集的 markdown 写法就是{my_heart}前提是已注册。com.beardedhen.androidbootstrap.AwesomeTextView android:layout_widthwrap_content android:layout_heightwrap_content app:bootstrapTextI {fa_heart} {my_star} this library /另外IconResolver支持用反斜杠转义花括号例如\{fa_facebook\}渲染为纯文本编辑器预览isInEditMode()时会以?占位代替图标。4. 常见问题与注意事项忘记注册导致运行时崩溃任何视图包括AwesomeTextView、BootstrapDropDown等使用bootstrapText属性的控件在解析图标前都会调用retrieveRegisteredIconSet()未注册的字体路径会抛出RuntimeException。务必在 Application 的onCreate()中完成注册。图标 code 一律使用下划线连字符会在Builder.addIcon中被replaceAll(\\-, _)统一替换但建议直接按下划线规范编写保持与内置图标集一致。TTF 文件名必须与fontPath()完全一致TypefaceProvider.getTypeface()直接以fontPath()作为Typeface.createFromAsset(context.getAssets(), path)的参数大小写与扩展名都需匹配 assets 中的实际文件。在自定义图标集上使用 XML 属性需要自行补充 enum 类型的 attr 声明iconCodeForAttrIndex()必须为每个枚举索引返回有效图标 code否则渲染为空白。不要覆盖默认图标集REGISTERED_ICON_SETS以字体路径为键若自定义字体路径与内置三者fontawesome-webfont-v470.ttf、typicons-v207.ttf、MaterialIcons-Regular.ttf冲突会覆盖默认注册项应避免。5. 相关源码与资源索引扩展指南原文ADD_FONT.md图标集接口IconSet.java内置实现FontAwesome.java、Typicon.java、MaterialIcons.java注册与字体加载TypefaceProvider.java富文本拼接BootstrapText.java、AwesomeTypefaceSpan.javaMarkdown 解析IconResolver.java属性声明attrs.xml、attrs_font_awesome.xml、attrs_typicons.xml、attrs_materialIcon.xml字体资源AndroidBootstrap/src/main/assets应用内注册示例SampleApplication.java、AwesomeTextViewExample.java至此从解析速查表、实现IconSet、放置 TTF、注册到最终在BootstrapText/ XML / Markdown 中使用一套完整的自定义图标字体接入闭环已全部打通。赞分享UI组件移动开发【免费下载链接】Android-BootstrapBootstrap style widgets for Android, with Glyph Icons项目地址https://gitcode.com/gh_mirrors/an/Android-Bootstrap点击查看免费下载相关推荐wot-design-uni 图标组件wd-icon完全指南内置字体图标、图片图标与自定义 iconfont 的接入实践wot design uni 图标组件wd icon完全指南内置字体图标、图片图标与自定义 iconfont 的接入实践 导读 wd icon 是 wot前端UI组件移动开发小程序vant-weapp Icon 图标组件实战指南从基础用法到自定义字体图标与源码原理vant weapp Icon 图标组件实战指南从基础用法到自定义字体图标与源码原理 导读 本文基于 vant weapp https://link.gitc前端小程序UI组件移动开发深入理解 wot-design-uni 的 wd-icon 图标组件字体图标、自定义图标与图片图标的实现原理深入理解 wot design uni 的 wd icon 图标组件字体图标、自定义图标与图片图标的实现原理 wd icon 是 wot design uni前端UI组件移动开发小程序创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考