În această postare vom încerca să recreăm aspectul ecranului de start Spotify în Swift programat. De ce programatic? Cred că este întotdeauna bine să știu cum să construiesc lucrurile în moduri diferite și îmi place să scriu cod pentru a face lucrurile programatic. Aceste abilități sunt utile mai ales dacă lucrați cu echipa sau utilizați controlul versiunilor.

Cum sa construiti programat o clona Spotify pentru iOS cu

Acesta este ecranul principal al aplicației mobile Spotify. Deci, pentru a realiza acest tip de aspect, vom folosi UICollectionView, și putem folosi TabBarController precum și pentru a crea navigatorul de file.

Cerință de bază: mai întâi asigurați-vă că aveți instalat Xcode +10 și rapid +4.

Să începem prin a crea un nou proiect Xcode folosind Xcode:

Cum sa construiti programat o clona Spotify pentru iOS cu

Și primul lucru în care trebuie să facem ViewController.swift este schimbarea superclasei în UICollectionViewController in loc de UIViewController deoarece clasa noastră se va baza pe collectionView.

//
//  ViewController.swift
//  spotifyAutoLayout
//
//  Created by admin on 10/31/19.
//  Copyright © 2019 Said Hayani. All rights reserved.
//

import UIKit

class ViewController: UICollectionViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        collectionView.backgroundColor = .purple
        // Do any additional setup after loading the view.
    }


}

Dacă încercați să rulați aplicația, construirea va eșua. Trebuie să adăugăm un cod la AppDelegate.swift fișier în cadrul didFinishLaunchingWithOptions funcționează după această bucată de cod înainte de return afirmație:

  let layout = UICollectionViewFlowLayout()
        window = UIWindow()
        window?.rootViewController = ViewController(collectionViewLayout: layout)

Și codul ar trebui să arate astfel:

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        let layout = UICollectionViewFlowLayout()
        window = UIWindow()
        window?.rootViewController = ViewController(collectionViewLayout: layout)
        return true
    }

Acum ar trebui să puteți rula aplicația și să vedeți backgroundColor schimbat în purple:

1611454506 348 Cum sa construiti programat o clona Spotify pentru iOS cu

Următorul pas este să distribuiți aspectul și să împărțiți spațiul în mod egal între secțiuni.

Să definim metodele noastre CollectionView.

Pașii:

  • Înregistrați o celulă reutilizabilă cu identificator unic
  • Definiți numărul articolelor din secțiune
  • Utilizați celula înregistrată

Pentru a folosi o parte din CollectionView metode la care trebuie să ne conformăm întotdeauna UICollectionViewDelegateFlowLayout ca superclasă și pentru a obține completarea automată a metodelor. Deci, să începem cu înregistrarea CollectionViewCell.

Interior View.DidLoad() numim collectionView.register() metoda de înregistrare a celulei reutilizabile:

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

Apoi definim numărul de celule pe care le vom avea în interiorul collectionView folosind numberOfItemsInSection. Deocamdată trebuie doar să-i facem 5 articole:

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

Următorul pas este de a defini celula reutilizabilă folosind cellForItemAt asta ar trebui să revină UICollectionViewCell și au un ID unic numit cellId. Codul arată astfel:

 override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath)
        cell.backgroundColor = .red
        return cell
    }

Codul complet ar trebui să arate astfel:

import UIKit

class ViewController: UICollectionViewController, UICollectionViewDelegateFlowLayout {
    let cellId : String = "cellId"

    override func viewDidLoad() {
        super.viewDidLoad()
        collectionView.backgroundColor = .purple
        collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: cellId)

    }


    override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 5
    }
    override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath)
        cell.backgroundColor = .red
        return cell
    }

}

Ar trebui să puteți vedea 5 elemente cu fundal roșu pe ecran:

1611454506 308 Cum sa construiti programat o clona Spotify pentru iOS cu

Adăugați o lățime și o înălțime personalizate la celule

Acum trebuie să plasăm celulele în ordinea corectă și să le dăm un width și height. Fiecare celulă va lua width a ecranului ca width.

Suntem norocoși să avem sizeForItemAt metodă, astfel încât să putem oferi celulelor un obicei width și height. Este o metodă care ar trebui să returneze un CGSize tip:

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

Așa că am făcut Cell ia width a ecranului folosind view.frame.width și un obicei height cu este o CGFloat tip.

Acum puteți vedea rezultatul de mai jos în Simulatorul dvs.:

1611454506 445 Cum sa construiti programat o clona Spotify pentru iOS cu

Totul arată bine până acum. De data aceasta, să creăm o celulă personalizată care poate fi reutilizabilă. Creați un nou fișier Swift numit CustomCell:

1611454506 229 Cum sa construiti programat o clona Spotify pentru iOS cu

CustomCell.swift ar trebui să arate așa mai jos:


import UIKit

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

Acum, următoarele lucruri pe care trebuie să le facem este să modificăm două metode pentru a susține celula reutilizabilă, collectionView.register și cellForItemAt. Să modificăm mai întâi metoda de înregistrare. A inlocui UICollectionViewCell.self cu CustomCell:

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

În continuare trebuie să distribuim cellForItemAt a se conforma CustomCell ca mai jos:

  let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath) as! CustomCell

Dacă rulați aplicația, probabil că nu veți observa nicio modificare, așa că dați CustomCell un backgroundColor backgroundColor = .yellow. Nu uitați să eliminați linia cell.backgroundColor = .red în cellForItemAt. Ar trebui să vedeți culoarea de fundal schimbată în galben?

1611454506 854 Cum sa construiti programat o clona Spotify pentru iOS cu

Acum este timpul să punem puțină sare CutomCell : D

Dacă vă uitați la ecranul de pornire Spotify, fiecare secțiune care este a CustomCell în exemplul nostru conține un titlu de secțiune, subcelule și este orizontal:

1611454506 111 Cum sa construiti programat o clona Spotify pentru iOS cu

Adăugați un titlu de secțiune

Să adăugăm o etichetă de titlu în celulă. Creați titleLabel element din interiorul CutomCell clasă:

let titleLabel: UILabel = {
        let lb  = UILabel()
        lb.text = "Section Title"
        lb.font = UIFont.boldSystemFont(ofSize: 14)
        lb.font = UIFont.boldSystemFont(ofSize: 14)
        
        return lb
    }()

Apoi adăugați elementul la vizualizarea din interior init() bloc:

addSubview(titleLabel)

Dacă rulați aplicația, nu veți vedea nicio modificare și asta pentru că nu am pus încă nicio constrângere asupra elementului. Deci, să adăugăm câteva constrângeri – adăugați această proprietate lb.translatesAutoresizingMaskIntoConstraints = false la titleLabel pentru a putea aplica constrângeri elementului:

După ce adăugăm titleLabel la vedere, definim constrângerile:

 addSubview(titleLabel)
titleLabel.topAnchor.constraint(equalTo: topAnchor, constant: 8).isActive = truetitleLabel.leftAnchor.constraint(equalTo: leftAnchor,constant: 8 ).isActive = true

Asigurați-vă întotdeauna că adăugați .isActive = true proprietate – fără ea constrângerea nu va funcționa!

1611454506 303 Cum sa construiti programat o clona Spotify pentru iOS cu

Înainte de a trece la partea următoare, să schimbăm mai întâi culoarea de fundal a ecranului în negru și, de asemenea, să eliminăm culoarea galbenă pentru celule:

1611454506 36 Cum sa construiti programat o clona Spotify pentru iOS cu

Acum vine partea cea mare: punerea subcelulelor în fiecare celulă. Pentru a realiza acest lucru, vom adăuga un CollectionView interior CustomCell.

Pentru a adăuga un CollectionView interior UICollectionViewCell trebuie să adăugăm proprietăți UICollectionViewDelegate, UICollectionViewDelegateFlowLayout, și UICollectionViewDataSource ca superClass to CustomCell.

Să creăm collectionView element ca orice vedere simplă:


    let collectionView : UICollectionView = {
        // init the layout
        let layout = UICollectionViewFlowLayout()
        // set the direction to be horizontal
        layout.scrollDirection = .horizontal
        
        // the instance of collectionView
        
        let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
       
        // Activate constaints
      
        cv.translatesAutoresizingMaskIntoConstraints = false
        
        return cv
        
    }()
Referinţă: https://stackoverflow.com/questions/44614743/add-uicollectionview-in-uicollectionviewcell

Observați că adăugăm layout la collectionView ca strat în inițializator așa cum am făcut-o prima dată cu viewController.swift. Aici specificăm și direcția FlowLayout a fi .horizontal.

Să adăugăm collectionView element pentru vizualizare ca subView.

Vom face o funcție care să facă asta pentru a face codul puțin mai curat.

    fileprivate  func setupSubCells(){
        // add collectionView to the view
        addSubview(collectionView)
 
        collectionView.dataSource = self
        collectionView.delegate = self
        // setup constrainst
        // make it fit all the space of the CustomCell
        collectionView.topAnchor.constraint(equalTo: titleLabel.bottomAnchor).isActive = true
        collectionView.leftAnchor.constraint(equalTo: leftAnchor).isActive = true
        collectionView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
        collectionView.rightAnchor.constraint(equalTo: rightAnchor).isActive = true
    }

Asigurați-vă că setați delegat la self pentru collectionView și sursa de date, de asemenea:

collectionView.dataSource = self

collectionView.delegate = self

Apelați apoi funcția din interior init bloc.

Xcode va afișa unele erori dacă încercați să creați aplicația, deoarece nu ne conformăm UICollectionViewDelegate și UICollectionViewDelegateFlowLayout protocoale. Pentru a remedia acest lucru, trebuie mai întâi să înregistrăm subcelula ca celulă reutilizabilă.

Creați o variabilă în partea de sus a clasei și dați-i un nume de cellId deci îl putem folosi atunci când avem nevoie de identificatorul celulei:

let cellId : String = "subCellID"

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

Acum ne lipsesc încă două metode pentru a face ca erorile să dispară: numberOfItemsInSection care definesc numărul de celule din secțiune și cellForItemAt care definesc celula reutilizabilă. Aceste metode sunt necesare pentru collectionView să funcționeze corect:

 // number of cells
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
       return  4
    }
    
    // reusable Cell
     func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath)
         cell.backgroundColor = .yellow
        
        return cell
    }

Rezultatele ar trebui să arate astfel:

1611454506 497 Cum sa construiti programat o clona Spotify pentru iOS cu

După cum puteți vedea, collectionView sunt în culoarea mov ca fundal și subcelulele sunt galbene.

Ultimele lucruri pe care le putem face înainte de a încheia acest articol este make subCells au înălțimea secțiunii și ca lățime. Din nou, folosim sizeForItemAt pentru a defini height si width a celulei.

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

Și aici suntem?:

1611454506 773 Cum sa construiti programat o clona Spotify pentru iOS cu

GROZAV! Mă voi opri în acest moment, așa că această postare nu este prea lungă. Voi face o a doua parte în care vom adăuga câteva imagini batjocorite și o vom completa cu câteva date.

Cod sursă complet? aici

Vă rugăm să vă rugăm, dacă aveți adăugiri, întrebări sau corecții, postați-l în comentariile de mai jos? sau mă lovește Stare de nervozitate.

Abonati-va la lista mea de e-mailuri pentru a fi notificat la publicarea celei de-a doua părți a acestui tutorial