How to Build a Scrollable Tab Bar (SwiftUI Tutorial)
ฝัง
- เผยแพร่เมื่อ 5 ส.ค. 2024
- In this video, we’re going to learn how to create a scrollable tab bar, which is an element that you’ll find in many popular apps such as Airbnb and Netflix.
To teach you how to create one, we'll be using Judo-a design and build tool for SwiftUI. For this tutorial, we’ll be creating a scrollable tab bar for an imaginary file manager that will allow us to access four different screens without ever having to leave this home screen.
To follow along with this tutorial, download the starter Judo file: docs.judo.app/en/articles/951...
➡️ Download the Judo Mac or mobile app: apps.apple.com/ca/app/judo-de...
❓ If you have any questions, please don't hesitate to add a comment below, or ask away in our community: community.judo.app/c/help/
Thanks for watching! As always, please don't forget to like and subscribe 🙌
⏱️ Time Stamps
01:21 Get familiar with the starter file.
02:21 Create a horizontal scroll container.
02:42 Send the file to your mobile device to see your design in action.
03:03 Create an ON and OFF state for each tab.
04:43 Adjust the size to see your entire design.
05:00 Turn the ON and OFF states of each tab into Conditional layers.
08:56 Make each tab tappable by turning the OFF states into buttons.
10:07 Use the Button Style modifier to customize the style of your button layer.
11:29 Use conditionals to make each tab reveal the right screen when tapped.
13:23 Take a look at the Code Inspector.
🧑💻 Judo on the Web
X: / judoapp
LinkedIn: / judoapp
Website: www.judo.app
Mastodon: mastodon.social/@judoapp - แนวปฏิบัติและการใช้ชีวิต
