How to Build a Custom Tab Bar in SwiftUI

Watch me build a custom tab bar in SwiftUI based on a custom UI that was designed in Figma.
This lesson is just one of the 30+ lessons that's inside our "How to Build a Chat App" course on CWC+, so if you want to learn more, make sure to explore the links below!
🚨 SPECIAL CWC+ OFFER FOR KZread:
👋 Our "Launch Your First App" program will help you build up your iOS skills to publish your very own feature rich app even if you’re a beginner starting from scratch. cwc.to/youtubeoffer
WEEKLY UPDATES VIA EMAIL:
✉️ Every Saturday, receive an email digest of new content - cwc.to/newsletter
CONNECT:
🌍 Website - codewithchris.com
😺 GitHub - github.com/codewithchris
📸 Instagram - / codewithchris
🐦 Twitter - / codewithchris
ABOUT CODEWITHCHRIS:
We are dedicated to teaching the fundamentals on how to make an app. This is important if you’re trying to land an iOS job, be a freelancer, increase or start a business with an app idea. On this channel and our website, you'll find a ton of free resources and tutorials to aid you on your journey to learn iOS development. Many people have learned to code and build apps on their own! cwc.to/reviews
DID THESE LESSONS HELP YOU?
Please let us know! - fans.codewithchris.com
#iOSTabBar #TabBar #SwiftUI

Пікірлер: 53

  • @CodeWithChris
    @CodeWithChris2 ай бұрын

    👋 Our "Launch Your First App" program will help you build up your iOS skills to publish your very own feature rich app even if you’re a beginner starting from scratch. cwc.to/youtubeoffer

  • @random-sounds
    @random-sounds Жыл бұрын

    Hi Chris, been your subscriber years ago (probably 4, 5). I just wanted to thank you for creating free content for all of us. If it hadn’t been for you, I wouldn’t be able to land a junior iOS job back then. My career started from your channel, and I can't thank you enough. I wish you the best of luck, and stay healthy. ❤

  • @CodeWithChris

    @CodeWithChris

    Жыл бұрын

    Wow! This means so much to Chris and the whole team! :) Thank you so much for learning with us! We wish you the best of luck too and stay healthy always! :) - Pat

  • @iSohrab
    @iSohrabАй бұрын

    I really love your tutorials because they teach me both coding skills and problem-solving techniques.

  • @mintaddict4927
    @mintaddict4927 Жыл бұрын

    Thanks for the useful tutorial.

  • @CodeWithChris

    @CodeWithChris

    Жыл бұрын

    You are welcome! :) - Pat

  • @ElianasJourney
    @ElianasJourney Жыл бұрын

    hi, is it possible tab bar with webview?

  • @swiftuiforkids4768
    @swiftuiforkids4768 Жыл бұрын

    Hi Chris! I love your videos! This is not at all related to this video, but it is just a question about an error that keeps happening in my code. It is not a systematic error, it is in the code somehow. The problem is whenever I make a navigation view and then I make a navigation title, the title does not show up for some reason. If you can, please reply to this message with your solution. Thanks!

  • @sergioqcostas
    @sergioqcostas Жыл бұрын

    Hide the nav bar and you’re gonna be my idol, lol.

  • @twizzlestix9309
    @twizzlestix930911 ай бұрын

    Hi Chris- still learning SwiftUI and your videos have been super helpful. I’m trying to understand why this method is better than using tabview? Getting super confused what the best method is for approaching the bottom nav. 😮 never mind- guess it pays to read other comments, you’ve already explained below

  • @CodeWithChris

    @CodeWithChris

    11 ай бұрын

    I'm glad you found it! Thanks for watching! - Iñaki

  • @nlaspina
    @nlaspina7 ай бұрын

    Hi Chris, Thanks so much for the video; I watch so many of yours eagerly. I built the custom tab bar and it works just as you have shown in the video but weirdly you didn't actually show the tab bar actually switching between tabs. I would've thought these would have gone hand in hand with the video. Could you please give me some guidance as to how to make it a functioning tab bar? Cheers, Nic

  • @CodeWithChris

    @CodeWithChris

    7 ай бұрын

    Hello Nic! We apologize for any confusion caused by the video on creating a custom tab bar. You're right; demonstrating the tab bar's functionality in switching between tabs would have been a useful addition. we appreciate you pointing this out. For guidance on making your custom tab bar fully functional, I recommend checking out a video by Swiftful Thinking: kzread.info/dash/bejne/eKyLm6axpJufZrg.html. Please be aware that this content is geared more towards intermediate learners and may include some advanced concepts. If you come across any terms or concepts that are unfamiliar, I encourage you to look them up. This approach will enhance your understanding and help you effectively implement the functionality in your project. Again, thank you for your feedback! -- Joash

  • @ingridbkkedal5687
    @ingridbkkedal5687 Жыл бұрын

    Thank you for the good tutorial! My nav bar will not move down on the screen, and only lays in the middle, would you have any tips as to fix this?

  • @CodeWithChris

    @CodeWithChris

    Жыл бұрын

    We suggest posting on our CodeCrew forum so that our tech support staff can help you. Just visit this link codecrew.codewithchris.com - Pat

  • @TheRealBlueBeanie
    @TheRealBlueBeanie Жыл бұрын

    Thank you for the tutorial! Can you please make advanced tutorials for SpriteKit? It would be a new frontier that I think you would excel at!

  • @CodeWithChris

    @CodeWithChris

    Жыл бұрын

    Thanks for watching! You can leave tutorial recommendations here codecrew.codewithchris.com :) - Pat

  • @kiliankunkel4414
    @kiliankunkel4414 Жыл бұрын

    Can you maybe explain how you coded the custom fonts? Nevertheless very nice video!

  • @CodeWithChris

    @CodeWithChris

    Жыл бұрын

    Yes, this is the next video in the series: kzread.info/dash/bejne/ZoR9kpaSmpa0l9Y.html @AdrienVillez

  • @kiliankunkel4414

    @kiliankunkel4414

    Жыл бұрын

    @@CodeWithChris What I meant is the Helpers/Fonts file, where you specify Fonts globally, so that I don't have to type it for every Text manually (the file at 05:46). It would be highly appreciated, if you could help me, I can not find infos for that anywhere! :/

  • @danielduggin2898
    @danielduggin2898 Жыл бұрын

    What tool are you using to reference the tab bar you want to build?

  • @CodeWithChris

    @CodeWithChris

    Жыл бұрын

    The tab bar was designed on Figma. We’re using Figma to check the UI Design’s specific properties so we can translate it to code accurately. - Pat

  • @snossnosson6513
    @snossnosson6513 Жыл бұрын

    Do you have any tutorials on how to actually link the tabbuttons to open their respective viewpages?

  • @williamb1301

    @williamb1301

    Жыл бұрын

    Did you end up finding any tutorials? I’m looking for the same thing

  • @HiJackBloo

    @HiJackBloo

    Жыл бұрын

    looking for the same thing…

  • @williamb1301

    @williamb1301

    Жыл бұрын

    @@HiJackBloo I found a decent one by Sean Allen “SwiftUI Tab Bar…” He uses the storyboard tho (I used my iPad and playgrounds so that wasn’t as helpful)

  • @williamb1301

    @williamb1301

    Жыл бұрын

    @@HiJackBloo also “swiftful thinking” has one using the “TabBar()” function… which is slightly different that what these other videos use but might be easier and more straightforward

  • @HiJackBloo

    @HiJackBloo

    Жыл бұрын

    @@williamb1301 thanks will look into it

  • @SOK-gn6hw
    @SOK-gn6hw Жыл бұрын

    hey which keyboard are you using ? Sounds look good.

  • @muncho404

    @muncho404

    3 ай бұрын

    sounds don't look, they sound

  • @istanbulbeyefendisi1410
    @istanbulbeyefendisi1410 Жыл бұрын

    I watching u first time. but I feel like i learned a lot watching u. can u put the Turkish subtitle this video pls?

  • @CodeWithChris

    @CodeWithChris

    Жыл бұрын

    I'll do one better, I'm gonna add Turkish subtitles everywhere! :) @AdrienVillez

  • @akkhitech
    @akkhitech Жыл бұрын

    Hi Chris, this is such a great tutorial. though, I have a question of how we can create views to serve each tab without rerendering each time a button is pressed? lets say, i'm editing text in one tab, secondly, go to another tab and then want to go back to the first tab to continue editing. How could we make the first tab keep all the thing i left before going to the second tab? Thank you

  • @CodeWithChris

    @CodeWithChris

    Жыл бұрын

    Hello @akkhitech, Thanks for watching and sending your message here. Unfortunately we can't provide it for you in the comment section here, but you can try joining and posting in our community: cwc.to/codecrew --Joash

  • @akkhitech

    @akkhitech

    Жыл бұрын

    @@CodeWithChris got it. thank you very much.

  • @jizhou749
    @jizhou749 Жыл бұрын

    Hi, Chris, when I type ".font(Font.chatHeading), it shows me wrong, Type 'Font' has no member 'chatHeading'. Could you tell me how to fix this problem? Thank you.

  • @CodeWithChris

    @CodeWithChris

    Жыл бұрын

    Hi Ji Zhou! For technical issues, we recommend posting them on our CodeCrew forum so that our tech support staff can help you out. Just visit this link codecrew.codewithchris.com. Thank you! - Pat

  • @jizhou749

    @jizhou749

    Жыл бұрын

    @@CodeWithChris Thank you.😄

  • @RostislavRyzhkov

    @RostislavRyzhkov

    Жыл бұрын

    THis is not default parameter for fonts, he created own extensions for fonts

  • @adeby
    @adeby Жыл бұрын

    What's next? How do I use this tapbar to switch between views?

  • @gamerstheater1187
    @gamerstheater1187 Жыл бұрын

    Wait, how do I have it so that the buttons send me to different views?

  • @CodeWithChris

    @CodeWithChris

    Жыл бұрын

    We recommend posting on our CodeCrew forum so that our tech support staff can help you. Just visit this link codecrew.codewithchris.com - Pat

  • @petryuk2002
    @petryuk2002 Жыл бұрын

    The problem is that when you open up the keyboard it will shift up the entire tab bar up

  • @katecosta571
    @katecosta571 Жыл бұрын

    In what situation would you create a custom Tab Bar instead of using a TabView?

  • @CodeWithChris

    @CodeWithChris

    Жыл бұрын

    Hello, @katecosta571! While SwiftUI's built-in `TabView` provides convenient, out-of-the-box functionality for creating tabbed interfaces, one of the reasons why you might choose to create a custom Tab Bar instead is **Customized Appearance**: If you need to customize the appearance of the Tab Bar beyond what is available in `TabView`, you would need to create a custom Tab Bar. For instance, you might want to change the color, shape, or size of the Tab Bar, or add unique animations and transitions. In general, creating a custom Tab Bar is more work and requires a deeper understanding of SwiftUI. However, it provides greater control and flexibility over the appearance and behavior of the tabbed interface. As with most development decisions, whether or not to create a custom Tab Bar will depend on your specific needs, the complexity of your project, and your willingness to trade off development time for increased control and customization. Hope this help. --Joash

  • @gamerstheater1187
    @gamerstheater1187 Жыл бұрын

    Who else is here cause of their computer class?

  • @alexvaiman4966
    @alexvaiman49664 ай бұрын

    sorry but as someone who just implemented a tab bar just recently, I can say that impl real production grade tab bar, is not an easy task... and the logic looks different, real tab manager honors swift life-cycle, and maintain states, most "easy to do" tab managers, do one of them .

  • @IhonahanBuitrago
    @IhonahanBuitrago Жыл бұрын

    Then this is useless: in the majority of projects you will find custom designs therefore this example is useless since working with SF symbols are way too different to work with assets design provide.

  • @aleksejsigaj1373
    @aleksejsigaj1373Ай бұрын

    Too custom 😂

  • @shyanneearl5891
    @shyanneearl5891 Жыл бұрын

    Hi, I saw your video on KZread and would love to hear from you, hope we have a chance to work together

  • @CodeWithChris

    @CodeWithChris

    Жыл бұрын

    Hello Shyanne. You can find us and our students in our Community (codecrew.codewithchris.com/). We do not work directly with people to code and make apps for them at the moment. Our focus is on teaching. We have a bunch of students who, I'm sure, would love to work on a side project as freelancers. If your goal is to have an app made, you can learn to code it by yourself with us here on youtube and on www.codewithchris.com or you can go to some platforms like Fiverr or others to hire some developers. @AdrienVillez

  • @shyanneearl5891

    @shyanneearl5891

    Жыл бұрын

    @@CodeWithChris Hello, we are not trying to write an app, what we need is to work with you and let you help us promote it