![]() ![]() To create the image zooming interaction, add the following code to any image uploaded to the assets folder. When you attach an image and send it as a message, you can zoom in and out by applying a double-tap gesture to the image. leading).īuilding your own app? Get early access to our Livestream or Video Calling API and launch in days! swipeActions() modifier to show the actions on the right side of the list row.Īdditionally, you can display the actions on the left side of the list row by specifying. You can specify which side of the list the actions belong to with the edge parameter. swipeActions() modifier to the list row consisting of the user avatar, user name, message summary delivery receipt, and timestamp. To make the list row swipeable and display its associated actions, add the. swipeActions() modifier allows you to swipe a list row to reveal actions related to the row. contextMenu, use a label consisting of text and an SF Symbol to represent each menu item as shown in the code below. In this example, you need to attach the modifier to the container for the user avatar, the message bubble, and the text below it. contextMenu modifier to any view to display its contextual information or actions related to it. In this section, you will show the context menu by tapping and holding the message bubble. The context menu is used to show additional information and actions such as Reply, Copy, Message, Edit Message, and Delete Message. To display the context menu for chat messages, you need to attach a long-press gesture to the message bubbles. Display the Context Menus and Reactions Using the Tap-and-Hold Gesture To allow users to refresh the contents of the list, apply the refreshable modifier to it, creating the “pull-to-refresh” effect. You can do this with the refreshable modifier in SwiftUI. ![]() Since this is a long scrolling list, you can improve the user experience so that when users perform a standard drag gesture on the list, it displays a visual cue that shows the content is updating. listStyle modifier and set its parameter to. For example, to convert the list to a plain list, add the. You can change the appearance of the list using list styles. By wrapping the container views in the List view, the content becomes scrollable by default. The ChannelListData file creates the composition of the list using the layout containers HStack, ZStack, VStack, and Spacer. The list pulls data from another Swift file called ChannelListData.swift, which can also be found in this project. In the project’s folder structure, look for the folder ChannelList and the Swift file, ChannelListView.swift. You can also find the code of the list by downloading the project from GitHub. A list view displays data in several rows and arranges the rows in a single column.Īfter creating your Xcode project, create a new Swift file called ChannelList.swift and enter the following code: In SwiftUI, you can make interface elements automatically scrollable by embedding them in a List layout container. How to Make the Channel List Scrollable and Refreshable Want to learn more about SwiftUI? Check out our SwiftUI Chat tutorial to see how you can get started and integrate it into your project. There are several files and folders in the Xcode project, but the following are the Swift files you’ll need: You can also download the project files from this GitHub repo and follow the sections below to begin creating the interactions in this project. If you don’t have Xcode installed, download it from the Mac App Store. You need to download and install Xcode (13+) to run the project files. After you’ve caught up, feel free to dive into part two, or check out our SwiftUI Chat Application to learn more. If you haven’t yet, review part one of this series, Prototyping Stream’s iOS Chat SDK With SwiftUI: Part 1. You’ll also apply modifiers to these gestures so you can control every aspect of your app’s touch interactions, resulting in a truly customized app with a seamless user experience. In part two of this series, you’ll use our iOS Chat SDK sample application to prototype several gestures that you’ll use for refreshing page content, adding seamless swiping and pagination to message lists and photos, revealing in-app actions to messages in message channels, and more. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |