iOS Swift 라이브러리 Expandable TableView 사용하기

안녕하세요 Gons 입니다.

오늘은 접었다 펼 수 있는 테이블뷰

ExpyTableView 를 사용해보겠습니다.

 

 

이렇게 생겼고요

ExpyTableView

시작하겠습니다.

 

 

 

 

 

 

 

라이브러리를 설치해주세요.

pod 'ExpyTableView'

※ 설치방법을 모르시면 이전 포스팅 코코아팟 설치 방법을 보고 와주세요.

 

 

 

라이브러리를 추가해주세요.

import ExpyTableView

※ 여기서 import 에 ExpyTableView 가 안뜨시는분은 커맨드⌘ + B 를 눌러서 한번 빌드하신 후에 진행해주세요.

 

 

 

 

스토리보드에서 테이블뷰 와 Cell 을 하나 추가해주세요.

Custom Class - ExpyTableView

테이블뷰를 선택하고

Identity inspector 탭에 

Custom Class 에

Class 란에

ExpyTableView 를 입력하고 리턴↩︎(엔터)을 눌러주세요.

 

 

 

 

 

 

 

아울렛변수로 등록하고 시작하겠습니다.

@IBOutlet var myTableView: ExpyTableView!

 

 

 

 

 

delegate 와 dataSource 를 상속받아주세요.

class ViewController10: UIViewController, ExpyTableViewDelegate, ExpyTableViewDataSource {

 

 

 

 

그러면 이런 문구가 나올텐데 필수 프로토콜을 안썼다는 뜻입니다.

빨간색 느낌표를 눌러주세요.

 

 

 

Fix 를 눌러서 필수 프로토콜들을 추가해줍니다.

 

 

 

 

다들 이렇게 나왔나요?

func tableView(_ tableView: ExpyTableView, expyState state: ExpyState, changeForSection section: Int) {
	<#code#>
}

func tableView(_ tableView: ExpyTableView, canExpandSection section: Int) -> Bool {
	<#code#>
}

func tableView(_ tableView: ExpyTableView, expandableCellForSection section: Int) -> UITableViewCell {
	<#code#>
}

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
	<#code#>
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
	<#code#>
}

 

 

 

 

 

델리게이트와 데이터소스 누가 처리할지 써줍니다.

override func viewDidLoad() {
        super.viewDidLoad()

        myTableView.delegate = self
        myTableView.dataSource = self
}

 

 

 

 

 

자 그럼 연습을 위해 데이터로 쓸 간단한 배열 하나 만들어주시고요

let arraySection0: Array<String> = ["section0_row0","section0_row1","section0_row2"]
let arraySection1: Array<String> = ["section1_row0","section1_row1","section1_row2","section1_row3"]

 

 

 

 

 

 

프로토콜을 하나씩 작성해보겠습니다.

 

 

expyState 는 섹션이 열리고 닫히는걸 확인할 수 있습니다.

// 열리고 닫힐 때 확인
    func tableView(_ tableView: ExpyTableView, expyState state: ExpyState, changeForSection section: Int) {
        print("\(section)섹션")
        
        switch state {
        case .willExpand:
         print("WILL EXPAND")

        case .willCollapse:
         print("WILL COLLAPSE")

        case .didExpand:
         print("DID EXPAND")

        case .didCollapse:
         print("DID COLLAPSE")
        }
    }

열리는중, 열림, 닫히는중, 닫힘을 확인할 수 있습니다.

 

 

 

 

 

 

 

canExpandSection 은 확장기능 활성화 여부입니다.

// Expand 활성화 여부 (true 가능 , false 면 다 펼쳐진 상태로 나오고 접었다 폈다 안됨)
func tableView(_ tableView: ExpyTableView, canExpandSection section: Int) -> Bool {
	return true
}

true 열고 닫는거 가능 , false 다 펼쳐진 상태로 나오고 접었다 폈다 안됨

 

 

 

 

 

 

 

 

expandableCellForSection 은 섹션 내용을 작성하는 곳입니다.

    //섹션 내용
    func tableView(_ tableView: ExpyTableView, expandableCellForSection section: Int) -> UITableViewCell {
        
        let cell = UITableViewCell()
        cell.backgroundColor = .systemGray6 //백그라운드 컬러
        cell.selectionStyle = .none //선택했을 때 회색되는거 없애기
        
        if section == 0 {
            cell.textLabel?.text = arraySection0[0]
        } else {
            cell.textLabel?.text = arraySection1[0]
        }
        
        return cell
    }

cell 을 여러분이 만든 커스텀셀로 설정하시면 됩니다. 저는 간단하게 기본셀로 했습니다.

 

 

 

 

 

 

 

numberOfRowsInSection 은 row 갯수를 리턴합니다.

    //row 갯수
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        
        if section == 0 {
            return arraySection0.count
        } else {
            return arraySection1.count
        }
    }

아까 우리 같이 만든 배열 갯수로 리턴해주고요

 

 

 

 

 

 

 

cellForRowAt 은 row 내용입니다.

    //row 내용
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        let cell = UITableViewCell()
        
        if indexPath.section == 0 {
            cell.textLabel?.text = arraySection0[indexPath.row]
        } else {
            cell.textLabel?.text = arraySection1[indexPath.row]
        }
        
        return cell
    }

여기도 row 로 사용하실 cell 을 만들어서 넣으시면 됩니다. 저는 연습이기때문에 기본 셀로 했고요.

 

 

 

 

 

 

 

numberOfSections 는 섹션 갯수를 설정합니다.

//섹션 갯수
func numberOfSections(in tableView: UITableView) -> Int {
	return 2
}

배열 2개 만들었으니까 2개로 설정해주고요

 

 

 

 

 

 

didSelectRowAt 은 셀을 선택했을 경우 이벤트를 처리합니다.

    // 선택
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        print("\(indexPath.section)섹션 \(indexPath.row)로우 선택됨")
    }

어떤게 눌렸는지 확인해서 이에 맞는 액션을 취해주시면 되고요

 

 

 

 

 

 

heightForRowAt 으로 Cell 높이를 설정합니다.

    // cell 높이
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        if indexPath.row == 0 {
            return 40
        }else {
            return 60
        }
    }

섹션 높이는 40 , 하위 Cell 높이는 60 으로 설정해봤고요.

 

 

 

 

 

여기까지 하고 보면

heightForRowAt

섹션 높이는 40 , 하위 Cell 높이는 60 으로 잘 나오네요.

 

 

 

 

 

 

 

코드로 섹션을 열거나 닫을 수 있습니다.

// section0 열기
myTableView.expand(0)
// section1 닫기
myTableView.collapse(1)  

 

 

 

현재 열려있는지 닫혀있는지 확인할 수도 있고요.

if myTableView.expandedSections == [0 : true] {
	print("0 섹션 열려있음")
}
if myTableView.expandedSections == [0 : false] {
	print("0 섹션 닫혀있음")
}

 

 

 

 

 

 

 

 

자 오늘 이렇게해서 접었다 펴는 테이블뷰 라이브러리를 사용해보았는데요

기본적으로 테이블뷰 속성들을 다 가지고 있어서

편하게 사용하실 수 있을겁니다.

 

 

그러면 저는 또 다음에 유익한 컨텐츠로 돌아오겠습니다.

감사합니다.