1. 기존 테마 선택
Freshchat SDK는 하위 호환성을 제공하기 위해 appcompat-v7에 의존하므로 모든 Freshchat 테마는 Theme.AppCompat.* 테마에서 상속됩니다. Freshchat SDK 구성 요소에 적용된 테마를 변경하려면 앱의 styles.xml에서 Theme.Freshchat.*의 변형 중 하나로 Theme.Freshchat.SelectedTheme의 부모를 변경하세요.
예시:
<style name="Theme.Freshchat.SelectedTheme" parent="@style/Theme.Freshchat.Light.DarkActionBar" />
Freshchat SDK는 Theme.Freshchat.Light 와 Theme.Freshchat.Light.DarkActionBar를 제공합니다.
2. 사용자 정의 테마 생성 및 적용
Freshchat SDK의 테마는 Android 테마 시스템을 기반으로 구축되었으며, 따라서 ActionBar 배경색, ActionBar 텍스트 색상, 상태 표시줄 색상 등과 같은 항목에 대한 표준 Android 테마 속성을 지원합니다. Android 디자인 가이드를 참조하세요: Android Material Theme Attributes
예를 들어, colorPrimary를 사용자 정의하려면 다음을 포함하세요.
<item name="colorPrimary">@color/my_awesome_color</item>
다음은 Freshchat SDK 전용 사용자 정의 목록입니다:
2.1 텍스트 외관
Freshchat SDK는 SDK의 여러 요소에 대한 텍스트 외관 변경을 지원합니다. 여기에서 텍스트 외관 구현의 기본 스타일을 참조할 수 있습니다.
텍스트 외관 사용자 정의 단계
단계 1: 사용자 정의 텍스트 외관을 스타일로 정의
예를 들어, MyCustomTextAppearance 스타일은 다음과 같이 정의됩니다
<style name="MyCustomTextAppearance" parent="TextAppearance.AppCompat.Medium">
<item name="android:textColor">@color/textColorPrimary</item>
<item name="android:textColorHighlight">@color/textColorHighlight</item>
<item name="android:textColorHint">@color/textColorHint</item>
<item name="android:textColorLink">@color/textColorLink</item>
<item name="android:textSize">16sp</item>
<item name="android:textStyle">bold</item>
</style>단계 2: 텍스트 외관 스타일을 사전 정의된 Freshchat textAppearance 사용자 정의 속성에 매핑합니다.
예를 들어, 위에서 정의한 MyCustomTextAppearance 스타일은 스타일 freshchatChannelNameTextStyle 의 텍스트 외관입니다.
<style name="MyCustomTheme" parent="Theme.Freshchat.Light.DarkActionBar">
<item name="freshchatChannelNameTextStyle">@style/CustomChannelNameTextStyle</item>
</style>
<style name="CustomChannelNameTextStyle" parent="Widget.Freshchat.ChannelName">
<item name="android:textAppearance">@style/MyCustomTextAppearance</item>
</style>
단계 3: 모든 Freshchat SDK 활동에 사용자 정의 테마를 설정합니다. 가장 간단한 방법은 앱의 styles.xml / themes.xml에서 Theme.Freshchat.SelectedTheme의 부모를 재정의하고 설정하는 것입니다.
<style name="Theme.Freshchat.SelectedTheme" parent="MyCustomTheme" />또는 각 활동에 대해 다른 테마를 적용하려면 앱의 AndroidManifest.xml에 활동 항목을 포함하고 거기에서 테마를 재정의하세요.
예를 들어, 매니페스트 병합기를 통해 테마를 교체할 수 있도록 android:theme 및 tools:replace 속성으로 사용자 정의 테마를 포함하세요.
Freshchat SDK 활동 목록은 Freshchat Android SDK 매니페스트를 참조하세요.
<activity
android:name="com.freshchat.consumer.sdk.activity.ChannelListActivity"
android:theme="@style/MyCustomTheme"
tools:replace="android:theme" />
<activity
android:name="com.freshchat.consumer.sdk.activity.ConversationDetailActivity"
android:theme="@style/MyAlternateTheme"
tools:replace="android:theme" />
2.2 보기 외관 사용자 정의
Freshchat SDK는 다음 보기에 대한 외관 사용자 정의를 허용합니다. 보기가 텍스트 컨테이너 보기인 경우 스타일의 일부로 텍스트 외관도 사용자 정의할 수 있습니다.
- freshchatChannelNameTextStyle -> 주제 이름 보기 스타일
- freshchatChannelDescriptionTextStyle -> 주제 설명 보기 스타일
- freshchatChannelLastUpdatedAtTextStyle -> 주제 마지막 업데이트 시각 보기 스타일
- freshchatChannelUnreadCountTextStyle -> 주제 읽지 않은 수 보기 스타일
- freshchatChannelListStyle -> 주제 목록 보기 스타일
- freshchatChannelListItemStyle -> 목록의 각 주제에 대한 스타일
- freshchatChannelAltIconStyle -> 아이콘이 없는 경우 주제 아이콘에 대한 대체 보기 스타일
- freshchatTeamMemberNameTextStyle -> 팀 멤버 이름 보기 스타일
- freshchatUserMessageTextStyle -> 사용자 메시지 보기 스타일
- freshchatTeamMemberMessageTextStyle -> 팀 멤버 메시지 보기 스타일
- freshchatUserMessageTimeTextStyle -> 사용자 메시지 시간 보기 스타일
- freshchatTeamMemberMessageTimeTextStyle -> 팀 멤버 메시지 시간 보기 스타일
- freshchatMessageListStyle -> 메시지 목록 보기 스타일
- freshchatMessageListItemStyle -> 메시지 목록의 각 항목에 대한 스타일
- freshchatMessageButtonStyle -> 메시지의 버튼 스타일
- freshchatMessageReplyInputViewStyle -> 사용자 메시지 입력 필드 스타일
- freshchatConversationBannerMessageStyle -> 대화 세부사항/메시지 목록 화면 상단의 배너 보기 스타일
- freshchatFAQCategoryListStyle -> FAQ 카테고리 목록 보기 스타일
- freshchatFAQCategoryListItemStyle -> 목록의 각 FAQ 카테고리에 대한 스타일
- freshchatFAQCategoryAltIconStyle -> 아이콘이 구성되지 않은 경우 카테고리 아이콘에 대한 대체 보기 스타일
- freshchatFAQCategoryNameTextStyle -> FAQ 카테고리 이름 보기 스타일
- freshchatFAQCategoryDescriptionTextStyle -> FAQ 카테고리 설명 보기 스타일
- freshchatFAQListEmptyTextStyle -> FAQ 목록 비어있는 보기 스타일
- freshchatFAQListStyle -> FAQ / 기사 목록 보기 스타일
- freshchatFAQListItemStyle -> FAQ / 기사 목록의 각 항목에 대한 스타일
- freshchatFAQVotingPromptTextStyle -> FAQ 투표 프롬프트 텍스트뷰 스타일
- freshchatFAQVotingPromptViewStyle -> FAQ 투표 프롬프트 보기 스타일
- freshchatFAQUpvoteButtonStyle -> FAQ 투표 프롬프트의 추천 버튼 스타일
- freshchatFAQDownvoteButtonStyle -> FAQ 투표 프롬프트의 비추천 버튼 스타일
2.3 드로어블 및 아이콘
다음 아이콘은 테마 속성을 재정의하고 사용자 정의 테마에서 다른 드로어블을 지정하여 교체할 수 있습니다.
<!-- 액션 아이콘 -->
<item name="freshchatSendIcon">@drawable/freshchat_ic_send</item>
<item name="freshchatCancelIcon">@drawable/freshchat_ic_cancel</item>
<item name="freshchatAttachIcon">@drawable/freshchat_ic_attach</item>
<!-- 액션바 메뉴 아이콘 -->
<item name="freshchatSearchIcon">@drawable/freshchat_ic_action_search_light</item>
<!-- 기타 아이콘-->
<item name="freshchatTeamMemberAvatarIcon">@null</item>
<item name="freshchatContactUsIcon">@drawable/freshchat_ic_action_contact_us</item>
<!-- 채팅 버블 -->
<item name="freshchatChatBubbleLeft">@drawable/freshchat_chat_bubble_left</item>
<item name="freshchatChatBubbleRight">@drawable/freshchat_chat_bubble_right</item>
2.4 SDK 문자열 사용자 정의
Freshchat SDK를 사용하면 최종 사용자에게 표시되는 UI 구성 요소의 문자열을 사용자 정의할 수 있습니다. 사용자 정의할 수 있는 모든 문자열 목록이 있습니다. 위의 strings.xml에서 키-값 쌍을 복사하여 앱의 strings.xml에 추가하고 필요한 대로 값을 업데이트하세요.
예를 들어, 메시지 주제 목록 페이지의 제목을 변경하려면 strings.xml에 다음 문자열을 포함하세요.
<string name="freshchat_activity_title_channel_list">Conversations</string>2.5 알림 아이콘
알림 아이콘을 변경하려면 여기에서 통합 단계 문서의 “알림 사용자 정의” 섹션을 참조하세요.
2.6 주제 이름 및 환영 메시지 사용자 정의
관리자 > 주제 로 이동하여 대화 인터페이스의 제목과 기본 메시지를 사용자 정의하세요.