[iOS] “Bean Mobility Korea” Application (Day-2 ദ്ദി '֊' ))

어제(Day1)에 이어 오늘은 

table View 안에 xib를 이용한 custom cell을 넣어

내 프로필 화면에 필요한 요소들을 구현해 봅니다.- ̗̀(˶'ᵕ'˶) ̖́- 

---

 

Model 구성

 

dummyData를 아래처럼 ProfileItem 객체의 배열로 구성하고, (즉, dummyData는 ProfileItem 객체의 배열)

각 ProfileItem 객체는 "iconName"과 "title" 이라는 속성을 갖도록 했다. 

    let dummyData: [ProfileItem] = [
        ProfileItem(iconName: "image01", title: "주행 기록"),
        ProfileItem(iconName: "image02", title: "주행 가이드"),
        ProfileItem(iconName: "image03", title: "친구 추천"),
        ProfileItem(iconName: "image04", title: "나의 쿠폰"),
        ProfileItem(iconName: "image05", title: "로그 아웃")
    ]

 

 

VC 섹션을 나누고, TableView xib로 구현

 

상단 프로필 영역 밑에 크게 TableView를 넣어주고,

그 안에 하나하나 prototype cell을 그리는 대신,

xib로 빼내서 편리하게 customizing 해보자.

먼저, TableView 삽입 완료

 

삽입한 TableView는 @IBOutlet으로 연결!

class ProfileViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    
    @IBOutlet weak var table: UITableView!

 

 

ProfileTableViewCell.xib 생성

 

New File을 만들 때 Also create XIB file을 체크하면,

아래처럼 .swft 파일과 .xib 파일이 함께 생성된다.

 

 

.xib 파일의 default는 가래떡 모양이다. 

쌀떡인가 밀떡인가

 

 

이 가래떡을 필요에 따라 마우스로 늘리고,

원하는 위치에 필요한 ImageView과 Label들을  삽입한다.

(storyboard 사용과 아주 비슷)

 

 

각 요소들은 ProfileTableViewCell.swift 파일을 함께 열어서 

@IBOutlet으로 아래처럼 연결해 주었다.

(아래 캡처에서 확인할 수 있듯 UITableViewCell을 상속받고 있다.)

 

 

VC 에서 연결할때 필요하니까, (xib cell 지정하고)  inspector에서 Indentifier도 넣어준다. 

나는 아래로 주루룩 리스트 모양으로 재사용할 예정이기에 "ProfileList "로 명명했다. 

 

 

이제 다시 ProfileViewController 파일로 돌아와, 가래떡의 존재감을 VC에 광고해준다. 

 

 

#1. table.register로 등록! forCellReuseIdentifier: "Identifier(ProfileList)" 

class ProfileViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    @IBOutlet weak var table: UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()

   table.register(UINib(nibName: "ProfileTableCell", bundle: nil), forCellReuseIdentifier: "ProfileList")

 

 

#2. dequeueReusableCell(withIdentifier:for:) 메서드로 보고!

 

(어제 만든 Section당  Row의 수를 정하는) tableView(_:numberOfRowsInSection:) 메서드는 그대로 두고,

    // 여기는 어제와 동일 
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return dummyData.count
    }

 

그 밑에 있는 tableView(_:cellForRowAt:) 메서드에서 

dequeueReusableCell(withIdentifier:for:) 메서드로 .xib 파일에서 Identifier"ProfileList" 경로를 연결하여 재사용할 수 있게 보고 해준다. 재사용할 때 사용할 dummyData 배열의 인덱스 데이터를 가져와서 cell에 보여지게 한다.

 

.xib cell에 삽입한 imageView에는 item.iconName에 해당하는 이미지를,

.xib cell에 삽입한 titleLabel에는 item.title을 설정하도록 한 뒤 cell을 return한다.

  func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "ProfileList", for: indexPath) as! ProfileTableViewCell
        let item = dummyData[indexPath.row]
        
    //  cell.iconImageView.image = UIImage(systemName: "scooter")
        cell.iconImageView.image = UIImage(named: item.iconName)
        cell.titleLabel.text = item.title
    //  cell.selectionStyle = .gray
        
        return cell
    }
}

 

 

 

#3. cell styling

 

table.separatorStyle이나, table.rowHeight을 사용하면

.xib 파일에서 수정하지 않아도 코드로 UI 화면 디자인은 컨트롤 할 수 있다.

class ProfileViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    
    @IBOutlet weak var table: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
   table.register(UINib(nibName: "ProfileTableCell", bundle: nil), forCellReuseIdentifier: "ProfileList")
        
        table.dataSource = self
        table.delegate = self
        table.separatorStyle = .none  // 셀과 셀 사이의 미세한 line을 없애준다
        table.rowHeight = 85          // 각 행(셀)의 높이를 조절
    }

 

 

아이콘 이미지도 넣어서 완성한 오늘의 화면은 여기까지.

 

.xib cell 로 만든 프로필 화면! thanks to HR.S