iOS में गोल कोनों वाला TableView कैसे बनाएं

टेबल व्यू iOS एप्लिकेशन के सबसे महत्वपूर्ण और मौलिक भागों में से एक है, हर iOS डेवलपर को इससे परिचित होना चाहिए।

ऐप स्टोर में आपके द्वारा देखे जाने वाले लगभग हर एप्लिकेशन टेबल व्यू का उपयोग करते हैं।

iOS पर टेबल व्यूज वर्टिकली स्क्रॉल होने वाले कंटेंट का एक सिंगल कॉलम प्रदर्शित करते हैं, जो पंक्तियों में विभाजित होता है। टेबल की प्रत्येक पंक्ति में आपके ऐप के कंटेंट का एक टुकड़ा होता है। उदाहरण के लिए, Contacts ऐप प्रत्येक संपर्क का नाम एक अलग पंक्ति में प्रदर्शित करता है, और Settings ऐप के मुख्य पेज पर सेटिंग्स के उपलब्ध समूह प्रदर्शित होते हैं।

टेबल व्यू के बारे में यहाँ और पढ़ें: https://developer.apple.com/documentation/uikit/uitableview

इस पोस्ट में हम देखेंगे कि गोल कोनों वाला टेबल व्यू कैसे बना सकते हैं।

शुरुआत करते हैं

चरण 1: प्रोजेक्ट बनाएं

Xcode खोलें → New Project → Single View Application → नाम दें "TableViewWithRoundedCorner"

चरण 2: UITableView जोड़ें

Main.storyboard खोलें और नीचे दिखाए अनुसार UITableView जोड़ें।

चरण 3: आउटलेट और डेलीगेट/डेटासोर्स

ViewController.swift में अब Main.storyboard से tableView का @IBOutlet बनाएं और नाम दें tableView।

ViewController.swift में, viewDidLoad मेथड में, नीचे दिखाए अनुसार tableView में डेलीगेट और डेटासोर्स जोड़ें।

@IBOutlet var tableView: UITableView!
override func viewDidLoad() {
    super.viewDidLoad()
    tableView.delegate = self
    tableView.dataSource = self
}

चरण 4: स्टोरीबोर्ड में UI सेटअप

Main.storyboard खोलें और ViewController का बैकग्राउंड रंग बदलें, प्रोटोटाइप सेल जोड़ें और सेल के अंदर लेबल जोड़ें।

अब UITableViewCell सबटाइप की नई फाइल जोड़ें और उसी को सेल में जोड़ें।

चरण 5: डेलीगेट मेथड्स इम्प्लीमेंट करें

अब ViewController.swift खोलें और प्रोटोकॉल कंफर्म करें और डेलीगेट मेथड्स नीचे दिए अनुसार इम्प्लीमेंट करें।

extension ViewController: UITableViewDataSource, UITableViewDelegate {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 2
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! TableViewCell
        return cell
    }
    
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 80
    }
}

चरण 6: गोल कोने जोड़ें

प्रोजेक्ट चलाएं लेकिन टेबल व्यू गोल कोनों के साथ नहीं आएगा, ऐसा करने के लिए viewDidLoad मेथड में नीचे दिया गया कोड लिखें।

tableView.layer.cornerRadius = 10 // कॉर्नर रेडियस यहां सेट करें
tableView.layer.backgroundColor = UIColor.cyan.cgColor

पूरा कोड

import UIKit

class ViewController: UIViewController {
    @IBOutlet var tableView: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.delegate = self
        tableView.dataSource = self
        tableView.layer.cornerRadius = 10
        tableView.layer.backgroundColor = UIColor.cyan.cgColor
    }
}

extension ViewController: UITableViewDataSource, UITableViewDelegate {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 2
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! TableViewCell
        return cell
    }
    
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 80
    }
}