京東app產品列表必備知識之uitableview
參考網址：http://www.cnblogs.com/wujy/p/4870133.html
思路：頁面上建立UITableView 使該tableview只顯示靠頁面左邊顯示80的寬度，自定義cell點擊選中狀態(tài)時文字變?yōu)榧t色，左邊出現藍色豎線表示選中
這里的數據是讀取的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;
}
// 設置被選中狀態(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;
}
}
// 賦值給模型的時候填充數據
-(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"http:// 這個是第三方插件用來文件轉模型數據的
#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的狀態(tài)為選中狀態(tài)
//修改表格行默認分隔線存空隙的問題
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
終于快成樣子了，明天看自動布局的部分看完就開始結合三個東西咯
