iOS 5 Storyboard 学习之 Tabbar Controller,Navigation Controller (2) 代码部分

继续《iOS 5 Storyboard 学习之 Tabbar Controller,Navigation Controller (1)》的内容,如果想从头学习Storyboard,请参考iOS 5 Storyboard 学习之 UITableViews

1 建立文件“ PlayersViewController”记得选择”UITableViewController

屏幕快照 2012-03-09 上午11.12.19.png

2 选择“Table View Controller”设置“Identity Inspector”的Class为“PlayersViewController

屏幕快照 2012-03-07 下午2.33.20.png

编辑“ PlayersViewController.h”,建立一个可修改的数组,这个将是我们今后存储Player数据的地方

#import <UIKit/UIKit.h>

 

@interface PlayersViewController : UITableViewController

 

@property (nonatomic,strong) NSMutableArray *players;

 

@end

3 先放一放,建立一个基于“Objective-C class template”的Player文件,他的Subclass是“NSObject”

屏幕快照 2012-03-07 下午2.34.40.png

然后编辑“Player.h”和“Player.m

Player.h

#import <Foundation/Foundation.h>

 

@interface Player : NSObject

 

@property (nonatomic,copy)NSString *name, *game;

@property (nonatomic,assign) int rating;

 

@end

 

Player.m

#import "Player.h"

 

@implementation Player

@synthesize name,game,rating;

 

@end

4 接下来在App Delegate中作些动作,首先在AppDelegate.m中import“ Player.h”和“ PlayersViewController.h

编辑“AppDelegate.m

#import "AppDelegate.h"

#import "Player.h"

#import "PlayersViewController.h"

 

@implementation AppDelegate {

NSMutableArray *players;

}

 

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions

{

players = [NSMutableArray arrayWithCapacity:20];

  

Player *player = [[Player alloc] init];

player.name = @"xxd";

player.game = @"游泳";

player.rating = 4;

[players addObject:player];

  

player = [[Player alloc] init];

player.name = @"张三";

player.game = @"足球";

player.rating = 5;

[players addObject:player];

  

player = [[Player alloc] init];

player.name = @"李四";

player.game = @"篮球";

player.rating = 2;

[players addObject:player];

  

//此为storyboard的局限,在Interface Builder时代,在MainWindow.xib中可以链接view controllersApp Delegateoutlets,但是现在不可以,只能写代码设置第一个controller是什么,或者谁知道有什么办法请告知,谢谢。

UITabBarController *tabBarController = (UITabBarController *)self.window.rootViewController;

  

//同样UINavigationController也只能这样设置,指定UINavigationControllertabBarController的第一个显示

UINavigationController *navigationController = [[tabBarController viewControllers] objectAtIndex:0];

  

//指定PlayersViewControllernavigationController的第一个显示

PlayersViewController *playersViewController = [[navigationController viewControllers] objectAtIndex:0];

 

 

//上边的三句都是为了设定这一句而写,因为不写默认就是上边的顺序,但是不写就没有这个和players链接的接口了

playersViewController.players = players;

  

return YES;

}

5 修改item1下的数据显示,修改“PlayersViewController.m

#import "PlayersViewController.h"

#import "Player.h"

 

@implementation PlayersViewController

@synthesize players;

 

 

#pragma mark - Table view data source

 

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView

{

return 1;

}

 

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

{

return [self.players count];

}

 

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

{

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"PlayerCell"];

Player *player = [self.players objectAtIndex:indexPath.row];

cell.textLabel.text = player.game;

cell.detailTextLabel.text = player.game;

return cell;

}

目前俄显示结果应该是这样的


屏幕快照 2012-03-09 下午1.54.15.png

6 下面来看看我们能在“Prototype Cells”中做些什么

设置Table View高为55

屏幕快照 2012-03-09 下午2.35.14.png

托一个UiImageView到Cell上,然后设置Cell行高
屏幕快照 2012-03-09 下午2.07.19.png

设置出右边的箭头
屏幕快照 2012-03-09 下午2.18.11.png

设置ImageView的宽度
屏幕快照 2012-03-09 下午2.13.02.png

最后测试别较好的大小是:x = 199,Y = 13, Width = 81, Height = 28

然后我们配置Cell,基于“Objective-C class template建立一个PlayerCell文件,他的Subclass是“NSObject”

PlayerCell.h

#import <Foundation/Foundation.h>


@interface PlayerCell : UITableViewCell


@property(nonatomic, strong) IBOutlet UILabel *nameLabel,*gameLabel;

@property(nonatomic, strong) IBOutlet UIImageView *ratingImageView;


@end


PlayerCell.m

 

#import "PlayerCell.h"


@implementation PlayerCell


@synthesize nameLabel,gameLabel;

@synthesize ratingImageView;


@end

点击MainStoryboard.storyboard,点击 prototype cell修改他的Class为“ PlayerCell


屏幕快照 2012-03-09 下午2.45.21.png

 

然后在“PlayersViewController.m”中添加

#import "PlayerCell.h"

在“PlayersViewController.m”中修改

 

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

{

PlayerCell *cell =(PlayerCell *)[tableView dequeueReusableCellWithIdentifier:@"PlayerCell"];

Player *player =[self.players objectAtIndex:indexPath.row];

cell.nameLabel.text = player.name;

cell.gameLabel.text = player.game;

cell.ratingImageView.image =[self imageForRating:player.rating];

return cell;

}

随后在“PlayersViewController.h”中添加

-(UIImage *)imageForRating:(int)rating;

在“PlayersViewController.h”中添加

-(UIImage *)imageForRating:(int)rating

{

switch(rating)

{

case1:return[UIImage imageNamed:@"1StarSmall.png"];

case2:return[UIImage imageNamed:@"2StarsSmall.png"];

case3:return[UIImage imageNamed:@"3StarsSmall.png"];

case4:return[UIImage imageNamed:@"4StarsSmall.png"];

case5:return[UIImage imageNamed:@"5StarsSmall.png"];

}

return nil;

}

运行看看什么模样


屏幕快照 2012-03-09 下午3.44.12.png

7 增加删除功能,在“ PlayersViewController.m”添加下边代码

-(void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath*)indexPath

{

if(editingStyle == UITableViewCellEditingStyleDelete)

{

[self.players removeObjectAtIndex:indexPath.row];

[tableView deleteRowsAtIndexPaths:[NSArray arrayWithObject:indexPath] withRowAnimation:UITableViewRowAnimationFade];

}

}

调整一下,让星星能够自动躲避
屏幕快照 2012-03-09 下午3.47.04.png

看下显示效果


屏幕快照 2012-03-09 下午3.48.16.png

今天就到这里,明天继续。下一篇iOS 5 Storyboard 学习之 Tabbar Controller,Navigation Controller (3) 深入Segue,Class,Protocol,Delegate的基本使用

--EOF--

posted @ 2012-03-09 15:50  xxd  阅读(9760)  评论(16编辑  收藏  举报