[SwiftUI] TabView에 그림자 적용하기

 

.background(
    Color.white
        .shadow(color: .gray.opacity(0.2), radius: 10, x: 0, y: 0)
        .mask(Rectangle().padding(.top, -20))
)

Button의 그림자는 이렇게 단순하게 background와 shadow를 이용하면 됐다. 하지만 TabView는 이렇게 해도 동작하지 않는다.

 

 

해결 방법

import Foundation
import UIKit
import SwiftUI

extension UITabBarController {
    open override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()

        tabBar.layer.masksToBounds = true
//        tabBar.layer.cornerRadius = 16
        // Choose with corners should be rounded
        tabBar.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner] // top left, top right

        // Uses `accessibilityIdentifier` in order to retrieve shadow view if already added
        if let shadowView = view.subviews.first(where: { $0.accessibilityIdentifier == "TabBarShadow" }) {
            shadowView.frame = tabBar.frame
        } else {
            let shadowView = UIView(frame: .zero)
            shadowView.frame = tabBar.frame
            shadowView.accessibilityIdentifier = "TabBarShadow"
            shadowView.backgroundColor = UIColor.white
            shadowView.layer.cornerRadius = tabBar.layer.cornerRadius
            shadowView.layer.maskedCorners = tabBar.layer.maskedCorners
            shadowView.layer.masksToBounds = false
            shadowView.layer.shadowColor = Color.gray.opacity(0.1).cgColor
            shadowView.layer.shadowOffset = CGSize(width: 0.0, height: -2.0)
            shadowView.layer.shadowOpacity = 0.1
            shadowView.layer.shadowRadius = 10
            view.addSubview(shadowView)
            view.bringSubviewToFront(tabBar)
        }
    }
}

이렇게 UITabBarController의 Extension을 구현해주면 된다.

 

 

참고 링크

https://medium.com/@cleberwdsantos/swiftui-tip-tab-bar-with-rounded-corners-and-shadow-1c520dda31a