स्विफ्ट के साथ एक से अधिक कस्टम सेल के साथ यूआईटेबिल्यू


111

मैं अलग-अलग कस्टम टेबल व्यू कॉल्स के साथ यूआईटेबल्यूव का उपयोग करना चाहता हूं। मेरी 3 कोशिकाएँ इस प्रकार हैं:

  • Cell1: एक छवि और एक लेबल होना चाहिए।
  • Cell2: दो लेबल होने चाहिए।
  • Cell3: एक दिन विकर होना चाहिए।

मैं कोशिकाओं के लिए एक टैग कोड नहीं करना चाहता। मैं इसे स्विफ्ट में कैसे प्रबंधित कर सकता हूं। क्या मुझे हर सेल के लिए अपनी कक्षा को कोड करना होगा? क्या मैं एक टेबलव्यू कंट्रोलर का उपयोग कर सकता हूं? मैं विभिन्न कोशिकाओं में डेटा को कैसे आबाद कर सकता हूं?

मैं एक iOS डिवाइस के एक संपर्क ऐप की तरह, एक TableView उत्पन्न करना चाहूंगा।



जवाबों:


270

मुझे पहले अपने सवालों का जवाब देने के साथ शुरू करते हैं।

क्या मुझे हर सेल के लिए खुद की एक क्लास कोड बनानी होगी? => हां, मेरा ऐसा मानना ​​है। कम से कम, मैं ऐसा ही करूंगा।

क्या मैं एक टेबलव्यू कंट्रोलर का उपयोग कर सकता हूं? => हां, आप कर सकते हैं। हालाँकि, आप अपने व्यू कंट्रोलर के अंदर एक टेबल व्यू भी रख सकते हैं।

मैं विभिन्न कोशिकाओं में डेटा को कैसे आबाद कर सकता हूं? => स्थितियों के आधार पर, आप विभिन्न कोशिकाओं में डेटा को आबाद कर सकते हैं। उदाहरण के लिए, मान लें कि आप चाहते हैं कि आपकी पहली दो पंक्तियाँ पहले प्रकार की कोशिकाओं की तरह हों। तो, आप बस पहले प्रकार की कोशिकाओं का निर्माण / पुन: उपयोग करते हैं और इसे डेटा सेट करते हैं। यह अधिक स्पष्ट होगा, जब मैं आपको स्क्रीन शॉट्स दिखाता हूं, तो मुझे लगता है।

मैं आपको ViewController के अंदर एक TableView के साथ एक उदाहरण देता हूं। एक बार जब आप मुख्य अवधारणा को समझ जाते हैं, तो आप वैसे भी कोशिश कर सकते हैं और संशोधित कर सकते हैं।

चरण 1: 3 कस्टम TableViewCells बनाएँ। मैंने इसे नाम दिया, फर्स्ट कस्टूमटेबल व्यूसेल, सेकंड कस्टूमटेबल व्यूसेल, थर्ड कस्टूमटेबल व्यूसेल। आपको अधिक सार्थक नामों का उपयोग करना चाहिए।

यहां छवि विवरण दर्ज करें

चरण 2: Main.storyboard पर जाएं और अपने व्यू कंट्रोलर के अंदर एक TableView को खींचें और छोड़ें। अब, तालिका दृश्य चुनें और पहचान निरीक्षक पर जाएं। "प्रोटोटाइप सेल" को 3 पर सेट करें। यहां, आपने अपने टेबल व्यू को बताया कि आपके पास 3 अलग-अलग प्रकार के सेल हो सकते हैं।

यहां छवि विवरण दर्ज करें

चरण 3: अब, अपने तालिका दृश्य में 1 सेल का चयन करें और पहचान निरीक्षक में, "FirstCustomTableViewCell" को कस्टम वर्ग फ़ील्ड में रखें और फिर पहचानकर्ता को विशेषता निरीक्षक में "FirstCustomCell" के रूप में सेट करें।

यहां छवि विवरण दर्ज करें

यहां छवि विवरण दर्ज करें

अन्य सभी के लिए भी ऐसा ही करें- अपने कस्टम क्लासेस को क्रमशः "SecondCustomTableViewCell" और "ThirdCustomTableViewCell" के रूप में सेट करें। साथ ही पहचानकर्ताओं को दूसरे कस्‍टमसेल और थर्ड कस्‍टमूसेल को लगातार सेट करें।

चरण 4: कस्टम सेल कक्षाओं को संपादित करें और अपनी ज़रूरत के अनुसार आउटलेट जोड़ें। मैंने इसे आपके प्रश्न के आधार पर संपादित किया।

पुनश्च: आपको वर्ग परिभाषा के तहत आउटलेट लगाने की आवश्यकता है।

तो, FirstCustomTableViewCell.swift में, के तहत

class FirstCustomTableViewCell: UITableViewCell {

आप अपना लेबल और छवि दृश्य आउटलेट्स लगाएंगे।

 @IBOutlet weak var myImageView: UIImageView!
 @IBOutlet weak var myLabel: UILabel!

और SecondCustomTableViewCell.swift में, दो लेबल जोड़ें जैसे-

import UIKit

class SecondCustomTableViewCell: UITableViewCell {

    @IBOutlet weak var myLabel_1: UILabel!
    @IBOutlet weak var myLabel_2: UILabel!

    override func awakeFromNib() {
        super.awakeFromNib()
    }

    override func setSelected(selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
    }
}

और थर्डकस्टमटेबल व्यूसेल.स्विफ्ट की तरह दिखना चाहिए-

import UIKit

class ThirdCustomTableViewCell: UITableViewCell {

    @IBOutlet weak var dayPicker: UIDatePicker!

    override func awakeFromNib() {
        super.awakeFromNib()
    }

    override func setSelected(selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
    }
}

चरण 5: अपने ViewController में, अपने TableView के लिए एक आउटलेट बनाएं और स्टोरीबोर्ड से कनेक्शन सेट करें। साथ ही, आपको प्रोटोकॉल सूची के रूप में वर्ग परिभाषा में UITableViewDelegate और UITableViewDataSource को जोड़ना होगा। तो, आपकी कक्षा की परिभाषा इस तरह दिखनी चाहिए-

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

उसके बाद अपने कंट्रोलर के टेबल व्यू के UITableViewDelegate और UITableViewDatasource को अटैच करें। इस बिंदु पर आपका viewController.swift जैसा दिखना चाहिए-

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    @IBOutlet weak var tableView: UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

पुनश्च: यदि आप ViewController के अंदर TableView के बजाय एक TableViewController का उपयोग करने के लिए थे, तो आप इस चरण को छोड़ सकते थे।

चरण 6: सेल वर्ग के अनुसार अपने सेल में छवि दृश्य और लेबल खींचें और छोड़ें। और फिर स्टोरीबोर्ड से उनके आउटलेट के लिए कनेक्शन प्रदान करते हैं।

चरण 7: अब, दृश्य नियंत्रक में UITableViewDatasource की आवश्यक विधियाँ लिखें।

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    @IBOutlet weak var tableView: UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        return 1
    }

    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 3
    }

    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        if indexPath.row == 0 {
            let cell: UITableViewCell = UITableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: "firstCustomCell")
            //set the data here
            return cell
        }
        else if indexPath.row == 1 {
            let cell: UITableViewCell = UITableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: "secondCustomCell")
            //set the data here
            return cell
        }
        else {
            let cell: UITableViewCell = UITableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: "thirdCustomCell")
            //set the data here
            return cell
        }
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

1
मुझे संदेश मिलता है: "फन सेलफोररॉउरएटआईएंडएक्सपैथ में" Projekt.TitelTableViewCell '(0x89568) "प्रकार" UITableViewCell' (0x1dfbfdc) का मान नहीं डाल सका। मैं एक UITableViewController का उपयोग कर रहा हूं और मेरे पास अपने कस्टम सेल "टिटेलज़ेल" के लिए एक "टाइटेलटेबल व्यूसेल" है, जिसे मैंने "टिटेलज़ेल" सेल के पहचान निरीक्षक में सेट किया है। मुझे क्या करना होगा?
ईजीगलर

मैं अपने सेल के रूप में डाली है! इस सेल में मेरे कस्टम UI-तत्वों को पॉप्युलेट करने के लिए TitelTableViewCell।
ईगलगिडर

7
TitelTableViewCell के रूप में: इस कोशिश => जाने सेल = tableView.dequeueReusableCellWithIdentifier (indexPath "TitelZelle", forIndexPath)
नताशा

2
@ प्रदीपकुमार, क्या समस्या है? आपकी क्या त्रुटि है? Btw, आपको एक प्रश्न पूछना चाहिए यदि आपके पास कोई प्रश्न है। लेखक ने विशेष समस्या के संबंध में इस टिप्पणी को समझने या स्पष्ट करने में मदद करने के लिए माना है। यदि आपको कोई समस्या है, तो आपको सवाल पूछने और अपनी खुद की पोस्ट शुरू करने के लिए जाना चाहिए।
नताशा

1
numberOfRowsInSection यह निर्धारित करने में तालिका की मदद करता है कि हमें कितनी पंक्ति चाहिए। तो, आपको केवल क्लॉज प्रदान करना चाहिए जो पंक्तियों की संख्या निर्धारित करने के लिए विधि की सहायता करेगा। indexpath.row == 0 का अर्थ है कि आपके पास पहले से ही एक पंक्ति है, लेकिन उस समय, आपकी तालिका को यह नहीं पता है कि इसमें एक पंक्ति है या नहीं। तो, आपको ऐसा करना चाहिए।
नताशा

32

न्यूनतम कोड के साथ 3.0 + अद्यतन स्विफ्ट

मूल अवधारणा: गतिशील सेल प्रोटोटाइप के साथ एक तालिका दृश्य बनाएं। पहचानकर्ता असाइन करें और प्रत्येक सेल प्रोटोटाइप के लिए कस्टम टेबल व्यू सेल क्लास बनाएं। तालिका दृश्य प्रतिनिधि पद्धति में कस्टम सेल आरंभ करें और दिखाएं।

1. स्टोरीबोर्ड पर सेल बनाएं

अपने व्यू कंट्रोलर में एक टेबल व्यू खींचें, उसमें प्रोटोटाइप सेल जोड़ें और फिर यूआई एलिमेंट को अपने टेबल व्यू सेल में ड्रॉप करें, अगर जरूरत हो तो ठीक से कॉन्सट्रिक्ट जोड़ें।

यहां छवि विवरण दर्ज करें

2. कस्टम UITableViewCellकक्षाएं बनाएं

अपनी परियोजना में निम्नलिखित कोड जोड़ें। मैं इसे व्यू कंट्रोलर क्लास के ठीक ऊपर रख रहा हूं।

class FirstTableCell: UITableViewCell {
}

class SecondTableCell: UITableViewCell {
}

class ThirdTableCell: UITableViewCell {   
}

3. सेल प्रोटोटाइप में कस्टम वर्ग और पहचानकर्ता असाइन करें

स्टोरीबोर्ड में प्रत्येक सेल प्रोटोटाइप के लिए, चरण 2 से बनाए गए कस्टम वर्ग को असाइन करें, और फिर एक अद्वितीय पहचानकर्ता दर्ज करें।

यहां छवि विवरण दर्ज करें

4. यूआई तत्वों को स्विफ्ट कोड से कनेक्ट करें

नियंत्रण तालिका दृश्य को खींचें और दृश्य नियंत्रक वर्ग से कनेक्ट करें। नियंत्रण यूआई तत्वों को चरण 1 पर सेल प्रोटोटाइप में जोड़ा जाता है, और इसी तालिका व्यू सेल वर्ग से कनेक्ट करें।

यहां छवि विवरण दर्ज करें

5. कंट्रोलर देखने के लिए कोड जोड़ें और टेबल व्यू को नियंत्रित करें

अपने व्यू कंट्रोलर को टेबल व्यू डेलीगेट के अनुरूप बनाएं

class YourViewController: UIViewController, UITableViewDataSource, UITableViewDelegate

में viewDidLoad, तालिका दृश्य प्रतिनिधि और डेटा स्रोत सेट करें।

override func viewDidLoad() {
    super.viewDidLoad()

    self.tableView.dataSource = self
    self.tableView.delegate = self

}

अंत में, न्यूनतम आवश्यकता के अनुसार, अपने टेबल व्यू को नियंत्रित करने के लिए दो प्रतिनिधि तरीके जोड़ें।

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 3
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    if indexPath.row == 0 {
        let cell = tableView.dequeueReusableCell(withIdentifier: "firstTableCell") as! FirstTableCell
        // Set up cell.label
        return cell
    } else if indexPath.row == 1 {
        let cell = tableView.dequeueReusableCell(withIdentifier: "secondTableCell") as! SecondTableCell
        // Set up cell.button
        return cell
    } else {
        let cell = tableView.dequeueReusableCell(withIdentifier: "thirdTableCell") as! ThirdTableCell
        // Set up cell.textField
        return cell
    }
}

6. इसे आजमाइए :)

यहां छवि विवरण दर्ज करें


बहुत खुबस! मुझे आपके एनिमेशन पसंद हैं।
17

क्या आप मुझे बता सकते हैं, क्या प्रत्येक सेल के लिए हेडर लगाना संभव है? यदि हां, तो कैसे?
प्रथ्वी हरिहरन

@PruthviHariharan यदि आप अपने प्रत्येक या अधिकांश सेल के लिए "शीर्ष लेख" रखना चाहते हैं, तो हेडर सेल या सेक्शन हेडर को लागू करना अच्छा नहीं है, जिसे प्रबंधित करने के लिए अधिक कोड की आवश्यकता होती है और प्रदर्शन को प्रभावित करेगा। मेरा सुझाव है कि आप अपने प्रोटोटाइप सेल के ऊपर एक दृश्य डालें और इसे "हेडर" की तरह
बनाएं

@FangmingNing क्या आप एक छोटे से उदाहरण के साथ समझा सकते हैं। धन्यवाद
प्रथ्वी हरिहरन

यदि आपको UIViewController के बजाय UITableViewController का उपयोग कर रहे हैं, तो आपको चरण 5 की आवश्यकता नहीं है।
दीपक ठाकुर Deep

0

उपरोक्त उत्तर सबसे अच्छे उत्तर हैं, लेकिन इस मुद्दे को प्राप्त करने के लिए कई कारण हैं। इस समस्या के साथ किसी और के लिए एक और संभावित समाधान है:

मेरी समस्या यह थी कि मैं ViewController वर्ग के लिए बहस कर रहा था न कि स्टोरीबोर्ड दृश्य पर। इसलिए स्टोरीबोर्ड सेल का मेरा संदर्भ अर्थहीन था, क्योंकि स्टोरीबोर्ड का उपयोग नहीं किया जा रहा था।

मैं यह कर रहा था:

let viewControllerB = SubViewController()
viewControllerB.passedData = diseases[indexPath.row].name
navigationController?.pushViewController(viewControllerB, animated: true)

और मुझे ऐसा कुछ करने की आवश्यकता थी:

let storyBoard : UIStoryboard = UIStoryboard(name: "Main", bundle:nil)
let nextViewController = storyBoard.instantiateViewController(withIdentifier: "SubViewStoryboardController") as! SubViewController
nextViewController.passedData = diseases[indexPath.row].name
self.present(nextViewController, animated:true, completion:nil)

आशा है कि यह किसी की मदद करता है।


-22

UITableViewControllerविरासत में मिला है UIViewControllerजो पहले से ही है UITableviewDataSourceऔर UITableviewDelegateखुद पर मैप किया है।

आप अपने अंदर उपवर्ग UITableViewControllerया उपयोग कर TableViewसकते हैं ViewController। उसके बाद आपको आवश्यक तरीकों ( cellForRowAtIndexPath and numberOfRowsInSection) को लागू करना चाहिए जो कि में घोषित किए गए हैं UITableviewDataSource

स्टोरीबोर्ड में भी, आपको विशिष्ट आईडी के साथ सेल प्रोटोटाइप बनाने की आवश्यकता है।

सेल के बुनियादी प्रकार हैं, (उदाहरण के लिए शीर्षक, उपशीर्षक) - आप विशेष कॉन्फ़िगरेशन की आवश्यकता नहीं होने पर भी उनका उपयोग कर सकते हैं।

इसलिए, पिकर के लिए, हां, आपको अपना कस्टम सेल बनाने की आवश्यकता है। आवश्यक कस्टम UITableViewCellक्लास होल्डिंग डेट पिकर बनाएँ और अपने वांछित परिणाम को वापस भेजने के लिए प्रतिनिधि का उपयोग करना सुनिश्चित करें ViewController

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.