京東app產(chǎn)品列表必備知識(shí)之uitableview
參考網(wǎng)址：http://www.cnblogs.com/wujy/p/4870133.html
思路：頁面上建立UITableView 使該tableview只顯示靠頁面左邊顯示80的寬度，自定義cell點(diǎn)擊選中狀態(tài)時(shí)文字變?yōu)榧t色，左邊出現(xiàn)藍(lán)色豎線表示選中

這里的數(shù)據(jù)是讀取的plist文件內(nèi)的數(shù)據(jù)包括兩個(gè)字段為：mid和name

數(shù)據(jù)模型如下：
文件：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
// 產(chǎn)品分類數(shù)據(jù)模型
@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)
    {
        //設(shè)置背影色
//        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的第三方插件 后面會(huì)介紹
            [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;
}
// 設(shè)置被選中狀態(tài)
-(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;
    }
}
// 賦值給模型的時(shí)候填充數(shù)據(jù)
-(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

以上準(zhǔn)備工作就大功告成鳥，接下來就是建立tableview啦

TBUIViewController.m文件

#import "TBUIViewController.h"
#import "MJExtension/MJExtension.h"http:// 這個(gè)是第三方插件用來文件轉(zhuǎn)模型數(shù)據(jù)的
#import "menu.h"
#import "leftCell.h"
@interface TBUIViewController ()<UITableViewDelegate,UITableViewDataSource>
@property (nonatomic,strong) UITableView *tabeView;
// 產(chǎn)品類型對(duì)象數(shù)組 數(shù)組內(nèi)放的是menu對(duì)象
@property (nonatomic,strong) NSArray *menusArray;
//當(dāng)前被選中的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
// 懶加載模型數(shù)據(jù)到數(shù)組中
-(NSArray *)menusArray
{
    if(!_menusArray)
    {
        _menusArray = [menu mj_objectArrayWithFilename:@"menus.plist"];
    }
    return _menusArray;
}
- (void)viewDidLoad {
    [super viewDidLoad];
    // 設(shè)置寬度80高度跟當(dāng)前高度一樣的tableview
    UITableView *tb = [[UITableView alloc] initWithFrame:CGRectMake(0,0,tableWidthSize, self.view.frame.size.height) style:UITableViewStylePlain];
    tb.dataSource = self;// 數(shù)據(jù)源
    tb.delegate = self;// 代理
    self.tabeView = tb;
    [self.view addSubview:tb];
    
//    tb.backgroundColor=[UIColor grayColor];
    tb.showsVerticalScrollIndicator = NO;// 隱藏滾動(dòng)條
    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];//設(shè)置分割線顏色
    [tb registerClass:[leftCell class] forCellReuseIdentifier:NSStringFromClass([leftCell class])];// 注冊(cè)cell類
    // 設(shè)置自動(dòng)布局邊距為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只有一組數(shù)據(jù)
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return 1;
}
// 告訴tableview每組有 self.menusArray.count 條數(shù)據(jù)，說白了就是那么多行
-(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應(yīng)該顯示的數(shù)據(jù)對(duì)象
    cell.item = item;//把對(duì)象賦值給自定義cell從而寫名稱到cell上
    cell.hasBeenSelected = (cell.item==self.curSelectModel);//如果選中的對(duì)象等于當(dāng)前cell的數(shù)據(jù)對(duì)象  那么就設(shè)置這個(gè)cell的狀態(tài)為選中狀態(tài)

    //修改表格行默認(rèn)分隔線存空隙的問題
    if ([cell respondsToSelector:@selector(setLayoutMargins:)]) {
        cell.layoutMargins=UIEdgeInsetsZero;
    }
    if ([cell respondsToSelector:@selector(setSeparatorInset:)]) {
        cell.separatorInset=UIEdgeInsetsZero;
    }
    return cell;
}
// 設(shè)置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

以上源碼運(yùn)行效果如下圖：

Paste_Image.png

終于快成樣子了，明天看自動(dòng)布局的部分看完就開始結(jié)合三個(gè)東西咯