❗️탭바는 스크린의 맨 밑에 위치하며, 사용자에게 앱이 제공하는 정보나 기능의 이해를 돕습니다.
A tab bar appears at the bottom of a screen, helping people understand the types of information or functionality an app provides.
기본적으로 탭바는 반투명합니다.
뒤에 콘텐츠가 있을 때 → 반투명한 탭바에 배경으로 사용됩니다.
뒤에 콘텐츠가 없을 때 → 콘텐츠가 배경으로 사용되지 않습니다.
탭바는...
투명도
와 배경색
을 가질 수 있으며동일한 높이
를 유지하고❗️일반적으로 앱에서 정보를 구성하는데 탭바를 사용합니다.
화면이동 (Navigation) 에만 탭바를 사용하세요
탭바
가 화면 이동을 담당한다면, 툴바
는 현재 화면과 관련된 항목 추가, 삭제, 주석추가, 사진촬영과 같은 액션을 보여줍니다.기능을 사용할 수 없더라도 탭을 제거하거나 비활성화 하지 마세요
탭이 너무 적어도, 많아도 안됩니다
티나지 않게 알림을 전달하려면 배지를 사용하세요
❗️조금 더 나은 탭바를 만들기 위해서는?
필수적인 화면만 탭바에 추가하세요.
탭에 라벨을 포함하는 것은 선택사항입니다
사용자가 어디에 위치하고 있는지 표시해야합니다
탭바가 ... 어디보자.... 눈이 침침하네요.
저는 탭바에 배지
를 올리는 것을 한번 구현해보도록 하겠습니다.
보통 앱에서 사용자가 확인하지 않은 새로운 업데이트가 있는 탭에 저렇게 배지로 몇개가 업데이트 되었는지 알려준 다음, 그 탭을 클릭한다면 배지가 없어지곤 합니다.
추가하는 방법은... 사실 탭바 파일에 코드 한줄만 추가해주시면 됩니다.
tabBar.items?[4].badgeValue = "1"
4번째 인덱스에 있는 아이템에 있는 배지 값이 1이라는 뜻입니다.
그럼 이제 어떻게 없애주냐...
//해당 탭바컨트롤러가 delegate를 사용하도록 viewDidLoad에서 위임해주시고...
self.delegate = self
extension BaseTBC: UITabBarControllerDelegate{
override func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem) {
item.badgeValue = nil
}
}
탭바 파일에서 UITabBarControllerDelegate 프로토콜을 채택하셔야 합니다...
마치... tableViewDelegate와 같이... didSelect 함수가 몇번째 탭을 클릭했는지 알려줍니다...
만약에 사용자가 탭을 클릭했다면, 그 탭의 badgeValue를 nil로 만들어줌으로써 배지를 없애주는것이죠!
import Foundation
import UIKit
extension UITabBar {
func addBadge(index:Int) {
if let tabItems = self.items {
let tabItem = tabItems[index]
tabItem.badgeValue = "●"
tabItem.badgeColor = .clear
tabItem.setBadgeTextAttributes([NSAttributedString.Key.foregroundColor: UIColor.red], for: .normal)
}
}
func removeBadge(index:Int) {
if let tabItems = self.items {
let tabItem = tabItems[index]
tabItem.badgeValue = nil
}
}
}
요렇게 따로 익스텐션을 만들어놓고 쓸수도 있습니다...
//
// BaseTBC.swift
// 29th_Youtube
//
// Created by Yi Joon Choi on 2021/10/22.
//
import Foundation
import UIKit
class BaseTBC: UITabBarController {
let titles = ["홈", "Shorts", "추가", "구독", "보관함"]
let defaultImages = [Const.Image.homeIcon,
Const.Image.shortsIcon,
Const.Image.plusCircleIcon,
Const.Image.subscriptionsIcon,
Const.Image.LibraryIcon]
let selectedImages = [Const.Image.homeIconFill,
Const.Image.shortsIconFill,
Const.Image.plusCircleIcon,
Const.Image.subscriptionsIconFill,
Const.Image.LibraryIconFill]
let views = [HomeXibVC(), ShortsVC(), PlusVC(), SubscribeVC(), ArchiveVC()]
var VCs : [UINavigationController] = []
override func viewDidLoad() {
super.viewDidLoad()
views.forEach{
VCs.append(UINavigationController(rootViewController: $0))
}
viewControllers = VCs
viewControllers?.indices.forEach{
viewControllers?[$0].tabBarItem = UITabBarItem(title: titles[$0], image: defaultImages[$0], selectedImage: selectedImages[$0])
}
//나중에 플러스 아이콘만 modal로 present 될 경우를 대비하여 delegate 코드 미리 추가했습니다!
self.delegate = self
UITabBar.appearance().barTintColor = .white
UITabBar.appearance().tintColor = .black
UITabBar.appearance().isTranslucent = false
tabBar.items?[4].badgeValue = "1"
if #available(iOS 15, *) {
let appearance = UITabBarAppearance()
let tabBar = UITabBar()
appearance.configureWithOpaqueBackground()
appearance.backgroundColor = .white
appearance.selectionIndicatorTintColor = .black
tabBar.standardAppearance = appearance;
UITabBar.appearance().scrollEdgeAppearance = appearance
}
}
}
extension BaseTBC: UITabBarControllerDelegate{
override func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem) {
item.badgeValue = nil
}
}
풀코드 올립니다...