AutoLayout を使用して iOS 用の Spotify クローンをプログラムで構築する方法:写真の追加と UI の更新

これは、プログラムで autoLayout を使用して Spotify UI クローンを作成する記事の第 2 部です。最初の部分を見逃した場合でも、心配はいりません。今すぐチェックしてください。

この記事では、モックの画像をいくつか追加して、UI を Spotify のものと同じに見えるようにします。

これが今日やろうとしていることです?

これは、最初の部分で中断したものです:

次のステップは、カスタマイズされたセルを作成することです。それでは、SubCustomCell という名前で作成することから始めましょう。 .

まず、プロジェクト フォルダー内に新しい Swift ファイルを作成し、SubCustomCell.swift という名前を付けます。 .このファイルには、プレイリストを表すカスタム セルが含まれます。ファイルを作成したら、以下のコードを追加してセルを初期化してみてください。おそらく backgroundColor で collectionView でセルを登録したときの UI の変更を確認します。 .

import UIKit

class SubCustomCell: UICollectionViewCell {
        override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = .red
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

次に、SubCustomCell を登録します CustomCell.swift 内 init 内 ブロック。 UICollectionViewCell.self を置き換えます SubCustomCell で 以下のように。

 collectionView.register(SubCustomCell.self, forCellWithReuseIdentifier: cellId)

また、cellForItemAt を変更する必要があります。 メソッドを作成し、SubCustomCell に準拠させます 次のように。

 func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath) as! SubCustomCell
        // cell.backgroundColor = .yellow
        
        return cell
    }

backgroundColor が表示されるはずです red に変更 .

ここまでは、すべてが単純明快です。

次に、セルをいくつかの模擬写真で埋めて、ImageView を作成します。 各セル内。すでに pexels.com からいくつかのランダムな写真をダウンロードしましたが、好きな写真 (これらを含む) を自由に使用してください。それらは Github のプロジェクト ファイルにあります。

UIImageView を作成しましょう 内部 SubCustomCell.swift いくつかの制約を加えます。

    let ImageView : UIImageView = {
       let iv = UIImageView()
        iv.backgroundColor = .yellow
        return iv
        
    }()

そしてそれを view に追加します init 内 addSubView を使用してブロック .

 override init(frame: CGRect) {
        super.init(frame: frame)
        addSubview(ImageView)
            
    }

ImageView を作ってみましょう 以下の制約により、セル内のすべてのスペースを占有します。

 ImageView.translatesAutoresizingMaskIntoConstraints = false
            ImageView.topAnchor.constraint(equalTo: topAnchor).isActive = true
            ImageView.leftAnchor.constraint(equalTo: leftAnchor).isActive = true
            ImageView.rightAnchor.constraint(equalTo: rightAnchor).isActive = true
            ImageView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true

• LeftAnchor セルの左アンカーを表します
• rightAnchor セルの右アンカーを表します
• bottomAnchor セルの下部アンカーを表します
• topAnchor セルの上部アンカーを表します

そして ImageView にすることで のトップ アンカーは、セルのトップ アンカーと同じです (ImageView についても同じことを行います)。 の左、右、および下のアンカー) ImageView になります SubCustomCell のすべてのスペースを占有します (セル).

注:最初に translatesAutoresizingMaskIntoConstraints を使用する必要があります 要素に制約を適用できるようにします。また、isActive に電話することを忘れないでください。 プロパティを取得して true に割り当てます – そうしないと、制約は機能せず、何も変わりません。

ImageView 画像があるはずなので、追加しましょう。

 let ImageView : UIImageView = {
       let iv = UIImageView()
        iv.backgroundColor = .yellow
        // we have >image1< file inside the project 
        iv.image = UIImage(named: "image1")
        iv.contentMode = .scaleAspectFill
        iv.clipsToBounds = true
      
        return iv
        
    }()

アプリをビルドして実行すると、 SubCustomCell に追加した結果と画像が表示されます。 .

涼しい ？。 SubCustomCell に追加する必要がある要素があります。 終了します。プレイリストのタイトルを表すタイトルが必要です:UILabel .

タイトルは次のようになります:

 let TitleLabel : UILabel = {
        let lb = UILabel()
        lb.textColor = UIColor.lightGray
        lb.font = UIFont.systemFont(ofSize: 16)
        lb.font = UIFont.boldSystemFont(ofSize: 20)
        lb.text = "Evening Music"
     
        return lb
    }()

そこにランダムなテキストを入れただけです。好きなものを入れて構いません。次のステップは、要素をビューに追加し、いくつかの制約を与えることです。タイトルは ImageView の下部に配置されます .

ビューに追加:

addSubview(TitleLabel)

両方の ImageView に制約を適用する そして TitleLabel

 ImageView.translatesAutoresizingMaskIntoConstraints = false
            ImageView.topAnchor.constraint(equalTo: topAnchor).isActive = true
            ImageView.leftAnchor.constraint(equalTo: leftAnchor).isActive = true
            ImageView.rightAnchor.constraint(equalTo: rightAnchor).isActive = true
            ImageView.heightAnchor.constraint(equalToConstant: 240).isActive = true
            ImageView.bottomAnchor.constraint(equalTo: TitleLabel.topAnchor).isActive = true
            
           
           
            TitleLabel.translatesAutoresizingMaskIntoConstraints = false
            TitleLabel.topAnchor.constraint(equalTo: ImageView.bottomAnchor,constant: 10).isActive = true
            TitleLabel.leftAnchor.constraint(equalTo: leftAnchor, constant: 5).isActive = true
            TitleLabel.rightAnchor.constraint(equalTo: rightAnchor, constant: -5).isActive = true

さあ、さあ！

セル内のほとんどのスペースを写真で占め、残りはタイトルで占められるようにしました。ご覧のとおり、各セクションで水平方向にスクロールすることも、画面全体で垂直方向にスクロールすることもできます。

これで、セルに模擬データを入れて、本物のように感じさせます。そのために JSON を作成しました セクションとプレイリストのランダム データを含むファイル。

まず、2 つの構造体 Section を作成しましょう。 そして Playlist .構造体ごとに個別のファイルを作成します。

section.swift

import Foundation
struct Section {
    var title : String
    var playlists : NSArray
    init(dictionary:[String : Any]) {
        self.title = dictionary["title"] as? String ?? ""
        self.playlists = dictionary["playlists"] as? NSArray ?? []
        
}
}

playlist.swift

//
//  playlist.swift
//  spotifyAutoLayout
//
//  Created by admin on 12/6/19.
//  Copyright © 2019 Said Hayani. All rights reserved.
//

import Foundation
struct PlayList {
    var title: String
    var image : String
    init(dictionary : [String : Any]) {
        self.title = dictionary["title"] as? String ?? ""
        self.image = dictionary["image"] as? String ?? ""
    }
   
}

そして ViewController.swift の中 JSON を取得して結果を配列に格納する関数を作成します。

        print("attempt to fetch Json")
        if let path = Bundle.main.path(forResource: "test", ofType: "json") {
            do {
                  let data = try Data(contentsOf: URL(fileURLWithPath: path), options: .mappedIfSafe)
                  let jsonResult = try JSONSerialization.jsonObject(with: data, options: .mutableLeaves)
                if let jsonResult = jsonResult as? [ Any] {
                            // do stuff
                    jsonResult.forEach { (item) in
                      
                        let section = Section(dictionary: item as! [String : Any])
                       // print("FEtching",section.playlists)
                        self.sections.append(section)
                    }
                    
                 
                  self.collectionView.reloadData()
                  }
              } catch {
                   // handle error
              }
        }
    }

fetchJson 関数は ViewDidLoad 内で呼び出されます 方法。 sections という変数もあります 結果を保存する場所:

 var sections = [Section]()

次のステップは、ViewController からのデータを渡すことです CustomCell へ .そのために、CustomCell 内に変数を作成します。 各セクションのデータを受け取ります:

 var section : Section?{
        didSet{
            print("section ✅",self.section)
        }
    }

cellForItemAt を使用します ViewController の中 データを直接 CustomCell に渡すメソッド .

override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath) as! CustomCell
         
        cell.section = sections[indexPath.item]
         
        return cell
    }

注:私たちは常に self を呼び出します .collectionView.reloadData() 毎回 fetchJson CustomCell 内の以下のブロックで呼び出されます も呼び出されます。コンソールを確認してください、shift + コマンド + C:

 var section : Section? {
        didSet{
            print("section ✅",self.section)
        }
    }

最初に変更するのは、セクションのタイトルを設定することです:

 var section : Section? {
        didSet{
            print("section ✅",self.section)
            guard let section = self.section else {return}
            self.titleLabel.text = section.title
        }
    }

そして、各セクションに特定のタイトルが画面に表示されていることがわかるはずです?.

ここで、データを SubCustomCell に渡します。 .上記と同じことを行います。 playlists を渡す必要があります 配列なので、playlists という名前の変数を作成します 内部 CustomCell .

 var playlists : [PlayList]() //empty 

まず、playlists を介してマッピングします JSON から .次に、各プレイリストを playlists で追加します 変数

 var section : Section? {
        didSet{
            print("section ✅",self.section)
            guard let section = self.section else {return}
            self.titleLabel.text = section.title
            // append to playlists array
             self.section?.playlists.forEach({ (item) in
                let playlist = PlayList(dictionary: item as! [String : Any])
                self.playlists.append(playlist)

            })
            self.collectionView.reloadData()
        }
    }

注意！アプリを実行しようとすると、クラッシュする可能性があります。これは、セクション数を設定するのを忘れたためです。 JSON からデータを受け取っているため、セクションの数に基づいて数値が動的になるはずです。セクションの数は JSON 内のセクションの数と等しくなければなりません 、そのため、numberOfItemsInSection を変更する必要があります ViewController 内 以下に:

   override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return sections.count
    }

CustomCell.swift 内で同じメソッドを使用して同じことを行います – しかし、ここでは playlists の数を考えます

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return  self.playlists.count
    }

完了しなければならない最後のステップは、各プレイリスト Object を渡すことです SubCustomCell へ cellForItemAt 以内 CustomCell.swift で .

 func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath) as! SubCustomCell
        // here ?
        cell.playlist = playlists[indexPath.item]
        return cell
    }

そして、そのデータを SubCustomCell 内で取得します playlist 経由 変数を呼び出して、最後にプレイリストのタイトルと画像を表示します。

var playlist : PlayList? {
           didSet{
               print("Playlist ?",self.playlist)
            guard let playlist = self.playlist else {return}
            // The Image ?
            self.ImageView.image = UIImage(named: playlist.image)
            // the playlist title ?
            self.TitleLabel.text = self.playlist?.title
               
           }
       }

以下のように、すべてがうまくいくはずです?

UI の最後の更新:section にパディングとマージンを追加する必要があります。 と playlist 再生リストを少し小さくしてください。

まず、セクション タイトルにパディングを追加しましょう。そのためには、constant を指定するだけです。 セクションセル CustomCell 内の数値プロパティ setupSubCells 内 :

 collectionView.topAnchor.constraint(equalTo: titleLabel.bottomAnchor,constant: 15).isActive = true

collectionView 全体が表示されている場合 titleLabel の一番下に来る 15 を追加してスペースを追加するだけです。 :

次は playlist のタイトルです。 .これは SubCustomCell 内にあります 、ImageView の下部にスペースを追加するだけです。

 ImageView.bottomAnchor.constraint(equalTo: TitleLabel.topAnchor,constant: -15).isActive = true

そこにはすでに定数があります。機能させるには、値を -15 にする必要があります。

最後に、プレイリストを少し小さくする必要があります。これは簡単です:playlist を作るだけです section に等しいセルの高さと幅 以下のように、セルの高さを 2 で割った値:

CustomCell.swift

 func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        
        let width = frame.height / 2
        let height = frame.height / 2
        
        return CGSize(width: width, height: height)
        
    }

ImageView の高さを 150 に等しくします

  //SubCutomCell.swift
  ImageView.heightAnchor.constraint(equalToConstant: 150).isActive = true

そして、ここに行きますか?.

完全！今日はこれで十分だと思います。この記事を長くしすぎたくありません。 TabBar を追加する別の部分があります。 プレイリストの説明といくつかのアイコン。

を表示 GitHub の完全なソース コード ?.

御時間ありがとうございます。何も見逃していないことを願っています。 Twitter で @メンションしてください。質問やこの投稿への追加があれば、いつでも誰でも参加できます。ありがとう??.

購読 このチュートリアルの第 3 部が公開されたときに通知を受けるために、私のメーリング リストに送信してください。

ところで、私は最近、モバイル アプリケーションの 1 つで強力なソフトウェア エンジニアのグループと協力しました。組織は素晴らしく、製品は非常に迅速に提供されました。私が一緒に働いた他の会社やフリーランサーよりもはるかに速く、他のプロジェクトに正直にそれらをお勧めできると思います.連絡が必要な場合は、私にメールを送ってください — [email protected].