iOS: vista de tabla

Uso de la vista de tabla

Se utiliza para mostrar una vista desplazable verticalmente que consta de varias celdas (generalmente celdas reutilizables). Tiene características especiales como encabezados, pies de página, filas y sección.

Propiedades Importantes

  • delegate
  • dataSource
  • rowHeight
  • sectionFooterHeight
  • sectionHeaderHeight
  • separatorColor
  • tableHeaderView
  • tableFooterView

Métodos importantes

- (UITableViewCell *)cellForRowAtIndexPath:(NSIndexPath *)indexPath
- (void)deleteRowsAtIndexPaths:(NSArray *)indexPaths
withRowAnimation:(UITableViewRowAnimation)animation
- (id)dequeueReusableCellWithIdentifier:(NSString *)identifier
- (id)dequeueReusableCellWithIdentifier:(NSString *)identifier
forIndexPath:(NSIndexPath *)indexPath
- (void)reloadData
- (void)reloadRowsAtIndexPaths:(NSArray *)indexPaths
withRowAnimation:(UITableViewRowAnimation)animation
- (NSArray *)visibleCells

Ejemplo de código y pasos

Step 1 - Agreguemos una vista de tabla en ViewController.xib Como se muestra abajo.

Step 2 - Establecer delegate y dataSource a file ownerpara tableview haciendo clic con el botón derecho y seleccionando fuente de datos y delegado. La configuración de la fuente de datos se muestra a continuación.

Step 3 - Crea un IBOutlet para tableView y asígnele el nombre myTableView. Se muestra en las siguientes imágenes.

Step 4 - Luego agregue un NSMutableArray para contener los datos que se mostrarán en la vista de tabla.

Step 5 - Nuestro ViewController debería adoptar el UITableViewDataSource y UITableViewDelegateProtocolos. losViewController.h debería verse como se muestra a continuación.

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController<UITableViewDataSource,
   UITableViewDelegate> {
   IBOutlet UITableView *myTableView;
   NSMutableArray *myData;
}
@end

Step 6- Debemos implementar los métodos de origen de datos y delegado de tableview requeridos. El actualizadoViewController.m es como sigue -

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
   [super viewDidLoad];
   // table view data is being set here	
   myData = [[NSMutableArray alloc]initWithObjects:
   @"Data 1 in array",@"Data 2 in array",@"Data 3 in array",
   @"Data 4 in array",@"Data 5 in array",@"Data 5 in array",
   @"Data 6 in array",@"Data 7 in array",@"Data 8 in array",
   @"Data 9 in array", nil];
   // Do any additional setup after loading the view, typically from a nib.
}

- (void)didReceiveMemoryWarning {
   [super didReceiveMemoryWarning];
   // Dispose of any resources that can be recreated.
}

#pragma mark - Table View Data source 
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:
   (NSInteger)section {
   return [myData count]/2;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:
   (NSIndexPath *)indexPath {
   static NSString *cellIdentifier = @"cellID";
    
   UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:
   cellIdentifier];
   
   if (cell == nil) {
      cell = [[UITableViewCell alloc]initWithStyle:
      UITableViewCellStyleDefault reuseIdentifier:cellIdentifier];
   }
   
   NSString *stringForCell;
   
   if (indexPath.section == 0) {
      stringForCell= [myData objectAtIndex:indexPath.row];
   } else if (indexPath.section == 1) {
      stringForCell= [myData objectAtIndex:indexPath.row+ [myData count]/2];
   }
   [cell.textLabel setText:stringForCell];
   return cell;
}

// Default is 1 if not implemented
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
   return 2;
}

- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:
   (NSInteger)section {
   NSString *headerTitle;
   
   if (section==0) {
      headerTitle = @"Section 1 Header";
   } else {
      headerTitle = @"Section 2 Header";
   }
   return headerTitle;
}

- (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:
   (NSInteger)section {
   NSString *footerTitle;
      
   if (section==0) {
      footerTitle = @"Section 1 Footer";
   } else {
      footerTitle = @"Section 2 Footer";
   }
   return footerTitle;
}

#pragma mark - TableView delegate

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:
   (NSIndexPath *)indexPath {
   [tableView deselectRowAtIndexPath:indexPath animated:YES];
   UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];
   NSLog(@"Section:%d Row:%d selected and its data is %@",
   indexPath.section,indexPath.row,cell.textLabel.text);
}
@end

Step 7 - Cuando ejecutamos la aplicación obtendremos lo siguiente output -