iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局

iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局

一、项目文件结构和plist文件

二、实现效果

三、代码示例

1.没有使用配套的类，而是直接使用xib文件控件tag值操作

数据模型部分：

TXtg.h文件

#import <Foundation/Foundation.h>

@interface TXTg : NSObject
/**
 *  标题
 */
@property(nonatomic,copy)NSString *title;
/**
 *  价格
 */
@property(nonatomic,copy)NSString *price;
/**
 *  图片
 */
@property(nonatomic,copy)NSString *icon;
/**
 *  购买人数
 */
@property(nonatomic,copy)NSString *buyCount;
-(instancetype)initWithDict:(NSDictionary *)dict;
+(instancetype)tgWithDict:(NSDictionary *)dict;
@end

TXtg.m文件

#import "TXTg.h"

@implementation TXTg
-(instancetype)initWithDict:(NSDictionary *)dict;
{
    if (self = [super init]) {
        [self setValuesForKeysWithDictionary:dict];
    }
    return self;
}
+(instancetype)tgWithDict:(NSDictionary *)dict
{
    return [[self alloc]initWithDict:dict];
    
}
@end

主控制器

TXViewController.m文件

#import "TXViewController.h"
#import "TXTg.h"
#import "TXTgCell.h"
@interface TXViewController ()<UITableViewDataSource>
@property (weak, nonatomic) IBOutlet UITableView *tableview;

@property(nonatomic ,strong)NSArray *tgs;

@end

@implementation TXViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    //设置每一行cell的高度
    self.tableview.rowHeight =80;
  
}
/**
 *  隐藏状态栏
 */
- (BOOL)prefersStatusBarHidden
{
    return YES;
}

/**
 *  数据的懒加载
 */
-(NSArray *)tgs
{
    if (_tgs ==nil) {
        //初始化
        NSString *path = [[NSBundle mainBundle]pathForResource:@"tgs.plist" ofType:nil];
        //加载数组
        
        NSArray *dictArray = [NSArray arrayWithContentsOfFile:path];
        
        //3.将dictArray里面的所有字典转成模型对象，放到新的数组中
        NSMutableArray *tgArray = [NSMutableArray array];
        
        for (NSDictionary *dict in dictArray) {
            //创建模型对象
            TXTg *tg = [TXTg tgWithDict:dict];
            
            // 加载模型对象倒数组中
            [tgArray addObject:tg];
            
        }
        _tgs = tgArray;
        
    }
    return _tgs;
}
#pragma mark --数据源方法
/**
 *  一共多少行
 */
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return self.tgs.count;
}
/**
 *  每一行显示怎样的cell
 */
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    //创建cell
    TXTgCell *cell = [TXTgCell cellWithTableView:tableView];
    
    //给cell传递模型数据
    cell.tg  = self.tgs[indexPath.row];
    return cell;
}
- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

使用xib自定义的UItableviewcell

代码分析：

上面的代码通过使用xib文件中各个控件的tag值，完成对每个部分数据的赋值和刷新。但是，作为主控制器，它应该知道xib文件中各个控件的tag值，它知道的是不是太多了呢？

为了解决上面的问题，我们可以为自定义的cell设置一个配套的类，让这个类来操作这个xib，对外提供接口，至于内部的数据处理，外界不需要关心，也不用关心。

改造后的代码如下：

2.使用xib和对应的类完成自定义cell的数据展示

新建一个类，用来管理对应的xib文件

注意类的继承类，并把该类和xib文件进行关联

TXtgcell.h文件代码：

#import <UIKit/UIKit.h>
@class TXTg;
@interface TXTgCell : UITableViewCell
/**
 *  通过一个tableview来创建一个cell
 */
+(instancetype)cellWithTableView:(UITableView *)tableView;
/**
 *  团购模型
 */
@property(nonatomic ,strong)TXTg *tg;

@end

 TXtgcell.m文件

#import "TXTgCell.h"
#import "TXTg.h"
@interface TXTgCell()
@property (weak, nonatomic) IBOutlet UIImageView *iconView;
@property (weak, nonatomic) IBOutlet UILabel *titleView;
@property (weak, nonatomic) IBOutlet UILabel *priceView;
@property (weak, nonatomic) IBOutlet UILabel *buyCountView;

@end
@implementation TXTgCell
+(instancetype)cellWithTableView:(UITableView *)tableView
{
    static NSString *ID =@"tg";
    TXTgCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
    if (cell ==nil) {
        //从xib中加载cell
        cell = [[[NSBundle mainBundle] loadNibNamed:@"TXTgCell" owner:nil options:nil] lastObject];
    }
    return cell;
}
-(void)setTg:(TXTg *)tg
{
    _tg = tg;
    
    //图片
    self.iconView.image = [UIImage imageNamed:tg.icon];
    self.titleView.text = tg.title;
    self.priceView.text = [NSString stringWithFormat:@"￥%@",tg.price];
    
    self.buyCountView.text = [NSString stringWithFormat:@"%@人已购买", tg.buyCount];
}



@end

主控制器

TXViewController.m文件

1 #import "TXViewController.h"
 2 #import "TXTg.h"
 3 #import "TXTgCell.h"
 4 @interface TXViewController ()<UITableViewDataSource>
 5 @property (weak, nonatomic) IBOutlet UITableView *tableview;
 6 
 7 @property(nonatomic ,strong)NSArray *tgs;
 8 
 9 @end
10 
11 @implementation TXViewController
12 
13 - (void)viewDidLoad
14 {
15     [super viewDidLoad];
16     //设置每一行cell的高度
17     self.tableview.rowHeight =80;
18   
19 }
20 /**
21  *  隐藏状态栏
22  */
23 - (BOOL)prefersStatusBarHidden
24 {
25     return YES;
26 }
27 
28 /**
29  *  数据的懒加载
30  */
31 -(NSArray *)tgs
32 {
33     if (_tgs ==nil) {
34         //初始化
35         NSString *path = [[NSBundle mainBundle]pathForResource:@"tgs.plist" ofType:nil];
36         //加载数组
37         
38         NSArray *dictArray = [NSArray arrayWithContentsOfFile:path];
39         
40         //3.将dictArray里面的所有字典转成模型对象，放到新的数组中
41         NSMutableArray *tgArray = [NSMutableArray array];
42         
43         for (NSDictionary *dict in dictArray) {
44             //创建模型对象
45             TXTg *tg = [TXTg tgWithDict:dict];
46             
47             // 加载模型对象倒数组中
48             [tgArray addObject:tg];
49             
50         }
51         _tgs = tgArray;
52         
53     }
54     return _tgs;
55 }
56 #pragma mark --数据源方法
57 /**
58  *  一共多少行
59  */
60 -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
61 {
62     return self.tgs.count;
63 }
64 /**
65  *  每一行显示怎样的cell
66  */
67 -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
68 {
69     //创建cell
70     TXTgCell *cell = [TXTgCell cellWithTableView:tableView];
71     
72     //给cell传递模型数据
73     cell.tg  = self.tgs[indexPath.row];
74     return cell;
75 }
76 - (void)didReceiveMemoryWarning
77 {
78     [super didReceiveMemoryWarning];
79     // Dispose of any resources that can be recreated.
80 }
81 
82 @end

四、推荐调整的项目文件结构

这是调整后的文件结构，完整的MVC架构。

注意：注意文件的命名规范。