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

利用Xib进行实现

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

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


 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

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


 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


 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

(3)此文件是自定义cell对象,通过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


#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

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


 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


 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

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

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

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

时间: 2024-08-02 06:54:08

IOS开发UI篇--UITableView的自定义布局==xib布局的相关文章

IOS开发UI篇--UITableView的自定义布局==纯代码布局

UITableView中除了利用系统的UItableViewCell不能完成需求进行布局时,还可以进行自定义布局: 自定义布局分为两类:(1)利用代码进行创建 (2)利用xib进行实现: 下面对利用代码进行创建分析: 应用场景:像微博,等列表数据展示(由于微博的每个单元格的数据大小不一致,所以得计算每个单元格的大小) 分析:前提是获取列表数据,然后建立每个单元格的模型(建立单元格模型应继承UITableViewCell)复写 - (id)initWithStyle:(UITableViewCel

iOS开发UI篇—UITableview控件基本使

iOS开发UI篇—UITableview控件基本使用 一.一个简单的英雄展示程序 NJHero.h文件代码(字典转模型) #import <Foundation/Foundation.h> @interface NJHero : NSObject /** * 头像 */ @property (nonatomic, copy) NSString *icon; /** * 名称 */ @property (nonatomic, copy) NSString *name; /** * 描述 */ @

iOS开发UI篇—UITableview控件使用小结

iOS开发UI篇—UITableview控件使用小结 一.UITableview的使用步骤 UITableview的使用就只有简单的三个步骤: 1.告诉一共有多少组数据 方法:- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView; 2.告诉每组一共有多少行 方法:- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSIntege

学习IOS开发UI篇--UITableView/数据模型嵌套/UITableViewCell/Cell的重用

1.UITableView ================================================== UITableView有两种格式:group和plain 2.UITableView如何展示数据 ================================================== UITableView需要一个数据源(dataSource)来显示数据 凡是遵守UITableViewDataSource协议的OC对象,都可以是UITableView的

iOS开发UI篇—CAlayer(自定义layer)

iOS开发UI篇—CAlayer(自定义layer) 一.第一种方式 1.简单说明 以前想要在view中画东西,需要自定义view,创建一个类与之关联,让这个类继承自UIView,然后重写它的DrawRect:方法,然后在该方法中画图. 绘制图形的步骤: (1)获取上下文 (2)绘制图形 (3)渲染图形 如果在layer上画东西,与上面的过程类似. 代码示例: 新建一个类,让该类继承自CALayer YYMylayer.m文件 1 // 2 // YYMylayer.m 3 // 05-自定义l

iOS开发UI篇—UITableView全面解析

概述 在iOS开发中UITableView可以说是使用最广泛的控件,我们平时使用的软件中到处都可以看到它的影子,类似于微信.QQ.新浪微博等软件基本上随处都是UITableView.当然它的广泛使用自然离不开它强大的功能,今天这篇文章将针对UITableView重点展开讨论.今天的主要内容包括: 基本介绍 数据源 代理 性能优化 UITableViewCell 常用操作 UITableViewController MVC模式 基本介绍 UITableView有两种风格:UITableViewSt

iOS开发UI篇—UITableView的常用属性与方法

UITableView UITableView内置了两种样式:UITableViewStylePlain,UITableViewStyleGrouped <UITableViewDataSource,UITableViewDelegate>里的方法: tableView处理步骤 #pragma mark 1.有多少组 - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView #pragma mark 2.第section

iOS开发UI篇—UITableview控件基本使用

一.一个简单的英雄展示程序 NJHero.h文件代码(字典转模型) 1 #import <Foundation/Foundation.h> 2 3 @interface NJHero : NSObject 4 /** 5 * 头像 6 */ 7 @property (nonatomic, copy) NSString *icon; 8 /** 9 * 名称 10 */ 11 @property (nonatomic, copy) NSString *name; 12 /** 13 * 描述 1

iOS开发UI篇—UITableview控件简单介绍

一.基本介绍 在众多移动应?用中,能看到各式各样的表格数据 . 在iOS中,要实现表格数据展示,最常用的做法就是使用UITableView,UITableView继承自UIScrollView,因此支持垂直滚动,?且性能极佳 . UITableview有分组和不分组两种样式,可以在storyboard或者是用代码设置. 二.数据展示 UITableView需要?一个数据源(dataSource)来显示数据UITableView会向数据源查询一共有多少行数据以及每?行显示什么数据等 没有设置数据源