iOS 앱 개발 여정 - List와 Grid

UIKit - List와 Grid 사용

리스트와 그리드 뷰는 iOS 앱 화면 구성에 필수적임

UIKit의 UITableView(싱글 컬럼) 혹은 UICollectionView(멀티 컬럼) 클래스를 사용하며, 주로 후자를 사용

UICollectionView는 Data(무슨 데이터를 사용할지), Presentation(데이터를 셀에 어떻게 표현), Layout(셀을 화면에 어떻게 배치)으로 구성

스토리보드 구성: 콘텐츠 뷰(이미지, 레이블, 버튼 등의 조합) → 셀뷰 → 콜렉션 뷰

 

출처 https://uxmovement.com/mobile/list-vs-grid-view-when-to-use-which-on-mobile/

 

★ 프로젝트 StockRank ★

StockRankViewController와 StockRankCollectionViewCell 2개의 Swift 코드를 만들어 스토리보드와 연동!

※ 이준원님의 "나만의 iOS 개발 입문(Fastcampus 바이트디그리)" 강좌 내 실습 프로젝트에서 가져옴

 

//  StockRankViewController.swift

import UIKit

// 전체 뷰 제어 클래스
class StockRankViewController: UIViewController {

    // 'StockMode' 데이터로부터 리스트 가져오기
    let stockList: [StockModel] = StockModel.list
    
    // UICollectionView 사용 변수 정의
    @IBOutlet weak var collectionView: UICollectionView!
    
    // 로딩 시 뷰
    override func viewDidLoad() {
        super.viewDidLoad()


        // Data & Presentation
        collectionView.dataSource = self
        // Layout
        collectionView.delegate = self
    }
}

// Data & Presentation 확장
extension StockRankViewController: UICollectionViewDataSource {
    
    // 섹션 내 아이템 갯수
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return stockList.count
    }
    
    // 해당 아이템에 대한 셀 설정
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "StockRankCollectionViewCell", for: indexPath) as? StockRankCollectionViewCell else {
            return UICollectionViewCell()
        }
        
        // 리스트 아이템별로 셀 설정
        let stock = stockList[indexPath.item]
        cell.configure(stock)
        return cell
    }
}

// Layout 확장
extension StockRankViewController: UICollectionViewDelegate {
    
}

// UICollectionView 크기 설정을 위한 확장
extension StockRankViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: collectionView.bounds.width, height: 80)
    }
}

//  StockRankCollectionViewCell.swift

import UIKit

// 셀 뷰 제어 클래스
class StockRankCollectionViewCell: UICollectionViewCell {

    // 셀의 아웃렛 정의: 순위, 회사로고, 회사명, 주가, 등락율
    @IBOutlet weak var rankLabel: UILabel!
    @IBOutlet weak var companyIconImageView: UIImageView!
    @IBOutlet weak var companyNameLabel: UILabel!
    @IBOutlet weak var companyPriceLabel: UILabel!
    @IBOutlet weak var diffLabel: UILabel!
    
    // 셀 설정 함수
    func configure(_ stock: StockModel) {
        rankLabel.text = "\(stock.rank)"
        companyIconImageView.image = UIImage(named: stock.imageName)
        companyNameLabel.text = stock.name
        companyPriceLabel.text = "\(convertToCurrencyFormat(price: stock.price)) 원"
        
        // 등락율 +/-에 따른 색 구분
        diffLabel.textColor = stock.diff > 0 ? UIColor.systemRed : UIColor.systemBlue
        diffLabel.text = " \(stock.diff)%"
    }
    
    // 가격 숫자 표시를 deimal 문자로 변경 함수 (NumberFormatter 사용)
    func convertToCurrencyFormat(price: Int) -> String {
        let numberFormatter = NumberFormatter()
        numberFormatter.numberStyle = .decimal
        numberFormatter.maximumFractionDigits = 0
        return numberFormatter.string(from: NSNumber(value: price))!
    }
}

 

느낀점!

• 멀티 디바이스를 고려해 오토 레이아웃 및 Constraint 설정(사면, 정렬, 간격, 크기 등)은 필수이며 중요
• 스토리보드 내 레이아웃 작업이 매우 정교해야 함(흡사 파워포인트 작업?)
• Xcode 사용법 및 단축키에 좀 더 익숙해져야 함
• 코딩 문법과 라이브러리는 여전히 어려움

Tips:

- Constraint 업데이트 단축키는 Opt + Cmd + "+"

- Crash 발생 시 대처: 1) Indentifier 설정이 잘 되어있는지 확인, 2) IBOutlet 변수의 연결을 확인(코드의 왼쪽 동그라미 확인!)

 

 

gt6606b님의 회원 가입을 진심으로 축하합니다. 이 글은 비공개로 작성돼 있습니다.
'편집'으로 내용을 바꾸시거나, 삭제 후 '새 글을 작성'하셔도 됩니다.
글 뿐만 아니라 블로그의 각종 설정을 변경할 수도 있습니다. '블로그관리'를 확인해보세요.

 

#2 다양한 스킨이 있어요.

티스토리에 있는 다양한 '스킨'도 살펴 보세요.
블로그나 사이트를 사용하는 목적에 맞게 스킨을 고를 수 있습니다.
어떤 이야기를 주로 하실 건가요? 잘 생각해 보시고, 마음에 드는 스킨을 고르세요.
'스킨 편집'을 통해 다양한 커스텀, 그리고 홈 꾸미기를 적용하실 수도 있답니다.

 

#3 포럼에서 사람들과 소통하세요.

마지막으로 사용하시다가 티스토리에 대해 궁금한 내용이 있다면 '포럼'을 확인하세요.
찾기 어려울 땐 직접 질문을 해보는 건 어떨까요? 친절한 티슷터 분들이 바로 답변해 줄 거에요.