SSAC iOSアプリケーション開発者デビュープロセス-14

🎛 Collection View

UICollectionViewは、カスタマイズ可能なレイアウトを使用してユーザに複数のデータを表示するオブジェクトである.
使用方法と大きなフレームワークは,前に学習したTable Viewとあまり変わらない.このことは、View ControllerにCollection Viewを追加することによって達成される.
1)Collection View Cellの作成
作成Collection Viewは、XIBファイル形式で前回作成されたTable View Cellと同じです.
前回の説明では、Collection View Cellという形でcellを1つ作成すると、このcellを繰り返し使用するのは簡単ですが、XIBファイルとXibの違いは説明されていないので、簡単に説明します.

Nib : Xml Interface Builder

xib : Next Interface Builder

両者の機能は同じです.実際には、nibファイルがコンパイルされると、xibファイルに変換されます.
では、なぜnibファイルを使用しなければならないのでしょうか.
100」「」「」「」「」「」「」「」「」「」「」「」「」「」「」「」「」「」「」「」「」「」「」「」「」「」「」「」「」「」「」「」「」「」
人はコードが読めないのでバージョン管理も難しいので、人が読めないxibファイルと一緒に使えます.
では、nibファイルでcellを作成して使用すると、xib形式で登録する必要がある理由が理解できます.xib2)Collection Viewの追加nibを構成するユニットの設計を完了しました.❗️ identifier 설정 잊지말기!!にCollection Viewを追加する必要があります.ViewControllerではなくコレクションビューを使用しています.Collection Viewプロトコルが必要です.
このパターンをCollection ViewControllerと呼ぶ.

extension StudyCollectionViewController: 
UICollectionViewDelegate, UICollectionViewDataSource {
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {

    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
            
}

まず、以下に示すように、現在のViewControllerのクラスファイルに拡張子を追加します.CollectionViewDelegate, CollectionViewDataSource

class StudyCollectionViewController: UIViewController {

    @IBOutlet weak var collectionView: UICollectionView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        collectionView.delegate = self
        collectionView.dataSource = self
        let nibNmae = UINib(nibName: "StudyCollectionViewCell                            ", bundle: nil)
        collectionView.register(nibNmae, forCellWithReuseIdentifier: StudyCollectionViewCell.identifier)
        
    }
}

次に、委任者を特定するプロセスが必要です.Delegate Pattern

Delegate Pattern 에 대해서 더 알게되면 자세하게 따로 정리하겠습니다.

3)Collection View Layoutの設定(ViewController 라는 알바생이 할 일들을 정리)を使用すると、コレクションビューのセルを所望のシェイプでソートできます.
セルを設定する場合、collectionView 라는 사장이 StudyCollectionViewController(self) 가 알바생임을 선언はセルの外観(高さ)を設定し、UICollectionView FlowLayoutはFlowLayoutクラスで設定します.
TableViewブログ1
ブログ2
FlowLayoutの様々な製品を知ることができます.

🏷 P.S.

昨日Collection Viewの内部のボタンである動作を実現しようとしたが失敗し、今日の授業で勉強した부스토코스 이미지를 사용했습니다!とcustom cellを利用して成功した.

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        guard let cell = tableView.dequeueReusableCell(withIdentifier: "MainTableViewCell", for: indexPath) as? MainTableViewCell else {
            return UITableViewCell()
        }
        
        let row = tvShowInformation.tvShow[indexPath.row]
        
        cell.totalView.clipsToBounds = true
        cell.totalView.layer.cornerRadius = 10
        
        cell.genreLabel.text = row.genre
        cell.releaseDayLabel.text = row.releaseDate
        cell.titileLabel.text = row.title
        
        cell.rateLabel2.text = " \(row.rate) "
        
        cell.overViewLabel.numberOfLines = 1
        cell.overViewLabel.text = row.starring
        
        let url = URL(string: row.backdropImage)
        let data = try? Data(contentsOf: url!)
        cell.posterImageView.image = UIImage(data: data!)
        
        cell.detailButton.tag = indexPath.row
        cell.detailButton.addTarget(self, action: #selector(detailButtonClicked(selectButton:)), for: .touchUpInside)
        
        return cell
        
    }

@objc
    func detailButtonClicked(selectButton: UIButton) {
        
        let sb = UIStoryboard(name: "Main", bundle: nil)
        let vc = sb.instantiateViewController(withIdentifier: "DetailViewController") as! DetailViewController
        
        print(tvShowInformation.tvShow[selectButton.tag].title)

//이렇게 바로 넣으면 오류 
	//vc.titleLabel?.text = tvShowInformation.tvShow[selectButton.tag].title
    
        vc.movieLable = tvShowInformation.tvShow[selectButton.tag].title
        
        present(vc, animated: true, completion: nil)
        
    }

忘れる前にハーモニーを整理して
まず、私たちが設計したカスタムユニットに存在するボタンを押すと、addTarget画面に切り替え、変換後の画面のラベルをユニットの情報に渡すことを目的としています.
各セルには異なる情報があり、画面遷移のラベルにこれらの情報を表示する必要があるため、tagの(show)のcellの情報が必要です.
ただし、cellクラスファイル、ViewControlクラスファイルではindexPath情報は使用できません.indexPathを使用!tagこのコードでtableviewで各セルを作成する場合は、セルのcell.detailButton.tag = indexPath.rowをindexPath.rowに保存してください.
次に、各セルのボタンをtagで関数に設定して、実行する操作を決定します.
この関数はDetailButtonClickedという名前の関数に設定されています.これは昨日習ったパスデータと同じです.

addTarget

그냥 바로 전환될 화면의 Label 에 값을 넣도록 설정하면 오류

コレクションビューやtableviewはコンセプト学習だけでなく、私が望む画面を作成するプロセスが絶対に必要だと思います.
これからもっとやりながら整理を続けます!