(1 july 2013) ios basic development 3 - uitableviewcontroller & data source

iOS Basic Development

UITableViewController&

Datasource

by Eakapong Kattiya www.ibluecode.com [email protected] +66 086-673-2111Thursday, June 20, 13

http://www.ibluecode.com


mailto:[email protected]


Course Outline

1. Introduction Xcode & Language

2. Human Interface Design

3. UITableViewController & Datasource

4. Multimedia

5. Submit App Store

Course Outline






UITableViewController






by Eakapong Kattiya www.ibluecode.com [email protected] +66 086-673-2111

UITableViewStylePlain UITableViewStyleGrouped

Thursday, June 20, 13






CellStyleDefault CellStyleSubTitle CellStyleValue1 CellStyleValue2

UITableViewCellStyle






Create Master-Detail Application






UINavigationController -> UITableView -> DetailViewController






Customize UITableView Style






Customize UITableViewCell Style






DataSource


DataSource implements with NSArray

A data source, like a delegate.A data source is delegated control of data. (the model objects)TableViewObject asks data source what data should display.






DataSource : UITableViewDataSource


Configuring a Table View– tableView:cellForRowAtIndexPath: required method– numberOfSectionsInTableView:– tableView:numberOfRowsInSection: required method– sectionIndexTitlesForTableView:– tableView:sectionForSectionIndexTitle:atIndex:– tableView:titleForHeaderInSection:– tableView:titleForFooterInSection:

Inserting or Deleting Table Rows– tableView:commitEditingStyle:forRowAtIndexPath:– tableView:canEditRowAtIndexPath:

Reordering Table Rows– tableView:canMoveRowAtIndexPath:– tableView:moveRowAtIndexPath:toIndexPath:







UITableViewController : Create new table.plist (Root Array)






@interface MyTableViewController : UITableViewController<UITableViewDataSource, UITableViewDelegate>{ NSArray *dataSource ;}


UITableViewController : Load Datasource from plist

@implementation MyTableViewController

- (void)viewDidLoad{ [super viewDidLoad]; NSURL *url = [[NSBundle mainBundle] URLForResource:@"table" withExtension:@"plist"]; dataSource = [NSArray arrayWithContentsOfURL:url];

}






#pragma mark - Table view data source

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{ return 1;}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{ return [dataSource count];}


UITableViewController : Set Section & Row






- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ static NSString *CellIdentifier = @"Cell"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath]; // Configure the cell... NSInteger section = indexPath.section ; NSInteger row = indexPath.row ; NSDictionary *rowData = [dataSource objectAtIndex:row]; cell.textLabel.text = [rowData valueForKey:@"title"]; cell.detailTextLabel.text = [rowData valueForKey:@"subTitle"]; NSString *imageName = [rowData valueForKey:@"image"]; //Image from www

NSData *data = [[NSData alloc]initWithContentsOfURL: [NSURL URLWithString:imageName]]; cell.imageView.image = [UIImage imageWithData:data];

//Image from Bundle //cell.imageView.image = [UIImage imageNamed:imageName]; return cell;}


UITableViewController : Set Cell






UITableViewDelegate


- A delegate is an object that control of the user interface for that event.-Implemented by pre-Defined Method Name






Delegate : UITableViewDelegate


Configuring Rows for the Table View

– tableView:heightForRowAtIndexPath:– tableView:indentationLevelForRowAtIndexPath:– tableView:willDisplayCell:forRowAtIndexPath:

Managing Accessory Views– tableView:accessoryButtonTappedForRowWithIndexPath:– tableView:accessoryTypeForRowWithIndexPath: Deprecated in iOS 3.0

Managing Selections– tableView:willSelectRowAtIndexPath:– tableView:didSelectRowAtIndexPath:– tableView:willDeselectRowAtIndexPath:– tableView:didDeselectRowAtIndexPath:






#pragma mark - Table view delegate

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{

WebViewController *vc = [self.storyboard instantiateViewControllerWithIdentifier:@"webview"];

[self.navigationController pushViewController:vc animated:YES]; NSDictionary *rowData = [dataSource objectAtIndex:indexPath.row]; NSString *urlString = [rowData valueForKey:@"link"];

[vc setURLString:urlString]; }


UITableViewController : Set Action when select row






Delegate : UITableViewDelegate


Modifying the Header and Footer of Sections– tableView:viewForHeaderInSection:– tableView:viewForFooterInSection:– tableView:heightForHeaderInSection:– tableView:heightForFooterInSection:– tableView:willDisplayHeaderView:forSection:– tableView:willDisplayFooterView:forSection:

Editing Table Rows– tableView:willBeginEditingRowAtIndexPath:– tableView:didEndEditingRowAtIndexPath:– tableView:editingStyleForRowAtIndexPath:– tableView:titleForDeleteConfirmationButtonForRowAtIndexPath:– tableView:shouldIndentWhileEditingRowAtIndexPath:

Reordering Table Rows– tableView:targetIndexPathForMoveFromRowAtIndexPath:toProposedIndexPath:






#pragma mark - Table view delegate

-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{ return 30 ;}

-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{ UILabel *headerTitle = [[UILabel alloc]initWithFrame:CGRectMake(0,0,320,30)]; headerTitle.text = [NSString stringWithFormat:@" Section %d",section]; return headerTitle ;}


UITableViewController : Set Header in Section






UIPickerView






Class : UIPickerView

Framework : UIKit

Sample Code : UICatalog

Init : initWithFrame : (CGRect) or Interface Builder

Datasource : – numberOfComponentsInPickerView: – pickerView:numberOfRowsInComponent:

Delegate : – pickerView:titleForRow:forComponent: – pickerView:viewForRow:forComponent:reusingView: – pickerView:didSelectRow:inComponent:

UIPickerView






การเรียกใช้งาน1. Init UIPickerView2. bind Datasouce / Delegate3. กําหนดคอลัมน์ numberOfComponentsInPickerView4. กําหนดจํานวนแถว pickerView:numberOfRowsInComponent:5. กําหนดการแสดงค่าเป็น Text หรือ View ได้ pickerView:titleForRow:forComponent:

pickerView:viewForRow:forComponent:reusingView:6. ใช้ Delegate เมื่อเลือกข้อมูลเสร็จ pickerView:didSelectRow:inComponent

UIPickerView






1. Init UIPickerView (.h)

IBOutlet UIPickerView *myPV ;

2. bind Datasouce / Delegate (.m)

[myPV setDataSource:self]; [myPV setDelegate:self]; [myPV selectRow:0 inComponent:0 animated:NO]; [myPV selectRow:0 inComponent:1 animated:NO]; [myPV selectRow:0 inComponent:2 animated:NO];

UIPickerView






3. กําหนดคอลัมน์ (.m)

- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView;{ return 3 ;}

4. กําหนดจํานวนแถว (.m)

- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component;{ if(component == 1){

return 20 ;}if(component == 0){return 30 ;}

return 10 ;}

UIPickerView






5. กําหนดการแสดงค่าเป็น Text หรือ View ได ้(.m)#pragma แสดงคาเปน Text- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component;{ NSMutableArray *arrayNo1 = [NSMutableArray new]; [arrayNo1 addObject:@"0"]; [arrayNo1 addObject:@"1"]; [arrayNo1 addObject:@"2"]; [arrayNo1 addObject:@"3"]; [arrayNo1 addObject:@"4"]; [arrayNo1 addObject:@"5"]; [arrayNo1 addObject:@"6"]; [arrayNo1 addObject:@"7"]; [arrayNo1 addObject:@"8"]; [arrayNo1 addObject:@"9"]; return [arrayNo1 objectAtIndex:row];}

UIPickerView






5. กําหนดการแสดงค่าเป็น Text หรือ View ได ้(.m)

#pragma แสดงคาเปนรูปภาพ

- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view{ NSString *imageName = [NSString stringWithFormat:@"%d.png",row];

UIImageView *bgImageView = [[UIImageView alloc]initWithImage: [UIImage imageNamed:imageName]];

[bgImageView setFrame:CGRectMake(0, 0, 50, 50)]; [bgImageView setContentMode:UIViewContentModeScaleAspectFit];

return bgImageView;}

UIPickerView






6. ใช้ Delegate เมื่อเลือกข้อมูลเสร็จ

- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component{ if(component == 0){ inputCol1 = [arrayNo1 objectAtIndex:row]; } else if(component == 1){ inputCol2 = [arrayNo2 objectAtIndex:row]; } else if(component == 2){ inputCol3 = [arrayNo3 objectAtIndex:row]; }

}

UIPickerView






UICollectionViewController






UICollectionViewControllerDataSource & Delegate


@implementation ViewController

- (NSInteger)collectionView:(UICollectionView *)view numberOfItemsInSection:(NSInteger)section;{ return 32;}

- (UICollectionViewCell *)collectionView:(UICollectionView *)cv cellForItemAtIndexPath:(NSIndexPath *)indexPath;{ // we're going to use a custom UICollectionViewCell, which will hold an image and its label // Cell *cell = [cv dequeueReusableCellWithReuseIdentifier:kCellID forIndexPath:indexPath]; // make the cell's title the actual NSIndexPath value cell.label.text = [NSString stringWithFormat:@"{%ld,%ld}", (long)indexPath.row, (long)indexPath.section]; // load the image for this cell NSString *imageToLoad = [NSString stringWithFormat:@"%d.JPG", indexPath.row]; cell.image.image = [UIImage imageNamed:imageToLoad]; return cell;}

// the user tapped a collection item, load and set the image on the detail view controller- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender{ if ([[segue identifier] isEqualToString:@"showDetail"]) { NSIndexPath *selectedIndexPath = [[self.collectionView indexPathsForSelectedItems] objectAtIndex:0]; // load the image, to prevent it from being cached we use 'initWithContentsOfFile' NSString *imageNameToLoad = [NSString stringWithFormat:@"%d_full", selectedIndexPath.row]; NSString *pathToImage = [[NSBundle mainBundle] pathForResource:imageNameToLoad ofType:@"JPG"]; UIImage *image = [[UIImage alloc] initWithContentsOfFile:pathToImage]; DetailViewController *detailViewController = [segue destinationViewController]; detailViewController.image = image; }}






(1 july 2013) ios basic development 3 - uitableviewcontroller & data source

Technology