在 SwiftUI 上显示表情符号选择器
目标
在某些情况下，您需要能够选择表情符号，并且不允许用户输入任何其他内容（字母，数字，符号等）。
表情符号拾取器就是为此而存在的。
它是一个 SwiftUI 库，可让您获取智能手机上存在的所有表情符号的列表，还可以创建一个选择器来简化您的生活。
屏幕截图和视频
| 表情符号列表 | 表情符号搜索 |
|---|---|
 |
 |
依赖
- SwiftUI (iOS >= 15.0)
- Smile (2.1.0)
How install it?
Nowaday we only support Swift Package Manager. You can use build-in UI tool for XCode with this search words: or you can add it directly with this following command :EmojiPicker
.package(url: "https://github.com/Kelvas09/EmojiPicker.git", from: "1.0.0")
How use it?
First of all you have to import the library :EmojiPicker
import EmojiPicker
You then have the option of using the . This view represents the list of selectable emojis.EmojiPickerView
The latter is not embedded in a NavigationView. If you want to display it with a title, you have to do it yourself:
...
NavigationView {
EmojiPickerView(selectedEmoji: $selectedEmoji, selectedColor: .orange)
.navigationTitle("Emojis")
.navigationBarTitleDisplayMode(.inline)
}
...
Here is a complete example:
import SwiftUI
import EmojiPicker
struct ContentView: View {
@State
var selectedEmoji: Emoji?
@State
var displayEmojiPicker: Bool = false
var body: some View {
VStack {
VStack {
Text(selectedEmoji?.value ?? "")
.font(.largeTitle)
Text(selectedEmoji?.name ?? "")
.font(.title3)
}
.padding(8)
Button {
displayEmojiPicker = true
} label: {
Text("Select emoji")
}
}
.padding()
.sheet(isPresented: $displayEmojiPicker) {
NavigationView {
EmojiPickerView(selectedEmoji: $selectedEmoji, selectedColor: .orange)
.navigationTitle("Emojis")
.navigationBarTitleDisplayMode(.inline)
}
}
}
}
Select color
When a user selects an emoji, it is highlighted. By default the selection color is but you can change this value when creating the view:blue
EmojiPickerView(selectedEmoji: $selectedEmoji, selectedColor: .orange)
Enable search
By default the search for emoji is allowed in the picker, it is however possible to change this setting when creating the view:
EmojiPickerView(selectedEmoji: $selectedEmoji, searchEnabled: false)
⚠️ WARNING Search is only possible when is embed on .EmojiPickerNavigationView
Custom emoji provider
EmojiPickerView embeds protocol with a default implementation: . This class allows to retrieve all existing emojis.EmojiProviderDefaultEmojiProvider
When you build an , by default it uses this class to get the list of emojis to display.EmojiPickerView
If you want to use your own emoji list, you can create your own class by implementing the protocol :EmojiProvider
import Foundation
import EmojiPicker
final class LimitedEmojiProvider: EmojiProvider {
func getAll() -> [Emoji] {
return [
Emoji(value: "🚀", name: "rocket"),
Emoji(value: "🇫🇷", name: "France"),
Emoji(value: "🦄", name: "unicorn"),
Emoji(value: "🍺", name: "beer"),
Emoji(value: "💶", name: "euro")
]
}
}
And then use it in the creation of the view:
...
NavigationView {
EmojiPickerView(selectedEmoji: $selectedEmoji, selectedColor: .orange, emojiProvider: LimitedEmojiProvider())
.padding(.top, 32)
.navigationTitle("Emojis")
.navigationBarTitleDisplayMode(.inline)
}
...
Samples
You can access to sample project on folder EmojiPickerSample
