您的位置:首页 > 产品设计 > UI/UE

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

2013-11-14 14:42 459 查看

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


运行结果

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: