UITableView es uno de los componentes de vista más útiles y comúnmente utilizados en el desarrollo de iOS. Ayuda a mostrar datos en una lista desplazable, como una fuente de noticias, una lista de recordatorios o cualquier tabla de elementos.  UITableView contiene UITableViewCells. Para comprender la relación entre los dos, piense en una matriz y elementos. Puede asignar fácilmente elementos de una matriz a la celda en una vista de tabla. Además, puede crear secciones para mapear varios arreglos o un arreglo 2D.  A continuación se muestra un ejemplo del uso de UITableView. La aplicación Configuración nativa utiliza una vista de tabla con secciones. La primera sección tiene 3 celdas, mientras que la segunda sección tiene 1 celda.   Por lo general, las celdas utilizadas en una vista de tabla tienen el mismo diseño y tamaño, lo que reduce la sobrecarga de volver a dibujar las celdas. Sin embargo, Apple le permite crear cualquier variedad de celdas para una vista de tabla.  UITableView Paso 1: Abra Xcode y configure una aplicación de demostración  Abra la aplicación Xcode en su Mac para crear un nuevo proyecto. Seleccione el nuevo proyecto de aplicación de la ventana emergente y proporcione un buen título para el Nombre del producto. Para nuestro proyecto de ejemplo, lo llamamos ColorList. Su interfaz debe ser Storyboard y el idioma configurado en Swift.   Pregunta: ¿Por qué Storyboard? Para 'Interfaz' estamos usando Storyboard, pero si tiene curiosidad, la otra opción es SwiftUI. SwiftUI es el último avance en el diseño de interfaces de usuario, pero muchos desarrolladores   completamente listo para la producción como iOS 14. creen que aún no está  Por último, puede seguir el camino anterior y crear también la interfaz de usuario completa en código. Pero me gusta mantener las   en lugar de un controlador gordo. cosas de la vista separadas  Paso 2: agregue la vista de tabla al controlador de vista en el guión gráfico  Cada nueva aplicación viene con un controlador de vista y un guión gráfico. En palabras simples, cada pantalla de la aplicación es un UIViewController en código.  Abra el archivo Main.Storyboard haciendo clic en él en el panel izquierdo.  Seleccione el xib que se muestra para el controlador de vista en el Guión gráfico. Es el esqueleto de un iPhone que aparece en tu Storyboard.  Presiona el botón +   Seleccione UITableView   Arrastre y suelte la vista de tabla sobre Xib.  Establezca cero para las restricciones superior, inferior, izquierda y derecha. Presione el botón 'Agregar 4 Restricciones'.   Eso es todo, su interfaz de usuario de vista de tabla desplazable está lista para funcionar. Puede agregar las restricciones para que se estire al 100% en ancho y alto.   Paso 3: Conectar Table View 'Outlets'  El siguiente paso es crear los puntos de venta en la clase de controlador de vista. De esa manera, podemos tener acceso a la vista de tabla en nuestro controlador para agregar aún más la lógica empresarial y de la interfaz de usuario. Hay varias formas de hacerlo. Aquí está el más rápido:  Presione la tecla 'opción' en su Mac mientras su Storyboard está abierto. Mantenga presionado eso para el paso 2.  Seleccione el archivo del controlador de vista en el panel izquierdo. Esto abrirá el guión gráfico y verá los archivos del controlador uno al lado del otro.  Pulse la tecla 'control'. Ahora, mientras mantiene presionada la tecla 'control', arrastre y suelte la vista de tabla desde Storyboard al controlador de vista.   Asigne a la nueva var un nombre como tableView.   Ahora se crea una variable tableView en el controlador de vista.   Paso 4: Configure Table View DataSource y Delegate  La vista de tabla tiene dos objetos débiles dentro de la clase UITableView para completar los datos y administrar la delegación. Débil significa   con fuerza. que los objetos no se retienen  El objeto   es responsable de proporcionar celdas y sus datos para una vista de tabla. Es de 'UITableViewDataSource?' escribe. dataSource  El objeto   es de 'UITableViewDelegate?' escribe. Maneja la selección, eliminación, encabezado/pie de página y otras acciones relacionadas. delegado   Para comenzar,  Asignemos self a ambas propiedades.       {   .viewDidLoad()   tableView.delegate =   tableView.dataSource =   } override     func viewDidLoad () super // Do any additional setup after loading the view. self self  Tenemos que ajustar nuestro controlador de vista a la fuente de datos y al protocolo de delegado. Esto se debe a que los objetos delegado y fuente de datos permiten asignar una clase que debe ajustarse a sus protocolos. Vamos a hacer eso.       :   ,   ,  class ViewController UIViewController UITableViewDelegate UITableViewDataSource  Xcode le pedirá que agregue los stubs de método requeridos. Estos son los métodos que tenemos para proporcionar cuerpos, ya que son requeridos por dataSource y objetos delegados.  Aquí están los dos métodos auxiliares agregados por Xcode. Hay muchos otros métodos que puede utilizar, consulte la   aquí.  documentación  func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {       } func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {     UITableViewCell() } //   Return items count TODO: return 0 //   Return cell TODO: return  El primer numberOfRowsInSection- devuelve un Int. Es responsable de dibujar el número de celdas devueltas por este método.  El otro método cellForRowAt- devuelve un objeto de tipo UITableViewCell. Aquí es donde podemos crear una celda y pasarle datos para configurar su interfaz de usuario.  Crearemos una matriz de colores ficticia. Llamémoslo 'arcoíris'.  Devuelve 'rainbow.count' para el método numberOfRowsInSection-.     rainbow: [UIColor] = [.red, .yellow, .green, .orange, .blue, .purple, .magenta] func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {   rainbow.count } let return  Ahora creamos una nueva interfaz de usuario de celda para regresar desde cellForRowAt-. Para hacerlo, iremos a Storyboard donde ya tenemos nuestra vista UIViewController. Al igual que el n. ° 2, presionaremos el botón +, seleccionaremos Table View Cell, arrástrelo y suéltelo sobre Table View.   Seleccione la UITableViewCell que acaba de agregar. Luego, desde el panel derecho, seleccione la pestaña Inspector de atributos. Agregue una cadena en el campo Identificador.  En el método cellForRowAt-, saque la celda de la cola con el método tableView.dequeueReusableCell(withIdentifier: String, for: IndexPath).  Aquí pasaremos el identificador para obtener la interfaz de usuario de la celda. En la siguiente línea, estamos configurando el color de fondo de la celda para el objeto de color en la matriz del arco iris.    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {   cell = tableView.dequeueReusableCell(withIdentifier:   ,   : indexPath) cell.backgroundColor = rainbow[indexPath.item]   cell } let "colorCell" for return  Ejecute el proyecto. Verá su variedad de colores en la vista de tabla.   ¿Qué más puede hacer con UITableView y UITableViewCell?  UITableView es su vista de interfaz de usuario en la mayoría de los casos en los que se desea un comportamiento de desplazamiento. UITableView hereda de UIScrollView, al igual que UICollectionView, una vista similar a UITableView donde puede tener celdas en ambos sentidos, es decir, horizontal y vertical.  La celda que estamos usando es la celda de vista de tabla predeterminada proporcionada por iOS. Puede crear una clase personalizada y, como en los pasos anteriores, conectar la interfaz de usuario y la clase. Cargaremos una guía práctica la próxima semana para crear una UITableViewCell de diseño personalizado.  La celda predeterminada puede proporcionar una vista de título, fondo y accesorios. Agregaremos un título usando defaultConfiguration- así:   func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {   cell = tableView.dequeueReusableCell(withIdentifier:   ,   : indexPath) cell.backgroundColor = rainbow[indexPath.item]     content = cell.defaultContentConfiguration() content.text = rainbow[indexPath.item].accessibilityName.capitalized cell.contentConfiguration = content   cell } let "colorCell" for //Default Content Configuration var return  Así es como se verá:   Puede crear diferentes celdas de diseño en la misma vista de tabla. Al asignar diferentes identificadores, puede quitar la cola de su celda requerida. El método dequeueReusableCell mejora el rendimiento al crear solo celdas visibles en la pantalla y algunas más. Al almacenar en caché las celdas de manera eficiente, puede proporcionar una experiencia de usuario fluida.  Así es como debería verse todo el código. Puede descargar el   de muestra desde aquí.  código fuente  Háganos saber lo que creó con UITableView en nuestra   . comunidad Hackernoon

Apple

Fetch

ORANGE

Super

Yellow

2022 - HackerNoon Contributor of the Year - Facebook

2022 - HackerNoon Contributor of the Year - Gaming

2022 - HackerNoon Contributor of the Year - Hardware

2022 - HackerNoon Contributor of the Year - Iphone

2022 - Ios Writer of the Year

Nominated for 2022 - HackerNoon Contributor of the Year - Hardware

Nominated for 2022 - Ios Writer of the Year

Nominated for 2022 - HackerNoon Contributor of the Year - Iphone

Nominated for 2022 - HackerNoon Contributor of the Year - Gaming

Nominated for 2022 - HackerNoon Contributor of the Year - Facebook

Este audio es producido en el idioma original de la historia!

Demasiado Largo; Para Leer

Cómo crear UITableView en Swift en solo 15 minutos

Cómo crear UITableView en Swift en solo 15 minutos

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

Una breve introducción a la teoría del cerebro de Boltzmann

Toque para ganar: Telegram puede incorporar a los próximos 10 mil millones de usuarios de criptomonedas antes de Solana

Liberando el poder de la IA. Una revisión sistemática de técnicas de vanguardia: resumen e introducción

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

Una breve introducción a la teoría del cerebro de Boltzmann

Toque para ganar: Telegram puede incorporar a los próximos 10 mil millones de usuarios de criptomonedas antes de Solana

Liberando el poder de la IA. Una revisión sistemática de técnicas de vanguardia: resumen e introducción

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps