2019년 9월 22일 일요일

스테이터스 바에 블러 뷰 얹기 (Status Bar added Blur View)


상황 
  • 웹뷰의 top과 bottom을 Safe Area.top,  Safe Area.Bottom 이 아니라 SuperView의 top과 bottom으로 맞춤 
  • 네비게이션바가 숨김처리 되었을 경우 스테이터스 바 뒤로 컨텐츠가 겹쳐 보임
  • 스테이터스 바에 블러뷰를 얹고자 함  
방법 
  • 블러효과를 가진 비쥬얼이펙트뷰를 생성 (블러 효과 prominent로) 
  • 코드상에서 오토레이아웃 지정, Programmatic AutoLayout (top, left, right는 view에 맞추고, 높이를 스테이터스바에 맞춤)
  • 웹뷰와의 경계를 표시하기 위해 레이어로 라인을 그림 (Draw Bottom Line on View) 
내용 
        let blurEffect = UIBlurEffect(style: .prominent)
        let statusBarBlurView = UIVisualEffectView(effect: blurEffect)
        self.view.addSubview(statusBarBlurView)
        
        statusBarBlurView.translatesAutoresizingMaskIntoConstraints = false
        statusBarBlurView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
        statusBarBlurView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
        statusBarBlurView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
        statusBarBlurView.heightAnchor.constraint(equalToConstant: UIApplication.shared.statusBarFrame.height).isActive = true
        
        statusBarBlurView.layer.borderWidth = 0.25

화면
라벨: