ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • UIkit 테이블 뷰 구성
    카테고리 없음 2024. 10. 24. 14:15

    안녕하세요! 오늘은 Uikit 을 공부하면서 처음으로 만들어본 테이블 뷰입니다!! 

     

    선소감

    아무런 흐름도 모르는채 구성한 뷰, 로직이라서 팀원분이 구성해주신 코드도 너무 어렵다는 생각밖에 없었습니다!

    하지만 스유랑 비교하면서 느껴보니 조금은 와닿는거 같네요! 본격적으로 시작해보겠습니다!

    필요 기능 

    제가 필요했던 기능은 리스트였어요! 스유에서는 리스트 라고 빡 밖으면 자동으로 삭제 로직까지 달아서 만들어준답니다.!

    (SwiftUI) 짱.. 
    리스트가 쉬운대신,,, 테이블이 어렵답니다. 여하튼간에, Uikit 에서는 리스트도 테이블뷰로 짜더라구요 ! 그리고 테이블뷰는 

    셀과 틀이 따로 있다고 나름대로 생각을 했답니다.

     

    구현 

    이제 여러분이 원하는 코드 들어갑니다잇 그전에.. 같이 공부하고 계시는 팀원중,, 저와 진실의 방을 자주 가셨던 ,,, 그분,, 너무 
    감사합니다! 


    import UIKit
    
    class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
    
        // 멤버 데이터를 저장할 배열
        var members: [(profileImage: String?, name: String, introduce: String, mbti: String?)] = []
    
        // 테이블 뷰
        let tableView = UITableView()
    
        override func viewDidLoad() {
            super.viewDidLoad()
            
            // 테이블 뷰 설정
            setupTableView()
    
            // 멤버 추가 (임의 데이터)
            members.append((profileImage: "person.fill", name: "홍길동", introduce: "안녕하세요", mbti: "INTJ"))
        }
    
        // 테이블 뷰 레이아웃 설정
        func setupTableView() {
            tableView.translatesAutoresizingMaskIntoConstraints = false // 오토레이아웃 설정
            tableView.delegate = self
            tableView.dataSource = self
            tableView.register(UITableViewCell.self, forCellReuseIdentifier: "cell")
            view.addSubview(tableView)
            
            NSLayoutConstraint.activate([
                tableView.topAnchor.constraint(equalTo: view.topAnchor),
                tableView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
                tableView.leftAnchor.constraint(equalTo: view.leftAnchor),
                tableView.rightAnchor.constraint(equalTo: view.rightAnchor)
            ])
        }
    
        // UITableViewDataSource 메서드 (테이블 뷰에 멤버 데이터를 표시)
        func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
            return members.count
        }
        
        func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
            let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
            let member = members[indexPath.row]
            cell.textLabel?.text = "\(member.name) - \(member.mbti ?? "MBTI 없음")"
            cell.imageView?.image = UIImage(named: member.profileImage ?? "person.fill")
            return cell
        }
        
        // 셀 높이 설정
        func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
            return 90.0
        }
    
        // 셀 선택시 선택 해제
        func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
            tableView.deselectRow(at: indexPath, animated: true)
        }
    
        // 왼쪽으로 슬라이드하여 삭제
        func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCell.EditingStyle, forRowAt indexPath: IndexPath) {
            if editingStyle == .delete {
                members.remove(at: indexPath.row)
                tableView.deleteRows(at: [indexPath], with: .automatic)
            }
        }
    }

     

    대신 약간의 아쉽지만 좋은점은 좋게말하면 커스텀이 편하고 나쁘게 말하면 귀찮다는점이 있습니다! (몰라요 내생각임)

    위 소스에서는 다른 뷰컨트롤러에서 delegate 패턴으로 받아온 데이터를 바인딩(?) 여기서도 이렇게 부르는지는 모르겠지만,, 
    여하튼 다른페이지에 데이터를 불러다가 리스트 형식의 테이블로 뿌려야했기에.. 배열을 만들어서 배열요소를 추가해 계속 붙여

    넣었습니다! append 활용이야,, 코테에서 자주 사용하죠,,! 그렇게 했답니다!

     

    결론

    팀원분의 많은 도움덕에 다른 뷰컨트롤과의 delegate 를 활용한 데이터바인딩, delegate 의 작동원리등을 꽤 고민하며 코드를 작성

    하였습니다! 생각보다 재밌긴한데.. 인정하기 싫은느낌이네용,, (확실히 키워드에 대한 정보도 많은듯 {오래되서 (?)}) 이런 코딩을 하며

    오늘도 성장한 기분을 받으며 내일은 flutter 면접을 봐야겠네요 ㅋㅋㅋㅋ 다들 화이팅입니다! 

Designed by Tistory.