定制社区UI风格

iOS定制方法
Android定制方法
注意事项
附录1-颜色说明
附录2-颜色图例

为使社区界面风格与你的游戏风格更贴近,你可以通过本文提供的方法,定制一套专属于你游戏的KTplay社区。

1.iOS定制方法

1.1 定制颜色

  • 打开SDK文件夹下的ktplay.bundle
  • 打开文件color/color-iphone@2x.plist
  • 所有以kt_theme开头的颜色值都是可定制的,具体细节请参考附录颜色说明颜色图例

1.2 定制图片

  • 打开SDK文件夹下的ktplay.bundle
  • 打开文件夹image/iphone,所有图片资源都放置在此文件夹下,根据需要替换成你自己的图片。(注意:图片文件名包含@2x,@3x等后缀以适配不同屏幕清晰度,替换时需要都替换)
  • 建议优先定制下列图片
    • tab_background 导航栏背景
    • tab_blank_selected 导航项选中时的背景
    • 以tab_开头的其他图片(导航项图片),名称中包含_selected的为选中状态。

2.Android定制方法

2.1 定制颜色

  • 进入KTplay SDK文件夹,打开文件res/valuse/kryptanium_theme_colors_default.xml
  • 文件中包含所有可定制的颜色,具体细节请参考附录颜色说明颜色图例
  • 建议优先定制下列颜色值
    • kt_theme_color 主题颜色
    • kt_theme_navigationbar_background 导航栏背景
    • kt_theme_navigationitem_selected 导航项选中颜色

2.2 定制图片

  • 进入KTplaySDK文件夹。
  • 打开文件夹res/drawable-xhdpi-v4,所有图片资源都放置在此文件夹下,根据需要替换成你自己的图片。
  • 建议优先定制下列图片
    • 以kryptanium_tabindicator_开头的图片(导航项图片),名称中包含_select的为选中状态。

3.注意事项

  • 替换图片时,不要改变图片的文件名。
  • 替换图片时,不要改变图片的原始尺寸。
  • 具体定制过哪些文件,建议做个记录,以便在SDK版本升级时,能将上个版本的定制文件应用到新的SDK版本中。
  • 版本升级时,将变更过的颜色值更新到新版,不要直接覆盖文件(新版可能增加条目)。

附录1 颜色说明

颜色名 用途描述
kt_theme_color 主题颜色,请设置为跟游戏主题风格一致。
控制范围:
- 按钮背景
- 链接文字
- 高亮文字
- Loading动画背景
- 播放器进度条背景
kt_theme_background 总背景颜色
kt_theme_navigationbar_background 导航条背景颜色
iOS使用图片实现,无此项
kt_theme_navigationitem_selected 导航按钮选中颜色
iOS使用图片实现,无此项
kt_theme_titlebar_background 标题栏背景颜色
kt_theme_color_disabled 各类控件被禁用时的背景颜色,例如:按钮无法点击时
kt_theme_section_background 区块背景颜色
控制范围:
- 首页几个分块(热门图片/视频/专题等)
- 所有以卡片样式展示的内容
kt_theme_headsection_background 被强调的区块背景颜色
控制范围:
- 首页热门话题
- 首页热门话题
- 嵌入话题中的分享/投票等活动内容
kt_theme_listitem_background 列表项背景色
kt_theme_listitem_dividercolor 分隔线颜色
kt_theme_popup_background 弹出框背景颜色
kt_theme_popup_border 弹出框边线颜色
kt_theme_highlighted_item_background 高亮条目背景色
控制范围
- 从个人通知点入回复详情中的高亮条目
- 进入好友页的新的好友请求栏
- 投票界面,已选择的投票项目
kt_theme_imageloading_placeholder_background 图片下载过程中占位区域的背景色
kt_theme_subtitle_background 二级标题栏背景颜色
kt_theme_title_textcolor 各类标题文字颜色
kt_theme_primary_textcolor 主要文字颜色
kt_theme_primary_textcolor_dark 暗色背景下的主要文字颜色
kt_theme_secondary_textcolor 次要文字颜色
kt_theme_secondary_textcolor_dark 暗色背景下的次要文字颜色
kt_theme_hint_textcolor 提示文字颜色

附录2 颜色图例

还有其它问题?提交请求

0 评论

登录写评论。