IOS开发学习笔记030-xib实现淘宝界面

使用xib文件实现界面，然后通过模型更新数据。

1、使得控制器继承自UITableViewController

2、创建xib文件，实现界面如下：一个UIImageView，两个lable

3、新建一个封装类NewCell，封装对xib界面的操作

4、新建一个模型类Shops对数据进行更新，读取字典数据到类中

5、在控制器中对模型数据进行操作，将结果显示到view中

1、使得控制器继承自UITableViewController

　　更改main.storyboard的主界面是UITableViewController的class为SLQViewController

2、创建xib文件，实现界面如下：一个UIImageView，两个lable

指定NewCell的class为下面新建的NewCell类，这样可以拖线添加属性和方法。

3、新建一个封装类NewCell，封装对xib界面的操作

头文件

 //
 //  NewCell.h
 //  UITableViewCell-xib实现
 //
 //  Created by Christian on 15/5/21.
 //  Copyright (c) 2015年 slq. All rights reserved.
 //

 #import <UIKit/UIKit.h>
 @class Shops; // 引用声明
 @interface NewCell : UITableViewCell
 @property (weak, nonatomic) IBOutlet UIImageView *icon; // 图标
 @property (weak, nonatomic) IBOutlet UILabel *name; // 标题
 @property (weak, nonatomic) IBOutlet UILabel *desc; // 描述

 @property (nonatomic,strong) Shops *shop; // shop对象

 + (id)newCell; // 返回NewCell对象
 + (NSString *)ID; // 返回标识
 + (CGFloat)cellHeight; // 返回cell高度
 @end

源文件

 //
 //  NewCell.m
 //  UITableViewCell-xib实现
 //
 //  Created by Christian on 15/5/21.
 //  Copyright (c) 2015年 slq. All rights reserved.
 //

 #import "NewCell.h"
 #import "Shops.h"

 @implementation NewCell

 - (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
 {
     self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
     if (self) {
         // Initialization code
     }
     return self;
 }

 - (void)awakeFromNib
 {
     // Initialization code
 }

 - (void)setSelected:(BOOL)selected animated:(BOOL)animated
 {
     [super setSelected:selected animated:animated];

     // Configure the view for the selected state
 }
 // 返回NewCell对象
 + (id)newCell
 {
     // 加载xib文件
     return [[NSBundle mainBundle] loadNibNamed:@"NewCell" owner:nil options:nil][];
 }
 // 重写setShop方法
 - (void)setShop:(Shops *)shop
 {
     // 标题
     self.name.text = shop.name;
     // 图片
     self.icon.image = [UIImage imageNamed:shop.icon];
     // 描述
     self.desc.text = shop.desc;
 }
 // 返回标识
 + (NSString *)ID
 {
     return @"CELL";
 }
 // 返回行高度
 + (CGFloat)cellHeight
 {
     return ;
 }
 @end

4、新建一个模型类Shops对数据进行更新，读取字典数据到类中

 //
 //  Shops.h
 //  UITableViewCell-xib实现
 //
 //  Created by Christian on 15/5/21.
 //  Copyright (c) 2015年 slq. All rights reserved.
 //

 #import <Foundation/Foundation.h>

 @interface Shops : NSObject
 @property (nonatomic,copy) NSString *name; // 标题
 @property (nonatomic,copy) NSString *desc; // 描述
 @property (nonatomic,copy) NSString *icon; // 图标

 + (id)shopWithDict:(NSDictionary *)dict; // 返回shop对象
 - (id)initWithDict:(NSDictionary *)dict; // 自定义构造方法

 @end

实现文件如下：

 //
 //  Shops.m
 //  UITableViewCell-xib实现
 //
 //  Created by Christian on 15/5/21.
 //  Copyright (c) 2015年 slq. All rights reserved.
 //

 #import "Shops.h"

 @implementation Shops

 // 返回一个Shop对象
 - (id)initWithDict:(NSDictionary *)dict
 {
     // 父类init
     if(self = [self init])
     {
         // 赋值
         self.name = dict[@"name"];
         self.icon = dict[@"icon"];
         self.desc = dict[@"desc"];
     }
     // 返回self
     return self;
 }

 + (id)shopWithDict:(NSDictionary *)dict
 {
     return [[Shops alloc] initWithDict:dict];
 }
 @end

5、在控制器中对模型数据进行操作，将结果显示到view中

主要是这两个方法:设置行和行内容

 -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
 {
     return _data.count;
 }

 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
 {
     // 1、取出循环池中得cell
     NewCell *cell = [tableView dequeueReusableCellWithIdentifier:[NewCell ID]];
     // 2、如果cell不空
     if(cell == nil)
     {
         cell = [NewCell newCell];
     }
     // 3、设置cell内容
     cell.shop = _data[indexPath.row];
     return  cell;
 }

还有plist文件的加载

 - (void)viewDidLoad
 {
     [super viewDidLoad];
     // Do any additional setup after loading the view, typically from a nib.
     _data = [NSMutableArray array];
     //加载数据
     NSArray *array = [NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"shops.plist" ofType:nil]];
     for (NSDictionary *arr in array)
     {
         [_data addObject:[Shops shopWithDict:arr]];
     }
     // 设置行高度
     self.tableView.rowHeight = [NewCell cellHeight];
 }

源代码：http://pan.baidu.com/s/1kTswBjD

欢迎关注个人订阅号：