ios 27일차

회고

본격적으로 과제를 시작하며 오늘 구현한 내용들을 정리하고자 한다. 동작 기능에 대한 정리는 내일 진행하고 오늘은 TableView와 Cell을 속성과 레이아웃 설정한 내용들을 정리하자 !

과제에 관한 기록

1. ItemTableView.swift, ItemCell.swift

우리의 아이템을 리스트로 표시해줄 TableView를 생성했다. 사용되는 셀은 ItemCell을 생성하여 커스텀으로 지정했으며, 셀 내부에는 아이템의 이미지를 표시해줄 itemImageView, 아이템의 이름을 표시해줄 itemNameLabel, 아이템의 가격을 표시해줄 itemPriceLabel이 있다. 각 항목들의 속성과 레이아웃을 잡아주고 이를 MainView에 붙여넣어서 사용한다.

• ItemTableView.swift

import UIKit
import SnapKit

class ItemTableView: UITableView {
    override init(frame: CGRect, style: UITableView.Style) {
        super.init(frame: frame, style: style)
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

• ItemCell.swif

import UIKit
import SnapKit

class ItemCell: UITableViewCell {
    let itemImageView = UIImageView()
    let itemNameLabel = UILabel()
    let itemPriceLabel = UILabel()
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        
        setAttributes()
        setLayout()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

extension ItemCell {
    private func setAttributes() {
        itemImageView.contentMode = .scaleAspectFit
        itemImageView.clipsToBounds = true
        
        itemNameLabel.font = .systemFont(ofSize: 16, weight: .semibold)
        itemNameLabel.textColor = .black
        
        itemPriceLabel.font = .systemFont(ofSize: 14)
        itemPriceLabel.textColor = .darkGray
    }
    
    private func setLayout() {
        [itemImageView, itemNameLabel, itemPriceLabel].forEach { contentView.addSubview($0) }
        
        itemImageView.snp.makeConstraints {
            $0.leading.equalToSuperview()
            $0.centerY.equalToSuperview()
            $0.size.equalTo(50)
        }
        
        itemNameLabel.snp.makeConstraints {
            $0.leading.equalTo(itemImageView.snp.trailing).offset(10)
            $0.top.equalToSuperview().offset(5)
        }
        
        itemPriceLabel.snp.makeConstraints {
            $0.leading.equalTo(itemImageView.snp.trailing).offset(10)
            $0.top.equalTo(itemNameLabel.snp.bottom).offset(5)
        }
    }
}

extension ItemCell {
    func config(with item: Item) {
        itemImageView.image = UIImage(named: item.imageName)
        itemNameLabel.text = item.name
        itemPriceLabel.text = "\(item.price)메소"
    }
}

2. MainView.swift

기존에 팀원분이 만들어두었던 titleLabel, mesoStackView, categorySegment와 함께 레이아웃을 잡아주고 addSubview를 선언해주면 화면에 표시된다.

import UIKit
import SnapKit

class MainView: UIView {
    
    weak var delegate: MainViewDelegate?
    
    private let mesoStack = MesoStackView()
    
    let itemTableView = ItemTableView()
    let purchaseButton = ActionButton(title: "구매하기")
    let inventoryButton = ActionButton(title: "인벤토리")
    
    let categorySegment = CategorySegmentedControl(frame: .zero)
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = .white
        setActionButtons()
        itemTableView.allowsMultipleSelection = true
        
        let titleLabel = makeTitleLabel()

        addSubview(titleLabel)
        addSubview(mesoStack)
        addSubview(categorySegment)
        addSubview(itemTableView)
        
        
        titleLabel.snp.makeConstraints {
            $0.leading.trailing.equalTo(safeAreaLayoutGuide).inset(20)
            $0.top.equalTo(safeAreaLayoutGuide).offset(10)
        }
        
        mesoStack.snp.makeConstraints {
            $0.leading.equalTo(inventoryButton.snp.trailing)
            $0.trailing.equalTo(safeAreaLayoutGuide).inset(20)
            $0.top.equalTo(titleLabel.snp.bottom).offset(10)
        }
        
        categorySegment.snp.makeConstraints {
            $0.leading.trailing.equalTo(safeAreaLayoutGuide).inset(20)
            $0.top.equalTo(inventoryButton.snp.bottom).offset(10)
        }
        
        itemTableView.snp.makeConstraints {
            $0.leading.trailing.equalTo(safeAreaLayoutGuide).inset(20)
            $0.top.equalTo(categorySegment.snp.bottom).offset(10)
            $0.bottom.equalTo(purchaseButton.snp.top).offset(-20)
        }
        
        
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

//MARK: Configure Components
extension MainView {
    // 타이틀 레이블 생성
    private func makeTitleLabel() -> UILabel {
        let label = UILabel()
        
        label.text = "GaCha!"
        label.textColor = .black
        label.font = .boldSystemFont(ofSize: 24)
        label.textAlignment = .center
        
        return label
    }
}