京东产品列表模仿之UITableView

京东app产品列表必备知识之uitableview
参考网址：http://www.cnblogs.com/wujy/p/4870133.html
思路：页面上建立UITableView 使该tableview只显示靠页面左边显示80的宽度，自定义cell点击选中状态时文字变为红色，左边出现蓝色竖线表示选中

这里的数据是读取的plist文件内的数据包括两个字段为：mid和name

数据模型如下：
文件：menu.h

#import <Foundation/Foundation.h>
@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 <UIKit/UIKit.h>
@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 ()<UITableViewDelegate,UITableViewDataSource>
@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

终于快成样子了，明天看自动布局的部分看完就开始结合三个东西咯