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
@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][0];
}
// 重写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 80;
}
@end

 

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

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

#import

@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