Mobile Application Development(Iphone): May 2013

Table View Design in IOS Part 2 ( Time Table )

This is I am going to do now...!

ok how to do that...!

----------------------------------------------------------------------------------------------------------------------------------

Step 1

Create a project in xcode....
select the Landscape

And add new class to your project call "CellStructure" under UITableViewCell

----------------------------------------------------------------------------------------------------------------------------

Step 2

click the "CellStructure.h" class

Change the code like this

// CellStructure.h

// TimeTable

// Created by Apple on 5/3/13.

#import <UIKit/UIKit.h>

@interface CellStructure : UITableViewCell

{

UIColor *lineColor;

BOOL topCell;

UILabel *cell1;

UILabel *cell2;

UILabel *cell3;

UILabel *cell4;

UILabel *cell5;

UILabel *cell6;

}

@property (nonatomic, retain) UIColor* lineColor;

@property (nonatomic) BOOL topCell;

@property (readonly) UILabel* cell1;

@property (readonly) UILabel* cell2;

@property (readonly) UILabel* cell3;

@property (readonly) UILabel* cell4;

@property (readonly) UILabel* cell5;

@property (readonly) UILabel* cell6;

@end

----------------------------------------------------------------------------------------------------------

click the "CellStructure.m" class

Change the code like this

// CellStructure.m

// TimeTable

// Created by Apple on 5/3/13.

#import "CellStructure.h"

#define cell1Width 110

#define cell2Width 70

#define cell3Width 70

#define cell4Width 70

#define cell5Width 70

#define cell6Width 70

#define cellHeight 30

@implementation CellStructure

@synthesize lineColor, topCell, cell1, cell2, cell3,cell4,cell5,cell6;

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier

{

self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];

if (self) {

topCell = NO;

// Add labels for the Six cells

cell1 = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, cell1Width, cellHeight)];

cell1.textAlignment = UITextAlignmentRight;

cell1.font=[UIFont boldSystemFontOfSize:12];

cell1.backgroundColor = [UIColor clearColor]; // Important to set or lines will not appear

[self addSubview:cell1];

cell2 = [[UILabel alloc] initWithFrame:CGRectMake(cell1Width, 0, cell2Width, cellHeight)];

cell2.textAlignment = UITextAlignmentCenter;

cell2.backgroundColor = [UIColor clearColor]; // Important to set or lines will not appear

cell2.font=[UIFont boldSystemFontOfSize:12];

[self addSubview:cell2];

cell3 = [[UILabel alloc] initWithFrame:CGRectMake(cell1Width+cell2Width, 0, 568-(cell1Width+cell2Width), cellHeight)];

cell3.textAlignment = UITextAlignmentLeft;

cell3.backgroundColor = [UIColor clearColor]; // Important to set or lines will not appear

cell3.font=[UIFont boldSystemFontOfSize:12];

[self addSubview:cell3];

cell4 = [[UILabel alloc] initWithFrame:CGRectMake(cell1Width+cell2Width+cell3Width, 0, 568-(cell1Width+cell2Width+cell3Width), cellHeight)];

cell4.textAlignment = UITextAlignmentLeft;

cell4.backgroundColor = [UIColor clearColor]; // Important to set or lines will not appear

cell4.font=[UIFont boldSystemFontOfSize:12];

[self addSubview:cell4];

cell5 = [[UILabel alloc] initWithFrame:CGRectMake(cell1Width+cell2Width+cell3Width+cell4Width, 0, 568-(cell1Width+cell2Width+cell3Width+cell4Width), cellHeight)];

cell5.textAlignment = UITextAlignmentLeft;

cell5.backgroundColor = [UIColor clearColor]; // Important to set or lines will not appear

cell5.font=[UIFont boldSystemFontOfSize:12];

[self addSubview:cell5];

cell6 = [[UILabel alloc] initWithFrame:CGRectMake(cell1Width+cell2Width+cell3Width+cell4Width+cell5Width, 0, 568-(cell1Width+cell2Width+cell3Width+cell4Width+cell5Width), cellHeight)];

cell6.textAlignment = UITextAlignmentLeft;

cell6.backgroundColor = [UIColor clearColor]; // Important to set or lines will not appear

cell6.font=[UIFont boldSystemFontOfSize:12];

[self addSubview:cell6];

}

return self;

}

- (void)setSelected:(BOOL)selected animated:(BOOL)animated

{

[super setSelected:selected animated:animated];

// Configure the view for the selected state

}

- (void)dealloc

{

[cell1 release];

[cell2 release];

[cell3 release];

[cell4 release];

[cell5 release];

[cell6 release];

[super dealloc];

}

- (void)setTopCell:(BOOL)newTopCell

{

topCell = newTopCell;

[self setNeedsDisplay];

}

@end

------------------------------------------------------------------------------------------------------------------

Step 3

Click your "ViewControler.h"class of yours

change the code like this in "ViewController.h"

and import the "CellStructure.h"

// ViewController.h

// TimeTable

// Created by Apple on 5/3/13.

#import <UIKit/UIKit.h>

#import "CellStructure.h" // import the CellStucture.h

@interface ViewController : UIViewController<UITableViewDelegate, UITableViewDataSource>

{

NSArray *arryTime;

NSArray *arryMonday;

NSArray *arryTuesday;

NSArray *arryWednesday;

NSArray *arryThursday;

NSArray *arryFriday;

}

@end

-------------------------------------------------------------------------------------------------------------------------

Step 4

click your "ViewController.m" class

And change the code like this

// ViewController.m

// TimeTable

// Created by Apple on 5/3/13.

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad

{

[super viewDidLoad];

// Do any additional setup after loading the view, typically from a nib.

arryTime = [[NSArray alloc] initWithObjects:@" ",@" 08.00-09.00 A.M.",@" 09.00-10.00 A.M.",@" 10.00-11.00 A.M.",

@" 11.00-11.30 A.M.",@" 12.00-01.00 P.M.",@" 01.00-02.00 P.M.",nil];

arryMonday = [[NSArray alloc] initWithObjects:@" ",@" SPD",@" PS",@" ",

@" MAD",@" ",@" MIT",nil];

arryTuesday = [[NSArray alloc] initWithObjects:@" ",@" DCCN",@" ",@" CGM",

@" ",@" ITA",@" OS",nil];

arryWednesday = [[NSArray alloc] initWithObjects:@" ",@" CF",@" CS",@" ",

@" BM",@" ",@" ",nil];

arryThursday =[[NSArray alloc] initWithObjects:@" ",@" DBMS",@" AI",@" ",

@" ",@" IPM",@" SQA",nil];

arryFriday = [[NSArray alloc] initWithObjects:@" ",@" ",@" EAD",@" ",

@" ST",@" EM",@" ",nil];

}

//--table cell handling heightForRow-------------------------

- (CGFloat)tableView:(UITableView *)aTableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {

return 30.0;

// all rows are 30px high

}

//-------------table----------------------------------------------------------------------

// Customize the number of sections in the table view.

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView

{

return 1;

}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section

{

return [arryTime count];

}

// Customize the appearance of table view cells.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

{

static NSString *CellIdentifier = @"Cell";

CellStructure *cell = (CellStructure*)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];

if (cell == nil) {

cell = [[[CellStructure alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];

cell.lineColor = [UIColor blackColor];

}

// Since we are drawing the lines ourself, we need to know which cell is the top cell in the table so that

// we can draw the line on the top

if (indexPath.row == 0)

{

cell.backgroundColor = [UIColor colorWithRed:164.0f/255.0f green:194.0f/255.0f blue:244.0f/255.0f alpha:1.0];

cell.cell1.text = @" Time";

cell.cell2.text = @" Mon";

cell.cell3.text = @" Tue";

cell.cell4.text = @" Wed";

cell.cell5.text = @" Thu";

cell.cell6.text = @" Fri";

}

else

{

cell.accessoryType=UITableViewCellAccessoryDisclosureIndicator;

// add array values into cell

cell.cell1.text = [arryTime objectAtIndex:indexPath.row];

cell.cell2.text = [arryMonday objectAtIndex:indexPath.row];

cell.cell3.text = [arryTuesday objectAtIndex:indexPath.row];

cell.cell4.text = [arryWednesday objectAtIndex:indexPath.row];

cell.cell5.text = [arryThursday objectAtIndex:indexPath.row];

cell.cell6.text = [arryFriday objectAtIndex:indexPath.row];

}

return cell;

}

// Handle the cell background color

-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {

if(indexPath.row % 2 == 0){

}

else

{

cell.backgroundColor = [UIColor colorWithRed:220.0f/255.0f green:234.0f/255.0f blue:246.0f/255.0f alpha:1.0];

}

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

{

if(indexPath.row==0)

{

}

else

{

}

- (void)didReceiveMemoryWarning

{

[super didReceiveMemoryWarning];

// Dispose of any resources that can be recreated.

}

@end

------------------------------------------------------------------------------------------------------------------------

Step 5

click the ".xib"

and add table view

Click the view and change to Orientation in to landscape

----------------------------------------------------------------------------------------------------------------------------------

Step 6

Run Your App

Good Luck!

Tutorial List

Friday, May 3, 2013

Table View Design in IOS Part 2 ( Time Table )