How to change Tab Bar or Navigation Title View font in Swift UI

孙翔宇
Oct 24, 2020

Swift UI is great until a point when you want a better UX

ENV: Swift UI v2, Xcode 12

Although SwiftUI has revolutionarily changed how we used to do app development, sometimes we still get caught up by something as small as changing the font.

On the right. It obvious that the NavigationBar’s LargeTitleLabel is using a different font compared with my content.

How can I change it?

We are using swift UI. Of course the first thing we come up with is Modifiers.

Text(“天干地支”).font(.custom(“Weibei TC Bold”, size: 14))

This should save the day, right?

Nothing changed.

So what can we do now?

Appearance

At the bottom layer. Swift UI is using UIKit. Can we ask help of our old friend in UIKit — UIAppearance?

Let try to put these two line in our project.

UINavigationBar.appearance().largeTitleTextAttributes = [.font : UIFont(name: “Weibei TC Bold”, size: 34)!]

UITabBarItem.appearance().setTitleTextAttributes([.font : UIFont(name: “Weibei TC Bold”, size: 12)!], for: [])

Now we have it!

UIAppearence API is very useful when we want to make a centralized configuration of UI, such as textcolor, text font etc. In combination with UITraitCollection. We can make very versatile UI configuration just in few lines.

--

--

孙翔宇

Swift + Bujinkan + Taiji. “A teacher’s role is transform an ambitious student to an aspiring one. “