UITableview з більш ніж одними користувацькими клітинками з Swift


111

Я хочу використовувати перегляд UITable з різними користувацькими tableViewCells. Мої 3 клітини є такими:

  • Cell1: повинен мати зображення та мітку.
  • Cell2: має мати дві мітки.
  • Cell3: повинен мати день вибору.

Я не хочу кодувати тег для комірок. Як я можу керувати цим у Swift. Чи потрібно кодувати свій клас для кожної комірки? Чи можна використовувати один tableviewController? Як я можу заповнити дані в різних клітинках?

Я хотів би створити tableView, як контактну програму пристрою iOS.



Відповіді:


270

Дозвольте спочатку відповісти на ваші запитання.

Чи потрібно кодувати власний клас для кожної комірки? => Так, я вважаю так. Принаймні, я би так зробив.

Чи можу я використовувати один tableviewController? => Так, ви можете. Однак ви також можете мати вигляд таблиці всередині вашого контролера перегляду.

Як я можу заповнити дані в різних клітинках? => Залежно від умов, ви можете заповнити дані в різних клітинках. Наприклад, припустимо, що ви хочете, щоб ваші перші два ряди були схожими на клітини першого типу. Отже, ви просто створюєте / повторно використовуєте клітини першого типу та встановлюєте його дані. Це буде зрозуміліше, коли я покажу вам знімки екрана, я думаю.

Дозвольте навести приклад із TableView всередині ViewController. Після того, як ви зрозумієте головну концепцію, ви можете спробувати і змінити будь-який потрібний вам спосіб.

Крок 1: Створіть 3 користувацьких TableViewCells. Я назвав його, FirstCustomTableViewCell, SecondCustomTableViewCell, ThirdCustomTableViewCell. Вам слід використовувати більш значущі імена.

введіть тут опис зображення

Крок 2: Перейдіть на Main.storyboard і перетягніть таблицю TableView всередину вашого контролера перегляду. Тепер виберіть подання таблиці та перейдіть до інспектора посвідчення особи. Встановіть "Прототипові клітини" на 3. Тут ви щойно сказали вашому TableView, що у вас можуть бути 3 різних видів комірок.

введіть тут опис зображення

Крок 3: Тепер виберіть першу клітинку у вашому TableView та інспекторі ідентичності, в поле "Спеціальний клас" покладіть "FirstCustomTableViewCell", а потім встановіть ідентифікатор як "firstCustomCell" в інспекторі атрибутів.

введіть тут опис зображення

введіть тут опис зображення

Зробіть те саме для всіх інших - встановіть їх власні класи як "SecondCustomTableViewCell" та "ThirdCustomTableViewCell" відповідно. Також встановіть ідентифікатори як secondCustomCell і thirdCustomCell послідовно.

Крок 4: Відредагуйте власні класи клітинок і додайте торгові точки відповідно до ваших потреб. Я відредагував це на основі вашого запитання.

PS: Вам потрібно поставити торгові точки під визначення класу.

Отже, у програмі 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)
    }
}

і ThirdCustomTableViewCell.swift повинен виглядати як-

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 перегляду таблиці до свого контролера. У цей момент ваш поглядController.swift повинен виглядати як-

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    @IBOutlet weak var tableView: UITableView!

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

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

PS: Якщо ви використовували TableViewController, а не TableView у ViewController, ви могли пропустити цей крок.

Крок 6: Перетягніть перегляди зображень та міток у вашій комірці відповідно до класу Cell. а потім забезпечити підключення до своїх відділень із розкадрівки.

Крок 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
Я отримую повідомлення: "Не вдалося передати значення типу 'UITableViewCell' (0x1dfbfdc) до 'Projekt.TitelTableViewCell' (0x89568)" у клітинку funcForRowAtIndexPath. Я використовую UITableViewController і у мене є клас "TitelTableViewCell" для моєї користувальницької комірки "TitelZelle", яку я встановив у інспектора ідентичності комірки "TitelZelle". Що я маю робити?
Easyglider

Я кинув свою камеру як! TitelTableViewCell, щоб заповнити мої власні користувальницькі елементи інтерфейсу в цій комірці.
Easyglider

7
спробуйте це => нехай cell = tableView.dequeueReusableCellWithIdentifier ("TitelZelle", forIndexPath: indexPath) як TitelTableViewCell
Наташа

2
@PradipKumar, у чому проблема? Яка ваша помилка? До речі, вам слід задати питання, якщо у вас є запити. Автор коментаря повинен допомогти зрозуміти або уточнити це стосовно конкретної проблеми. Якщо у вас є проблеми, вам слід перейти до питання і почати власне повідомлення.
Наташа

1
numberOfRowsInSection допомагає перегляду таблиці визначити, скільки рядків нам потрібно. Отже, вам слід надати лише пункт, який допоможе методу визначити кількість рядків. indexpath.row == 0 означає, що ви вже маєте рядок, але на той час ваша таблиця не знає, чи має він рядок чи ні. Отже, ви повинні зробити так.
Наташа

32

Swift 3.0 + оновлення з мінімальним кодом

Основна концепція: Створіть подання таблиці з прототипами динамічних комірок. Призначте ідентифікатор та створіть спеціальний клас комірок для подання таблиці для кожного прототипу комірок. Ініціюйте та покажіть власні комірки у методі делегування подання таблиці.

1. Створіть комірки на розкадровці

Перетягніть tableView до контролера перегляду, додайте до нього комірки-прототипи, а потім опустіть елемент інтерфейсу в осередки перегляду таблиці, при необхідності додайте обмеження.

введіть тут опис зображення

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. Спробуйте :)

введіть тут опис зображення


Фантастичний! Я люблю ваші анімації.
iphaaw

Скажіть, будь ласка, чи можна поставити заголовок для кожної комірки? якщо так, то як?
Прутві Харіхаран

@PruthviHariharan, якщо ви хочете мати "заголовок" для кожної або більшості ваших комірок, це не дуже гарна ідея впровадити заголовки комірок або заголовків розділів, для управління якими потрібно більше коду та вплине на продуктивність. Моя пропозиція - поставити вид зверху на ваш осередок прототипу і зробити його схожим на "заголовок"
Fangming

@FangmingNing Чи можете ви поясніть, будь ласка, невеликим прикладом. Дякую
Прутві Харіхаран

Вам не потрібен крок 5, якщо ви використовуєте UITableViewController замість UIViewController.
Діпак Тхакур

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.

Також у раскадровці вам потрібно створити прототипи комірок з унікальним Id.

Є основні типи комірок, з (наприклад, заголовок, підзаголовок) - ви також можете використовувати їх, якщо вам не потрібна спеціальна конфігурація.

Отже, для вибору "так", вам потрібно створити власну власну клітинку. Створіть необхідний спеціаліст для UITableViewCellвибору дати проведення класу та переконайтесь, що використовуйте делегат, щоб повернути бажаний результат назад до свого ViewController.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.