uitableview - number - Diseño diferente en diferentes secciones de la vista Tabla

uitableviewcell swift 3

Question

Hola, quiero tener diferentes diseños en diferentes secciones de UITableView, quiero hacerlo usando celdas de prototipos dinámicos y no usando celdas estáticas. No sé cómo crearlo, por favor ayuda. Cualquier enlace o algo. Quiero lograr de esta manera, por favor, mira la imagen, los pls descargan la foto

Por favor, proporcione su código si hay alguno a la brevedad.

Answer 1

De acuerdo con sus detalles, parece que desea una vista de tabla agrupada donde su sección diferente tendrá diferentes tipos de celda. Eso es bastante fácil.

Entonces comencemos. Expliqué todo el recorrido desde cero a través de las capturas de pantalla. Si solo sigues esto, entenderás el concepto y el proceso.

(Asumo que usted sabe cómo agregar las restricciones necesarias)

En primer lugar, vaya al Guión gráfico y arrastre TableView en su Controlador.

Luego crea 2 clases UITableViewCell personalizadas-

Ahora arrastre y suelte 2 celdas TableView dentro de su TableView en el guión gráfico.

Entonces, tiene 2 celdas tableView dentro de su TableView para las cuales ya ha creado dos celdas personalizadas.

Ahora, debemos asignar las clases de celda, para que pueda entender a qué clase corresponde. Seleccione la primera celda en el guión gráfico, haga clic en el inspector de clase y asigne su clase-

Haga lo mismo para la segunda celda -

También necesitamos darles identificadores únicos. Seleccione la primera celda y asigne un identificador como -

Haz lo mismo para la segunda celda -

Casi hemos terminado de configurar la interfaz de usuario. La última pieza es decirle a UITableView que va a ser del tipo "Grupo".

Nuevamente seleccione TableView y asigne su tipo a "Grupo" como-

Ahora, estamos listos para irnos.

Declaremos algunos IBOutlets en nuestras TableViewCells personalizadas que hemos creado anteriormente.

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()

    }
}

y 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()
    }
}

Vaya al Guión gráfico y agregue una imagen y dos etiquetas en la celda del primer prototipo y conéctelas a las tomas.

Ahora en la segunda celda, agregue un botón y dos etiquetas y conecte las salidas de la misma manera que antes-

Suficiente con la configuración. Saltemos a hacer algunas cosas reales. Ve a tu clase de controlador y primero crea un IBOutlet para tu mesa. Ver como-

  @IBOutlet weak var groupedTableView :UITableView!

No olvide adjuntar la salida de TableView en el guión gráfico.

Ahora, necesitamos el delegado TableView y el origen de datos. Entonces, vamos a incluirlos en la lista de protocolos como-

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

En este momento, puede estar recibiendo un error porque no ha implementado los métodos de delegado requeridos que se encuentran en el protocolo UITableViewDatasource, pero está bien, se resolverá pronto.

Primero lo primero. Especifique quién va a implementar los métodos de delegado y origen de datos. Vaya a su método viewDidLoad y agregue esto -

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

luego dígale a su mesaVer que tendrá 2 secciones a través del método numberOfSectionsInTableView like-

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

y luego especifique cuántas de las celdas, cada sección se mantendrá. Supongamos que la primera sección contiene 4 filas y la segunda contiene 3 filas. Para hacerlo, usa el método numberOfRowsInSection .

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

y la última parte, definiendo la celda y su data-

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

        }
    }

¡Aquí tienes! TableView tiene muchos métodos de delegado como heightForRowAtIndexPath para especificar las alturas de las celdas personalizadas. En mi caso lo especifiqué como 80.0 como-

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

Puede hacer mucha más personalización con esos métodos delegados. Consulte la guía de apple para UITableView.

PD: para el embellecimiento, agregué una imagen aquí. Si implementa de la misma manera, lo hice, debería ver la salida como-

Espero que esto ayude.

Answer 2

Para que las células sean dinámicas, haz esto:

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
}

Además, debe asegurarse de que sus elementos en la celda estén vinculados con el ajuste automático para las ubicaciones correctas de los elementos con altura dinámica.