08-UIKit（UITableTableViewCell、自定义Cell、xcode调试）

目录：

1. UITableTableViewCell

2. tag技术

3. 自定义Cell

4. 用nib文件构造自定义的静态表

5. TableView数据模型总结

6. Xcode代码调试

<#name#>

回到顶部

1、UITableTableViewCell

[1-TableViewCell-contentView]

1. UITableViewCell : UIView

-contentView

-imageView

-textLabel

-detailTextLabel

-自定义的视图

-accessoryView

: accessoryType  使用内置的4种View

: accessoryView = 其他视图(可以是系统的，也可以是自定义)

[UIFont italicSystemFontOfSize:20];//斜体

lable.textAlignment = NSTextAlignmentCenter;//居中

[cell.contentView addSubview:lable];//在contentView中添加子控件

lable = (UILabel *)[cell.contentView viewWithTag:1];//根据tag属性获取子视图对象

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";
    //去对象池中根据标识符找对应的cell对象，找到了就赋值给cell，没找到返回nil
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    UILabel *lable = [[UILabel alloc] init];
    if (cell == nil) {
        //创建cell时 分配一个标识符
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
        lable = [[UILabel alloc] init];
        lable.font = [UIFont italicSystemFontOfSize:20];//斜体大小
        lable.frame = CGRectMake(0, 0, 320, 40);//位置坐标
        lable.textColor = [UIColor redColor];//字体颜色
        lable.textAlignment = NSTextAlignmentCenter;//居中
        lable.tag = 1;
        [cell.contentView addSubview:lable];//在contentView中添加子控件
    }else{
        lable = (UILabel *)[cell.contentView viewWithTag:1];//根据tag属性返回uiview对象
    }
    
    // Configure the cell...
    lable.text = self.languages[indexPath.row];//获取数组中的元素赋值给lable
    return cell;
}

回到顶部

2. tag技术

在一个视图中，所有的子视图对象可以使用tag编号，只要在父视图中的编号不重复，那么可以随时通过父视图的viewWithTag方法获取这个子视图对象。

回到顶部

3. 自定义Cell

[2-customCell]

1） 创建一个空的xib文件（command +n -> ios -> user interface -> empty），在xib文件中，拖一个UIView进去，做为将来的Cell

要将大小改为freeform(检查器4)

拖拽一些控件到xib自定义该cell：imageView, Label….

2）创建类MXNewsCell, 继承UITableViewCell

让这个xib文件绑定到此类上，绑定的方法是在xib文件上在检查器3设置custom class为MXNewsCell

3）拖拽连线xib文件中的控件到MXNewsCell类中，创建公开的属性，目的是为了给自定义的cell中的控件赋值

4）要在TableViewController中使用这个自定义的cell就要在viewDidLoad方法中注册我们自定义的Cell

// 注册自定义cell

[self.tableView registerNib:[UINib nibWithNibName:@"MXNewsCell" bundle:nil] forCellReuseIdentifier:@"Cell"];

5） 回答三个问题

在显示cell内容的方法中返回Cell的问题时，dequeue我们的Cell， 一定会成功(已经注册过), 设置Cell中的相关属性即可

MXNewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

代码：

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";
    //返回Cell的问题中，dequeue我们的Cell， 一定会成功(已经注册过), 设置Cell中的相关属性即可
    MXNewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    NSLog(@"%d",indexPath.row);
    /*
    if (cell == nil) {
        cell = [[MXNewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    }
    */
    // Configure the cell...
    MXNews *news = self.news[indexPath.row];
    cell.newsTitleLable.text = news.newsTitle;
    cell.newsDetailLable.text = news.newsDetail;
    cell.newsDateLable.text = news.newsDate;
    cell.newsImageView.image = [UIImage imageNamed:news.newsImageFile];
    
    return cell;
}

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    return 70;
}
//int row = 0;
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
    
    MXNews *news = self.news[indexPath.row];
    //创建弹框
    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"产品" message:nil delegate:self cancelButtonTitle:@"取消" otherButtonTitles:@"确定", nil];
    //设置弹框样式
    alert.alertViewStyle = UIAlertViewStylePlainTextInput;
    //设置文本框默认文字
    [alert textFieldAtIndex:0].text = news.newsTitle;
    //row = indexPath.row;
    alert.tag = indexPath.row;
    //显示弹框
    [alert show];
}

-(void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex{
    //如果点击取消return
    if (buttonIndex == 0) return;
    //接收文本框数据
    NSString *text = [alertView textFieldAtIndex:0].text;
    //修改模型数据
    MXNews *news = self.news[alertView.tag];
    news.newsTitle = text;
    
    //刷新界面
    //[self.tableView reloadData];
    //局部刷新
    NSIndexPath *indexPath = [NSIndexPath indexPathForRow:alertView.tag inSection:0];
    NSArray *paths = @[indexPath];
    [self.tableView reloadRowsAtIndexPaths:paths withRowAnimation:YES];
    
}

回到顶部

4. 用nib文件构造自定义的静态表

[3-Static-tableView-Xib]

1) 一个xib文件既可以表示一个VC中的View， 还可以加入任何View，比如一个UITableViewCell视图。

2) xib文件中的根视图也可以有多个，也就是说，可以在一个xib文件中加入很多个不同样子的UITableViewCell。

3) xib中的任何视图，都可以绑定对应的类，这个类可以是系统提供的，也可以是用户自定义的。

4) xib中的任何视图对象，都可以用连线的方式变成控制器类中的一个属性。

5）静态表其实就是没有数据模型的一个表，所有的数据都是直接写在控件上

@interface MXTableViewController ()
@property (strong, nonatomic) IBOutlet UITableViewCell *settingCell;
@property (strong, nonatomic) IBOutlet UITableViewCell *streamPackageCell;
@property (strong, nonatomic) IBOutlet UITableViewCell *qplayCell;
@property (strong, nonatomic) IBOutlet UITableViewCell *timeCloseCell;
@property (strong, nonatomic) IBOutlet UITableViewCell *appCell;
@property (strong, nonatomic) IBOutlet UITableViewCell *tableHeaderCell;
@end

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    }
    
    // Configure the cell...
    
    if (indexPath.section == 0 && indexPath.row == 0) {
        return self.settingCell;
    }else if (indexPath.section == 0 && indexPath.row == 1) {
        return self.streamPackageCell;
    }else if (indexPath.section == 0 && indexPath.row == 2) {
        return self.qplayCell;
    }else if (indexPath.section == 0 && indexPath.row == 3) {
        return self.timeCloseCell;
    }else if (indexPath.section == 1 && indexPath.row == 0) {
        self.appCell.selectionStyle = UITableViewCellSelectionStyleNone;
        return self.appCell;
    }
    
    return nil;
}

回到顶部

5. TableView数据模型总结

[4-area]

MVC， V(xxxx.xib)    C(MXMyTableViewController)

Model:   NSArray *contacts;

5.1  对象

MXMyTableViewController.h

@property (no…)  MXContact;//Model

和TableView的关系:

每一行显示这个对象的一个属性

一般会使用静态的TableView

5.2  数组

数组-->NSString

MXMyTableViewController.h

-NSArray *data;

-NSString *item;

和TV的关系：

每一行显示数组中的一个字符串

5.3 数组-->对象-->普通属性

MXTVController.h

-NSArray *data;

-MXContact;

-name;

-age;

-number;

对照关系：

一行展示一个对象，如果对象比较复杂，可能会用自定义的Cell来展示。

5.4 数组-->对象-->数组

MXTVController.h

-NSArray *objects;

-MXArea

-NSString *name;

-NSArray *subArea;

对照关系:

1)可以用分区方式:

一个objects是一个分区，每一个分区展示subArea;

2)一行显示第一层数组中的一个元素名，点击时推第二个Table，第二个Table中展示第二层数组中的数据。

5.5 多层TableView的展示

多层指N层，就是不知道多少层。

模型:

-MXArea  *area

-NSString *name

-NSArray *subArea

-MXArea *area

-NSString *name

-NSArray *subArea

-MXArea *area

….(循环)

MXArea.m

+(MXArea *)china{
    MXArea *chinaArea = [[MXArea alloc] init];
    chinaArea.name = @"中国";
    
    MXArea *shanghai = [[MXArea alloc] init];
    shanghai.name = @"上海";
    
    MXArea *beijing = [[MXArea alloc] init];
    beijing.name = @"北京";
    MXArea *dongcheng = [[MXArea alloc] init];
    dongcheng.name = @"东城";
    MXArea *xicheng = [[MXArea alloc] init];
    xicheng.name = @"西城";
    beijing.subArea = @[dongcheng,xicheng];
    
    MXArea *guangdong = [[MXArea alloc] init];
    guangdong.name = @"广东";
    MXArea *dongguan = [[MXArea alloc] init];
    dongguan.name =@"东莞";
    MXArea *xiepo = [[MXArea alloc] init];
    xiepo.name = @"斜坡";
    dongguan.subArea = @[xiepo];
    MXArea *tianhe = [[MXArea alloc] init];
    tianhe.name = @"天河";
    guangdong.subArea = @[dongguan,tianhe];
    
    chinaArea.subArea = @[shanghai,beijing,guangdong];
    return chinaArea;
    
}

MXAreaTableViewController.m

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    }
    
    // Configure the cell...
    MXArea *area = self.area.subArea[indexPath.row];
    cell.textLabel.text = area.name;
    return cell;
}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    MXArea *area = self.area.subArea[indexPath.row];
    if (area.subArea.count == 0) {
        //根据indexPath获取到当前cell
        UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];
        [cell setSelected:NO animated:YES];
        return;
    }
    // Navigation logic may go here, for example:
    // Create the next view controller.
    MXAreaTableViewController *detailViewController = [[MXAreaTableViewController alloc] initWithNibName:@"MXAreaTableViewController" bundle:nil];

// Pass the selected object to the new view controller.
    detailViewController.area = self.area.subArea[indexPath.row];
    // Push the view controller.
    [self.navigationController pushViewController:detailViewController animated:YES];
}

回到顶部

6. Xcode代码调试

6.1 编译错误(程序飘红)

1) 保存文件

随时Command+S

2) Clean项目（Shift+Command+K)

3) 看程序有没有写错

大小写，单词拼写，标点符号(中文)，语法

4) 看大括号，查缩进

6.2 连接错误

1) 看错误原因是哪个函数，哪个库没有加进来。

2) Xcode出现问题

修改了系统提供的某个头文件中的内容。

查看错误信息，其中有一个缓冲区目录(Cache)中的指定的内容删除

6.3 程序逻辑错误(运行时错误)

1) 程序直接崩溃

查看控制台错误信息， reason(错误原因)很重要

方法没有找到(@selector(tap), 但是tap方法没有提供)

下标越界错误

2) 程序出现错误的结果

不显示, 位置不对,颜色不对：

有没有addSubview

frame没有有设置，位置是否正确

alpha 是不是0

是不是几个View放在一个位置

前景色和背景色是不是一样

6.4 设置断点(breakpoint)

主要用来跟踪程序的运行

1）在何处设断点

二分查找(折半查找)

2）确定程序的错误一在定的范围内时，逐行排查

作业:

课堂上的内容补上。

TMusic完成，各个界面都可以用。界面使用Nib文件来完成。

加TableView显示所有的歌曲

数据模型：

MXMusic

-NSString *name;//歌名

-NSString *artist;//歌手

-NSString *album;//专辑名

-NSTimeInterval duration;//时长(秒)

typedef … NSTimeInterval;

注意：在创建弹窗的时候，代理一定要设置，不然点击按钮的方法不会执行