[iOS] Swift 라이브러리 'SideMenu'로 사이드바 구현하기 - 2

Swift 라이브러리 'SideMenu'로 사이드바 구현하기 - 1 에서 이어집니다.

 

1.3 사이드메뉴 화면 구성

지난 포스팅에서 안넣은 내용이 있어서....

사이드메뉴에 보일 화면을 원하는 모습대로 스토리보드로 구성해준다. 내용이 보일 Label 하나와 Button 하나를 넣어줬다. 여기까지 하면 진짜 구성 완료!

---

2. 코드 설정

2.1 코드 초기 설정

프로젝트 폴더 내에서 New Group을 두번 추가해 다음과 같이 폴더를 생성해주고, UITableViewCell 형식의 MenuItemCell.swift 파일과 UIViewController 형식의 MainController.swift, SideMenuController.swift 파일 두개를 각각 View, Controller 폴더에 생성해준다.

그리고 스토리보드에서 초기 화면의 View Controller의 Class는 MainController로, Side Menu Navigation Controller에 딸려있는 View Controller의 Class는 SideMenuController로 설정해준다. 그리고 SideMenuController 내의 Table View Cell의 Class는 MenuItemCell을 설정해주고, Identifier에는 편한 이름을 할당해준다. 나는 클래스 그대로 MenuItemCell로 하였다.

 

Main Controller와 Side Menu Navigation Controller 모두 원하는 대로 화면을 구성해준 다음, 스토리보드에서 Assistant를 이용하여 요소들을 연결해준다.

 

2.2 코드

사이드메뉴와 관련해서 MainController.swift에서는 작업해줄 별 다른 기능이 없고, SideMenuController.swift 파일에서 다음과 같이 코드를 작성해준다.

 

// SideMenuController.swift
import UIKit

class SideMenuController: UIViewController {
    var items = ["게시판1", "게시판2", "게시판3", "게시판4"]

    @IBOutlet weak var tableView: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        tableView.dataSource = self
        talbeView.delegate = self
    }
}

extension SideMenuController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return items.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "MenuItemCell", for: indexPath) as! MenuItemCell
        cell.menuLabel?.text = items[indexPath.row]
        
        return cell
    }
    
}

 

여기까지만 하고 실행시키면 다음과 같은 화면이 나온다.(버튼은 임의의 이미지를 설정해주었음)

 

 

---

3. 부가 설정

3.1 다음 화면 연결

게시판을 선택했으면 다음 화면으로 넘어가야되는 기능도 있어야 된다고 생각해서, 추가적으로 넣었다. 스토리보드에 Navigation Controller를 추가하고, 마찬가지로 Root View Controller Scene을 삭제하고 View Controller로 대체한다. 그럼 Main.storyboard에 총 6개의 씬이 생성된다.

단순히 화면이 맞게 넘어가는지를 테스트해보기 위한 예제이기 때문에, View Controller 내에 다음과 같이 Label 하나만 넣어줬는데 실제로는 임의로 화면을 구성해도 상관없다.

 

Controller 폴더 내에 MenuController.swift 라는 파일을 새로 생성해준 뒤, 스토리보드에서 새로 만든 컨트롤러와 요소들을 연결해준다.

 

만들어준 뒤 스토리보드에서 Side Menu Controller Scene과 Menu Controller Scene 둘을 연결해주고, 연결선(Segue)의 Identifier를 설정해준다.

 

여기까지 하고, MenuController.swift파일의 코드를 다음과 같이 작성해준다.

// MenuController.swift
import UIKit

class MenuController: UIViewController {
    var titleText: String? = nil
    @IBOutlet weak var titleLabel: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        titleLabel.text = titleText
    }
}

 

다시 SideMenuController.swift로 돌아와서, 코드를 다음과 같이 추가해준다.

//  SideMenuController.swift
import UIKit

class SideMenuController: UIViewController {
    var items = ["게시판1", "게시판2", "게시판3", "게시판4"]

    @IBOutlet weak var tableView: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        tableView.dataSource = self
        tableView.delegate = self
    }
    
    // 추가 코드
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if segue.identifier == "linkSelected" {
            let vc = segue.destination as! MenuController
            vc.titleText = sender as! String
        }
    }
    
}

extension SideMenuController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return items.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "MenuItemCell", for: indexPath) as! MenuItemCell
        cell.menuLabel?.text = items[indexPath.row]
        
        return cell
    }
    
}

// 추가 코드
extension SideMenuController: UITableViewDelegate {
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        let title = items[indexPath.row]
        performSegue(withIdentifier: "linkSelected", sender: title)
    }
}

 

여기까지 하고 실행하면 다음과 같이 나온다. 라벨이 잘려보일 수 있는데, 그럴 땐 라벨의 사이즈를 키우면 된다.

 

3.2 추가 기능

게시판1에 갔다가 게시판2로 가기 위해서 메인 화면을 다시 거쳤다가 가는 것이 아니라 실제 게시판 어플들처럼 게시판 내에서 다른 게시판으로 이동하고 싶다면, Menu Controller Scene의 왼쪽에 bar button item을 추가해주면 된다.

 

그런 뒤에 똑같이 Menu Controller 내의 왼쪽 바 버튼을 Side Menu Navigation Controller와 연결해주면 다음과 같이 작동한다!

그 외에 메뉴 화면의 상단에 홈버튼을 집어넣어 메인화면으로 돌아가는 기능, 사이드메뉴의 버튼을 눌러 관심 게시판으로 설정하는 것 처럼 이미지를 바꾸는 기능 등을 추가적으로 넣어 완성한 최종 예제 모습은 다음과 같이 작동한다.

 

 

전체 소스코드 : https://github.com/miiinnn23/SideMenuTutorial