사이드 바 실제 적용시 고려하면 좋은 것들

내가 참고하는 외부 라이브러리의 사이드 바는 테이블 뷰이으로 헤더를 지정할 수 있다.

 

        // 테이블 뷰의 헤더 역할을 할 뷰를 정의한다

        let headerView = UIView(frame: CGRect(x: 0, y: 0, width: self.view.frame.width, height: 70))

        headerView.backgroundColor = .brown

        // 테이블 뷰의 헤더 뷰로 지정한다.

        self.tableView.tableHeaderView = headerView

 

다음과 같이 헤더를 지정하면 더욱 좋은 UI를 만들 수 있다.

또한 헤더 뷰를 컨테이너로 하여 안에 레이블이나 이미지를 넣어 커스터마이징 할 수도 있다.

 

이미지의 마스킹 효과

마스크 사용 방법

 

        self.profileImage.layer.cornerRadius = (self.profileImage.frame.width / 2) // 반원 형태로 라운딩

        self.profileImage.layer.borderWidth = 0 // 테두리 두께 0으로

        self.profileImage.layer.masksToBounds = true // 마스크 효과 - 마스크 기법인데 원을 레이어로 해서 기존에 노출된 부분을 가리            고 노출되지 않은 부분을 보이게 하는 기법

 

 

사이드바를 이용하여 화면전환 하는 법

 

 

기존흐름에 영향을 주면 안되니까 꼭 기억하기!!!

override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        
        if indexPath.row == 0 { // 선택된 행이 새글 작성 메뉴일 때
            /*
             사이드 바 컨트롤러에서 프론트 컨트롤러를 직접 참조할 방법은 없다.
             revealViewController 메소드는 메인 컨트롤러 객체를 가져오는 메소드
             frontViewController 속성이 바로 프론트 컨트롤러를 가르킨다
             그리고 우리가 원하는 것은 pushViewController 이고 이것은 UINavigationController에만 정의되어 있어서 캐스팅이 필수적이다.
             
             이렇게 화면전환 코드 작성시, 사이드 바 혹은 화면 전체가 전환되는 일 없이 목록 영역에 해당하는 프론트 뷰 컨트롤러 영역만 쓰기 화면으로 전환된다.
             */
            let uv = self.storyboard?.instantiateViewController(identifier: "MemoForm") // 스토리보드를 탐색하여 메모폼의 아이디를 가진 스토리보드를 가져온다.
            let target = self.revealViewController()?.frontViewController as! UINavigationController
            target.pushViewController(uv!, animated: true)
            self.revealViewController()?.revealToggle(self) // 사이드바를 닫아주는 코드
        } else if indexPath.row == 5 { // 선택된 행이 계정관리일 경우
            /*
             이번에는 프레젠트 방식인데 굳이 프론트영역에서 열릴 필요가 없기 때문에.
             .fullScreen으로 준것은 ios13의 업데이트와 관련이 있다. 화면 전환과 관련한 기본 속성값이 바뀌어서
             기본값이 ios13부터는 전체를 덮는게 아닌 부모가 뒤에 남아있기 때문이다
             --> 이렇게 바뀐 디자인을 가르켜 레이어릴 디자인이라고 한다. 애플에 따르면 이 디자인은 사용자로 하여금
             현재 자신이 앱에서 어디에 있는지 인지할 수 있는 컨텍스트를 제공하며, 둥근 상단 모양을 통해 현재의 뷰가 interactively dismmised 될 수 있음을 알게해준다.
             */
            let uv = self.storyboard?.instantiateViewController(identifier: "_Profile")
            uv?.modalPresentationStyle = .fullScreen
            self.present(uv!, animated: true){
                self.revealViewController()?.revealToggle(self) // 이 코드는 모달 형식으로 화면이 바뀌더라도 사이드바는 닫아주어야 하기 때문에
            }
        }
    }

사이드 바가 완성은 아니지만 우선 참고하길 바람.

 

동일 영역(겹쳐지는 경우) 배치 순서가 중요하다.

    self.view.bringSubviewToFront(self.tv)

    self.view.bringSubviewToFront(self.profileImage)

코드가 먼저 작성되면 뒤에 배치돼 쉽게 말해서 스택처럼 쌓이는데 식판을 생각하면 편하다.

먼저 들어간게 제일 아래쪽에 배치되서 가려질 가능성이 존재한다. 주의!!

 

* 그러나 테이블 마저 위로 가져오는 이유는?

테이블 설정 시 프로필 이미지에 상대적인 위치를 갖게 했는데 프로필 이미지 뷰만 올리면 테이블이 자신의 위치를 확실히 정하지 못해 오류가 발생할 수 있다. 따라서 둘다 올려야 한다.