UITableViewCell 单组数据展示——实现游戏英雄单组展示

1.Cell简介

1.1cell是什么

UITableView的每一行都是一个UITableViewCell，通过dataSource的tableView:cellForRowAtIndexPath:方法来初始化每一行


UITableViewCell内部有个默认的子视图:contentView，contentView是UITableViewCell所显示内容的父视图，可显示一些辅助指示视图


辅助指示视图的作用是显示一个表示动作的图标，可以通过设置UITableViewCell的accessoryType来显示，默认是UITableViewCellAccessoryNone(不显示辅助指示视图)，其他值如下:
UITableViewCellAccessoryDisclosureIndicator


UITableViewCellAccessoryDetailDisclosureButton


UITableViewCellAccessoryCheckmark


还可以通过cell的accessoryView属性来自定义辅助指示视图（比如往右边放一个开关

1.2UITableViewCell的contentView

contentView下默认有3个子视图
其中2个是UILabel(通过UITableViewCell的textLabel和detailTextLabel属性访问)
第3个是UIImageView(通过UITableViewCell的imageView属性访问)
UITableViewCell还有一个UITableViewCellStyle属性，用于决定使用contentView的哪些子视图，以及这些子视图在contentView中的位置

UITableViewCell结构

2.实例：英雄展示

2.1：plist文件

2.2搭建界面

2.3代码实现

2.3.1模型类

//
//  MJHero.h

#import <Foundation/Foundation.h>

@interface MJHero : NSObject
@property (nonatomic, copy) NSString *name;
@property (nonatomic, copy) NSString *icon;
@property (nonatomic, copy) NSString *intro;

+ (instancetype)heroWithDict:(NSDictionary *)dict;
- (instancetype)initWithDict:(NSDictionary *)dict;
@end

//
//  MJHero.m

#import "MJHero.h"

@implementation MJHero
+ (instancetype)heroWithDict:(NSDictionary *)dict
{
    return [[self alloc] initWithDict:dict];
}

- (instancetype)initWithDict:(NSDictionary *)dict
{
    if (self = [super init]) {
        [self setValuesForKeysWithDictionary:dict];  //把字典转成模型属性
    }
    return self;
}
@end

2.3.2控制器

//
//  MJViewController.m
//  04-英雄展示

#import "MJViewController.h"
#import "MJHero.h"

@interface MJViewController () <UITableViewDataSource, UITableViewDelegate>
@property (nonatomic, strong) NSArray *heros;
@property (weak, nonatomic) IBOutlet UITableView *tableView;

@end

@implementation MJViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    // 设置行高(每一行的高度一致)
//    self.tableView.rowHeight = 60;
    
//    self.tableView.delegate = self;
}

- (NSArray *)heros
{
    if (_heros == nil) {
        // 初始化
        // 1.获得plist的全路径
        NSString *path = [[NSBundle mainBundle] pathForResource:@"heros.plist" ofType:nil];
        
        // 2.加载数组
        NSArray *dictArray = [NSArray arrayWithContentsOfFile:path];
        
        // 3.将dictArray里面的所有字典转成模型对象,放到新的数组中
        NSMutableArray *heroArray = [NSMutableArray array];
        for (NSDictionary *dict in dictArray) {
            // 3.1.创建模型对象
            MJHero *hero = [MJHero heroWithDict:dict];
            
            // 3.2.添加模型对象到数组中
            [heroArray addObject:hero];
        }
        
        // 4.赋值
        _heros = heroArray;
    }
    return _heros;
}

#pragma mark - 数据源方法
// 不实现这个方法,默认就是1组
//- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
//{
//    return 1;
//}
/**
 *  第section组有多少行
 *
 */

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return self.heros.count;
}
/**
 *  每一行显示怎样的内容（cell）
 *
 *
 */

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:nil];

    // 取出模型
    MJHero *hero = self.heros[indexPath.row];
    
    // 设置cell的数据
    cell.textLabel.text = hero.name;
    cell.detailTextLabel.text = hero.intro;
    cell.imageView.image = [UIImage imageNamed:hero.icon];
    
    return cell;
}

#pragma mark - 代理方法
/**
 *  每一行的高度不一致的时候使用这个方法来设置行高
 */
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    if (indexPath.row == 0) return 100;
    return 60;
}

@end

3.运行结果

4.cell常见属性实例

//
//  MJViewController.m

#import "MJViewController.h"
#import "MJHero.h"

@interface MJViewController () <UITableViewDataSource, UITableViewDelegate>
@property (nonatomic, strong) NSArray *heros;
@property (weak, nonatomic) IBOutlet UITableView *tableView;

@end

@implementation MJViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    
}

- (NSArray *)heros
{
    if (_heros == nil) {
        // 初始化
        // 1.获得plist的全路径
        NSString *path = [[NSBundle mainBundle] pathForResource:@"heros.plist" ofType:nil];
        
        // 2.加载数组
        NSArray *dictArray = [NSArray arrayWithContentsOfFile:path];
        
        // 3.将dictArray里面的所有字典转成模型对象,放到新的数组中
        NSMutableArray *heroArray = [NSMutableArray array];
        for (NSDictionary *dict in dictArray) {
            // 3.1.创建模型对象
            MJHero *hero = [MJHero heroWithDict:dict];
            
            // 3.2.添加模型对象到数组中
            [heroArray addObject:hero];
        }
        
        // 4.赋值
        _heros = heroArray;
    }
    return _heros;
}

#pragma mark - 数据源方法
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return self.heros.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue2 reuseIdentifier:nil];

    // 取出模型
    MJHero *hero = self.heros[indexPath.row];
    
    // 设置cell的数据
    cell.textLabel.text = hero.name;
    cell.detailTextLabel.text = hero.intro;
    cell.imageView.image = [UIImage imageNamed:hero.icon];
    
    
    // 设置cell右边指示器的类型
//    if (indexPath.row % 2 == 0) {
        cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
//    }
    
//    cell.accessoryType = UITableViewCellAccessoryDetailDisclosureButton;
//    cell.accessoryView = [[UISwitch alloc] init];
    
    // 设置背景(背景view不用设置尺寸, backgroundView的优先级 > backgroundColor)
    UIImageView *bgView = [[UIImageView alloc] init];
    bgView.image = [UIImage imageNamed:@"buttondelete"];
//    bgView.backgroundColor = [UIColor redColor];
    cell.backgroundView = bgView;
    
    UIView *selectedbgView = [[UIView alloc] init];
    selectedbgView.backgroundColor = [UIColor greenColor];
    cell.selectedBackgroundView = selectedbgView;  //选中时候的颜色
    
    return cell;
}

#pragma mark - 代理方法
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return 60;
}

@end

运行结果