iOS ) 왕초보를 위한 xib 사용법

안녕하세요 :) Zedd입니다.

오늘은....xib사용법입니다.

참고로 TableViewCell로  xib를 만들거에요 XD

왕초보를 위한 xib 사용법

---

tableView를 사용하려고 하면 이렇게 많이?..하실거에요!!

하지만, xib를 사용하면 이렇게 TableView안에 TableView Cell넣고..안그래도 됩니다.

차근차근 해봐요!

1. 프로젝트 생성.

2. Main 스토리보드로 이동 > TableView추가

이제 TableViewCell을 추가해야할 것 같지만...

아닙니다. 

3. 새로운 Cocoa Touch Class 파일 생성 > TableViewCell

그리고...

Subclass를 UITableViewCell로 해주신뒤, 이름을 지정해주시고

Also create XIB file을 체크해주세요 :)

4. 방금 만든 xib파일 클릭

자, 방금 만든 우리의 xib를 클릭해보면

이렇게 TableViewCell만 덩그러니 있는 것을 볼 수 있습니다...

5. Cell 커스텀

스토리보드와 똑같이 인터페이스 요소를 추가할 수 있는 inspector도 있죠?

뒤에 TableView가 있다~생각하고 인터페이스 요소를 추가해주세요.

아 cell이 넘 작은데요 ㅎ;

에서 Cell높이를 조절가능합니다. Cell 바깥쪽을 클릭하셔야지, Cell 안쪽을 클릭하면 Width와 Height가 조절 안되게 비활성되 되어있습니다. 주의하세요!

쨘ㅎ

참고로, 아까 xib와 같이 만든 Swift파일있잖아요? 

그 파일과 이 xib를 연결시켜줘야 할것 같지만,

이미 연결 되어 있는 부분

6. IBOutlet을 따주자.

ㅎ_ㅎ

7. 중요한작업 : identifier지정해주기

자..우리 TableView하면 맨날...identifier해줘야하자나요..

xib도 예외는 아닙니다.

xib파일로 가주세요.

이렇게 identifier를 지정해줍니다.

8. main스토리보드로 가자

우리가 잠깐...깜빡한..이아이...도 IBOutlet을 따줘야겠죠?

8. UITableViewDelegate, UITableViewDataSource채택 후, optional이 아닌 메소드 추가.

9. 대리자 위임

10. 데이터 생성

음..뭐라해야할지 몰라서 데이터 생성이라고 해놨는데, TableView에 들어갈 데이터들을 말하는거에요!!

저는 그냥 Array하나 만들어줄게요.

11. ViewController.swift의 viewDidLoad()로 가준다.

자. 이제 기본적인건 다 끝났고, 이제 따로따로있는 TableView와 TableViewCell을 "연결"시켜줘야합니다.

ViewController.swift의 viewDidLoad()로 가주세요.

let nibName = UINib(nibName: "MyTableViewCell", bundle: nil)
tableView.register(nibName, forCellReuseIdentifier: "zeddCell")

그리고 위 코드를 추가해주세요. (왜 여기서는 UIXib를 쓰지않고 UINib을 쓰는지는 잘 모르겠지만, 빌드시에 xib가 nib로 변환된다고 합니다 :))

첫번째 줄은, 아까 우리가 만든 xib파일 이름이 들어갑니다. 그리고 두번째줄에서 우리의 TableView에 xib를 "등록" 시켜주는 것이죠. 연결해주는 코드라고도 볼 수 있겠네요.

12. DataSource 메소드들을 구현해주자.

아까 우리 8번에서 UITableViewDelegate, UITableViewDataSource채택 후, optional이 아닌 메소드 추가해줬었죠?

이제 구현하러가봅시다. 

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return arr.count

    }

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

        let cell = tableView.dequeueReusableCell(withIdentifier: "zeddCell", for: indexPath) as! MyTableViewCell

        cell.myLabel.text = arr[indexPath.row]

        cell.myImageView.image = UIImage(named: "zedd")

        cell.myLabel.sizeToFit()

        return cell

    }

이렇게요 :)

우리가 xib를 사용하지 않고 했을때랑 똑같죠? 

이제 실행해보면..

이렇게 잘~~나오는 것을 볼 수 있습니다. 

오늘은 xib를 사용하는 정말 그 기초적인 "방법"을 배웠는데, 잘 이해가 가셨나요 :)...

도움이 되었으면 좋겠습니다 ~.~