2016-08-02 6 views
4

Привет, я хочу иметь разные макеты в разных разделах UITableView, я хочу сделать это с помощью динамических ячеек прототипа, а не с помощью статических ячеек. Я не знаю, как его создать, пожалуйста, помогите. Любые ссылки или что-то еще. Я хочу достичь этого, см. Изображение pls download the picРазличные макеты в разных разделах представления таблиц

Просьба указать код, если он есть, в срочном порядке.

+0

Что вы подразумеваете под разными макетами? В представлении таблицы могут быть только разные пользовательские ячейки разной высоты и не разные размеры, например, в виде коллекции. – Kunal

+0

Если предположить, что в первом разделе представления таблицы у меня есть изображение и макет, чем во втором разделе, я хочу иметь только изображение, а ячейки быть динамичным, а не статическим. Как и в Facebook, и все. –

+0

Взгляните на мое решение, я старался быть максимально ясным и тщательным. Увидев это, вы все равно сможете настраивать свои таблицы. – Natasha

ответ

4

В соответствии с вашими данными, похоже, вы хотите сгруппировать таблицу, где ваш другой раздел будет иметь разные типы ячеек. Это довольно легко.

Итак, давайте начнем. Я объяснил, что все проходит через царапины сквозь скриншоты. Если вы просто следуете этому, вы поймете концепцию и процесс.

(я предполагаю, что вы знаете, как добавить необходимые ограничения)

Во-первых, Перейти к раскадровке и перетащить Tableview в вашем контроллере.

enter image description here

Затем создать 2 пользовательских UITableViewCell

классами:

enter image description here

Теперь перетащите 2 Tableview ячейки внутри TableView в раскадровке.

enter image description here

Итак, у вас есть 2 Tableview клетки внутри вашего TableView, для которых вы уже создали два пользовательских ячеек.

Теперь нам нужно назначить классы ячеек, чтобы он мог понять, к какому классу он должен соответствовать. Выберите первую ячейку в раскадровке, нажмите на классе инспектора и назначить его class-

сделать то же самое для второй ячейки -

enter image description here

Мы также должны дать им уникальные идентификаторы. Выберите первую ячейку и присвоить идентификатор, как -

enter image description here

Сделайте то же самое для второй ячейки -

enter image description here

Мы почти закончили настройку пользовательского интерфейса. Последняя часть - сообщить UITableView, что это будет тип группы.

Снова выберите TableView и назначить его тип «Группа» как-

enter image description here

Теперь мы хорошо идти.

Давайте объявим некоторые IBOutlets в наших пользовательских TableViewCells, которые мы создали ранее.

TypeOneTableViewCell.swift class-

import UIKit 

class TypeOneTableViewCell: UITableViewCell { 

    @IBOutlet weak var cellImageView: UIImageView! 
    @IBOutlet weak var cellTitleLabel: UILabel! 
    @IBOutlet weak var cellSubtitleLabel: UILabel! 

    override func awakeFromNib() { 
     super.awakeFromNib() 

    } 
} 

и TypeTwoTableViewCell.swift class-

import UIKit 

class TypeTwoTableViewCell: UITableViewCell { 

    @IBOutlet weak var cellTitleLabel: UILabel! 
    @IBOutlet weak var cellSubtitleLabel: UILabel! 
    @IBOutlet weak var cellButton: UIButton! 


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

Перейти к раскадровке и добавьте изображение и две метки в первой ячейке прототипа и прикрепить их с магазины.

enter image description here

Теперь во второй ячейке, добавить кнопку и две метки и соединить выпускные отверстия так же, как перед-

Хватит с созданием. Давайте перейдем к некоторым реальным вещам. Перейти к классу контроллера и первым создать IBOutlet для Tableview как-

@IBOutlet weak var groupedTableView :UITableView! 

Не забудьте прикрепить выход на Tableview в раскадровке.

enter image description here

Теперь нам нужно Tableview делегат и Datasource. Итак, давайте включим их в списке протоколов как-

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource { 

Прямо сейчас, вы можете получить ошибку, потому что вы не реализуете необходимые методы делегата, который является протоколом UITableViewDataSource, но это нормально, это будет в ближайшее время.

Первое место сначала. Укажите, кто собирается внедрять методы делегата и источника данных. Перейдите к методу viewDidLoad и добавить -

override func viewDidLoad() { 
     super.viewDidLoad() 
     self.groupedTableView.dataSource! = self 
     self.groupedTableView.delegate! = self 
    } 

тогда скажите вашему Tableview, что вы будете иметь 2 секции с помощью метода numberOfSectionsInTableView как-

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

, а затем указать, сколько ячеек, каждая секция будет проводиться. Предположим, что 1-й раздел содержит 4 строки, а второй содержит 3 строки. Для этого используйте метод numberOfRowsInSection.

func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int{                     
     if section == 0{ 
      return 4 
     } 
     else{ 
      return 3 
     } 
    } 

и последняя часть, определяющая ячейки, и это данных-

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell{ 
     if indexPath.section == 0{ 
      let cell : TypeOneTableViewCell = tableView.dequeueReusableCellWithIdentifier("typeOneCell", forIndexPath: indexPath) as! TypeOneTableViewCell 

      cell.imageView!.image = UIImage(named: "noImage.png") 
      cell.cellTitleLabel.text = "Header " + "\(indexPath.section)" + "-" + "\(indexPath.row)" 
      cell.cellSubtitleLabel.text = "Details " + "\(indexPath.section)" + "-" + "\(indexPath.row)" 
      return cell 
     } 
     else{ 
      let cell : TypeTwoTableViewCell = tableView.dequeueReusableCellWithIdentifier("TypeTwoCell", forIndexPath: indexPath) as! TypeTwoTableViewCell 

      cell.cellTitleLabel.text = "Header " + "\(indexPath.section)" + "-" + "\(indexPath.row)" 
      cell.cellSubtitleLabel.text = "Details " + "\(indexPath.section)" + "-" + "\(indexPath.row)" 
      return cell 

     } 
    } 

Там вы GO! TableView имеет много методов делегатов, например heightForRowAtIndexPath, чтобы указать высоты пользовательских ячеек. В моем случае я указал его как 80.0 like-

func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat { 
     return 80.0 
    } 

Вы можете сделать гораздо больше настроек с помощью этих методов делегата. Проверьте руководство Apple для UITableView.

P.S. : для украшения я добавил изображение здесь.Если вы реализуете то же самое, я сделал, вы должны увидеть результат как-

enter image description here

Надеется, что это помогает.

+0

Большое вам спасибо за подробное объяснение меня –

+0

Вы должны уметь находить мой связанный адрес в моем профиле. Не знаю, если прямой адрес электронной почты является политикой стека. – Natasha

1

Для клетки должна быть динамичной, сделайте следующее:

func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat { 
    if (indexPath.row==0 && indexPath.section==0){ 
     //static cell 
     return 120 //static height 
    } 

    return UITableViewAutomaticDimension //for dynamic cell height 
} 

func tableView(tableView: UITableView, estimatedHeightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat { 
    return UITableViewAutomaticDimension 
} 

Кроме того, вы должны убедиться, что элементы в клетке связаны с autolayout для правильного размещения элементов с динамической высотой.

Смежные вопросы