• 自定义外观

    本页向您展示了定制我们提供的UI的不同方法。

    在开始之前在开始之前,了解以下信息是有用的:

    • 您可以自定义支持SDK UI中使用的几种颜色。<李data-garden-id="typography.unordered_list_item" data-garden-version="8.39.0" class="sc-eKYRIR sc-gsWcmt jwhztf bMtobU">您可以使用CSS自定义帮助中心文章的显示方式。<李data-garden-id="typography.unordered_list_item" data-garden-version="8.39.0" class="sc-eKYRIR sc-gsWcmt jwhztf bMtobU">不可能移动UI的元素、删除UI的部分或添加新部分。如果这对您很重要,您应该考虑使用SDK<一个href="//www.ying8.net/developer/documentation/classic-web-widget-sdks/support-sdk/android/api_providers/">API提供者来构建你自己的UI。

    材料设计主题

    我们的UI依赖于材质设计主题(例如,从<代码data-garden-id="typography.code" data-garden-version="8.39.0" class="sc-eKYRIR sc-bTDOke bpSbjj iFHZBF">主题。MaterialComponents).<代码data-garden-id="typography.code" data-garden-version="8.39.0" class="sc-eKYRIR sc-bTDOke bpSbjj iFHZBF">colorPrimary,<代码data-garden-id="typography.code" data-garden-version="8.39.0" class="sc-eKYRIR sc-bTDOke bpSbjj iFHZBF">colorPrimaryDark,<代码data-garden-id="typography.code" data-garden-version="8.39.0" class="sc-eKYRIR sc-bTDOke bpSbjj iFHZBF">colorAccent

    使用或扩展SDK主题SDK有一个开箱即用的UI,需要一个材质设计主题(即,一种样式从<代码data-garden-id="typography.code" data-garden-version="8.39.0" class="sc-eKYRIR sc-bTDOke bpSbjj iFHZBF">主题。MaterialComponents).SDK尊重浅色、深色和带有深色操作栏主题的浅色。的<代码data-garden-id="typography.code" data-garden-version="8.39.0" class="sc-eKYRIR sc-bTDOke bpSbjj iFHZBF">colorPrimary,<代码data-garden-id="typography.code" data-garden-version="8.39.0" class="sc-eKYRIR sc-bTDOke bpSbjj iFHZBF">colorPrimaryDark,<代码data-garden-id="typography.code" data-garden-version="8.39.0" class="sc-eKYRIR sc-bTDOke bpSbjj iFHZBF">colorAccent属性是由SDK使用的,所以它将继承材料主题从你的应用程序。你可以扩展一个SDK主题如下:

                 
    <风格名字YourLightTheme亚博ZendeskSdkTheme。光>风格>
                 
    <风格名字YourDarkTheme亚博ZendeskSdkTheme。黑暗>风格>
                 
    <风格名字YourLightTheme。DarkActionBar亚博ZendeskSdkTheme.Light.DarkActionBar>风格>

    然后,您可以在您的<代码data-garden-id="typography.code" data-garden-version="8.39.0" class="sc-eKYRIR sc-bTDOke bpSbjj iFHZBF">AndroidManifest.xml如下:

                 
    <?XML版本="1.0"编码="utf-8"?><清单xmlns:安卓http://schemas.android.com/apk/res/androidcom.亚博zendesk.example><应用程序android:主题@style / YourLightTheme/>清单>

    或者,如果你不想在应用程序级别设置主题,那么你将需要执行以下操作:

                 
    <?XML版本="1.0"编码="utf-8"?><清单xmlns:安卓http://schemas.android.com/apk/res/androidcom.亚博zendesk.example><应用程序><活动android:名字亚博zendesk.support.guide.HelpCenterActivityandroid:主题@style / YourLightTheme/><活动android:名字亚博zendesk.support.guide.ViewArticleActivityandroid:主题@style / YourLightTheme/><活动android:名字亚博zendesk.support.request.RequestActivityandroid:主题@style / YourLightTheme/><活动android:名字亚博zendesk.support.requestlist.RequestListActivityandroid:主题@style / YourLightTheme/>应用程序>清单>

    使用自己的主题

    如果您不扩展SDK主题,您仍然必须应用从扩展的主题<代码data-garden-id="typography.code" data-garden-version="8.39.0" class="sc-eKYRIR sc-bTDOke bpSbjj iFHZBF">主题。MaterialComponentsSDK<代码data-garden-id="typography.code" data-garden-version="8.39.0" class="sc-eKYRIR sc-bTDOke bpSbjj iFHZBF">活动类。中,您可以为请求列表图标指定自己的绘图<代码data-garden-id="typography.code" data-garden-version="8.39.0" class="sc-eKYRIR sc-bTDOke bpSbjj iFHZBF">HelpCenterActivity的<代码data-garden-id="typography.code" data-garden-version="8.39.0" class="sc-eKYRIR sc-bTDOke bpSbjj iFHZBF">工具栏.注意,绘图已经有了浅色和深色版本。

                 
    <风格名字YourLightThemeTheme.MaterialComponents.Light><!—支持活动中的对话绘制图标—><名字zs_helpConversationsIcon>@drawable / my_help_conversations_icon_light><名字colorPrimary>@color / my_color_primary><名字colorPrimaryDark>@color / my_color_primary_dark><名字colorAccent>@color / my_color_accent>风格>

    改变每个组件的外观

    下面的示例描述了如何更改组件的外观。

    如果希望自定义超出主题中指定内容的组件,请找到要自定义的组件并查看<年代trong>布局而且<年代trong>值Support SDK的目录。这些目录包含了SDK布局和样式的所有源代码。要查找这些目录:

  • 包括我们的SDK<年代trong>build.gradle文件,详见<一个href="//www.ying8.net/developer/documentation/classic-web-widget-sdks/support-sdk/android/nutshell/">简单地支持SDK<李data-garden-id="typography.ordered_list_item" data-garden-version="8.39.0" class="sc-eKYRIR sc-GvhzO jwhztf ftmEEP">构建您的项目。<李data-garden-id="typography.ordered_list_item" data-garden-version="8.39.0" class="sc-eKYRIR sc-GvhzO jwhztf ftmEEP">在Android Studio的项目视图中查看项目结构。这意味着使用左边的文件树窗格并进行选择<年代trong>项目从顶部的下拉菜单,默认为<年代trong>安卓

    1. 开放<年代trong>外部库在模块列表的底部找到Support SDK的目录。

    所有SDK布局文件都包含在<年代trong>布局目录<年代trong>res目录下的支持SDK包。

    注意:找到想要覆盖的布局后,复制文件并粘贴到自己的布局中<代码data-garden-id="typography.code" data-garden-version="8.39.0" class="sc-eKYRIR sc-bTDOke bpSbjj iFHZBF">res /布局文件夹名称相同。只有对这个新文件所做的更改才会显示在应用程序中。

    布局文件描述

    更改帮助中心文章的样式

    要自定义文章样式,请通过创建名为<代码data-garden-id="typography.code" data-garden-version="8.39.0" class="sc-eKYRIR sc-bTDOke bpSbjj iFHZBF">help_center_article_style.css并覆盖下面列出的样式定义。

                 
    /*=========================================将所有HTML元素的样式重置为一致的基线。=========================================== */超文本标记语言身体div跨度小应用程序对象iframeh1h2h3h4h5编辑p引用精准医疗一个简写的首字母缩写地址引用代码dfn新兴市场imginskbd年代桑普罢工强大的吃晚饭ttvarbu中心戴斯。莱纳姆:dtddolul自定义字段形式标签传说表格标题tbodytfoottheadtrth道明文章一边帆布细节嵌入数字figcaption页脚hgroup菜单导航输出鲁比(人名)部分总结时间马克音频视频边境0字体大小One hundred.字体继承vertical-align基线保证金0填充0文章一边细节figcaption数字页脚hgroup菜单导航部分显示身体行高1引用报价没有一个引用:在引用:在:在:在内容没有一个表格border-collapse崩溃border-spacing0:在:在-moz-box-sizingborder-box-webkit-box-sizingborder-boxbox-sizingborder-box.group:在.group:在内容""显示表格.group:在清晰的这两个.group变焦1.hidden显示没有一个/*=========================================帮助中心文章的默认样式。修改此文件以自定义样式。=========================================== */身体字体1新兴市场/1.5新兴市场“Helvetica Neue”海维提卡天线无衬线颜色# 666-webkit-font-smoothing抗锯齿文本渲染optimizeLegibility保证金30.px背景颜色# ffffff一个颜色# 4 ba7f2文字修饰没有一个一个:链接-webkit-tap-highlight-color# c5c5c5强大的粗细大胆的h1h2h3h4h5编辑颜色# 333粗细大胆的margin-bottom20.px行高1.25新兴市场h1字体大小1.728新兴市场h2字体大小1.44新兴市场h3字体大小1.2新兴市场h4字体大小1新兴市场h5字体大小.833新兴市场编辑字体大小.833新兴市场跨度字体大小1新兴市场重要的!pulolmargin-bottom40pxmargin-bottom10pxul ulol olmargin-left20.px
    帮助中心文章包含一个页脚元素,用于显示文章的作者和最后一次更新的日期。

    若要隐藏页脚,请将以下内容添加到<代码data-garden-id="typography.code" data-garden-version="8.39.0" class="sc-eKYRIR sc-bTDOke bpSbjj iFHZBF">help_center_article_style.css文件:

                 
    页脚显示没有一个
    组件
    HelpCenterActivity<道明data-garden-id="tables.cell" data-garden-version="8.39.0" class="sc-gstuGz fqVtGN">zs_activity_support.xml<道明data-garden-id="tables.cell" data-garden-version="8.39.0" class="sc-gstuGz fqVtGN">SDK的主活动,显示帮助中心内容和链接到所有其他活动
    RequestActivity<道明data-garden-id="tables.cell" data-garden-version="8.39.0" class="sc-gstuGz fqVtGN">zs_activity_request.xml<道明data-garden-id="tables.cell" data-garden-version="8.39.0" class="sc-gstuGz fqVtGN">用于创建、查看和更新请求的活动
    RequestListActivity<道明data-garden-id="tables.cell" data-garden-version="8.39.0" class="sc-gstuGz fqVtGN">zs_activity_request_list.xml<道明data-garden-id="tables.cell" data-garden-version="8.39.0" class="sc-gstuGz fqVtGN">活动,显示请求列表
    ViewArticleActivity<道明data-garden-id="tables.cell" data-garden-version="8.39.0" class="sc-gstuGz fqVtGN">zs_activity_view_article.xml<道明data-garden-id="tables.cell" data-garden-version="8.39.0" class="sc-gstuGz fqVtGN">显示“帮助中心”文章的活动