ios 基础学习之零基础代码控制实现3



ios 基础学习之零基础代码控制实现3

这一节学习一下ios中的tableview控件的简单使用

UiTableView使用必须实现连个协议 <UITableViewDataSource,UITableViewDelegate>来进行对tableview进行数据管理

1)创建一个新的项目learn3

2)添加一个定义模块view FragmentTableView 并实现连个接口协议 UITableViewDataSource,UITableViewDelegate 并定义一个局部的TableView变量

如FragmentTableView.h代码所示

[plain] view plaincopy

  1. #import <UIKit/UIKit.h>
  2. @interface FragmentTableView : UIView<UITableViewDataSource,UITableViewDelegate>{
  3.     UITableView *mUiTableView;
  4.     NSArray *datalist;
  5. }
  6. @end

 
3) 在 FragmentTableView.m 中对tableview进行管理

1.在 initWithFrame 中进行对  FragmentTableView.h 中声明好的tableview变量进行初始化

如.m中代码:

[plain] view plaincopy

  1. #import ”FragmentTableView.h”
  2. @implementation FragmentTableView
  3. - (id)initWithFrame:(CGRect)frame
  4. {
  5.     self = [super initWithFrame:frame];
  6.     if (self) {
  7.         // Initialization code
  8.         // 初始化局部变量
  9.         mUiTableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, 320, 480)];
  10.         [mUiTableView setDataSource:self]; //设置数据源为本身
  11.         [mUiTableView setDelegate:self]; // 设置协议为本身
  12.         [self addSubview:mUiTableView]; // 添加tableview控件
  13.         [mUiTableView release];
  14.         // 初始化一些测试数据
  15.         datalist = [[NSArray alloc]initWithObjects:@”上海”,@”北京”,@”广州”,@”深圳”,@”香港”,@”澳门”,@”杭州”,@”西湖”,@”重庆”,@”南京”, nil];
  16.     }
  17.     return self;
  18. }
  19. -(void)dealloc{
  20.     [datalist release];
  21.     [super dealloc];
  22. }
  23. /*
  24. // Only override drawRect: if you perform custom drawing.
  25. // An empty implementation adversely affects performance during animation.
  26. - (void)drawRect:(CGRect)rect
  27. {
  28.     // Drawing code
  29. }
  30. */
  31. @end

 

 

2.接下来我们来实现必要的接口

(1)在没有看api的 我其实也不知道接下来怎么做了

所以还是了解一下UITableview :command+鼠标点击去可以看到他也有实现的

搜 @protocol (command+f)可以看到也定义了几个协议 UITableViewDataSource,UITableViewDelegate

我们关心的 是要做什么 接下来我们就要找 必须实现的 接口协议了继续搜 @required 可以看到下面有连个方法 如下面代码,这样我们就知道该怎么做了 必须实现的

 

[plain] view plaincopy

  1. @protocol UITableViewDataSource<NSObject>
  2. @required
  3. - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section;
  4. // Row display. Implementers should *always* try to reuse cells by setting each cell’s reuseIdentifier and querying for available reusable cells with dequeueReusableCellWithIdentifier:
  5. // Cell gets various attributes set automatically based on table (separators) and data source (accessory views, editing controls)
  6. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath;

(2)在FragmentTableView.m中实现上面两个方法 并进行设置数据

 

实现 UITableViewDataSource 第一个必须实现的方法

 

[plain] view plaincopy

  1. - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
  2.     // 从本方法的名称定义 可以看到是所有行的number
  3.     // 返回数组的总数
  4.     return datalist.count;
  5. }

实现 UITableViewDataSource 第二个必须实现的方法

 

 

[plain] view plaincopy

  1. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
  2.     // 返回 UITableViewCell 对象 根据方法名称意思是 indexPath cell 每行上 就是每行cell的填充
  3.     // 先初始化一个 UITableViewCell 这次初始化就不和以前一样 规定他的坐标位置了 直接定义他的样式 并设置标识
  4.     UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:[NSString stringWithFormat:@"cell"]];
  5.     NSUInteger row = [indexPath row]; // 初始化一个无符号int
  6.     NSLog(@”row:%i”,row);
  7.     cell.textLabel.text = [datalist objectAtIndex:row];
  8.     return cell;
  9. }

ok该实现的我们也都写好了  接下来在 Viewcontroller.m viewDidLoad 方法中添加FragmentUItableview进行显示


 

 

[plain] view plaincopy

  1. FragmentTableView *tableView = [[FragmentTableView alloc]initWithFrame:CGRectMake(0, 0, 320, 300)];
  2.     [self.view addSubview:tableView];
  3.     [tableView release]

command+R 进行运行 ok正常显示数据如下图 (这样不能说算完了 因为我们上面的代码还不好 因为我在来回点击并进行拉页面会报异常,接下来我们进行返回cell中的代码优化)

 

 

 

4)接下来对上面代码进行优化并设计的复杂一点

1.在 – (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 接口中进行修改 如下代码

 

[plain] view plaincopy

  1. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
  2. //    // 返回 UITableViewCell 对象 根据方法名称意思是 indexPath cell 每行上 就是每行cell的填充
  3. //    // 先初始化一个 UITableViewCell 这次初始化就不和以前一样 规定他的坐标位置了 直接定义他的样式 并设置标识
  4. //    UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:[NSString stringWithFormat:@"cell"]];
  5. //    NSUInteger row = [indexPath row]; // 初始化一个无符号int
  6. //    NSLog(@”row:%i”,row);
  7. //    cell.textLabel.text = [datalist objectAtIndex:row];
  8. //    return cell;
  9.     // command+/ 进行注释上面的代码
  10.     // 接下来进行优化上面的代码
  11.     // 定义一个标识
  12.     static NSString *stringIdentifier = @”cell”;
  13.     int row = [indexPath row];
  14.     // 声明一个UITableViewCell 并接受 参数tableview中的一个标识cell
  15.     UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:stringIdentifier];
  16.     // 判断cell 是否为空 如果为空进行初始化 这样的好处是节省系统资源
  17.     if (cell == nil) {
  18.         cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:stringIdentifier]autorelease];
  19.     }
  20.     // 接下来设置cell显示内容 可以多添加一点控件进去 我们对这个城市列表加上数字编号 并加一些背景等等
  21.     // 和上面一样设置显示内容
  22.     cell.textLabel.text = [datalist objectAtIndex:row];
  23.     [cell.textLabel setTextAlignment:NSTextAlignmentCenter]; // 设置文字居中显示
  24.     // 设置cell点击背景 这个只提供了 setSelectedBackgroundView方法 所以必须设置图片 我就随便截了个图用用吧 新建 New Group 文件夹命名为 images 鼠标右键添加截好的图片
  25.     UIImageView *selectBgView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 320, 75/2)];
  26.     [selectBgView setImage:[UIImage imageNamed:@"bg_item_red.png"]];
  27.     [cell setSelectedBackgroundView:selectBgView];
  28.     [selectBgView release];
  29.     // 添加地区编号 背景图片
  30.     UIImageView *idNumBgView = [[UIImageView alloc] initWithFrame:CGRectMake(20, (75-45)/4, 45/2, 45/2)];
  31.     [idNumBgView setImage:[UIImage imageNamed:@"bg_item_circle.png"]];
  32.     [cell addSubview:idNumBgView];
  33.     [idNumBgView release];
  34.     // 添加编号
  35.     UILabel *idNumLable = [[UILabel alloc]initWithFrame:CGRectMake(20, (75-45)/4, 45/2, 45/2)];
  36.     [idNumLable setText:[NSString stringWithFormat:@"%i",row]];
  37.     [idNumLable setTextAlignment:NSTextAlignmentCenter];
  38.     [idNumLable setFont:[UIFont systemFontOfSize:12]];
  39.     [idNumLable setBackgroundColor:[UIColor clearColor]];
  40.     [cell addSubview:idNumLable];
  41.     return cell;
  42. }

图片资源 

 

 

运行效果

2.接下来进行添加点击后获得item下标值 这样更符合我们需求

(1)接下来我们实现 UITableviewDelegate 中的 用户改变item选择方法

[plain] view plaincopy

  1. // Called after the user changes the selection.
  2. - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath;

实现代码如下:

 

 

[plain] view plaincopy

  1. // Called after the user changes the selection.
  2. - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
  3.     int row = [indexPath row];
  4.     if (row != [datalist count]) {
  5.         UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@”温馨提示”
  6.                                 message:[NSString stringWithFormat:@"您选择的是:%@",[datalist objectAtIndex:row]]
  7.                                 delegate:self
  8.                                 cancelButtonTitle:@”确定”
  9.                                 otherButtonTitles:nil];
  10.         [alert show];
  11.         [alert release];
  12.     }
  13. }

运行结果

 

 

5)总结

1.这节专门学习了UITableview的实现具体步骤 及 UITableview item 简单的布局