iOS - 表格

一、 TableView

1.1 StoryBoard方式

1.2 nib方式

1.2.1 一般

1.2.2 自定义单元格

1.3 纯代码方式

(1) 简单表视图操作

Step1:

    实现协议 2个协议:<UITableViewDataSource,UITableViewDelegate>

Step2:

    创建UITableView对象 & 设置表格视图对象的代理与表格数据源的代理

     //创建一个区域,用来显示表格

//  CGRect rect = CGRectMake(0, 40, 300, 420);

    CGRect rect = CGRectMake(0, 40, 300, 420);

    //初始化表格视图

    UITableView *tableView = [[UITableView alloc]initWithFrame:rect];    

    //设置表格视图对象的代理

    tableView.delegate = self;

    //设置表格视图数据源的代理

    tableView.dataSource = self;

    [self.view addSubview:tableView];

Step3: 设置单元格高度 

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

    return 5;

}

 

Step4: 初始化和返回表格视图的单元格

 

//该代理方法，用来初始化和返回表格视图的单元格，是最重要的一个代理方法

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

    //创建一个字符串,作为单元格的标识符

    static NSString *identifier = @"cellIndentifier";

    //单元格的标识符,可以看作是一个重用机制,此方法可以从,所有已经开辟内存的单元格里面,选择一个具有同样标识符的、空闲的单元格

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier];

    //如果没有重复使用的单元格,则创建新的单元格

    if (cell == nil) {

        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:identifier];

        //设置单元格的标题文字内容

        cell.textLabel.text = @"Cell title here.";

        //设置单元格的文字描述内容

        cell.detailTextLabel.text = @"Detail Information here";

    }

    return cell;

}

(2) 其它操作

   a. 设置单元格高度

 

    //该代理方法用来设定单元格的高度

 

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

 

    　　return 80;

 

　}

 

   b. 设置单元格图标

 

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

 

    

 

     　　static NSString *identifier = @"cellIndenfier";

 

    　　UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier];

 

    　　if (cell == nil) {

 

        

 

        　　cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:identifier];

 

        　　cell.textLabel.text = @"Cell title here.";

 

　　        cell.detailTextLabel.text = @"Detail Information here.";

 

      　　  //建立一个图片对象,导入第一张图片,作为单元格默认状态的图片

 

        　　UIImage *img1 = [UIImage imageNamed:@"alarm1.png"];

 

　　        //建立另一张图片对象,导入第二张图片,作为单元格被选中状态的图片

 

      　　  UIImage *img2 = [UIImage imageNamed:@"alarm2.png"];

 

　　        //将第一个图片对象,指定为单元格默认图片

 

      　　  cell.imageView.image = img1;

 

        　　//将第二个图片对象,指定为单元格的高亮图片

 

        　　cell.imageView.highlightedImage = img2;

 

    　　}

 

　　    return cell;

 

}

 

   c. 设置单元格数据源

 

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

 

    

 

    static NSString *identifier =@"cellIndentifier";

 

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier];

 

    

 

    if (cell == nil) {

 

        

 

        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:identifier];

 

        

 

        //索引路径用来标识单元格在表格中的位置,它有section和row两个属性,前者标识单元格处于第几个段落,后者标识单元格在段落中的第几行

 

        NSInteger num = [indexPath row];

 

        //获取数组中的数据,指定为当前单元格的标题文字.

 

        cell.textLabel.text = [_array objectAtIndex:num];

 

        

 

        cell.detailTextLabel.text = @"Detail Information here";

 

    }

 

    return cell;

 

}

 

   d. 设置单元格背景色

 

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

 

    

 

    static NSString *identifier =@"cellIndentifier";

 

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier];

 

    

 

    if (cell == nil) {

 

        

 

        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:identifier];

 

        

 

        //获取     当前     单元格的行数

 

        NSInteger num = [indexPath row];

 

        //设置单元格的标题文字内容

 

        cell.textLabel.text = @"Title Information";

 

        //设置单元格的描述文字内容

 

        cell.detailTextLabel.text = @"Detail Information here";

 

        

 

        if (num == 1) {

 

            

 

            //选择第二行单元格,则设置单元格背景色为紫色

 

            [cell setBackgroundColor:[UIColor purpleColor]];

 

        }

 

        else {  //若不是第二行,则设置为另外一种背景

 

            

 

            //1.

 

            CGRect rect = CGRectMake(0, 0, 50, 50);

 

            //创建一个视图对象

 

            UIView *view = [[UIView alloc] initWithFrame:rect];

 

            //设置视图对象的背景颜色为褐色

 

            [view setBackgroundColor:[UIColor brownColor]];

 

            

 

            //将视图作为单元格的背景视图,这里视图的作用是仅改变单元格的背景色,也可以根据需要,设定一张图片作为背景.

 

            [cell setBackgroundView:view];

 

            

 

            //2.

 

//            [cell setBackgroundColor:[UIColor redColor]];

 

            

 

        }

 

    }

 

    return cell;

 

}

 

   e. 设置单元格Accessory样式

 

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

 

    

 

    UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];

 

    

 

    if (cell.accessoryType == UITableViewCellAccessoryNone)

 

        cell.accessoryType = UITableViewCellAccessoryCheckmark;

 

    else

 

        cell.accessoryType = UITableViewCellAccessoryNone;

 

    

 

}

 

   f.  删除单元格

 

//该代理方法,用来设定单元格的编辑方式

 

-(UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath {

 

    

 

    //设置单元格的编辑模式为删除模式

 

    return UITableViewCellEditingStyleDelete;

 

}

 

 

 

//该代理方法,用来处理单元格编辑结束后的动作

 

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

 

    

 

    //判断是否为删除操作

 

    if (editingStyle == UITableViewCellEditingStyleDelete) {

 

 

 

        //获得当前编辑的单元格的行编号

 

        NSInteger num = [indexPath row];

 

        //从数组中将该单元格的内容清楚,以保证数据的一致性

 

        [_array removeObjectAtIndex:num];

 

        //再从表格视图中清楚该单元格

 

        NSArray *indexPaths = [NSArray arrayWithObjects:indexPath, nil];

 

        [tableView deleteRowsAtIndexPaths:indexPaths withRowAnimation:UITableViewRowAnimationAutomatic];

 

        

 

    }

 

}

 

   g. 插入单元格

 

//该代理方法,用来设定单元格的编辑方式

 

-(UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath {

 

    

 

    //设置单元格的编辑模式为插入模式

 

    return UITableViewCellEditingStyleInsert;

 

}

 

 

 

//该代理方法,用来处理单元格编辑结束后的动作

 

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

 

    

 

    //判断是否为删除操作

 

    if (editingStyle == UITableViewCellEditingStyleInsert) {

 

        

 

        //获得当前编辑的单元格的行编号

 

        NSInteger num = [indexPath row];

 

        //从数组中将该单元格的内容清楚,以保证数据的一致性

 

        [_array insertObject:@"Nice day" atIndex:num];

 

        //再往表格视图中插入新单元格

 

        NSArray *indexPaths = [NSArray arrayWithObjects:indexPath, nil];

 

        [tableView insertRowsAtIndexPaths:indexPaths withRowAnimation:UITableViewRowAnimationAutomatic];

 

        

 

    }

 

}

 

   h. 更改单元格顺序

 

//该代理方法,用来设定单元格的编辑方式

-(UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath {

    

    //设置单元格的编辑方式为编辑模式

    return UITableViewCellEditingStyleNone;

}

 

//用来设定是否允许拖动单元格

-(BOOL)tableView:(UITableView *)tableView canMoveRowAtIndexPath:(NSIndexPath *)indexPath {

    return YES;

}

 

//用来响应单元格的移动动作.

-(void)tableView:(UITableView *)tableView moveRowAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath {

    

    //获得单元格移动前的位置

    NSInteger fromRow = [sourceIndexPath row];

    //获得单元格移动后的位置

    NSInteger toRow = [destinationIndexPath row];

    //获得数组在单元格移动前的对象

    id obj = [_array objectAtIndex:fromRow];

    //删除数组中单元格移动前位置的对象

    [_array removeObjectAtIndex:fromRow];

    [_array insertObject:obj atIndex:toRow];

 

}

 

 

二、CollectionView

2.1 StoryBoard方式

2.2 nib方式

1.2.1 一般

1.2.2 自定义单元格

2.3 纯代码方式