客製化長相的UITabBarController

更新 發佈閱讀 9 分鐘

雖然我之前文章大力讚美SwiftUI的tabView有多好用,無奈專案大部分都是UIKit啊~~~~要在既有專案用Tab架構只能用UITabBarController了

設計這次還出了一個超複雜的UI,陰影+圓角+客製化高度 大套餐

馬上開始吧。

圓角+陰影

圓角+陰影很簡單,高度很難🥹

圓角+陰影很簡單,高度很難🥹


重點就是subclass一個UITabController 並去更改tabBar UI

也有人會在viewWillLayoutSubviews()或viewDidLayoutSubviews()去進行。

class MyTabController: UITabBarController {
func viewDidLoad() {
super.viewDidLoad()
setupTabBarUI()
}   

func setupTabBarUI() {
self.tabBar.backgroundColor = .white
self.tabBar.tintColor = .grayself.tabBar.layer.cornerRadius = 10
self.tabBar.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]
self.tabBar.clipsToBounds = true
self.tabBar.layer.masksToBounds = false
self.tabBar.layer.shadowColor = UIColor.black.cgColor
self.tabBar.layer.shadowOpacity = 0.2
// 陰影要這樣畫,不然會太耗效能
self.tabBar.layer.shadowPath = UIBezierPath(roundedRect: self.tabBar.bounds, cornerRadius: 10.0).cgPath
}
}

陰影NG作法

研究的時候,發現有些人的作法是在TabBar後面墊一塊UIView當陰影。這個方法如果TabBar永恆存在的話沒問題,但有些動線需要push後隱藏Tab的話,官方提供的hidesBottomBarWhenPushed只會幫你隱藏TabBar本身,多墊的那塊UIView就要另外再處理,我覺得很不方便,不推薦。

高度

那如何更改高度呢?在網路上有查到2017年的答案StackOverflow是在viewWillLayoutSubviews去更改高度,但我用已經無效了。

我的作法是建立一個CustomTabBar,改他的高度。

class CustomTabBar: UITabBar {    
override func sizeThatFits(_ size: CGSize) -> CGSize {
var sizeThatFits = super.sizeThatFits(size)
sizeThatFits.height = 98
return sizeThatFits
}

然而使用自定義的Tabbar意外的困難,override tabBar屬性也沒反應(NG作法)

class MyTabController: UITabBarController {
// 沒有變高
override var tabBar: UITabBar {
return customTabBar
}
}

後來查到要使用object_setClass在runtime時把tabBar改掉。apple真的很難搞耶🧐

class MyTabController: UITabBarController {
init() {
super.init(nibName: nil, bundle: nil)
object_setClass(self.tabBar, CustomTabBar.self)
}

required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}

成品

raw-image

同場加映:小紅點

原生提供的小紅點是有數字的

vc1.tabbarItem.badgeValue = "1"
raw-image


如果設計想要純小紅點怎麼辦??

有一種邪魔歪道(?的作法是,用同上方法,但不放數字

vc1.tabbarItem.badgeValue = ""
raw-image


雖然可以出現紅點,但整個大的不可思議,而且因為客製化高度,位置也跑掉。

增加客製化的小紅點

先做一個列出所有Tab的enum

enum V2TabBarItem {
case tab1
case tab2
case tab3

// badge tag要不同,新增移除時不會互相干擾
var badgeTag: Int {
switch self {
case .tab1:
return 6543
case .tab2:
return 6542
case .tab3:
return 6541
}
}

}

增加小紅點

private func addRedDotAtTabBarItem(tab: V2TabBarItem) {
guard let index = tabs.firstIndex(of: tab) else { return }
removeRedDotAtTabBarItem(tab: tab)
let radius: CGFloat = 5
let diameter = radius * 2
let topMargin:CGFloat = 17
let tabBarItemCount = CGFloat(tabBar.items?.count ?? 0)
let screenSize = UIScreen.main.bounds
let halfItemWidth = (screenSize.width) / (tabBarItemCount * 2)
let xOffset = halfItemWidth * CGFloat(index * 2 + 1)
let imageHalfWidth: CGFloat = ((tabBar.items?[index])?.selectedImage?.size.width ?? 0) / 2
// 離tab icon距離可自行調整
let redDot = UIView(frame: CGRect(x: xOffset + imageHalfWidth/2 + 3, y: topMargin, width: diameter, height: diameter))
redDot.tag = tab.badgeTag
redDot.backgroundColor = UIColor.red
redDot.layer.cornerRadius = radius
tabBar.addSubview(redDot)
}

移除小紅點

private func removeRedDotAtTabBarItem(tab: V2TabBarItem) {
for subview in tabBar.subviews {
if subview.tag == tab.badgeTag {
subview.removeFromSuperview()
break
}
}
}

加!!!!!

加在viewDidLoad裡會沒反應,我覺得應該是太快了tabBar UI還沒ready,我是選擇加在ViewDidAppear裡

override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
addRedDotAtTabBarItem(tab: .tab1)
}
VC生命週期

VC生命週期

成品

raw-image







留言
avatar-img
留言分享你的想法!
avatar-img
Michelle Chen的沙龍
8會員
34內容數
紀錄iOS開發上遇到的問題或是一些流程筆記。主要都是Swift。
Michelle Chen的沙龍的其他內容
2024/09/06
本文介紹了使用KeyboardLayoutGuide的方法,以及在不同iOS版本和設備上遇到的佈局問題。透過調整TextView的底部對齊方式,成功解決了在模擬器和真實設備上出現的錯誤,提供了有用的建議給開發者。本文還探討了為何在iOS15與Xib的組合使用中會出現問題,以及解決方案。
Thumbnail
2024/09/06
本文介紹了使用KeyboardLayoutGuide的方法,以及在不同iOS版本和設備上遇到的佈局問題。透過調整TextView的底部對齊方式,成功解決了在模擬器和真實設備上出現的錯誤,提供了有用的建議給開發者。本文還探討了為何在iOS15與Xib的組合使用中會出現問題,以及解決方案。
Thumbnail
2024/08/07
使用者回報的超級奇怪線上問題,用數字鍵盤(NumberPad)更改欄位時,送出後尾數都會消失。例如:30 ⭢ 3,52 ⭢ 5。 尋尋覓覓了兩天終於被我找到這篇,apple的奇葩的bug 重現條件 iOS17 手機設定是繁體中文語系 前一個用過的鍵盤是Cangjie倉頡 or Suchen
2024/08/07
使用者回報的超級奇怪線上問題,用數字鍵盤(NumberPad)更改欄位時,送出後尾數都會消失。例如:30 ⭢ 3,52 ⭢ 5。 尋尋覓覓了兩天終於被我找到這篇,apple的奇葩的bug 重現條件 iOS17 手機設定是繁體中文語系 前一個用過的鍵盤是Cangjie倉頡 or Suchen
2024/07/03
這篇文章探討瞭如何在iOS應用程式中客製化Alert,包括改變字體大小、內嵌連結以及讓Alert的高度隨著字數增長並提供scroll操作。同時使用SwiftUI進行客製化,並介紹瞭解決高度超出範圍後文字捲動與scrollView固定高度的方法。
Thumbnail
2024/07/03
這篇文章探討瞭如何在iOS應用程式中客製化Alert,包括改變字體大小、內嵌連結以及讓Alert的高度隨著字數增長並提供scroll操作。同時使用SwiftUI進行客製化,並介紹瞭解決高度超出範圍後文字捲動與scrollView固定高度的方法。
Thumbnail
看更多
你可能也想看
Thumbnail
透過蝦皮分潤計畫,輕鬆賺取零用金!本文分享5-6月實測心得,包含數據流程、實際收入、平臺優點及注意事項,並推薦高分潤商品,教你如何運用空閒時間創造被動收入。
Thumbnail
透過蝦皮分潤計畫,輕鬆賺取零用金!本文分享5-6月實測心得,包含數據流程、實際收入、平臺優點及注意事項,並推薦高分潤商品,教你如何運用空閒時間創造被動收入。
Thumbnail
單身的人有些會養寵物,而我養植物。畢竟寵物離世會傷心,植物沒養好再接再厲就好了~(笑)
Thumbnail
單身的人有些會養寵物,而我養植物。畢竟寵物離世會傷心,植物沒養好再接再厲就好了~(笑)
Thumbnail
不知你有沒有過這種經驗?衛生紙只剩最後一包、洗衣精倒不出來,或電池突然沒電。這次一次補貨,從電池、衛生紙到洗衣精,還順便分享使用心得。更棒的是,搭配蝦皮分潤計畫,愛用品不僅自己用得安心,分享給朋友還能賺回饋。立即使用推薦碼 X5Q344E,輕鬆上手,隨時隨地賺取分潤!
Thumbnail
不知你有沒有過這種經驗?衛生紙只剩最後一包、洗衣精倒不出來,或電池突然沒電。這次一次補貨,從電池、衛生紙到洗衣精,還順便分享使用心得。更棒的是,搭配蝦皮分潤計畫,愛用品不僅自己用得安心,分享給朋友還能賺回饋。立即使用推薦碼 X5Q344E,輕鬆上手,隨時隨地賺取分潤!
Thumbnail
身為一個典型的社畜,上班時間被會議、進度、KPI 塞得滿滿,下班後只想要找一個能夠安靜喘口氣的小角落。對我來說,畫畫就是那個屬於自己的小樹洞。無論是胡亂塗鴉,還是慢慢描繪喜歡的插畫人物,那個專注在筆觸和色彩的過程,就像在幫心靈按摩一樣,讓緊繃的神經慢慢鬆開。
Thumbnail
身為一個典型的社畜,上班時間被會議、進度、KPI 塞得滿滿,下班後只想要找一個能夠安靜喘口氣的小角落。對我來說,畫畫就是那個屬於自己的小樹洞。無論是胡亂塗鴉,還是慢慢描繪喜歡的插畫人物,那個專注在筆觸和色彩的過程,就像在幫心靈按摩一樣,讓緊繃的神經慢慢鬆開。
Thumbnail
這次的side bar不一樣了,上一次我好像做的太簡單了,所以完讀率只有14%,我好難過啊(;´д`)ゞ,所以我這準備的內容有多一點。 這次的目標 按鈕的排版 按鈕滑過去會有顏色變化 Side bar能夠展開 箭頭能夠移動至被選擇的物件上 宣告 這次我創了兩個檔案 SideBa
Thumbnail
這次的side bar不一樣了,上一次我好像做的太簡單了,所以完讀率只有14%,我好難過啊(;´д`)ゞ,所以我這準備的內容有多一點。 這次的目標 按鈕的排版 按鈕滑過去會有顏色變化 Side bar能夠展開 箭頭能夠移動至被選擇的物件上 宣告 這次我創了兩個檔案 SideBa
Thumbnail
iOS 17.5 正式版上架更新日預測| iPhone 早前在4月初發表了開發者測試版 iOS 17.5 Beta , 為手機帶來很多新功能及細節改良, 那一般用戶幾時才可以正式用到 iOS 17.5 ?當中又有甚麼吸引、實用新功能呢? 「天氣」桌面工具 iOS 17.5 微調了桌
Thumbnail
iOS 17.5 正式版上架更新日預測| iPhone 早前在4月初發表了開發者測試版 iOS 17.5 Beta , 為手機帶來很多新功能及細節改良, 那一般用戶幾時才可以正式用到 iOS 17.5 ?當中又有甚麼吸引、實用新功能呢? 「天氣」桌面工具 iOS 17.5 微調了桌
Thumbnail
這篇文章探討瞭如何在iOS應用程式中客製化Alert,包括改變字體大小、內嵌連結以及讓Alert的高度隨著字數增長並提供scroll操作。同時使用SwiftUI進行客製化,並介紹瞭解決高度超出範圍後文字捲動與scrollView固定高度的方法。
Thumbnail
這篇文章探討瞭如何在iOS應用程式中客製化Alert,包括改變字體大小、內嵌連結以及讓Alert的高度隨著字數增長並提供scroll操作。同時使用SwiftUI進行客製化,並介紹瞭解決高度超出範圍後文字捲動與scrollView固定高度的方法。
Thumbnail
這篇文章教你如何製作側邊欄,包括準備工作、HTML和CSS的部分,還有一些互動效果。文章涵蓋了連結、圖片、超連結、大小、顏色、排版、flex和滑鼠互動等內容。
Thumbnail
這篇文章教你如何製作側邊欄,包括準備工作、HTML和CSS的部分,還有一些互動效果。文章涵蓋了連結、圖片、超連結、大小、顏色、排版、flex和滑鼠互動等內容。
Thumbnail
iPhone 最新作業系統 iOS 18 控制中心大更新,預設有常用功能、音樂播放器、連線控制三個頁面,並允許使用者自訂頁面,可以直接在控制中心管理所需的功能、調整位置和選擇尺寸。
Thumbnail
iPhone 最新作業系統 iOS 18 控制中心大更新,預設有常用功能、音樂播放器、連線控制三個頁面,並允許使用者自訂頁面,可以直接在控制中心管理所需的功能、調整位置和選擇尺寸。
Thumbnail
10個今年WWDC,蘋果把AI功能導入IOS之後的新功能
Thumbnail
10個今年WWDC,蘋果把AI功能導入IOS之後的新功能
Thumbnail
本文介紹如何使用UINavigationBarAppearance調整四種場景下的UI外觀,並探討客製化返回鍵UI又保留返回手勢的做法,可以有效地客製化NavigationBar的外觀,並避免一些NG作法。
Thumbnail
本文介紹如何使用UINavigationBarAppearance調整四種場景下的UI外觀,並探討客製化返回鍵UI又保留返回手勢的做法,可以有效地客製化NavigationBar的外觀,並避免一些NG作法。
Thumbnail
雖然我之前文章大力讚美SwiftUI的tabView有多好用,無奈專案大部分都是UIKit啊~~~~要在既有專案用Tab架構只能用UITabBarController了 設計這次還出了一個超複雜的UI,陰影+圓角+客製化高度 大套餐 馬上開始吧。 圓角+陰影 重點就是subclass一個
Thumbnail
雖然我之前文章大力讚美SwiftUI的tabView有多好用,無奈專案大部分都是UIKit啊~~~~要在既有專案用Tab架構只能用UITabBarController了 設計這次還出了一個超複雜的UI,陰影+圓角+客製化高度 大套餐 馬上開始吧。 圓角+陰影 重點就是subclass一個
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News