京东app产品列表必备知识之uitableview
参考网址：http://www.cnblogs.com/wujy/p/4870133.html
思路：页面上建立UITableView 使该tableview只显示靠页面左边显示80的宽度，自定义cell点击选中状态时文字变为红色，左边出现蓝色竖线表示选中
这里的数据是读取的plist文件内的数据包括两个字段为：mid和name
数据模型如下：
文件：menu.h
#import
@interface menu : NSObject
@property (nonatomic,assign) long long mid;
@property (nonatomic,strong) NSString *name;
@end
文件：menu.m
#import "menu.h"
@implementation menu
@end
自定义cell源码如下：
文件：leftCell.h
#import
@class menu;
@interface leftCell : UITableViewCell
// 产品分类数据模型
@property (nonatomic,strong) menu *item;
//是否被选中
@property(assign,nonatomic)BOOL hasBeenSelected;
@end
文件：leftCell.m
#import "leftCell.h"
#import "Masonry.h"
#import "menu.h"
@interface leftCell()
// 左边竖线
@property(strong,nonatomic)UIView *leftColorView;
// 类型名称组件
@property(strong,nonatomic)UILabel *nameLabel;
@end
@implementation leftCell
//左边色彩条宽度
static const CGFloat leftColorViewWidth=3;
//文字字体大小
static const CGFloat textFontSize=15;
-(instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if(self)
{
//设置背影色
// self.backgroundColor=[UIColor grayColor];
self.accessoryType = UITableViewCellAccessoryNone;
if (self.leftColorView==nil) {
self.leftColorView=[[UIView alloc]init];
self.leftColorView.backgroundColor=[UIColor blueColor];
self.leftColorView.hidden=YES;
[self.contentView addSubview:self.leftColorView];
// 这里是aotolayout的第三方插件 后面会介绍
[self.leftColorView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(self.contentView.mas_left).with.offset(0);
make.top.mas_equalTo(self.contentView.mas_top).with.offset(0);
make.bottom.mas_equalTo(self.contentView.mas_bottom).with.offset(0);
make.width.mas_equalTo(leftColorViewWidth);
}];
}
if (self.nameLabel==nil) {
self.nameLabel=[[UILabel alloc]init];
self.nameLabel.font=[UIFont systemFontOfSize:textFontSize];
self.nameLabel.textAlignment=NSTextAlignmentCenter;
[self.nameLabel sizeToFit];
[self.contentView addSubview:self.nameLabel];
[self.nameLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.center.mas_equalTo(self.contentView);
make.height.mas_equalTo(@20);
}];
}
}
return self;
}
// 设置被选中状态
-(void)setHasBeenSelected:(BOOL)hasBeenSelected
{
_hasBeenSelected=hasBeenSelected;
if (_hasBeenSelected) {
self.backgroundColor=[UIColor whiteColor];
self.nameLabel.textColor=[UIColor redColor];
self.leftColorView.hidden=NO;
}
else
{
// self.backgroundColor=[UIColor grayColor];
self.nameLabel.textColor=[UIColor blackColor];
self.leftColorView.hidden=YES;
}
}
// 赋值给模型的时候填充数据
-(void)setItem:(menu *)item
{
_item = item;
self.nameLabel.text=item.name;
}
- (void)awakeFromNib {
[super awakeFromNib];
// Initialization code
}
- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
[super setSelected:selected animated:animated];
// Configure the view for the selected state
}
@end
以上准备工作就大功告成鸟，接下来就是建立tableview啦
TBUIViewController.m文件
#import "TBUIViewController.h"
#import "MJExtension/MJExtension.h"// 这个是第三方插件用来文件转模型数据的
#import "menu.h"
#import "leftCell.h"
@interface TBUIViewController ()
@property (nonatomic,strong) UITableView *tabeView;
// 产品类型对象数组 数组内放的是menu对象
@property (nonatomic,strong) NSArray *menusArray;
//当前被选中的ID值
@property(strong,nonatomic) menu *curSelectModel;
// 选中的值id
@property(assign,nonatomic) NSInteger selectIndex;
@property(assign,nonatomic) BOOL isKeepScrollState;
@property(assign,nonatomic) BOOL isReturnLastOffset;
@end
//表格的宽度
static const CGFloat tableWidthSize=80;
//行的高度
static const CGFloat tableCellHeight=44;
@implementation TBUIViewController
// 懒加载模型数据到数组中
-(NSArray *)menusArray
{
if(!_menusArray)
{
_menusArray = [menu mj_objectArrayWithFilename:@"menus.plist"];
}
return _menusArray;
}
- (void)viewDidLoad {
[super viewDidLoad];
// 设置宽度80高度跟当前高度一样的tableview
UITableView *tb = [[UITableView alloc] initWithFrame:CGRectMake(0,0,tableWidthSize, self.view.frame.size.height) style:UITableViewStylePlain];
tb.dataSource = self;// 数据源
tb.delegate = self;// 代理
self.tabeView = tb;
[self.view addSubview:tb];
// tb.backgroundColor=[UIColor grayColor];
tb.showsVerticalScrollIndicator = NO;// 隐藏滚动条
tb.showsHorizontalScrollIndicator=NO;
tb.tableFooterView=[[UIView alloc]init];// 填充表格底部
tb.separatorColor= [UIColor colorWithRed:52.0f/255.0f green:53.0f/255.0f blue:61.0f/255.0f alpha:1];//设置分割线颜色
[tb registerClass:[leftCell class] forCellReuseIdentifier:NSStringFromClass([leftCell class])];// 注册cell类
// 设置自动布局边距为0
if ([self.tabeView respondsToSelector:@selector(setLayoutMargins:)]) {
self.tabeView.layoutMargins=UIEdgeInsetsZero;
}
if ([self.tabeView respondsToSelector:@selector(setSeparatorInset:)]) {
self.tabeView.separatorInset=UIEdgeInsetsZero;
}
// NSLog(@"%@",self.menusArray);
}
// 告诉tableview只有一组数据
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return 1;
}
// 告诉tableview每组有 self.menusArray.count 条数据，说白了就是那么多行
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return self.menusArray.count;
}
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
//返回自定义的cell
static NSString *ID = @"tabecell";
leftCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
if(cell == nil)
{
cell = [[leftCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID];
}
menu *item = self.menusArray[indexPath.row];//获取到该行cell应该显示的数据对象
cell.item = item;//把对象赋值给自定义cell从而写名称到cell上
cell.hasBeenSelected = (cell.item==self.curSelectModel);//如果选中的对象等于当前cell的数据对象 那么就设置这个cell的状态为选中状态
//修改表格行默认分隔线存空隙的问题
if ([cell respondsToSelector:@selector(setLayoutMargins:)]) {
cell.layoutMargins=UIEdgeInsetsZero;
}
if ([cell respondsToSelector:@selector(setSeparatorInset:)]) {
cell.separatorInset=UIEdgeInsetsZero;
}
return cell;
}
// 设置cell的高度
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
return tableCellHeight;
}
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
[tableView deselectRowAtIndexPath:indexPath animated:YES];
_selectIndex=indexPath.row;
NSLog(@"%d",_selectIndex);
self.curSelectModel=[self.menusArray objectAtIndex:indexPath.row];
[self.tabeView reloadData];
}
@end
以上源码运行效果如下图：
Paste_Image.png
终于快成样子了，明天看自动布局的部分看完就开始结合三个东西咯