카테고리 없음

111 iOS NavagationBar Customizing, 메뉴바

이즈라핀 2020. 9. 18. 17:26

**UI 변경

=>제공되는 객체의 속성에 다른 값을 대입해서 출력을 변경

일반적인 값을 변경해서 출력되는 값을 바꾸는 형태가 있고 속성을 변경해서 모양 자체를 변경하는 것도 있습니다.

=>제공되는 클래스의 하위 클래스를 생성(SubClassing)해서 모양을 변경

=>Customizing을 하기 위해서는 그 뷰에 대해서 잘 알아야 합니다.

=>일반적으로 많이 하는 커스터마이징은 NavigationBar, AlertViewController, TabBarController 등 입니다.

외부 라이브러리를 다운로드 받아서 커스터 마이징 하는 경우도 있습니다.

 

**NavigationBar Customizing

=>NavigationBar : NavigationController Controller 관리하에 있는 뷰 컨트롤러 상단에 표시되는 바

제어는 각각의 Controller에서 하지만 NavigationController가 소유한 것을 공유해서 출력되는 모양만 변경하는 것입니다.

push를 하게되면 뒤로 버튼으로 자동으로 생성되면 새로운 화면 슬라이드되면서 출력됩니다.

=>NavigationBar를 화면에서 출력하지 않을 수 있습니다.

Back Button 도 안보이게 있는데 출력되는 뷰 컨트롤러에서 하지 않고 출력을 시키는 부모 뷰 컨트롤러에서 작업해야 합니다.

=>상단에 보여지기 때문에 뷰 컨트롤러에서 디자인 할 때 주의해야 합니다.

상단이 가려집니다.

 

1.Navigation Bar의 구성

왼쪽은 [UIBarButtonItem]로 구성 - leftBarButtonItem(1개) 또는 leftBarButtonItems(여러 개) 를 이용해서 설정

오른쪽은 [UIBarButtonItem]로 구성 - rightBarButtonItem(1개) 또는 rightBarButtonItems(여러 개) 를 이용해서 설정

중앙은 UIView 타입의 titleView 라는 속성으로 소유

ViewController에서 title 속성을 설정하면 titleView 영역에 Label 이 생성되고 이 Label에 title을 출력합니다.

 

2.Navigation Bar에 2줄 작성 - 제공되는 레이블의 라인 수 속성을 수정해서 출력

1)프로젝트 생성

 

2)기본 뷰 컨트롤러에 Navigation Controller를 추가

 

3)ViewController.swift 파일의 viewDidLoad 메소드에 작성

        //하나의 레이블을 이용해서 2줄 출력

        let titleView = UILabel(frame: CGRect(x: 0, y: 0, width: 200, height: 40))

        //옵션 수정

        titleView.numberOfLines = 2

        titleView.textAlignment = .center

        titleView.textColor = UIColor.white

        titleView.font = UIFont.systemFont(ofSize: 15)

        titleView.text = "네비게이션\n2줄"

        self.navigationItem.titleView = titleView

        

        //네비게이션 바의 배경 색을 수정

        let color = UIColor(red: 0.02, green: 0.2, blue: 0.5, alpha: 1.0)

        navigationController?.navigationBar.barTintColor = color

 

3.Navigation Bar에 2줄 작성 - 2개의 레이블을 하나의 뷰로 묶고 이 뷰를 titleView로 설정

ViewController.swift 파일의 viewDidLoad 메소드에 작성

         let titleView = UILabel(frame: CGRect(x: 0, y: 0, width: 200, height: 18))

        //옵션 수정

        titleView.numberOfLines = 1

        titleView.textAlignment = .center

        titleView.textColor = UIColor.white

        titleView.font = UIFont.systemFont(ofSize: 15)

        titleView.text = "네비게이션"

        

        let subTitleView = UILabel(frame: CGRect(x: 0, y: 18, width: 200, height: 18))

        //옵션 수정

        subTitleView.numberOfLines = 1

        subTitleView.textAlignment = .center

        subTitleView.textColor = UIColor.white

        subTitleView.font = UIFont.systemFont(ofSize: 12)

        subTitleView.text = "2줄"

        

        let container = UIView(frame: CGRect(x: 0, y: 18, width: 200, height: 40))

        container.addSubview(titleView)

        container.addSubview(subTitleView)

        

        self.navigationItem.titleView = container

        

        //네비게이션 바의 배경 색을 수정

        let color = UIColor(red: 0.02, green: 0.2, blue: 0.5, alpha: 1.0)

        navigationController?.navigationBar.barTintColor = color

 

4.Navigation Bar에 2개의 이미지 뷰와 1개의 텍스트 필드 그리고 1개의 레이블을 배치

1)필요한 이미지를 프로젝트에 추가

 

2)viewDidLoad 메소드 수정

      //이미지를 설정한 바버튼 2개와 1개의 텍스트 필드와 레이블을 출력

        //텍스트 필드 만들기

        let tf = UITextField()

        tf.frame = CGRect(x: 0, y: 0, width: 300, height: 35)

        tf.backgroundColor = UIColor.white

        tf.font = UIFont.systemFont(ofSize:12)

        tf.keyboardType = .URL

        tf.layer.borderColor = UIColor(red: 0.6, green: 0.6, blue: 0.6, alpha: 1.0).cgColor

        navigationItem.titleView = tf

        

        //이미지를 이용해서 바 버튼을 만들어서 왼쪽에 배치

        let back = UIImage(named: "arrow-back")

        let leftButtonItem = UIBarButtonItem(image: back, style: .plain, target: self, action: nil)

        navigationItem.leftBarButtonItem = leftButtonItem

        

        //네비게이션 바의 오른쪽 버튼으로 설정할 View를 생성

        let rv = UIView()

        

        rv.frame = CGRect(x: 0, y: 0, width: 70, height: 37)

        

        //레이블을 생성해서 뷰에 추가

        let cnt = UILabel()

        cnt.frame = CGRect(x: 10, y: 8, width: 20, height: 20)

        cnt.font = UIFont.systemFont(ofSize: 10)

        cnt.textColor = UIColor(red: 0.6, green: 0.6, blue: 0.6, alpha: 1.0)

        cnt.text = "100"

        cnt.textAlignment = .center

        cnt.layer.borderWidth = 2

        cnt.layer.borderColor = UIColor(red: 0.6, green: 0.6, blue: 0.6, alpha: 1.0).cgColor

        cnt.layer.cornerRadius = 3

        rv.addSubview(cnt)

        

        //버튼을 생성해서 뷰에 추가

        let more = UIButton(type: .system)

        more.frame = CGRect(x: 50, y: 10, width: 16, height: 16)

        more.setImage(UIImage(named:"more"), for: .normal)

        rv.addSubview(more)

        

        //뷰를 가지고 바버튼 아이템 생성

        let rItem = UIBarButtonItem(customView: rv)

        navigationItem.rightBarButtonItem = rItem

 

**AlertViewController

=>대화상자 클래스

=>기본적으로는 제목과 메시지를 출력할 수 있고 텍스트 필드와 버튼을 추가할 수 있습니다.

제목과 메시지는 생성할 때 설정하고 텍스트 필드는 addTextField 라는 메소드로 추가할 수 있으면 버튼은 addAcion으로 추가합니다.

=>AlertViewController를 Customizing 할 때는 contentViewController 라는 속성을 이용합니다.

AlertViewController 객체를 생성하고 setValue(내용이 되는 뷰 컨트롤러, forKeyPath:”contentViewContrller”)를 호출하면 매개변수로 대입한 뷰 컨트롤러의 화면이 출력됩니다.

 

1.맵 뷰를 출력

=>viewDidLoad 메소드에 작성

        //맵 뷰를 생성 - MapKit을 import 해야만 사용 가능

        let mapView = MKMapView(frame:CGRect(x: 0, y: 0, width: 0, height: 0))

        

        //위의 뷰를 뷰 컨트롤러의 뷰로 설정

        let vc = UIViewController()

        vc.view = mapView

        

        //크기를 조정하고자 하면 vc의 속성을 이용

        vc.preferredContentSize.height = 300

        

        //대화상자를 생성하고 vc의 view를 대화상자의 뷰로 설정

        let alert = UIAlertController(title: "지도 보여주기", message: "크기는 고정", preferredStyle: .alert)

        alert.setValue(vc, forKeyPath: "contentViewController")

        present(alert, animated: true)

 

2.iOS에서 제공하지 않는 위젯의 사용

=>iOS는 체크 박스를 제공하지 않습니다.

iOS에서는 체크 박스 역할을 UISwitch를 이용합니다.

체크 박스를 사용하고자 하면 체크 박스 이미지와 체크 박스에 체크 된 이미지를 준비를 한 후 이미지를 이미지 뷰나 버튼에 출력

이미지 뷰를 누를 때 마다 이미지를 변경을 해서 사용, 버튼은 보통 때 와 누를 때 이미지를 따로 설정할 수 있어서 2개의 이미지를 버튼에 설정해서 사용

=>별점도 이런 방식으로 합니다.

iOS에서는 UISlider 나 UIStepper를 이용하는 것을 권장

 

3.여러 개의 항목 중 하나를 선택

=>UITableController를 만들고 TableViewController를 대화상자에 출력

 

1)UITableViewController로 부터 상속받는 클래스를 생성 - ListVC

 

 

2)ViewController.swift 파일에 테이블 뷰에 출력할 배열을 생성

    //테이블에 출력할 데이터 배열

    var list  = ["키위", "수박", "망고", "사과", "배"]

 

3)ListVC.swift 파일에 ViewController의 참조형 변수 생성

//상위 뷰 컨트롤러에 대한 포인터

    var p : ViewController!

 

4)ViewController.swift 파일의 viewDidLoad 메소드에 대화상자를 출력하는 메소드를 작성

        let listVC = ListVC()

        //하위 뷰 컨트롤러에 상위 뷰 컨트롤러의 포인터 넘기기

//하위 뷰 컨트롤러에 자신의 참조를 넘기면 하위 뷰 컨트롤러에서는 상위 뷰 컨트롤러의 모든 멤버 접근 가능

        listVC.p = self

        

        listVC.preferredContentSize.height = 300

        

        let alert = UIAlertController(title: "과일", message: "과일을 선택하세요", preferredStyle: .alert)

        alert.setValue(listVC, forKeyPath: "contentViewController")

        

        alert.addAction(UIAlertAction(title: "취소", style: .cancel))

        alert.addAction(UIAlertAction(title:"확인", style: .default))

        present(alert, animated: true)

 

5)ListVC 의 테이블 뷰 출력 메소드를 생성

     override func numberOfSections(in tableView: UITableView) -> Int {

        return 1

    }

 

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

        return p.list.count

    }

    

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        

        var cell = tableView.dequeueReusableCell(withIdentifier: "cell")

        if cell == nil{

            cell = UITableViewCell(style: .default, reuseIdentifier: "cell")

        }

 

        cell!.textLabel?.text = p.list[indexPath.row]

        return cell!

    }

 

6) ViewController.swift 파일에 속성을 추가

//선택한 행 번호를 받기 위한 변수

var selectedIndex : Int!

 

 

7)ListVC.swift 파일에 셀을 선택했을 때 호출되는 메소드를 재정의

    //셀을 선택했을 때 호출되는 메소드

    override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {

        p.selectedIndex = indexPath.row

    }

 

8)ViewController.swift 파일의 대화상자 출력 코드를 수정 - 확인 버튼을 눌렀을 때 작업을 수행

alert.addAction(UIAlertAction(title:"확인", style: .default){(_) -> Void in

            NSLog("\(self.selectedIndex!) : \(self.list[self.selectedIndex!])")

        })

 

 

 

 

 

4.사용자 정의 경고 창 만들기

1)경고창을 만들어서 출력하는 메소드를 생성

 

    //문자열을 입력받아서 경고창을 출력해주는 메소드

    func warningAlert(msg : String){

        //대화상자에 출력할 뷰 컨트롤러를 생성

        let alertVC = UIViewController()

        //출력할 이미지를 생성

        let image = UIImage(named: "warning")

        //이미지 뷰를 부착

        alertVC.view = UIImageView(image: image)

        //크기 설정

        alertVC.preferredContentSize = image? .size ?? CGSize.zero

        

        //대화상자 생성해서 위의 뷰 컨트롤러 출력

        let alert = UIAlertController(title: nil, message: msg, preferredStyle: .alert)

        alert.addAction(UIAlertAction(title: "확인", style: .default))

        alert.setValue(alertVC, forKey: "contentViewController")

        self.present(alert, animated: true)

        

    }

 

2)viewDidLoad 메소드에서 메소드 호출

 warningAlert(msg: "경고창을 직접 디자인")

 

 

**SubClassing 이용

=>제공되는 클래스를 상속받는 클래스를 만들어서 상위 클래스의 속성을 변경

=>인스턴스의 속성을 변경해서 커스터마이징 하는 방법은 한 번 사용할 때는 별 문제가 없지만 여러 번 사용하는 경우에는 코드를 매번 복사해야 하기 때문에 번거로움

클래스를 만들어두면 이후에는 인스턴스만 생성해서 사용하면 됩니다.

이게 프레임워크의 기본적인 원리

 

1.TabBar를 SubClassing 해서 탭 바의 모양 변경

1)제공되는 ViewController에 탭바를 추가

 

2)스토리보드에 2개의 ViewController를 추가하고 탭 바 컨트롤러와 연결

=>탭 바 컨트롤러를 선택하고 control을 누른 채 뷰 컨트롤러 로 드래그 앤 드랍을 하고 viewControllers를 선택

 

3)UITabBarController를 상속받는 클래스를 생성 - CustomTabBarController

 

4)CustomTabBarController.swift 파일에 탭 바 역할을 수행할 뷰와 탭 버튼 역할을 수행할 버튼 3개를 생성

   let csView = UIView()

    

    let tabItem1 = UIButton(type: .system)

    let tabItem2 = UIButton(type: .system)

    let tabItem3 = UIButton(type: .system)

 

5)사용자 정의 메소드 생성 - 버튼과 문자열 그리고 인덱스를 매개변수로 받아서 작업을 수행할 메소드

    func addTabBarBtn(btn:UIButton, title:String, tag:Int){

        btn.setTitle(title, for: .normal)

        btn.tag = tag

        

        btn.setTitleColor(UIColor.white, for: .normal)

        btn.setTitleColor(UIColor.yellow, for: .selected)

        

        //버튼에 메소드 연결

        btn.addTarget(self, action: #selector(onTabBarItemClick(_ :)), for: .touchUpInside)

self.csView.addSubview(btn)

    }

    

    @objc func onTabBarItemClick(_ sender:UIButton){

        tabItem1.isSelected = false

        tabItem2.isSelected = false

        tabItem3.isSelected = false

        

        sender.isSelected = true

        

        self.selectedIndex = sender.tag

    }

    

6)CustomTabBarController.swift 파일의 viewDidLoad 메소드 재정의

    override func viewDidLoad() {

                // 기존 탭 바를 숨김 처리

        self.tabBar.isHidden = true

        

        // 새로운 탭 바 역할을 할 뷰를 위해 기준 좌표와 크기를 정의합니다.

        let width = self.view.frame.width // ①

        let height: CGFloat = 50 // ②

        let x: CGFloat = 0 // ③

        let y = self.view.frame.height - height // ④

        

        // 정의된 값을 이용하여 새로운 뷰의 속성을 설정합니다.

        self.csView.frame = CGRect(x: x, y: y, width: width, height: height)

        self.csView.backgroundColor = UIColor.white

        self.view.addSubview(self.csView)

        

        //버튼의 너비와 높이를 설정한다.

        let tabBtnWidth = self.csView.frame.size.width / 3

        let tabBtnHeight = self.csView.frame.height

        

        //버튼의 영역을 차례로 설정한다.

        self.tabItem1.frame = CGRect(x: 0, y: 0, width: tabBtnWidth, height: tabBtnHeight)

        self.tabItem2.frame = CGRect(x: tabBtnWidth, y: 0, width: tabBtnWidth, height: tabBtnHeight)

        self.tabItem3.frame = CGRect(x: tabBtnWidth * 2, y: 0, width: tabBtnWidth, height: tabBtnHeight)

        

        //버튼의 공통 속성을 설정하고, 뷰에 추가한다.

        self.addTabBarBtn(btn: self.tabItem1, title: "첫 번째 화면", tag: 0)

        self.addTabBarBtn(btn: self.tabItem2, title: "두 번째 화면", tag: 1)

        self.addTabBarBtn(btn: self.tabItem3, title: "세 번째 화면", tag: 2)

        

        // 처음에 첫 번째 탭이 선택되어 있도록 초기 상태를 정의해 준다.

        self.onTabBarItemClick(self.tabItem1)

 

 

    }

    

7)스토리보트에서 탭 바 컨트롤러의 Class를 변경

 

 

**NavigationBar의 크기를 수정

=>NavigationBar, TabBar, ToolBar, ActivityIndicatorView 등 몇 몇 콘텐츠는 크기가 고정

크기가 고정인 뷰 들의 크기를 변경하고자 할 때는 속성을 이용해서는 할 수 없고 클래스를 서브클래싱 해서 수정해야 합니다.

=>sizeThatFits 메소드를 재정의 해서 크기를 설정해야 하고 layoutSubviews 메소드를 재정의 해서 하위 뷰들의 크기를 조절해 주어야 합니다.

 

1.UINavigationBar로 부터 상속받는 클래스를 생성 : CustomNavigationBar

 

2.CustomNavigationBar.swift 파일에 높이로 사용할 값을 인스턴스 변수로 생성

    //높이로 사용할 값을 설정

    var customHeight : CGFloat = 200

 

3.CustomNavigationBar.swift 파일에 sizeThatFits 메소드를 재정의

    //크기를 설정하는 메소드 재정의

    override func sizeThatFits(_ size: CGSize) -> CGSize {

        return CGSize(width: UIScreen.main.bounds.width, height: customHeight)

    }

 

4.CustomNavigationBar.swift 파일에 layoutSubviews 메소드를 재정의

    //하위 뷰들의 배치를 해주는 메소드

    override func layoutSubviews() {

        super.layoutSubviews()

        

        //생태 바의 높이를 가져와서 프레임을 다시 설정

        let y = UIApplication.shared.statusBarFrame.height

        frame = CGRect(x:frame.origin.x, y:y, width:frame.size.width, height: customHeight)

        

        //모든 하위 뷰들을 순회

        for subview in self.subviews{

            var stringFromClass = NSStringFromClass(subview.classForCoder)

            //하위 뷰 중에서 Bar 와 관련된 뷰들의 배경색을 네비게이션 바의 색상과 동일하게 설정

            if stringFromClass.contains("BarBackground"){

                subview.frame = CGRect(x: 0, y: 0, width: self.frame.width, height: customHeight)

                subview.backgroundColor = self.backgroundColor

            }

            

            stringFromClass = NSStringFromClass(subview.classForCoder)

            if stringFromClass.contains("BarContent"){

                subview.frame = CGRect(x: 0, y: 20, width: self.frame.width, height: customHeight)

                subview.backgroundColor = self.backgroundColor

            }

        }

    }

 

5.사용할 NavigationBar의 클래스를 CustomNavigationBar로 변경

 

 

**외부 라이브러리를 이용한 UICustomizing

1.외부 라이브러리를 사용하는 방법

1)직접 다운로드 받아서 파일을 프로젝트에 복사한 후 사용

2)의존성 설정 프레임워크를 이용 - 의존성 설정 파일에 작성을 하면 프레임워크가 자동으로 다운로드 받아서 사용할 수 있도록 빌드를 해주는 방식

 

2.iOS에서의 외부 라이브러리

=>git hub에서 다운로드 받는 경우가 많음 : google 이나 책 등에서 외부 라이브러리의 주소를 가져와서 사용

=>의존성 설정 프레임워크로는 cocoa pods 가 가장 많이 사용

=>cocoa pods 사용을 권장

 

=>iOS에서 발생하는 외부 라이브러리 사용의 문제점

    이전에 사용하던 언어인 Objective-C 로 되어 있는 경우 브릿지 헤더 파일을 만들어서 사용해야 합니다.

 

    iOS가 업데이트가 빈번히 발생해서 이전에 작성한 코드들이 제대로 작동이 안되는 경우가 발생

      프레임워크의 변화 : CGFloat 과 같은 자료구조 클래스가 Foundation 프레임워크에 있었는데 구조체로 변경되면서 UIKit으로 이동됨

      전역함수들이 클래스의 인스턴스 메소드 나 클래스 메소드로 변경 - 코드에 경고 아이콘이 생기면 읽어보면 어떤 메소드로 변경되었는지 알 수 있음

      enum의 값이 변경 : 상수는 모두 대문자로 작성하는 것이 관례였지만 최근에 iOS에서는 모두 소문자로 표현

      이전 샘플 코드와 다른점 : 전에는 시작하면 바로 수행해야 하는 작업을 AppDelegate 파일에 작성했는데 지금은 SceneDelegate 도 있음

                                     이전에는 window 객체가  AppDelegate 인스턴스에서 생성되었는데 지금은 SceneDelegate 에서 생성됩니다.

      SceneDelegate는 iOS 13에서 추가됨    

 

 

**Side Bar

1.사용

1)https://github.com/John-Lluch/SWRevealViewController 에서 다운로드

=>git hub에서 다운로드 받을 때는 [Source Control] - [Clone] 을 선택하고 URL을 입력하면 됩니다.

 

2)프로젝트를 생성

 

3)프로젝트에 다운로드 받은 프로젝트의 SWRevealViewController.h 파일과 SWRevealViewController.m 파일을 복사

=>브릿지 헤더 생성 여부를 물어보면 생성한다고 선택

 

4)브릿지 헤더 파일에 #import "SWRevealViewController.h" 를 입력해서 Obejctive-C 로 만들어진 내용을 Swift 에서 사용할 수 있도록 해주어야 합니다.

 

5)필요한 이미지 복사

 

6)기본적으로 제공되는 뷰 컨트롤러의 클래스르 변경 - SWRevealViewController

 

7)메뉴로 사용할 TableViewController를 화면에 화면에 배치하고 ViewController에서 control을 누른 채 드래그 앤 드랍하고 reveal view controller set controller를 선택 한 후 세그웨이의 identifier를 sw_rear 로 설정

 

8)UIViewController 로 부터 상속받는 클래스를 생성 - FrontViewController

 

9)스토리보드 ViewController를 추가하고 Class를 FrontViewController로 설정하고 Navigation Controller를 추가

 

10)스토리보드에서 ViewController에서 Navigation Controller로 세그웨이를 만드는데 reveal view controller set controller를 선택하고 세그웨이의 identifier를 sw_front로 설정

 

11)FrontViewController의 네비게이션 바 왼쪽에 바 버튼을 추가하고 이미지(sidemenu.png)를 설정하고 변수로 연결 - sideBarButton

 

12)FrontViewController.swift 파일의 viewDidLoad 메소드에 버튼을 누르면 테이블 뷰 컨트롤러가 토글되는 기능을 작성

        //사이드 바 버튼을 누르면 테이블 뷰 컨트롤러가 토글 됩니다.

        if let revealVC = self.revealViewController(){

        self.sideBarButton.target = revealVC

        self.sideBarButton.action = #selector(revealVC.revealToggle(_:))

        

        //스와이프 할 때도 동작하도록 설정

        self.view.addGestureRecognizer(revealVC.panGestureRecognizer())

        }

 

=>필요한 컨트롤러: SWRevealViewController, 메뉴로 사용할 TableViewController,  항목을 보여줄 뷰 컨드롤러 들 이 있어야 함

 

 

 

**SideMenu

1.프로젝트 생성

 

2.프로젝트에서 사용하라 이미지 들을 프로젝트에 복사

 

3.SWRevealViewController.h 파일과 SWRevealViewController.m 파일을 프로젝트에 복사

 

4.복사할 때 Bridging Header File을 만든다고 선택하고 파일이 생성되면 파일에 입력

#import "SWRevealViewController.h"

 

5.UITableViewController 로 부터 상속받는 클래스를 생성 - SideBarVC : 메뉴 역활

 

6.첫번째 화면으로 사용할 뷰 컨트롤러 클래스를 생성 - UIViewController를 상속받은 MainVC

 

7.메뉴에서 눌렀을 때 보여질 뷰 컨트롤러 클래스를 생성 - UIViewController를 상속받은 WriteVC

 

8.Storyboard 에 2개의 ViewController를 추가하고 Class를 MainVC, WriteVC 로 설정하고 Storyboard ID 도 설정

 

9.Storyboard 에 TableViewController를 추가하고 Class를 SideBarVC 로 설정하고 Storyboard ID도 설정

 

10.ViewController의 클래스를 SWRevealViewController로 변경

 

11.SWRevealViewController를 선택하고 SideBarVC 로 세그웨이(reveal viewcontroller set view controller)를 만들고 identifier 를 sw_rear 로 설정

 

12.첫화면에 보여질 뷰 컨트롤러에 NavigationController를 추가하고 SWRevealViewController 에서 Navigation Controller로 세그웨이(reveal viewcontroller set view controller)를 만들고 sw_front로 설정

 

 

13.SideBar 메뉴 만들기 - SideBarVC 클래스에서 수행

1)출력할 문자열 배열 생성

    let titles = ["새글 작성", "친구 글", "달력", "공지사항", "통계", "계정"]

  

 

2)출력할 이미지 파일의 이름 배열 생성

  let icons = [

        UIImage(named: "icon01.png"),

        UIImage(named: "icon02.png"),

        UIImage(named: "icon03.png"),

        UIImage(named: "icon04.png"),

        UIImage(named: "icon05.png"),

        UIImage(named: "icon06.png")]

 

3)출력 관련 메소드 생성

    // MARK: - Table view data source

    override func numberOfSections(in tableView: UITableView) -> Int {

        return 1

    }

 

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

        return titles.count

    }

 

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        

        var cell = tableView.dequeueReusableCell(withIdentifier: "cell")

        if cell == nil{

            cell = UITableViewCell(style: .default, reuseIdentifier: "cell")

        }

 

        cell!.imageView?.image = icons[indexPath.row]

        cell!.textLabel?.text = titles[indexPath.row]

 

        return cell!

    }

 

14.SideBarVC.swift 파일에 셀을 눌렀을 때 호출되는 메소드를 생성 : 행 번호를 파악해서 필요한 뷰 컨트롤러를 출력

   //셀을 선택했을 때 호출되는 메소드

    override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {

        if indexPath.row == 0{

            let writeVC = self.storyboard?.instantiateViewController(withIdentifier: "WriteVC")

            let target = self.revealViewController()?.frontViewController as! UINavigationController

            target.pushViewController(writeVC!, animated: true)

            self.revealViewController()?.revealToggle(self)

        }

    }

 

15.storyboard 에서 메인 뷰 컨트롤러의 네비게이션 바의 왼쪽에 BarButtonItem을 추가하고 변수를 연결 - sideBarButton

 

16.MainVC.swift 파일의 viewDidLoad 메소드에 코드 작성

        if let revealVC = self.revealViewController(){

            self.sideBarButton.target = revealVC

            self.sideBarButton.action = #selector(revealVC.revealToggle(_:))

            self.view.addGestureRecognizer(revealVC.panGestureRecognizer())

        }