IOS开发UI篇--UITableView的自定义布局==xib布局

利用Xib进行实现

应用场景:像团购网站的列表数据显示,新闻列表显示等(由于该类的显示的数据单元格内容格式相同)

(1)主控制器文件,在文件中实现了自己自定义的代理,加载数据,

IOS开发UI篇--UITableView的自定义布局==xib布局
 1 #import "SLViewController.h"
 2 #import "SLTgDatas.h"
 3 #import "SLTableViewCell.h"
 4 #import "SLFooterView.h"
 5 #import "SLHeaderView.h"
 6 
 7 @interface SLViewController ()<UITableViewDataSource,UITableViewDelegate,SLFooterViewDelegate>
 8 
 9 @property (weak, nonatomic) IBOutlet UITableView *tableview;
10 
11 @property (nonatomic,strong) NSMutableArray *arrayM;
12 
13 @end
14 
15 @implementation SLViewController
16 
17 -(void)loadMoreData
18 {
19     NSLog(@"=======");
20     SLTgDatas *da=[[SLTgDatas alloc] init];
21     da.title=@"西红柿鸡蛋";
22     da.price=@"12";
23     da.buyCount=@"56";
24     da.icon=@"2c97690e72365e38e3e2a95b934b8dd2";
25     [self.arrayM  addObject:da];
26     [self.tableview reloadData];
27     
28 }
29 
30 
31 #pragma mark -解析plist数据文件
32 -(NSMutableArray *)arrayM
33 {
34     if (_arrayM==nil) {
35         NSString *fullpath=[[NSBundle mainBundle] pathForResource:@"tgs" ofType:@"plist"];
36         NSArray *array=[NSArray arrayWithContentsOfFile:fullpath];
37         NSMutableArray *arr=[NSMutableArray arrayWithCapacity:array.count];
38         for (NSDictionary *dict in array) {
39             SLTgDatas *data=[SLTgDatas tgDataWithDiectionary:dict];
40             [arr addObject:data];
41         }
42        
43         _arrayM=arr;
44     }
45  
46     return _arrayM;
47 }
48 
49 - (void)viewDidLoad
50 {
51     [super viewDidLoad];
52    // self.tableview.dataSource=self;
53     
54     UINib *nib=[UINib nibWithNibName:@"SLFooterView" bundle:nil];
55     SLFooterView *footerview=[[nib instantiateWithOwner:nil options:nil] firstObject];
56     self.tableview.tableFooterView=footerview;
57     
58     footerview.delegate=self;
59     
60     SLHeaderView *headerview=[SLHeaderView headerWithView];
61     self.tableview.tableHeaderView=headerview;
62    
63 }
64 
65 #pragma mark -填充数据进行显示
66 -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
67 {
68     return 1;
69 }
70 
71 -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
72 {
73     return self.arrayM.count;
74 }
75 
76 -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
77 {
78     SLTableViewCell  *cell=[SLTableViewCell cellWithTabelViewCell:tableView];
79     SLTgDatas *data=self.arrayM[indexPath.row];
80     cell.data=data;
81     return cell;
82 }
83 
84 #pragma mark -设置状态栏隐藏
85 -(BOOL)prefersStatusBarHidden
86 {
87     return YES;
88 }
89 
90 @end
IOS开发UI篇--UITableView的自定义布局==xib布局

 

(2)该文件是字典转对象模型文件

IOS开发UI篇--UITableView的自定义布局==xib布局
 1 #import <Foundation/Foundation.h>
 2 
 3 #import "SLGlobalCode.h"
 4 
 5 @interface SLTgDatas : NSObject
 6 
 7 @property (nonatomic,copy) NSString *title;
 8 @property (nonatomic,copy) NSString *icon;
 9 @property (nonatomic,copy) NSString *price;
10 @property (nonatomic,copy) NSString *buyCount;
11 
12 @property (nonatomic,strong,readonly) UIImage *image;
13 
14 //SLTg(tg)
15 -(instancetype)initWithTgDirectionary:(NSDictionary *)dict;
16 
17 +(instancetype)tgDataWithDiectionary:(NSDictionary *)dict;
18 @end
IOS开发UI篇--UITableView的自定义布局==xib布局
IOS开发UI篇--UITableView的自定义布局==xib布局
 1 #import "SLTgDatas.h"
 2 
 3 @interface SLTgDatas ()
 4 {
 5     UIImage *_image;
 6 }
 7 @end
 8 
 9 @implementation SLTgDatas
10 
11 -(UIImage *)image
12 {
13     if (_image==nil) {
14         _image=[UIImage imageNamed:self.icon];
15     }
16     return _image;
17 }
18 /**
19  *  对代码进行抽取,成为其他地方也可以用这个方法
20  */
21 //SLTgRetrun(tg)
22 -(instancetype)initWithTgDirectionary:(NSDictionary *)dict
23 {
24     if (self=[self init]) {
25        [self setValuesForKeysWithDictionary:dict];
26     }
27     return self;
28 }
29 +(instancetype)tgDataWithDiectionary:(NSDictionary *)dict
30 {
31     return [[self alloc] initWithTgDirectionary:dict];
32 }
33 @end
IOS开发UI篇--UITableView的自定义布局==xib布局

 

(3)此文件是自定义cell对象,通过xib进行设计后,通过连线进行相关,方便控制器调用

IOS开发UI篇--UITableView的自定义布局==xib布局
 1 #import <UIKit/UIKit.h>
 2 
 3 #import "SLTgDatas.h"
 4 
 5 @interface SLTableViewCell : UITableViewCell
 6 
 7 @property (nonatomic,strong) SLTgDatas *data;
 8 
 9 +(instancetype)cellWithTabelViewCell:(UITableView *)table;
10 
11 @end
IOS开发UI篇--UITableView的自定义布局==xib布局
IOS开发UI篇--UITableView的自定义布局==xib布局
#import "SLTableViewCell.h"
@interface SLTableViewCell()

@property (weak, nonatomic) IBOutlet UIImageView *cellImage;
@property (weak, nonatomic) IBOutlet UILabel *celltitle;

@property (weak, nonatomic) IBOutlet UILabel *cellprice;

@property (weak, nonatomic) IBOutlet UILabel *cellbuycount;

@end

@implementation SLTableViewCell

+(instancetype)cellWithTabelViewCell:(UITableView *)table
{
    static NSString *str=@"cell";
    SLTableViewCell *cell=[table dequeueReusableCellWithIdentifier:str];
    if (cell==nil) {
        cell=[[[NSBundle mainBundle] loadNibNamed:@"SLTgPlistView" owner:nil
                                          options:nil] firstObject];
    }
    return cell;
}


-(void)setData:(SLTgDatas *)data
{
    _data=data;
    self.cellbuycount.text=data.buyCount;
    self.cellImage.image=data.image;
    self.cellprice.text=data.price;
    self.celltitle.text=data.title;
}
@end
IOS开发UI篇--UITableView的自定义布局==xib布局

 

(4)是底部加载更多选项

IOS开发UI篇--UITableView的自定义布局==xib布局
 1 #import <UIKit/UIKit.h>
 2 
 3 @protocol SLFooterViewDelegate <NSObject>
 4 
 5 -(void)loadMoreData;
 6 
 7 @end
 8 
 9 @interface SLFooterView : UIView
10 
11 @property (nonatomic,weak) id<SLFooterViewDelegate> delegate;
12 @end
IOS开发UI篇--UITableView的自定义布局==xib布局
IOS开发UI篇--UITableView的自定义布局==xib布局
 1     #import "SLFooterView.h"
 2     @interface SLFooterView ()
 3 
 4     @property (weak, nonatomic) IBOutlet UIButton *clieckbt;
 5     @property (weak, nonatomic) IBOutlet UIView *jiazai;
 6 
 7 
 8 
 9     @end
10     @implementation SLFooterView
11 
12     -(void)setDelegate:(id<SLFooterViewDelegate>)delegate
13     {
14         _delegate=delegate;
15     }
16 
17     - (IBAction)btnclick {
18         self.clieckbt.hidden=YES;
19         self.jiazai.hidden=NO;
20         
21     //    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2.0
22     // * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
23     //
24     //    });
25     //    
26         dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
27             if ([self.delegate respondsToSelector:@selector(loadMoreData)])
28                         {
29                             [self.delegate loadMoreData];
30                        }
31                        self.clieckbt.hidden=NO;
32                        self.jiazai.hidden=YES;
33         });
34        
35         
36     }
37 
38     @end
IOS开发UI篇--UITableView的自定义布局==xib布局

以上就是利用xib进行设计的tableView进行显示的列表数据

综上所述:在自定义UITabelViewCell的时候,有两种方式,要根据不同的场景进行利用。

IOS开发UI篇--UITableView的自定义布局==xib布局,布布扣,bubuko.com

IOS开发UI篇--UITableView的自定义布局==xib布局

上一篇:iOS开发UI篇—实现UItableview控件数据刷新


下一篇:开发Mhealth(即:Mobile Health 移动医疗)应用必知的10个掘金点