用xib创建视图,自定义cell内容,解析数据,并将数据加载到cell上显示出来。
效果如下:
思路如下:
1. 创建tableView
1)首先应该有一个tableView,必须实现的代理方法留着后面实现
@interface HomeViewController ()<UITableViewDataSource>
{
UITableView *listView;//列表视图
}
//数组
@property(nonatomic,strong)NSMutableArray *data;
@end
2)添加UI,要记得调用
-(void)_createListView{
listView = [[UITableView alloc]initWithFrame:CGRectMake(0, 64, KScreenWidth, KScreenHeight-64-49) style:UITableViewStylePlain];
listView.backgroundColor = [UIColor whiteColor];
listView.hidden = YES;
listView.dataSource = self;
listView.rowHeight = 100;
[self.view addSubview:listView];
}
2. 创建cell
1)建好tableView以后我们创建一个UITableViewcell,同时创建它的xib文件,在它的xib里画好海报(imageView),其他的有标题、年份、评分(label),还有星级视图(黄色部分)(imageView),效果如下:
2)在cell的.h文件里面关联好控件,如下图:
3.创建一个demol,在这之前先把相关的json文件和第三方框架SDWebImage添加进来。
.h文件:
//数据模型
@interface MovieModel : NSObject
@property(nonatomic,strong)NSDictionary *rating;//评分
@property(nonatomic,assign)NSUInteger collect_count;//收藏数
@property(nonatomic,strong)NSString *title;//标题
@property(nonatomic,strong)NSString *year;//年份
@property(nonatomic,strong)NSDictionary *images;//图片
@end
4.在tableView所在的.m文件里加载数据
/*NSJSONSerialization:系统提供的json的序列化类
data:要解析的二进制数据
options:
NSJSONReadingMutableContainers 生成的是可变的对象
NSJSONReadingMutableLeaves 生成NSMutableString
NSJSONReadingAllowFragments 生成不可变对象
error:错误*/
#pragma mark - 数据加载
-(void)loadData{
//1 json文件的路径 (资源包)
NSString *path = [[NSBundle mainBundle]pathForResource:@"" ofType:@"json"];
//2 json--->data (二进制的数据)
NSData *data = [[NSData alloc]initWithContentsOfFile:path];
//3 解析二进制数据
//data--->对象
NSDictionary *dic = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingMutableContainers error:nil];
// NSLog(@"dic = %@",dic);
//从对象--->data
// [NSJSONSerialization dataWithJSONObject:<#(nonnull id)#> options:<#(NSJSONWritingOptions)#> error:<#(NSError * _Nullable __autoreleasing * _Nullable)#>]
NSArray *subjects =[dic objectForKey:@"subjects"];
for (int i =0; i<subjects.count; i++) {
NSDictionary *subject = [subjects[i] objectForKey:@"subject"];
//构建model对象
MovieModel *model = [[MovieModel alloc]init];
model.rating =[subject objectForKey:@"rating"];
model.collect_count = [[subject objectForKey:@"collect_count"]integerValue];
model.title = [subject objectForKey:@"title"];
model.year = [subject objectForKey:@"year"];
model.images = [subject objectForKey:@"images"];
[self.data addObject:model];
}
// NSLog(@"%@",self.data);
}
5.实现tableView必须事件的数据源代理方法,要记得导入model和cell的头文件。
#pragma mark - TableView DataSource
//行数
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
return self.data.count;
}
//具体单元格
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
static NSString *identifer = @"Movie_cell";
//从重用池中取cell
MovieCell *cell = [tableView dequeueReusableCellWithIdentifier:identifer];
if (cell ==nil) {
//没有xib
// cell = [[MovieCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identifer];
//有xib
cell = [[[NSBundle mainBundle] loadNibNamed:@"MovieCell" owner:self options:nil]lastObject];
}
MovieModel *model =self.data[indexPath.row];
//
cell.model =model;
return cell;
}
6.接下来应该在cell里面进行显示,但是在显示之前,我们需要先想办法解决星星的显示问题。星星的多少是随着评分的改变而改变的,我们首先应该分析一下,
星级视图的显示效果是这样的
,我们可以将它看作是由灰色星星在后面,然后黄色星星在前面,由两个视图组成。如果有现成的图片,那设置起来简单,这里说的是如果只有一颗灰色星星和一颗黄色星星的情况。实现如下:
.h文件:
#import <UIKit/UIKit.h>
@interface StarView : UIView
{
UIView *yellowView;
}
//评分
@property(nonatomic,assign)float rating;
@end
.m文件:
#import "StarView.h"
@implementation StarView
// 1 创建视图
//-(instancetype)initWithFrame:(CGRect)frame{ //init方法创建时
//
//
//}
-(void)awakeFromNib{ //xib创建视图时
[self _createSubviews];
}
-(void)_createSubviews{
//黄色 灰色图片
UIImage *yellowImage = [UIImage imageNamed:@"yellow"];
UIImage *grayImage = [UIImage imageNamed:@"gray"];
//1 灰色视图
UIView *grayView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, yellowImage.size.width*5, yellowImage.size.height)];
grayView.backgroundColor = [UIColor colorWithPatternImage:grayImage];
[self addSubview:grayView];
//2 黄色视图
yellowView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, yellowImage.size.width*5, yellowImage.size.height)];
yellowView.backgroundColor = [UIColor colorWithPatternImage:yellowImage];
[self addSubview:yellowView];
//放大比例
float scale = self.frame.size.height/yellowImage.size.height;
grayView.transform = CGAffineTransformMakeScale(scale, scale);
yellowView.transform = CGAffineTransformMakeScale(scale, scale);
//原始坐标归零
CGRect frame = self.frame;
frame.origin = CGPointZero;
yellowView.frame = frame;
grayView.frame = frame;
}
//2 值的改变
-(void)setRating:(float)rating{
_rating = rating;
float s =rating/10;
CGRect frame =yellowView.frame;
frame.size.width =self.frame.size.width*s;
yellowView.frame = frame;
}
@end
7.在cell文件里面显示(”UIImageView+WebCache.h“用来加载图片)
cell.m文件:
#import "MovieCell.h"
#import "MovieModel.h"
#import "UIImageView+WebCache.h"
@implementation MovieCell
- (void)awakeFromNib {
// Initialization code
//设置cell的选中效果
self.selectionStyle = UITableViewCellSelectionStyleNone;
}
-(void)setModel:(MovieModel *)model{
_model = model;
//标题
titleLabel.text = model.title;
//年份
yearLabel.text = [NSString stringWithFormat:@"上映年份:%@",model.year];
//评分
gradeLabel.text = [NSString stringWithFormat:@"评分:%@",[model.rating objectForKey:@"average"]];
//图片
//1 链接的字符串
NSString *imageName = [model.images objectForKey:@"small"];
//2 url地址
NSURL *url = [NSURL URLWithString:imageName];
//3 需要使用SDwebImage第三方框架.
[posterView sd_setImageWithURL:url];
//4 星星
starView.rating = [[model.rating objectForKey:@"average"] floatValue];
}
@end