Swift और AutoLayout के साथ Spotify-प्रेरित iOS ऐप बनाएं

इस पोस्ट में हम Swift में प्रोग्रामेटिकली Spotify होम स्क्रीन लेआउट को फिर से बनाने का प्रयास करेंगे। प्रोग्रामेटिकली क्यों? मुझे लगता है कि चीजों को अलग-अलग तरीकों से बनाना हमेशा अच्छा होता है, और मुझे चीजों को प्रोग्रामेटिकली करने के लिए कोड लिखना पसंद है। ये कौशल विशेष रूप से सहायक होते हैं यदि आप टीम के साथ काम कर रहे हैं या वर्जन कंट्रोल का उपयोग कर रहे हैं।

यह Spotify के मोबाइल ऐप की वास्तविक होम स्क्रीन है। इस तरह के लेआउट को प्राप्त करने के लिए, हम UICollectionView का उपयोग करेंगे, और हम टैब नेविगेटर बनाने के लिए TabBarController का भी उपयोग कर सकते हैं।

बुनियादी आवश्यकता: सबसे पहले सुनिश्चित करें कि आपके पास Xcode 10+ इंस्टॉल है और Swift 4+।

चलिए Xcode का उपयोग करके एक नया Xcode प्रोजेक्ट बनाकर शुरू करते हैं:

और सबसे पहली चीज जो हमें ViewController.swift में करने की आवश्यकता है वह है सुपरक्लास को UIViewController के बजाय UICollectionViewController में बदलना क्योंकि हमारी क्लास collectionView पर आधारित होगी।

import UIKit
class ViewController: UICollectionViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        collectionView.backgroundColor = .purple
        // व्यू लोड होने के बाद कोई अतिरिक्त सेटअप करें।
    }
}

यदि आप ऐप चलाने की कोशिश करते हैं तो बिल्ड फेल हो जाएगा। हमें AppDelegate.swift फाइल में didFinishLaunchingWithOptions फंक्शन के अंदर return स्टेटमेंट से पहले इस कोड को जोड़ने की आवश्यकता है:

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

और कोड इस तरह दिखना चाहिए:

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    // एप्लिकेशन लॉन्च के बाद कस्टमाइजेशन के लिए ओवरराइड पॉइंट।
    let layout = UICollectionViewFlowLayout()
    window = UIWindow()
    window?.rootViewController = ViewController(collectionViewLayout: layout)
    return true
}

अब आप ऐप चला सकते हैं और backgroundColor को purple में बदला हुआ देख सकते हैं:

अगला कदम लेआउट को वितरित करना और सेक्शन के बीच समान रूप से स्पेस को विभाजित करना है।

चलिए हमारे CollectionView के मेथड को परिभाषित करते हैं।

चरण:

• एक यूनिक आइडेंटिफायर के साथ एक रीयूजेबल सेल रजिस्टर करें
• सेक्शन में आइटम्स की संख्या परिभाषित करें
• रजिस्टर्ड सेल का उपयोग करें

CollectionView के कुछ मेथड का उपयोग करने के लिए हमें हमेशा UICollectionViewDelegateFlowLayout को सुपरक्लास के रूप में अनुरूप करने की आवश्यकता होती है और मेथड के ऑटोकंप्लीट को प्राप्त करने के लिए। तो चलिए CollectionViewCell को रजिस्टर करने से शुरू करते हैं।

View.DidLoad() के अंदर हम रीयूजेबल सेल को रजिस्टर करने के लिए collectionView.register() मेथड को कॉल करते हैं:

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

फिर हम numberOfItemsInSection का उपयोग करके collectionView के अंदर हमारे पास मौजूद सेल्स की संख्या को परिभाषित करते हैं। अभी के लिए हमें बस इसे 5 आइटम बनाने की आवश्यकता है:

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

अगला कदम cellForItemAt का उपयोग करके रीयूजेबल सेल को परिभाषित करना है जो UICollectionViewCell लौटाना चाहिए और एक यूनिक आईडी होनी चाहिए जिसे cellId कहा जाता है। कोड इस तरह दिखता है:

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

पूरा कोड इस तरह दिखना चाहिए:

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
    }
}

आपको स्क्रीन पर लाल बैकग्राउंड के साथ 5 आइटम देखने में सक्षम होना चाहिए:

सेल्स में कस्टम चौड़ाई और ऊंचाई जोड़ें

अब हमें सेल्स को सही क्रम में रखने और उन्हें width और height देने की आवश्यकता है। प्रत्येक सेल स्क्रीन की width को width के रूप में लेगा।

हमारे पास sizeForItemAt मेथड होने का सौभाग्य है ताकि हम सेल्स को कस्टम width और height दे सकें। यह एक मेथड है जिसे CGSize टाइप लौटाना चाहिए:

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)
}

तो हमने view.frame.width का उपयोग करके Cell को स्क्रीन की width लेने के लिए बनाया और एक कस्टम height के साथ जो एक CGFloat टाइप है।

अब आप अपने सिम्युलेटर में नीचे परिणाम देख सकते हैं:

सब कुछ अब तक अच्छा लग रहा है। इस बार चलिए एक कस्टम सेल बनाते हैं जो रीयूजेबल हो सके। CustomCell नाम से एक नई Swift फाइल बनाएं:

CustomCell.swift नीचे दिए गए जैसा दिखना चाहिए:

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")
    }
}

अब अगली चीजें जो हमें करने की आवश्यकता है वे हैं दो मेथड को रीयूजेबल सेल का समर्थन करने के लिए संशोधित करना, collectionView.register और cellForItemAt। चलिए पहले रजिस्टर मेथड को संशोधित करते हैं। UICollectionViewCell.self को CustomCell से बदलें:

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

अब हमें cellForItemAt को CustomCell के अनुरूप कास्ट करने की आवश्यकता है जैसे नीचे:

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

यदि आप ऐप चलाते हैं तो शायद आपको कोई बदलाव नजर न आए, इसलिए CustomCell को एक backgroundColor दें backgroundColor = .yellow। cellForItemAt में लाइन cell.backgroundColor = .red को हटाना न भूलें। आपको बैकग्राउंड कलर पीला बदला हुआ देखना चाहिए ?

अब CutomCell में थोड़ा नमक डालने का समय है :D

यदि आप Spotify होम स्क्रीन को देखते हैं, तो प्रत्येक सेक्शन जो हमारे उदाहरण में एक CustomCell है, उसमें एक सेक्शन शीर्षक, सब सेल्स होते हैं, और यह क्षैतिज है:

एक सेक्शन शीर्षक जोड़ें

चलिए सेल में एक शीर्षक लेबल जोड़ते हैं। CutomCell क्लास के अंदर titleLabel एलिमेंट बनाएं:

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

फिर init() ब्लॉक के अंदर एलिमेंट को व्यू में जोड़ें:

addSubview(titleLabel)

यदि आप ऐप चलाते हैं तो आपको कोई बदलाव नहीं दिखाई देगा, और ऐसा इसलिए है क्योंकि हमने अभी तक एलिमेंट पर कोई कंस्ट्रेंट नहीं डाला है। तो चलिए कुछ कंस्ट्रेंट जोड़ते हैं - इस प्रॉपर्टी को titleLabel में जोड़ें lb.translatesAutoresizingMaskIntoConstraints = false ताकि एलिमेंट पर कंस्ट्रेंट लागू किए जा सकें:

titleLabel को व्यू में जोड़ने के बाद, हम कंस्ट्रेंट को परिभाषित करते हैं:

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

हमेशा सुनिश्चित करें कि .isActive = true प्रॉपर्टी जोड़ें - इसके बिना कंस्ट्रेंट काम नहीं करेगा!

अगले भाग पर जाने से पहले, चलिए पहले स्क्रीन के बैकग्राउंड कलर को काला बदलते हैं और सेल्स के लिए पीला रंग भी हटाते हैं:

अब बड़ा भाग आता है: प्रत्येक सेल में सब सेल्स डालना। इसे प्राप्त करने के लिए हम CustomCell के अंदर एक CollectionView जोड़ने जा रहे हैं।

UICollectionViewCell के अंदर एक CollectionView जोड़ने के लिए हमें CustomCell में सुपरक्लास के रूप में प्रॉपर्टी UICollectionViewDelegate, UICollectionViewDelegateFlowLayout, और UICollectionViewDataSource जोड़ने की आवश्यकता है।

चलिए collectionView एलिमेंट को किसी भी साधारण व्यू की तरह बनाते हैं:

let collectionView: UICollectionView = {
    // लेआउट इनिशियलाइज़ करें
    let layout = UICollectionViewFlowLayout()
    // दिशा को क्षैतिज पर सेट करें
    layout.scrollDirection = .horizontal
    // collectionView का इंस्टेंस
    let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
    // कंस्ट्रेंट सक्रिय करें
    cv.translatesAutoresizingMaskIntoConstraints = false
    return cv
}()

ध्यान दें कि हम collectionView में layout को लेयर के रूप में इनिशियलाइज़र में जोड़ते हैं जैसा हमने पहली बार viewController.swift के साथ किया था। यहां हम FlowLayout की दिशा को .horizontal भी निर्दिष्ट करते हैं।

चलिए collectionView एलिमेंट को subView के रूप में व्यू में जोड़ते हैं।

हम इसके लिए एक फंक्शन बनाने जा रहे हैं ताकि कोड थोड़ा क्लीनर हो।

fileprivate func setupSubCells() {
    // collectionView को व्यू में जोड़ें
    addSubview(collectionView)
    collectionView.dataSource = self
    collectionView.delegate = self
    // कंस्ट्रेंट सेटअप करें
    // इसे 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
}

collectionView के लिए डेलीगेट को self पर सेट करना सुनिश्चित करें और डेटा सोर्स भी:

collectionView.dataSource = self

collectionView.delegate = self

फिर init ब्लॉक के अंदर फंक्शन को कॉल करें।

यदि आप ऐप बनाने की कोशिश करते हैं तो Xcode कुछ एरर दिखाएगा क्योंकि हम UICollectionViewDelegate और UICollectionViewDelegateFlowLayout प्रोटोकॉल के अनुरूप नहीं हैं। इसे ठीक करने के लिए हमें पहले सब सेल को रीयूजेबल सेल के रूप में रजिस्टर करने की आवश्यकता है।

क्लास के शीर्ष पर एक वेरिएबल बनाएं और इसे cellId नाम दें ताकि हम इसे तब उपयोग कर सकें जब हमें सेल आइडेंटिफायर की आवश्यकता हो:

let cellId: String = "subCellID"

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

अब दो और मेथड गायब हैं जो एरर को दूर करने के लिए: numberOfItemsInSection जो सेक्शन में सेल्स की संख्या को परिभाषित करता है और cellForItemAt जो रीयूजेबल सेल को परिभाषित करता है। ये मेथड collectionView को ठीक से काम करने के लिए आवश्यक हैं:

// सेल्स की संख्या
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return 4
}
// रीयूजेबल सेल
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath)
    cell.backgroundColor = .yellow
    return cell
}

परिणाम इस तरह दिखना चाहिए:

जैसा कि आप देख सकते हैं, collectionView बैंगनी बैकग्राउंड में हैं और सब सेल्स पीले हैं।

आखिरी चीजें जो हम इस लेख को समाप्त करने से पहले कर सकते हैं वे हैं subCells को सेक्शन की ऊंचाई और चौड़ाई के रूप में ऊंचाई देना। फिर से हम sizeForItemAt का उपयोग करके सेल की height और width को परिभाषित कर रहे हैं।

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)
}

और यहां हम हैं ?:

NICE! मैं इस बिंदु पर रुकने जा रहा हूं ताकि यह पोस्ट बहुत लंबी न हो। मैं एक दूसरा भाग बनाऊंगा जहां हम कुछ मॉक्ड तस्वीरें जोड़ने जा रहे हैं और इसे कुछ डेटा से भरेंगे।

पूर्ण स्रोत कोड ? यहां

कृपया कृपया यदि आपके पास कोई जोड़, प्रश्न, या सुधार हैं, तो इसे नीचे कमेंट्स में पोस्ट करें ? या ट्विटर पर मुझे हिट करें।

सब्सक्राइब करें मेरी ईमेल सूची को ताकि जब इस ट्यूटोरियल का दूसरा भाग प्रकाशित हो तो आपको सूचित किया जाए