트러블 슈팅 이게 맞나요?

WIL(Weekly I Learned)

밴드부에서 아이폰 설정앱 UI 따라하기를 목표로 각자 개발을 하면서 다른 분들의 놀라운 실력을 보고 많은 것을 배워가던 와중 모두가 하나의 난관에 빠졌습니다…
아이폰 설정앱 상단 부분을 보면 아래로 스크롤할때 설정이라는 글자 뒤로 블러처리된 cell의 내용들이 보입니다.

그 부분을 구현하기 위해 정말 많은 레퍼런스들을 참고하면서 모두가 달라붙어 여섯시간 가량을 찾아보았으나…
결국 해답을 얻지 못했고 튜터님의 도움, 캠프 내의 잘하시는 분들의 조언도 받아보았으나 쉽사리 해결될 것 같지 않았습니다.
그렇게 28일에 시작한 문제해결이 12시가 지난 29일까지 이어졌고 다들 정신이 나가있을 무렵 준영님이 문제를 해결함과 동시에 모두 멘붕에 빠졌습니다…
먼저 이 문제를 해결하기 위한 과정들을 정리해보며 나름대로의 트러블슈팅?을 정리해 보겠습니다.

투명도 설정의 오류?

1. 네비게이션바에 영향을 주는 색상들을 다 투명하게 바꾸고 투명도 설정을 false = 실패

    self.navigationController?.navigationBar.tintColor = UIColor.clear
    self.navigationController?.navigationBar.barTintColor = UIColor.clear
    self.navigationController?.navigationBar.isTranslucent = false
    self.navigationController?.navigationBar.backgroundColor = UIColor.clear
   

2. UINavigationBarAppearance() 메소드를 사용하여 배경을 투명하게 설정 = 실패

   let appearance = UINavigationBarAppearance()
        appearance.configureWithDefaultBackground()
        appearance.backgroundColor = UIColor.clear
        UINavigationBar.appearance().standardAppearance = appearance
        UINavigationBar.appearance().scrollEdgeAppearance = appearance
   

3. 네비게이션바의 배경을 설정하고 투명하게 만든 뒤 투명도 설정을 true = 실패

   self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
        self.navigationController?.navigationBar.shadowImage = UIImage()
        self.navigationController?.navigationBar.isTranslucent = true
        self.navigationController?.view.backgroundColor = .clear
   

4. 뷰가 화면에 나타가기 전에 투명도를 설정 = 실패

   override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
   
            // Make the navigation bar background clear
        self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
        self.navigationController?.navigationBar.shadowImage = UIImage()
        self.navigationController?.navigationBar.isTranslucent = true
    }
   
    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
   
            // Restore the navigation bar to default
        self.navigationController?.navigationBar.setBackgroundImage(nil, for: .default)
        self.navigationController?.navigationBar.shadowImage = nil
    }
   

여러뷰들의 배경색 문제?

1. UIVisualEffectView라는 서브뷰의 투명도를 0.7로 변경 = 실패

   let vfxSubView = UIVisualEffectView(effect: UIBlurEffect(style: .regular)).subviews.first(where: {
           String(describing: type(of: $0)) == "_UIVisualEffectSubview"
       }) {
           vfxSubView.backgroundColor = UIColor.white.withAlphaComponent(0.7)
       }
   

2. 블러처리는 되었으나 네비게이션바의 타이틀도 가려지는 상황 발생 = 실패

    let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .light))
        let bounds = self.navigationController?.navigationBar.bounds.insetBy(dx: 0, dy: 0).offsetBy(dx: 0, dy: 0)
        visualEffectView.frame = bounds!
        self.navigationController?.navigationBar.isTranslucent = true
        self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
        self.navigationController?.navigationBar.addSubview(visualEffectView)
   

상단 부분 뷰들의 위치 문제?

1. sendSubviewToBack() 메소드를 사용하여 visualEffectView를 뒤로보냄 = 실패

   let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .light))
        let bounds = self.navigationController?.navigationBar.bounds.insetBy(dx: 0, dy: 0).offsetBy(dx: 0, dy: 0)
        visualEffectView.frame = bounds!
        self.navigationController?.navigationBar.isTranslucent = true
        self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
        self.navigationController?.navigationBar.addSubview(visualEffectView)
        self.tableView.sendSubviewToBack(visualEffectView)
   

2. addSubview() 메소드가 아닌 insertSubview() 메소드를 이용하여 원하는 위치에 삽입 = 실패

   let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .light))
        let bounds = self.navigationController?.navigationBar.bounds.insetBy(dx: 0, dy: 0).offsetBy(dx: 0, dy: 0)
        visualEffectView.frame = bounds!
        self.navigationController?.navigationBar.isTranslucent = true
        self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
        self.navigationController?.navigationBar.insertSubview(visualEffectView, 0)
   

Solution

• 테이블뷰의 제약조건이 네비게이션바를 포함하지 않는 위치까지만 설정 -> Add Constraints에서 상단제약을 SuperView까지로 설정 -> 해결
• 즉 애초에 스크롤을 해도 cell의 내용이 네비게이션바 위치에서 나타날수 없는 구조 -> 테이블뷰의 상단을 확장해서 해결
  
  
• 다른 제약들은 Safe Area, Top은 Superview