一文搞定 TSMessages 自定义设计JSON 与 UIAppearance 双路径完整指南【免费下载链接】TSMessages Easy to use and customizable messages/notifications for iOS à la Tweetbot项目地址: https://gitcode.com/gh_mirrors/ts/TSMessagesTSMessages 是 iOS 上的轻量消息通知组件把 Tweetbot 风格弹窗封装成几行 API。本文带你完成 TSMessages 自定义设计的完整流程用 JSON 定义四类消息的配色、字体与阴影再用 UIAppearance 统一全局外观。 场景任务把默认通知配色换成品牌色接手一个项目设计师给了整套品牌色板成功用深绿、错误用品牌红其余类型也必须跟着走。可屏幕上弹出来的还是库自带的默认配色和字号和设计稿对不上。你又不想 fork 源码去改——只想要一层能评审、能热换的皮肤。这正对应仓库里现成的做法默认样式已经外置成 JSON仓库提供了两份参考文件默认样式文件管四类通知的全部外观AlternativeDesign 示例则演示了只调字号的轻量改法。照着写一份自己的文件替换掉默认那份即可。 三步跑通第一版通知样式第 1 步写样式文件。复制默认 JSON 建一个MyDesign.json四个顶层键 success / message / warning / error 各代表一组样式逐个改成品牌值把文件加进 target。第 2 步加载文件。在应用启动后、主界面出现前调用一次[TSMessage addCustomDesignFromFileWithName:MyDesign];第 3 步弹一条通知验证。这一步会看到顶部滑出按你 JSON 渲染的成功提示[TSMessage showNotificationInViewController:self title:保存成功 subtitle:已同步至云端 type:TSMessageNotificationTypeSuccess duration:3];至此TSMessages 自定义设计的最小闭环就跑通了后面都是在这套基础上加料。⚖️ JSON 和 UIAppearance 怎么选先给选择建议要按类型改底色、边框、阴影、按钮或希望样式文件能被设计师评审、随时换版本 → 写 JSON只换字体、文字颜色、四类图标且希望代码里一处管全局 → 用 UIAppearance两者可叠加JSON 管四类通知的皮肤appearance 在其上做字体与图标的整体覆写JSON 参数清单对照默认样式文件的结构每个类型键下可用的参数如下backgroundColor/textColor底色与基础文字色十六进制字符串titleFontSize/contentFontSize标题行、内容行的字号borderColor/borderHeight底部边框颜色与粗细shadowColor/shadowOffsetX/shadowOffsetY投影颜色与 X/Y 偏移imageName左侧图标文件名填空字符串即无图标message 类型默认就是空的backgroundImageName背景图文件名如NotificationBackgroundSuccess.pngbuttonBackgroundImageName、buttonTitleTextColor、buttonTitleShadowColor、buttonTitleShadowOffsetX、buttonTitleShadowOffsetY按钮背景与按钮文字的五项参数success 一组的写法示意success: { backgroundColor: #76CF67, textColor: #FFFFFF, titleFontSize: 14, contentFontSize: 12 }UIAppearance 属性清单头文件 TSMessageView.h 里标了UI_APPEARANCE_SELECTOR的共 8 个属性字体文字色四个titleFont、titleTextColor、contentFont、contentTextColor 图标四个successIcon、errorIcon、warningIcon、messageIcon。在 AppDelegate 里这样调用即可全局生效[[TSMessageView appearance] setTitleFont:[UIFont boldSystemFontOfSize:16]]; [[TSMessageView appearance] setTitleTextColor:[UIColor whiteColor]]; [[TSMessageView appearance] setContentFont:[UIFont systemFontOfSize:14]]; [[TSMessageView appearance] setContentTextColor:[UIColor lightGrayColor]];注意底色、边框、阴影这些在 JSON 里的参数没有 appearance 入口改它们必须回 JSON。 进阶场景实战任务一深浅主题实时切换思路把两套 JSON如ThemeLight.json、ThemeDark.json都打进 bundle切换动作 重新加载文件不动任何源码。 关键步骤用户切主题时调用addCustomDesignFromFileWithName:指向新文件 → 若此刻正挂着通知先主动 dismiss让下一条按新皮肤出现。任务二图标资源统一管理思路四类型的图标不要散落各处集中收口。 关键步骤默认图标NotificationBackgroundSuccessIcon.png、NotificationBackgroundErrorIcon.png、NotificationBackgroundWarningIcon.png放在Pod/Assets/下JSON 按名字引用只想换图标不想动配色时用 appearance 的setSuccessIcon:等四个 setter 做全局覆写即可。任务三多设备适配思路字号给相对值而不是拍脑袋写死位置交给代理精细控制。 关键步骤按品牌字阶定titleFontSize/contentFontSize→ 最小机型与横屏各过一遍确认文字不截断 → 默认位置不合适时让视图控制器实现TSMessageViewProtocol的messageLocationOfMessageView:返回自定义偏移。动画方面淡入淡出由库内置fadeMeOut控制单条消失要改节奏就继承 TSMessageView 覆写对应方法。 避坑清单现象 → 原因 → 解决现象改完 JSON 后弹窗样式没变化。原因没调重新加载方法或文件没打进 bundle。解决确认启动后调用过一次addCustomDesignFromFileWithName:且 JSON 已加入对应 target。现象左侧图标显示空白。原因imageName引用的名字在 bundle 里没有对应 png或缺 2x 资源。解决检查Pod/Assets/下文件与 1x/2x 是否成对也可先用 appearance 的图标 setter 临时指定确认是命名问题。现象换了字体弹窗只有一部分跟着变。原因appearance 只覆盖 8 个属性颜色、边框、阴影不在其中。解决颜色类改动一律落回 JSON字体与图标类才留给 appearance。现象横屏或小屏上文字被截断。原因固定字号叠加固定位置没做尺寸校验。解决下调titleFontSize并通过TSMessageViewProtocol代理微调显示偏移。✅ 上线前自检清单四类通知在最小机型上都按品牌色渲染出来改动 JSON 后重新调用加载方法效果即时生效字体与图标能用一行 appearance 代码整体替换四类图标均备齐 1x/2x 资源无空白位横屏与竖屏各验证一遍文字不截断【免费下载链接】TSMessages Easy to use and customizable messages/notifications for iOS à la Tweetbot项目地址: https://gitcode.com/gh_mirrors/ts/TSMessages创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 一文搞定 TSMessages 自定义设计：JSON 与 UIAppearance 双路径完整指南
一文搞定 TSMessages 自定义设计JSON 与 UIAppearance 双路径完整指南【免费下载链接】TSMessages Easy to use and customizable messages/notifications for iOS à la Tweetbot项目地址: https://gitcode.com/gh_mirrors/ts/TSMessagesTSMessages 是 iOS 上的轻量消息通知组件把 Tweetbot 风格弹窗封装成几行 API。本文带你完成 TSMessages 自定义设计的完整流程用 JSON 定义四类消息的配色、字体与阴影再用 UIAppearance 统一全局外观。 场景任务把默认通知配色换成品牌色接手一个项目设计师给了整套品牌色板成功用深绿、错误用品牌红其余类型也必须跟着走。可屏幕上弹出来的还是库自带的默认配色和字号和设计稿对不上。你又不想 fork 源码去改——只想要一层能评审、能热换的皮肤。这正对应仓库里现成的做法默认样式已经外置成 JSON仓库提供了两份参考文件默认样式文件管四类通知的全部外观AlternativeDesign 示例则演示了只调字号的轻量改法。照着写一份自己的文件替换掉默认那份即可。 三步跑通第一版通知样式第 1 步写样式文件。复制默认 JSON 建一个MyDesign.json四个顶层键 success / message / warning / error 各代表一组样式逐个改成品牌值把文件加进 target。第 2 步加载文件。在应用启动后、主界面出现前调用一次[TSMessage addCustomDesignFromFileWithName:MyDesign];第 3 步弹一条通知验证。这一步会看到顶部滑出按你 JSON 渲染的成功提示[TSMessage showNotificationInViewController:self title:保存成功 subtitle:已同步至云端 type:TSMessageNotificationTypeSuccess duration:3];至此TSMessages 自定义设计的最小闭环就跑通了后面都是在这套基础上加料。⚖️ JSON 和 UIAppearance 怎么选先给选择建议要按类型改底色、边框、阴影、按钮或希望样式文件能被设计师评审、随时换版本 → 写 JSON只换字体、文字颜色、四类图标且希望代码里一处管全局 → 用 UIAppearance两者可叠加JSON 管四类通知的皮肤appearance 在其上做字体与图标的整体覆写JSON 参数清单对照默认样式文件的结构每个类型键下可用的参数如下backgroundColor/textColor底色与基础文字色十六进制字符串titleFontSize/contentFontSize标题行、内容行的字号borderColor/borderHeight底部边框颜色与粗细shadowColor/shadowOffsetX/shadowOffsetY投影颜色与 X/Y 偏移imageName左侧图标文件名填空字符串即无图标message 类型默认就是空的backgroundImageName背景图文件名如NotificationBackgroundSuccess.pngbuttonBackgroundImageName、buttonTitleTextColor、buttonTitleShadowColor、buttonTitleShadowOffsetX、buttonTitleShadowOffsetY按钮背景与按钮文字的五项参数success 一组的写法示意success: { backgroundColor: #76CF67, textColor: #FFFFFF, titleFontSize: 14, contentFontSize: 12 }UIAppearance 属性清单头文件 TSMessageView.h 里标了UI_APPEARANCE_SELECTOR的共 8 个属性字体文字色四个titleFont、titleTextColor、contentFont、contentTextColor 图标四个successIcon、errorIcon、warningIcon、messageIcon。在 AppDelegate 里这样调用即可全局生效[[TSMessageView appearance] setTitleFont:[UIFont boldSystemFontOfSize:16]]; [[TSMessageView appearance] setTitleTextColor:[UIColor whiteColor]]; [[TSMessageView appearance] setContentFont:[UIFont systemFontOfSize:14]]; [[TSMessageView appearance] setContentTextColor:[UIColor lightGrayColor]];注意底色、边框、阴影这些在 JSON 里的参数没有 appearance 入口改它们必须回 JSON。 进阶场景实战任务一深浅主题实时切换思路把两套 JSON如ThemeLight.json、ThemeDark.json都打进 bundle切换动作 重新加载文件不动任何源码。 关键步骤用户切主题时调用addCustomDesignFromFileWithName:指向新文件 → 若此刻正挂着通知先主动 dismiss让下一条按新皮肤出现。任务二图标资源统一管理思路四类型的图标不要散落各处集中收口。 关键步骤默认图标NotificationBackgroundSuccessIcon.png、NotificationBackgroundErrorIcon.png、NotificationBackgroundWarningIcon.png放在Pod/Assets/下JSON 按名字引用只想换图标不想动配色时用 appearance 的setSuccessIcon:等四个 setter 做全局覆写即可。任务三多设备适配思路字号给相对值而不是拍脑袋写死位置交给代理精细控制。 关键步骤按品牌字阶定titleFontSize/contentFontSize→ 最小机型与横屏各过一遍确认文字不截断 → 默认位置不合适时让视图控制器实现TSMessageViewProtocol的messageLocationOfMessageView:返回自定义偏移。动画方面淡入淡出由库内置fadeMeOut控制单条消失要改节奏就继承 TSMessageView 覆写对应方法。 避坑清单现象 → 原因 → 解决现象改完 JSON 后弹窗样式没变化。原因没调重新加载方法或文件没打进 bundle。解决确认启动后调用过一次addCustomDesignFromFileWithName:且 JSON 已加入对应 target。现象左侧图标显示空白。原因imageName引用的名字在 bundle 里没有对应 png或缺 2x 资源。解决检查Pod/Assets/下文件与 1x/2x 是否成对也可先用 appearance 的图标 setter 临时指定确认是命名问题。现象换了字体弹窗只有一部分跟着变。原因appearance 只覆盖 8 个属性颜色、边框、阴影不在其中。解决颜色类改动一律落回 JSON字体与图标类才留给 appearance。现象横屏或小屏上文字被截断。原因固定字号叠加固定位置没做尺寸校验。解决下调titleFontSize并通过TSMessageViewProtocol代理微调显示偏移。✅ 上线前自检清单四类通知在最小机型上都按品牌色渲染出来改动 JSON 后重新调用加载方法效果即时生效字体与图标能用一行 appearance 代码整体替换四类图标均备齐 1x/2x 资源无空白位横屏与竖屏各验证一遍文字不截断【免费下载链接】TSMessages Easy to use and customizable messages/notifications for iOS à la Tweetbot项目地址: https://gitcode.com/gh_mirrors/ts/TSMessages创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考