iOS开发之高级视图—— UITableView(四)自定义Cell

      当我们使用UITableView的时候，经常需要自定义Cell，这个例子展示了一个简单的自定义的Cell。

   

     HeroViewCell.h

//
//  HeroViewCell.h
//  ExtendCellDemo
//
//  Created by Apple on 16/5/25.
//  Copyright © 2016年 Apple. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface HeroViewCell : UITableViewCell

@property (nonatomic,retain) UILabel* nameField;
@property (nonatomic,retain) UILabel* skillField;

@end

 

  HeroViewCell.m

//
//  HeroViewCell.m
//  ExtendCellDemo
//
//  Created by Apple on 16/5/25.
//  Copyright © 2016年 Apple. All rights reserved.
//

#import "HeroViewCell.h"

@implementation HeroViewCell

// 重写父类UITableViewCell初始化函数
//参数1: cell样式
//参数2: 重用标识符
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        // 自定义颜色
        UIColor * bgColor = [UIColor colorWithRed:0.7
                                            green:1.0 blue:0.7 alpha:1.0];
        // 设置该使用淡绿色背景
        self.contentView.backgroundColor = bgColor;
        // 创建一个用于显示"英雄名字"字符串的标签
        UILabel* nameLabel = [[UILabel alloc]
                              initWithFrame:CGRectMake(100 , 5 , 70 , 20)];
        // 设置该UILabel显示的文本内容
        nameLabel.text = @"英雄：";
        // 设置右对齐
        nameLabel.textAlignment = NSTextAlignmentRight;
        // 设置字体
        nameLabel.font = [UIFont boldSystemFontOfSize:17];
        // 设置背景色
        nameLabel.backgroundColor = [UIColor clearColor];
        // 将nameLabel添加到当前单元格中
        [self.contentView addSubview:nameLabel];
        // 创建一个用于显示"技能"字符串的标签
        UILabel* skillLabel = [[UILabel alloc]
                               initWithFrame:CGRectMake(100 , 30 , 70 , 20)];
        // 设置该UILabel显示的文本内容
        skillLabel.text = @"技能：";
        // 设置右对齐
        skillLabel.textAlignment = NSTextAlignmentRight;
        // 设置字体
        skillLabel.font = [UIFont boldSystemFontOfSize:17];
        // 设置背景色
        skillLabel.backgroundColor = [UIColor clearColor];
        // 将skillLabel添加到当前单元格中
        [self.contentView addSubview:skillLabel];
        
        // 创建一个用于显示英雄名字的标签
        self.nameField = [[UILabel alloc]
                          initWithFrame:CGRectMake(190 , 5 , 250 , 20)];
        // 设置左对齐
        self.nameField.textAlignment = NSTextAlignmentLeft;
        // 设置字体
        self.nameField.font = [UIFont boldSystemFontOfSize:18];
        // 设置文字颜色
        self.nameField.textColor = [UIColor blueColor];
        // 将self.nameField添加到当前单元格中
        [self.contentView addSubview:self.nameField];
        
        // 创建一个用于显示技能的标签
        self.skillField = [[UILabel alloc]
                           initWithFrame:CGRectMake(190 , 30 , 180 , 20)];
        // 设置左对齐
        self.skillField.textAlignment = NSTextAlignmentLeft;
        // 设置字体
        self.skillField.font = [UIFont boldSystemFontOfSize:18];
        // 设置文字颜色
        self.skillField.textColor = [UIColor blueColor];
        // 将self.nameField添加到当前单元格中
        [self.contentView addSubview:self.skillField];
    }
    return self;
}


@end

     ViewController.h

//
//  ViewController.h
//  ExtendCellDemo
//
//  Created by Apple on 16/5/25.
//  Copyright © 2016年 Apple. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController


@end

     ViewController.m

//
//  ViewController.m
//  ExtendCellDemo
//
//  Created by Apple on 16/5/25.
//  Copyright © 2016年 Apple. All rights reserved.
//

#import "ViewController.h"
#import "AppDelegate.h"
#import "HeroViewCell.h"

@interface ViewController ()

@end

NSArray* heroes;
NSArray* skills;

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 创建、并初始化NSArray对象。
    heroes = [NSArray arrayWithObjects:@"瑞文",
             @"李青", @"提莫" , @"瑞兹",@"德玛", nil];
    // 创建、并初始化NSArray对象。
    skills = [NSArray arrayWithObjects:
              @"光速QA", @"R闪" , @"光速RRR" , @"RQWE" ,@"转转转R", nil];
    
    UITableView* tableView = [[UITableView alloc] initWithFrame:[UIScreen mainScreen].bounds style:UITableViewStyleGrouped];
    
    UILabel* headerLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 44.0)];
    [headerLabel setText:@"英雄联盟"];
    headerLabel.textColor = [UIColor blackColor];
    headerLabel.backgroundColor = [UIColor cyanColor];
    headerLabel.textAlignment = NSTextAlignmentCenter;
    //设置UITableView的页眉控件
    [tableView setTableHeaderView:headerLabel];
    
    UILabel* footerLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 320, 30)];
    [footerLabel setText:@"人在塔在"];
    //设置UITableView页脚控件
    [tableView setTableFooterView:footerLabel];
    
    //设置行cell高（默认44px）
    [tableView setRowHeight:50];
    //设置分割线颜色
    [tableView setSeparatorColor:[UIColor redColor]];
    //设置分割线风格
    
    /**
     *  UITableViewCellSeparatorStyleNone 不使用分割线
     UITableViewCellSeparatorStyleSingleLine 使用分割线
     UITableViewCellSeparatorStyleSingleLineEtched 在有组的情况使用分割线
     */
    [tableView setSeparatorStyle:UITableViewCellSeparatorStyleSingleLine];
    // 设置UITableView的背景颜色
    [tableView setBackgroundColor:[UIColor lightGrayColor]];
    
    // 设置数据源代理，必须实现协议UITableViewDataSource中的相关方法
    tableView.delegate = self;
    tableView.dataSource = self;
    
    [self.view addSubview:tableView];
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    
    return heroes.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    // 为表格行定义一个静态字符串作为标示符
    static NSString* cellId = @"cellId";
    // 从可重用表格行的队列中取出一个表格行
    HeroViewCell* cell = [tableView
                                 dequeueReusableCellWithIdentifier:cellId];
    // 如果取出的表格行为nil
    if(cell == nil)
    {
        // 创建一个UITableViewCell对象，使用默认风格
        cell = [[HeroViewCell alloc]
                initWithStyle:UITableViewCellStyleSubtitle
                reuseIdentifier:cellId];
    }
    // 从IndexPath参数中获取当前行的行号
    NSUInteger rowNo = indexPath.row;
    // 将单元格的边框设置为圆角
    cell.layer.cornerRadius = 12;
    cell.layer.masksToBounds = YES;
    //    // 为UITableViewCell的左端设置图片
    cell.imageView.image = [UIImage imageNamed:@"11.jpg"];
    //    // 为UITableViewCell的左端设置高亮状态视时的图片
    cell.imageView.highlightedImage = [UIImage imageNamed:
                                       @"1.jpg"];
    // 设置UITableViewCell附加按钮的样式
    cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
    
    cell.nameField.text = [heroes objectAtIndex:rowNo];
    // 取出details中索引为rowNo的元素作为UITableViewCell的详细内容
    cell.skillField.text = [skills objectAtIndex:rowNo];
    
    return cell;
    
}


@end

   效果图如下：