Swift UITabBarController 상단에 선 추가하기

2022.12.28 - [iOS개발/Swift 기본] - Swift UITabBarController 위쪽 선 없애기

Swift UITabBarController 위쪽 선 없애기

위 내용에서 조금 더 꾸며 봅시다. 

 

이제 탭바를 하다보면 하단처럼 선을 추가로 넣고 싶은 경우가 있습니다. 

구름 모양 위 얇은 선이 보이시나요?

전체 코드를 먼저 보시고 어디가 달라진건지 천천히 같이 보도록 합시다. 

import UIKit
extension UIImage {//아래로 할경우 y :size.height - lineHeight
    func createSelectionIndicator(color: UIColor, size: CGSize, lineHeight: CGFloat) -> UIImage {
        UIGraphicsBeginImageContextWithOptions(size, false, 0)
        color.setFill()
        UIRectFill(CGRect(origin: CGPoint(x: 0,y :0), size: CGSize(width: size.width, height: lineHeight)))
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image!
    }
}
class RootViewController: UITabBarController {
    override func viewDidLoad() {
        super.viewDidLoad()
        self.tabBar.clipsToBounds = true
        self.tabBar.barTintColor = .white
        self.tabBar.standardAppearance.backgroundColor = .white
        if #available(iOS 15.0, *) {
            self.tabBar.scrollEdgeAppearance?.backgroundColor = .white
        }
        self.tabBar.isTranslucent = false
        
       
    }
    override func viewDidLayoutSubviews() {// 여기가 아닌곳에서 하면 M자 폰에서 버그 발생
        self.tabBar.selectionIndicatorImage = UIImage().createSelectionIndicator(color: UIColor.orange, size: CGSize(width: tabBar.frame.width/CGFloat(tabBar.items!.count), height: tabBar.frame.height), lineHeight: 1)

        self.tabBar.selectionIndicatorImage?.resizableImage(withCapInsets: .init(top: 1, left: 0, bottom: 0, right: 0))
    }
}

자 저번이랑 비교했을때 어디가 달라졌는지 보이시나요?

 

일단 원리만 먼저 설명드리면

코드로 UIImage를 원하는 모양으로 만들어

넣어주는 방식입니다.

원리는 간단하죠?

 

이를 간편히 하기위해 아래 코드를 추가해주시고

extension UIImage {//아래로 할경우 y :size.height - lineHeight
    func createSelectionIndicator(color: UIColor, size: CGSize, lineHeight: CGFloat) -> UIImage {
        UIGraphicsBeginImageContextWithOptions(size, false, 0)
        color.setFill()
        UIRectFill(CGRect(origin: CGPoint(x: 0,y :0), size: CGSize(width: size.width, height: lineHeight)))
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image!
    }
}

 

아래 함수를 추가함으로써

실제 Tabbar 에 이미지를 넣어주시면 끝입니다. 

* lineHeight : 선 굵기

 override func viewDidLayoutSubviews() {// 여기가 아닌곳에서 하면 M자 폰에서 버그 발생
        self.tabBar.selectionIndicatorImage = UIImage().createSelectionIndicator(color: UIColor.orange, size: CGSize(width: tabBar.frame.width/CGFloat(tabBar.items!.count), height: tabBar.frame.height), lineHeight: 1)

        self.tabBar.selectionIndicatorImage?.resizableImage(withCapInsets: .init(top: 1, left: 0, bottom: 0, right: 0))
    }

참고로 위부분을

viewDidLoad 에 넣으시면 아래와 같은 문제를 직면하게되니 주의해주시길 바랍니다.

 

그럼 오늘도 파이팅입니다!