You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docusaurus/docs/iOS/swiftui/components/channel-header.md
+85-47Lines changed: 85 additions & 47 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,11 +2,29 @@
2
2
title: Channel Header
3
3
---
4
4
5
+
## What is the Channel Header?
6
+
7
+
8
+
9
+
The channel header appears at the top of the list of messages. It serves the purpose of displaying the name of the channel (top line) as well as additional information (bottom line).
10
+
11
+
In addition to that it can offer buttons on the trailing edge (here: right). They can server different purposes, such as showing additional information about the channel, or other custom actions.
12
+
5
13
## Customizing the Channel Header
6
14
7
-
In most cases, you will need to customize the channel header to fit in with the rest of your app. The SwiftUI SDK provides several customization options, from minor tweaks to ultimately providing your own header.
15
+
You might want to customize the channel header to fit in with the rest of your app. The SwiftUI SDK provides several customization options, from minor tweaks to ultimately providing your own header.
16
+
17
+
For the customization you have 3 options:
18
+
19
+
1. the `ChatChannelNamer` in the `Utils` class that can be handed to `StreamChat` upon creation
20
+
2. the `tintColor` in the `Appearance` class that can be handed to `StreamChat` upon creation
21
+
3. creating your own header completely
8
22
9
-
The most straightforward change you can do is to change the header's title while keeping the same look and feel of it. To do this, you need to provide your own implementation of the `ChannelNamer` protocol and inject it in the `Utils` class of the `StreamChat` context provider object.
23
+
Each option servers different purposes, so here are examples for all of them.
24
+
25
+
### Customizing the name of the channel
26
+
27
+
You can change the header's title while keeping the same look and feel of it. To do this, you need to provide your own implementation of the `ChannelNamer` protocol and inject it in the `Utils` class of the `StreamChat` context provider object.
10
28
11
29
```swift
12
30
let channelNamer: ChatChannelNamer = { channel, currentUserId in
@@ -17,6 +35,14 @@ let utils = Utils(channelNamer: channelNamer)
17
35
let streamChat =StreamChat(chatClient: chatClient, utils: utils)
18
36
```
19
37
38
+
Below you can see the comparison of the before and after of this change.
39
+
40
+
41
+
42
+
> 💡 The best place to do this would be in the `AppDelegate` file of your project. Not sure how to set this one up? We got you covered in our [Getting started guide](../getting-started.md).
43
+
44
+
### Changing the color of the header
45
+
20
46
Another simple change you can do is to change the tint color of the header. This will change the navigation bar buttons in all of the SDK components. To do this, simply initialize the `StreamChat` object with your preferred tint color.
21
47
22
48
```swift
@@ -28,39 +54,32 @@ let appearance = Appearance(colors: colors)
28
54
let streamChat =StreamChat(chatClient: chatClient, appearance: appearance)
29
55
```
30
56
31
-
## Creating Your Own Header
57
+
Below you can see the comparison of the before and after of this change.
32
58
33
-
In most cases, you will need to customize the navigation bar even further - either by adding branding information, like logo and text, or even additional buttons that will either push a new view, display a modal sheet or an alert.
59
+
34
60
35
-
In order to do this, you will need to perform a few steps. First, you need to create your own header, conforming to SwiftUI's `ToolbarContent` protocol. Let's create a header that will show an additional button to the right, to do changes to the channel instead of the default avatar view.
There are cases where you want to customize the navigation bar even further - either by adding branding information, like logo and text, or even additional buttons that will either push a new view, display a modal sheet or an alert.
43
64
44
-
privatevar channelNamer: ChatChannelNamer {
45
-
utils.channelNamer
46
-
}
65
+
In order to do this, you will need to perform four steps:
47
66
48
-
privatevar currentUserId: String {
49
-
chatClient.currentUserId??""
50
-
}
67
+
1. Create a header conforming to `ToolbarContent`
68
+
2. Create a modifier conforming to `ChatChannelHeaderViewModifier`
69
+
3. Override `makeChannelHeaderViewModifier` in a custom `ViewFactory`
70
+
4. Inject the custom `ViewFactory` into the view hierarchy.
51
71
52
-
publicvar channel: ChatChannel
53
-
publicvar onTapTrailing: () -> ()
72
+
First, you need to create your own header, conforming to SwiftUI's `ToolbarContent` protocol. Let's create a header that will show an additional button to the right, to do changes to the channel instead of the default avatar view.
@@ -75,32 +94,31 @@ public struct CustomChatChannelHeader: ToolbarContent {
75
94
}
76
95
```
77
96
78
-
Our custom header implementation exposes an onTapTrailing callback, that will be called when the trailing button is tapped (for example for displaying an edit view). The implementation of this button will be done in a `ViewModifier`, since the `ToolbarContent` can't keep `@State` variables.
97
+
The custom header implementation exposes an onTapTrailing callback, that will be called when the trailing button is tapped (e.g. for displaying an edit view). The implementation of this button will be done in a `ViewModifier`, since the `ToolbarContent` can't keep `@State` variables.
79
98
80
-
The next step is to provide a new implementation of the `ChatChannelHeaderViewModifier`. In our case, we need to provide handling for the onTapTrailing method from the `CustomChatChannelHeader`. To do this, we will introduce a new `@State` variable in the modifier and change its state to true when the button is tapped.
99
+
The next step is to provide a new implementation of the `ChatChannelHeaderViewModifier`. In this case, you need to provide handling for the `onTapTrailing` method from the `CustomChatChannelHeader`. To do this, you introduce a new `@State` variable in the modifier and change its state to true when the button is tapped.
The next step we need to do is to create our own custom view factory (or update existing one if you've already created it) to return the newly created channel view modifier.
121
+
The next step is to create a custom view factory (or update the existing one if it was already created) to return the newly created channel view modifier.
104
122
105
123
```swift
106
124
classCustomFactory: ViewFactory {
@@ -118,7 +136,7 @@ class CustomFactory: ViewFactory {
118
136
}
119
137
```
120
138
121
-
Finally, we need to inject the `CustomFactory` in our view hierarchy.
139
+
Finally, you need to inject the `CustomFactory` in your view hierarchy.
122
140
123
141
```swift
124
142
var body: some Scene {
@@ -128,23 +146,43 @@ var body: some Scene {
128
146
}
129
147
```
130
148
131
-
These are all the steps needed to provide your own navigation header in the chat channel.
149
+
These are all the steps needed to provide your own navigation header in the chat channel. Take a look at the comparison between the default implementation and the custom one.
150
+
151
+
132
152
133
153
## Using the Chat Info Screen
134
154
135
-
In most chat apps, the navigation bar contains a link to a screen that contains information about the chat, such as its participants, list of the pinned messages, files, media, etc, as well as a possibility to add members to the chat. This view is displayed by default if you tap on the right navigation bar button in the channel header.
155
+
In many chat apps, the navigation bar contains a link to a screen that contains information about the chat, such as its participants, list of the pinned messages, files, media, etc, as well as a possibility to add members to the chat. This view is displayed by default if you tap on the right navigation bar button in the channel header.
156
+
157
+
If you want to use this screen in your custom navigation bar (or anywhere else), you can simply initalize the `ChatChannelInfoView` with a channel.
136
158
137
-
If you want to use this screen in your custom navigation bar (or anywhere else), you can simply initalize it with a channel.
159
+
In order for it to be integrated in the same context as above, your `CustomChatChannelHeader` would now look like this:
This will display the info button on the trailing edge of the header view and navigate to the detail screen once the user taps on it.
187
+
188
+
0 commit comments