自定义外观

本节介绍自定义Talk SDK UI的不同方法。

先决条件

Talk SDK如中所述集成在应用程序中开始．所有的步骤打电话适用。

在开始之前

注意事项:

SDK为呼叫配置视图和呼叫视图提供了开箱即用的UI
您可以自定义开箱即用UI中使用的文本、颜色和字体
您不能在视图上配置UI元素的布局和位置

如果自定义UI元素对您很重要，可以考虑构建自己的UI并使用SDK的API。看到使用SDK和您自己的UI．

使用开箱即用的UI进行呼叫

的打电话入门中的部分展示了如何使用开箱即用的UI使用预配置的设置进行调用。这种方法的好处是实现起来最直接。但是，它提供的自定义可能性不如构建自己的UI那么多。

您可以创建并显示SDK的调用配置屏幕。用户提供所需的所有权限后，可以创建并显示SDK的调用屏幕。

斯威夫特

             
              private func presentCallConfiguration() {守卫let talk = talk else {return}let callConfigurationViewController = talk。makeCallConfigurationViewController(:“digitalLineNickname”)callConfigurationViewController。cancelHandler ={[弱自我]in自我.navigationController ?。会被(动画:真)｝callConfigurationViewController。startCallHandler＝｛［weak self] answer in自我.navigationController ?。会被(动画:false)自我?。presentCallScreen (recordingConsentAnswer:回答)｝导航控制器?。pushViewController（callConfigurationViewController，animated: true)｝private func presentCallScreen(recordingConsentAnswer: recordingConsentAnswer) {守卫let talk = talk else {return}let callData = TalkCallData(digitalLine: "digitalLineNickname"， recordingConsentAnswer: recordingConsentAnswer)let callViewController = talk。makeCallViewController(with: callData) {[weak self] _， callSummary inif let error = callSummary。{错误//处理错误｝DispatchQueue.main。asyncAfter(deadline: .now() + 2) {自我?。解散(动画:true，完成:nil)｝｝callViewController。modalPresentationStyle = .fullScreenpresent(callViewController, animated: false, completion: nil)｝

objective - c

             
              -（无效）presentCallConfiguration｛ui<CallConfigurationScreen>＊callConfigurationViewController＝［自我．讨论makeCallConfigurationViewControllerFor：@“digitalLineNickname”］；__weaktypeof（自我）weakSelf＝自我；［callConfigurationViewController setCancelHandler：＾｛［［weakSelf导航控制器］popViewControllerAnimated：是的］；｝］；［callConfigurationViewController setStartCallHandler：＾（枚举RecordingConsentAnswer回答）｛［［weakSelf导航控制器］popViewControllerAnimated：没有］；［weakSelf presentCallScreenWithRecordingConsentAnswer：回答］；｝］；［［自我导航控制器］pushViewController：callConfigurationViewController动画：是的］；｝-（无效）presentCallScreenWithRecordingConsentAnswer：（RecordingConsentAnswer）回答｛ZDKTalkCallData＊callData＝［［ZDKTalkCallData alloc］initWithDigitalLine：@“digitalLineNickname”recordingConsentAnswer：回答］；__weaktypeof（自我）weakSelf＝自我；ui<CallScreen>＊callViewController＝［自我．讨论makeCallViewControllerWith：callDatacallDidFinishHandler：＾（NSTimeInterval callDuration，NSError＊_Nullable错误）｛如果（错误）｛//处理错误｝dispatch_after（dispatch_time（DISPATCH_TIME_NOW，2＊NSEC_PER_SEC），dispatch_get_main_queue（），＾｛［weakSelf dismissViewControllerAnimated：是的,完成：零］；｝）；｝］；callViewController．modalPresentationStyle＝UIModalPresentationFullScreen；［自我presentViewController：callViewController动画：没有完成：零］；｝

在上面的代码示例中，presentCallConfiguration ()函数执行以下任务:

创建一个CallConfigurationScreen符合视图控制器(使用SDK的makeCallConfigurationViewController (:)函数)
配置它cancelHandler而且startCallHandler
把它推到导航堆栈上

当CallConfigurationScreen通过调用startCallHandler,presentCallScreen (recordingConsentAnswer:)函数被调用。它执行以下任务:

创建一个CallScreen使用SDK的符合视图控制器makeCallViewController (:)函数
以模态方式呈现

这是一个简单的示例，说明如何手动创建SDK的屏幕并将它们一起显示。当你可以访问视图控制器实例时，你可以很容易地自定义它们。

定制呼叫配置界面

Talk SDK的呼叫配置界面功能如下:

如果尚未授予访问麦克风的权限，则请求访问权限
验证代理可用性
询问用户是否同意录音

在这个版本的SDK中，获取录制许可在UI中是不可用的，但在API中是可用的。

权限屏幕为用户提供了额外的上下文和保证，说明为什么需要访问他们的麦克风。您可以自定义此屏幕的外观或感觉忽略它从你的应用程序。

SDK提供调用配置视图控制器创建makeCallConfigurationViewController (:)公开表示调用配置屏幕不同页面的两个属性。每个子屏幕都提供了对UI控件的访问，您可以对这些控件进行调整，以更好地适应集成SDK的应用程序的风格。

斯威夫特

             
              let callConfigurationViewController = talk。makeCallConfigurationViewController(:“digitalLineNickname”)let microphonePermissionScreen: microphonePermissionScreen = callConfigurationViewController.microphoneScreen让recordingConsentScreen: recordingConsentScreen = callConfigurationViewController.recordingConsentScreen

objective - c

             
              ui<CallConfigurationScreen>＊callConfigurationViewController＝［自我．讨论makeCallConfigurationViewControllerFor：@“digitalLineNickname”］；id<MicrophonePermissionScreen>microphoneScreen＝callConfigurationViewController．microphoneScreen；id<RecordingConsentScreen>recordingConsentScreen＝callConfigurationViewController．recordingConsentScreen；

自定义麦克风权限屏幕的外观

的MicrophonePermissionScreen允许您自定义以下屏幕元素:

斯威夫特

             
              @objc公共协议麦克风权限屏幕{///屏幕容器的背景色var backgroundColor: UIColor?{get set}///显示主标题的标签(例如:“允许麦克风”)。var titleLabel: UILabel!{get}///在标题标签下显示描述信息的标签。var messageLabel: UILabel!{get}///允许按钮，该按钮将打开询问用户麦克风权限的警报。如果许可已经“授予”将调用。“requestPermissionCompletion”var allowButton: UIButton!{get}///取消按钮，将取消所有流并调用' cancelHandler '。var cancelButton: UIButton!{get}｝

objective - c

             
              @protocolMicrophonePermissionScreen///屏幕容器的背景色@ property（原子，强大的）用户界面颜色＊_Nullable写成backgroundColor；///显示主标题的标签(例如:“允许麦克风”)。@ property（原子，只读的，强大的）UILabel＊_Null_unspecified titleLabel；///在标题标签下显示描述信息的标签。@ property（原子，只读的，强大的）UILabel＊_Null_unspecified messageLabel；///允许按钮，该按钮将打开询问用户麦克风权限的警报。如果权限已经授予将调用。<代码> requestPermissionCompletion > < /代码@ property（原子，只读的，强大的）UIButton＊_Null_unspecified allowButton；///取消按钮，取消所有流程并调用cancelHandler.取消@ property（原子，只读的，强大的）UIButton＊_Null_unspecified cancelButton；@end

的RecordingConsentScreen允许您自定义以下屏幕元素:

斯威夫特

             
              @objc公共协议记录同意书{///屏幕容器的背景色var backgroundColor: UIColor?{get set}///显示主标题的标签(例如:“录音”)。var titleLabel: UILabel!{get}///在标题标签下显示描述信息的标签。var messageLabel: UILabel!{get}///将调用' startCallHandler '处理程序的按钮。var startCallButton: UIButton!{get}///取消按钮，将取消所有流并调用' cancelHandler '。var cancelButton: UIButton!{get}///包含同意' UISwitch '和描述标签的视图。var consentSwitchView: UIView!{get}///显示用户' recordingconsentsanswer '的开关。Switch On将等于'。optIn '，关闭- ' . optout '。var consentSwitch: UISwitch!{get}///标记关于uiswitch的消息。(例如:“我同意这个电话是录音电话”)var consentDescriptionLabel: UILabel!{get}///获取RecordingConsent时显示的指示器var activityIndicatorView: UIActivityIndicatorView!{get}｝

objective - c

             
              @protocolRecordingConsentScreen///屏幕容器的背景色@ property（原子，强大的）用户界面颜色＊_Nullable写成backgroundColor；///显示主标题的标签(例如:“录音”)。@ property（原子，只读的，强大的）UILabel＊_Null_unspecified titleLabel；///在标题标签下显示描述信息的标签。@ property（原子，只读的，强大的）UILabel＊_Null_unspecified messageLabel；///调用startCallHandler处理程序的按钮。@ property（原子，只读的，强大的）UIButton＊_Null_unspecified startCallButton；///取消按钮，取消所有流程并调用cancelHandler.取消@ property（原子，只读的，强大的）UIButton＊_Null_unspecified cancelButton；///包含consent UISwitch和description label的视图。@ property（原子，只读的，强大的）UIView＊_Null_unspecified consentSwitchView；///反映用户RecordingConsentAnswer. RecordingConsentAnswer的开关。开关将等于。optIn， Switch Off - . optout . optIn， Switch Off。@ property（原子，只读的，强大的）UISwitch＊_Null_unspecified consentSwitch；///标记关于uiswitch的消息。(例如:“我同意这个电话是录音电话”)@ property（原子，只读的，强大的）UILabel＊_Null_unspecified consentDescriptionLabel；///获取RecordingConsent时显示的指示器@ property（原子，只读的，强大的）UIActivityIndicatorView＊_Null_unspecified activityIndicatorView；@end

省略呼叫配置屏幕

如果你不想使用SDK的调用配置屏幕，你可以为以下任务实现自己的解决方案:

检查麦克风权限
检查数字线路状态并记录同意配置
如果需要记录同意，则收集用户的同意确认

属性可以直接创建SDK的调用屏幕presentCallScreen (recordingConsentAnswer:)的第二部分给出的函数使用开箱即用的UI进行呼叫．

如何实现您自己的呼叫配置界面，请参见实现自定义呼叫配置屏幕．

定制呼叫界面

呼叫界面的可定制性不如权限界面。您不能更改用于操作按钮的图标和颜色。它的自定义方式与权限屏幕相同。

斯威夫特

             
              @objc公共协议CallScreen {///加载带有活动指示器的视图。var callLoadingView: UIView & callLoadingView {get}///带有重试和取消按钮的错误视图。var callErrorView: UIView & callErrorView {get}///显示呼叫持续时间的定时器视图。var callTimerView: UIView & callTimerView///包含呼叫屏幕操作按钮的视图。var callButtonsView: UIView & callButtonsView(…)｝

objective - c

             
              @protocolCallScreen///加载带有活动指示器的视图。@ property（原子，只读的，强大的）UIView<CallLoadingView>＊_Nonnull callLoadingView；///带有重试和取消按钮的错误视图。@ property（原子，只读的，强大的）UIView<CallErrorView>＊_Nonnull callErrorView；///显示呼叫持续时间的定时器视图。@ property（原子，只读的，强大的）UIView<CallTimerView>＊_Nonnull callTimerView；///包含呼叫屏幕操作按钮的视图。@ property（原子，只读的，强大的）UIView<CallButtonsView>＊_Nonnull callButtonsView；（．．．）@end

定制加载子视图的外观

的CallLoadingView表示连接呼叫时显示的呼叫视图的一部分。这个子视图由一个标签和一个活动指示器组成。

斯威夫特

             
              @objc公共协议CallLoadingView {var titleLabel: UILabel!{get}var activityIndicator: UIActivityIndicatorView!{get}｝

objective - c

             
              @protocolCallLoadingView@ property（原子，只读的，强大的）UILabel＊_Null_unspecified titleLabel；@ property（原子，只读的，强大的）UIActivityIndicatorView＊_Null_unspecified activityIndicator；@end

定制错误子视图的外观

的CallErrorView表示在连接调用时发生错误时显示的调用视图的一部分。这个子视图包括标题、消息标签和两个按钮，一个按钮用于取消，另一个按钮用于重试重新连接呼叫。

斯威夫特

             
              @objc公共协议CallErrorView {var titleLabel: UILabel!{get}var messageLabel: UILabel!{get}///重试按钮。当用户点击它时，呼叫将尝试重新连接。var retryButton: UIButton!{get}///取消按钮。轻按将关闭通话界面。var cancelButton: UIButton!{get}｝

objective - c

             
              @protocolCallErrorView@ property（原子，只读的，强大的）UILabel＊_Null_unspecified titleLabel；@ property（原子，只读的，强大的）UILabel＊_Null_unspecified messageLabel；///重试按钮。当用户点击它时，呼叫将尝试重新连接。@ property（原子，只读的，强大的）UIButton＊_Null_unspecified retryButton；///取消按钮。轻按将关闭通话界面。@ property（原子，只读的，强大的）UIButton＊_Null_unspecified cancelButton；@end

自定义计时器子视图的外观

的CallTimerView表示连接呼叫时显示的呼叫视图的一部分。这个子视图包括一个标题标签和一个显示当前呼叫持续时间的每秒钟刷新一次的计时器标签。

斯威夫特

             
              CallTimerView {var titleLabel: UILabel!{get}///以秒为单位显示通话时长的标签。每秒刷新一次。var timerLabel: UILabel!{get}｝

objective - c

             
              @protocolCallTimerView@ property（原子，只读的，强大的）UILabel＊_Null_unspecified titleLabel；///以秒为单位显示通话时长的标签。每秒刷新一次。@ property（原子，只读的，强大的）UILabel＊_Null_unspecified timerLabel；@end

定制按钮子视图的外观

的CallButtonsView表示显示在呼叫视图底部的呼叫视图的一部分，其中包含主要的呼叫操作按钮。这个子视图由按钮标签对组成，用于:

在扬声器和耳机之间切换音频输出
挂断电话
在麦克风静音和取消静音之间切换

斯威夫特

             
              @objc公共协议CallButtonsView {///在' headset '和' speaker '之间更改' AudioSource '的按钮。UIButton: UIButton!{get}var speakerTitleLabel: UILabel!{get}///断开通话按钮。var hangUpButton: UIButton!{get}var hangUpTitleLabel: UILabel!{get}///麦克风静音/取消静音按钮。var muteButton: UIButton!{get}var muteTitleLabel: UILabel!{get}｝

objective - c

             
              @protocolCallButtonsView///在耳机和扬声器之间切换AudioSource的按钮。@ property（原子，只读的，强大的）UIButton＊_Null_unspecified speakerButton；@ property（原子，只读的，强大的）UILabel＊_Null_unspecified speakerTitleLabel；///断开通话按钮。@ property（原子，只读的，强大的）UIButton＊_Null_unspecified hangUpButton；@ property（原子，只读的，强大的）UILabel＊_Null_unspecified hangUpTitleLabel；///麦克风静音/取消静音按钮。@ property（原子，只读的，强大的）UIButton＊_Null_unspecified muteButton；@ property（原子，只读的，强大的）UILabel＊_Null_unspecified muteTitleLabel；@end

开始

Web Widget(经典)

Unity原生SDK

统一的SDK

支持SDK

聊天SDK V2

讨论SDK

聊天窗口小部件

自定义外观