সুইফট সহ একাধিক কাস্টম সেল সহ ইউআইটিএলভিউ


111

আমি বিভিন্ন কাস্টম টেবিলভিউ সেলস সহ একটি ইউআইটিএলভিউ ব্যবহার করতে চাই। আমার 3 টি কোষ এরকম:

  • সেল 1: এর একটি চিত্র এবং একটি লেবেল থাকা উচিত।
  • সেল 2: দুটি লেবেল থাকা উচিত।
  • সেল 3: ডে-পিকার থাকা উচিত।

আমি সেলগুলির জন্য কোনও ট্যাগ কোড করতে চাই না। আমি কীভাবে এটি সুইফটে পরিচালনা করতে পারি। প্রতিটি ঘরে আমার নিজের ক্লাস কোড করতে হবে? আমি কি একটি টেবিলভিউ কনট্রোলার ব্যবহার করতে পারি? আমি কীভাবে বিভিন্ন কক্ষে ডেটা পপুলেট করতে পারি?

আমি কোনও আইওএস ডিভাইসের যোগাযোগ অ্যাপের মতো একটি টেবিলভিউ তৈরি করতে চাই।



উত্তর:


270

আমাকে প্রথমে আপনার প্রশ্নের উত্তর দিয়ে শুরু করুন।

আমি কি প্রতিটি ঘরের জন্য নিজস্ব ক্লাস কোড করতে পারি? => হ্যাঁ, আমি এটি বিশ্বাস করি। কমপক্ষে, আমি সেভাবেই করতাম।

আমি কি একটি টেবিলভিউ কনট্রোলার ব্যবহার করতে পারি? => হ্যাঁ, আপনি পারেন। তবে আপনার ভিউ কন্ট্রোলারের অভ্যন্তরে একটি টেবিল ভিউও থাকতে পারে।

আমি কীভাবে বিভিন্ন কক্ষে ডেটা পপুলেট করতে পারি? => শর্তগুলির উপর নির্ভর করে, আপনি বিভিন্ন কক্ষে ডেটা স্থাপন করতে পারেন। উদাহরণস্বরূপ, ধরে নেওয়া যাক আপনি চান যে আপনার প্রথম দুটি সারিটি প্রথম ধরণের কোষের মতো হয়। সুতরাং, আপনি কেবল প্রথম প্রকারের ঘর তৈরি / পুনঃব্যবহার এবং এর ডেটা সেট করেছেন। এটি আরও স্পষ্ট হবে, যখন আমি আপনাকে স্ক্রিন শটগুলি দেখাব তখন আমার ধারণা।

আমি আপনাকে একটি ভিউকন্ট্রোলারের অভ্যন্তরে একটি টেবিলভিউ দিয়ে একটি উদাহরণ দিই। একবার আপনি মূল ধারণাটি বুঝতে পারলে আপনি যেভাবেই চান চেষ্টা ও সংশোধন করতে পারেন।

পদক্ষেপ 1: 3 টি কাস্টম টেবিলভিউসেল তৈরি করুন। আমি এর নাম দিয়েছি, ফার্স্ট কাস্টম টেবিলভিউ সেল, সেকেন্ড কাস্টম টেবিলভিউ সেল, থার্ডকাস্টম টেবিলভিউ সেল। আপনার আরও অর্থপূর্ণ নাম ব্যবহার করা উচিত।

এখানে চিত্র বর্ণনা লিখুন

পদক্ষেপ 2: মেইন.স্টরিবোর্ডে যান এবং আপনার ভিউ কন্ট্রোলারের ভিতরে টেবিলভিউটি টানুন এবং ফেলে দিন। এখন, সারণী দর্শনটি নির্বাচন করুন এবং পরিচয় পরিদর্শকের কাছে যান। "প্রোটোটাইপ ঘর" 3 এ সেট করুন Here এখানে, আপনি কেবলমাত্র আপনার টেবিলভিউকে বলেছেন যে আপনার কাছে 3 বিভিন্ন ধরণের কোষ থাকতে পারে।

এখানে চিত্র বর্ণনা লিখুন

পদক্ষেপ 3: এখন, আপনার টেবিলভিউতে এবং পরিচয় পরিদর্শকতে 1 ম ঘরটি নির্বাচন করুন, কাস্টম শ্রেণীর ক্ষেত্রে "ফার্স্টকাস্টম টেবিলভিউসেল" রাখুন এবং তারপরে অ্যাট্রিবিউট ইন্সপেক্টরটিতে সনাক্তকারীকে "ফার্স্ট কাস্টমসেল" হিসাবে সেট করুন।

এখানে চিত্র বর্ণনা লিখুন

এখানে চিত্র বর্ণনা লিখুন

অন্য সকলের জন্য একই করুন - তাদের কাস্টম ক্লাসগুলি যথাক্রমে "সেকেন্ডকাস্টম টেবিলভিউ সেল" এবং "থার্ডকাস্টম টেবিলভিউ সেল" হিসাবে সেট করুন। সনাক্তকারীদের পর পর দ্বিতীয়বারের মতো কাস্টমসেল এবং তৃতীয় কাস্টমসেল হিসাবে সেট করুন।

পদক্ষেপ 4: কাস্টম সেল ক্লাসগুলি সম্পাদনা করুন এবং আপনার প্রয়োজন অনুসারে আউটলেটগুলি যুক্ত করুন। আপনার প্রশ্নের ভিত্তিতে আমি এটি সম্পাদনা করেছি।

পিএস: আপনার আউটলেটগুলি শ্রেণির সংজ্ঞার আওতায় রাখা দরকার।

সুতরাং, ফার্স্ট কাস্টম টেবিলভিউসেল.স্ফিটে, এর অধীনে

class FirstCustomTableViewCell: UITableViewCell {

আপনি আপনার লেবেল এবং চিত্র দেখার আউটলেট রাখবেন।

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

এবং সেকেন্ড কাস্টম টেবিলভিউ সেল.সুইফ্টে দুটি লেবেল যুক্ত করুন-

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: আপনার ভিউকন্ট্রোলারে আপনার টেবিলভিউয়ের জন্য একটি আউটলেট তৈরি করুন এবং স্টোরিবোর্ড থেকে সংযোগটি সেট করুন। এছাড়াও, আপনাকে প্রোটোকল তালিকা হিসাবে শ্রেণি সংজ্ঞাতে UITableViewDelegate এবং UITableViewDataSource যুক্ত করতে হবে। সুতরাং, আপনার শ্রেণির সংজ্ঞাটি দেখতে হবে-

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

এর পরে আপনার টেবিল দৃশ্যের UITableViewDelegate এবং UITableViewDatasourceটিকে আপনার নিয়ামকের সাথে সংযুক্ত করুন। এই মুহুর্তে আপনার ভিউকন্ট্রোলআরউইউফ্টটি দেখতে হবে-

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    @IBOutlet weak var tableView: UITableView!

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

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

পিএস: আপনি যদি ভিউকন্ট্রোলারের ভিতরে কোনও টেবিল ভিউয়ের পরিবর্তে কোনও টেবিলভিউ নিয়ন্ত্রণকারী ব্যবহার করেন তবে আপনি এই পদক্ষেপটি এড়িয়ে যেতে পারেন।

পদক্ষেপ।: সেল শ্রেণীর অনুসারে আপনার ঘরে ইমেল ভিউ এবং লেবেলগুলি টানুন এবং ফেলে দিন। এবং তারপরে স্টোরিবোর্ড থেকে তাদের আউটলেটগুলিতে সংযোগ সরবরাহ করুন।

পদক্ষেপ:: এখন, ভিউ কন্ট্রোলারে ইউআইটিবেবলিউডা ডেটাসোর্সের প্রয়োজনীয় পদ্ধতিগুলি লিখুন।

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
আমি বার্তাটি পেয়েছি: "ইউআইটিএবলভিউসেল '(0x1dfbfdc) টাইপের মান' প্রজেক্ট.টাইটেলট্যাবলভিউসেল '(0x89568) তে কাস্ট করতে পারেনি" ফানক সেলফোর্ডআউটইন্ডেক্সপ্যাথে। আমি একটি ইউআইটিএবলভিউ কনট্রোলার ব্যবহার করছি এবং আমার কাস্টম সেল "টাইটেলজেল" এর জন্য আমার একটি ক্লাস "টাইটেলবেলভিউসেল" রয়েছে, যা আমি "টাইটেলজেল" সেলটির পরিচয় পরিদর্শককে সেট করেছি। আমাকে কি করতে হবে?
ইজিগ্লাইডার

আমি আমার সেল যেমন কাস্ট করেছি! এই কক্ষে আমার কাস্টম UI- উপাদানগুলি পপুলেট করতে শিরোনাম টেবিলটেবলভিউসেল।
ইজিগ্লাইডার

7
এটি => সেল = টেবিল ভিউ.ডেকিউরউইজেবলসেল ওয়েলইথআইডিটিফায়ার ("টাইটেলজেল", ইনডেক্সপথ: ইনডেক্সপথ) হিসাবে টাইটেল টেবিলভিউচেল হিসাবে প্রদর্শন করুন
নাতাশা

2
@ প্রদীপকুমার, সমস্যা কি? আপনার ত্রুটি কী? বিটিডব্লিউ, আপনার যদি কোনও প্রশ্ন থাকে তবে আপনার একটি প্রশ্ন জিজ্ঞাসা করা উচিত। মন্তব্যটি বিশেষ সমস্যা সম্পর্কে এটি বুঝতে বা স্পষ্ট করতে সহায়তা করবে বলে মনে করা হয়েছে, লেখক পোস্ট করেছেন। আপনার যদি সমস্যা হয় তবে আপনার প্রশ্ন জিজ্ঞাসা করতে হবে এবং নিজের পোস্টটি শুরু করা উচিত।
নাতাশা

1
সংখ্যাঅফ্রাউসইনসেকশনটি কতগুলি সারি, আমরা তা নির্ধারণ করতে সারণী দর্শনটিকে সহায়তা করে। সুতরাং, আপনার কেবল এমন ধারা সরবরাহ করা উচিত যা সারিগুলির সংখ্যা নির্ধারণে পদ্ধতিটিকে সহায়তা করবে। indexpath.row == 0 এর অর্থ আপনার ইতিমধ্যে একটি সারি রয়েছে তবে সেই সময়, আপনার টেবিলটি এটির সারি আছে কিনা তা জানে না। সুতরাং, আপনার এটি করা উচিত।
নাতাশা

32

ন্যূনতম কোড সহ সুইফট 3.0 + আপডেট

বেসিক ধারণা: গতিশীল সেল প্রোটোটাইপগুলি সহ একটি টেবিল ভিউ তৈরি করুন। সনাক্তকারী নির্ধারণ করুন এবং প্রতিটি সেল প্রোটোটাইপের জন্য কাস্টম টেবিল ভিউ সেল শ্রেণি তৈরি করুন। সারণী দর্শনের প্রতিনিধি পদ্ধতিতে কাস্টম সেলগুলি শুরু করুন এবং দেখান।

1. স্টোরিবোর্ডে ঘর তৈরি করুন

আপনার ভিউ কন্ট্রোলারে একটি টেবিলভিউ টেনে আনুন, এতে প্রোটোটাইপ সেল যুক্ত করুন এবং তারপরে আপনার টেবিল ভিউ সেলগুলিতে ইউআই উপাদানটি ফেলে দিন, প্রয়োজনে যথাযথভাবে সীমাবদ্ধতা যুক্ত করুন।

এখানে চিত্র বর্ণনা লিখুন

2. কাস্টম UITableViewCellক্লাস তৈরি করুন

আপনার প্রকল্পে নিম্নলিখিত কোড যুক্ত করুন। আমি এটিকে ভিউ কন্ট্রোলার ক্লাসের ঠিক উপরে রাখছি।

class FirstTableCell: UITableViewCell {
}

class SecondTableCell: UITableViewCell {
}

class ThirdTableCell: UITableViewCell {   
}

৩. সেল প্রোটোটাইপগুলিতে কাস্টম ক্লাস এবং শনাক্তকারীকে নিয়োগ করুন

স্টোরিবোর্ডে প্রতিটি ঘর প্রোটোটাইপগুলির জন্য, পদক্ষেপ 2 থেকে তৈরি কাস্টম ক্লাসটি নির্ধারণ করুন এবং তারপরে একটি অনন্য শনাক্তকারী প্রবেশ করান।

এখানে চিত্র বর্ণনা লিখুন

4. সুইচ কোডে ইউআই উপাদানগুলি সংযুক্ত করুন

টেবিল ভিউ নিয়ন্ত্রণ করুন এবং দেখুন নিয়ামক শ্রেণীর সাথে সংযুক্ত করুন। পদক্ষেপ 1 এ সেল প্রোটোটাইপগুলিতে যুক্ত হওয়া UI উপাদানগুলিকে নিয়ন্ত্রণ করুন এবং সংশ্লিষ্ট টেবিল ভিউ সেল শ্রেণীর সাথে সংযুক্ত করুন।

এখানে চিত্র বর্ণনা লিখুন

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. চেষ্টা করে দেখুন :)

এখানে চিত্র বর্ণনা লিখুন


ফ্যান্টাস্টিক! আমি আপনার অ্যানিমেশন পছন্দ।
iphaaw

আপনি আমাকে দয়া করে বলতে পারেন, প্রতিটি ঘরের জন্য একটি শিরোনাম স্থাপন করা কি সম্ভব? যদি তাই হয়, কিভাবে?
পৃথ্বী হরিহরন

@ প্রুথভিহারিহরণ যদি আপনি আপনার প্রতিটি বা বেশিরভাগ কক্ষের জন্য "শিরোনাম" রাখতে চান তবে শিরোনাম সেল বা বিভাগের শিরোনামগুলি প্রয়োগ করা ভাল ধারণা নয়, যার পরিচালনা করার জন্য আরও কোড প্রয়োজন এবং কার্য সম্পাদনকে প্রভাবিত করবে। আমার পরামর্শটি হ'ল আপনার প্রোটোটাইপ কক্ষের উপরে একটি ভিউ রাখুন এবং এটিকে একটি "শিরোনাম" এর মতো দেখান
ফ্যাংমিং

@ ফ্যাংমিংনিং আপনি দয়া করে একটি ছোট উদাহরণ দিয়ে ব্যাখ্যা করতে পারেন। আপনাকে ধন্যবাদ
পৃথ্বী হরিহরন

আপনি যদি কোনও ইউআইভিউকন্ট্রোলারের পরিবর্তে ইউআইটিএবল ভিউকন্ট্রোলার ব্যবহার করে থাকেন তবে আপনার পদক্ষেপ 5 এর দরকার নেই।
দীপক ঠাকুর

0

উপরের উত্তরগুলি সেরা উত্তর, তবে এই সমস্যাটি পাওয়ার জন্য অনেকগুলি কারণ রয়েছে। এই সমস্যাটি যে কারও জন্য এখানে আরও একটি সম্ভাব্য সমাধান:

আমার সমস্যাটি হ'ল আমি স্টোরিবোর্ডের ভিউতে নয় বরং ভিউকন্ট্রোলার ক্লাসে সিগমেন্ট দিচ্ছিলাম। সুতরাং স্টোরিবোর্ডের ঘরে আমার উল্লেখটি অর্থহীন ছিল, যেহেতু স্টোরিবোর্ডটি ব্যবহৃত হচ্ছে না।

আমি এটি করছিলাম:

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

UITableViewControllerinheriting হয় UIViewControllerযে ইতিমধ্যে UITableviewDataSource& UITableviewDelegateনিজেই ম্যাপ।

আপনি সাবক্লাস UITableViewControllerকরতে পারেন বা TableViewআপনার অভ্যন্তরে একটি ব্যবহার করতে পারেন ViewController। এর পরে আপনাকে অবশ্যই প্রয়োজনীয় পদ্ধতিগুলি প্রয়োগ করতে হবে ( cellForRowAtIndexPath and numberOfRowsInSection) যা প্রদত্ত UITableviewDataSource

স্টোরিবোর্ডেও আপনাকে অনন্য আইডির সাহায্যে সেল প্রোটোটাইপ তৈরি করতে হবে।

এখানে প্রাথমিক ধরণের ঘর রয়েছে (উদাহরণস্বরূপ শিরোনাম, সাবটাইটেল) - আপনার যদি বিশেষ কনফিগারেশন না প্রয়োজন হয় তবে আপনি সেগুলিও ব্যবহার করতে পারেন।

সুতরাং, বাছাইকারীটির জন্য, হ্যাঁ, আপনাকে নিজের কাস্টম সেল তৈরি করতে হবে। প্রয়োজনীয় কাস্টম UITableViewCellক্লাস হোল্ডিং ডেট পিকারটি তৈরি করুন এবং প্রত্যাশিত ফলাফলটি আপনার কাছে ফেরত পাঠাতে ডেলিগেট ব্যবহার নিশ্চিত করুন ViewController

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.