·您现在的位置: 云翼网络 >> 文章中心 >> 网站建设 >> app软件开发 >> IOS开发 >> [iOS基础控件-6.6]展示团购数据自定义TableViewCell

[iOS基础控件-6.6]展示团购数据自定义TableViewCell

作者:佚名      IOS开发编辑:admin      更新时间:2022-07-23
A.需求 1.头部广告 2.自定义cell:含有图片、名称、购买数量、价格 3.使用xib设计自定义cell,自定义cell继承自UITableViewCell 4.尾部“加载更多按钮”,以及其被点击之后的数据加载刷新、动画效果   code source: https://github.com/hellovoidworld/GroupPurchase   Image(81)      B.实现 1.使用MVC M:团购Model V:总View、cell的View(包含类和界面) C:ViewController   2.分类管理代码文件 Image(82)   3.尾部footerView “加载更多"功能
1     // 设置尾部控件
2     self.tableView.tableFooterView = footerView;
  Image(83)Image(84)Image(85)   footerView设置的按钮自动宽度为tableView宽度,只能设置高度;x和y也不能设置。 要自定义按钮的的,使用xib进行自定义footerView嵌套 (1)使用button, 设计一个“加载更多”按钮 (2)加上等待图标   —>如何利用xib封装一个View:
  • 新建xib描述view的结构
    Image(86)

  • 新建一个继承UIView的类(取决于xib根对象的class)
  • 新建类名,和xib保持一致
    @interface FooterRefreshView : UIView

  • 设置xib控件的class,连线
    Image(87)

  • 在自定义class中定义xib的加载类方法(屏蔽xib加载过程)
     1 /** 初始化方法 */
     2 + (instancetype) footerRrefreshViewWithDelegate:(id<FooterRefreshViewDelegate>) delegate {
     3     FooterRefreshView *footerRefreshView = [[[NSBundle mainBundle] loadNibNamed:@"FooterRefreshView" owner:nil options:nil] lastObject];
     4    
     5     if (nil != delegate) {
     6         footerRefreshView.delegate = delegate;
     7     }
     8    
     9     return footerRefreshView;
    10 }
  • class持有controller引用,发送消息给controller刷新数据
    下面使用代理模式
    —>改进:使用代理设计模式
  • 自定义view的class持有controller的引用,耦合性强 —>使用代理
  • 协议命名规范:控件类名+Delegate
  • 代理方法普遍都是@optional
  • 代理对象遵守代理协议,实现代理协议里面的方法
  • 在需要的地方调用代理方法,给代理发送消息
 1 FooterRefreshView.h
 2 #import <UIKit/UIKit.h>
 3 
 4 @class FooterRefreshView;
 5 
 6 // 定义delegate协议
 7 @PRotocol FooterRefreshViewDelegate <NSObject>
 8 
 9 @optional
10 - (void) footerRefreshViewClickedFooterRefreshButton:(FooterRefreshView *) footerRefreshView;
11 
12 @end
13 
14 @interface FooterRefreshView : UIView
15 
16 + (instancetype) footerRrefreshViewWithDelegate:(id<FooterRefreshViewDelegate>) delegate;
17 
18 @end
  4.xib中创建的view初始化完毕之后不会调用class中的init方法,而是调用awakeFromNib方法 FooterRefreshView.h
1 // xib控件的初始化调用方法
2 - (void)awakeFromNib {
3     self.loadingImage.hidden = YES;
4 }
    5.分割线 其实就是高度为1的UIView   6.自定义cell (1).自定义cell的子控件都要放到contentView里面 默认就是会放到contentView中 Image(88)   (2)创建继承自UITableViewCell的类 @interface GroupPurchaseCell : UITableViewCell   (3)创建xib文件描述cell的界面 Image(89)   (4)指定view的class,对控件进行连线 Image(90)   (5)在cell类中,定义一个model成员,用来存储这个cell的数据
1 /** 自定初始化的类方法,传入model数据 */
2 + (instancetype) groupPurchaseCellWithGroupPurchase:(GroupPurchase *) groupPurchase;
  (6)创建初始化方法,使用model数据作为传入参数
 1 /** 自定初始化的类方法,传入model数据 */
 2 + (instancetype) groupPurchaseCellWithGroupPurchase:(GroupPurchase *) groupPurchase {
 3     GroupPurchaseCell *cell = [[[NSBundle mainBundle] loadNibNamed:@"GroupPurchaseCell" owner:nil options:nil] lastObject];
 4    
 5     // 加载model中的数据,初始化界面
 6     cell.groupPurchase = groupPurchase;
 7    
 8     return cell;
 9 }
10 
11 /** 没有model数据的空cell */
12 + (instancetype)groupPurchaseCell {
13     return [self groupPurchaseCellWithGroupPurchase:nil];
14 }
  (7)传入model数据的同时,加载数据到view上面
 1 /** 加载Model数据,初始化界面 */
 2 - (void) setGroupPurchase:(GroupPurchase *) groupPurchase {
 3     if (nil != groupPurchase) {
 4         self.titleLabel.text = groupPurchase.title;
 5         self.iconImageView.image = [UIImage imageNamed:groupPurchase.icon];
 6         self.priceLabel.text = [NSString stringWithFormat:@"¥%@", groupPurchase.price];
 7         self.buyCountLabel.text = [NSString stringWithFormat:@"%@人已经购买", groupPurchase.buyCount];
 8     }
 9    
10     _groupPurchase = groupPurchase;
11 }
  7.头部广告 其实就是之前的滚动广告放到 self.tableView.tableHeaderView (1)设计界面 Image(91)     (2)创建class加载图片数据 Image(92)   (3)传入图片名的数组作为成员
1 // 广告组
2 @property(nonatomic, strong) NSArray *ads;
  (4)加载图片
 1 /** 设置ads */
 2 - (void) setAds:(NSArray *)ads {
 3     if (nil != ads) {
 4         CGFloat adImageWidth = AD_VIEW_WIDTH;
 5         CGFloat adImageHeight = AD_VIEW_HEIGHT;
 6         CGFloat adImageY = 0;
 7        
 8         for (int i=0; i<ads.count; i++) {
 9             // 计算当前图片的水平坐标
10             CGFloat adImageX = i * adImageWidth;
11            
12             UIImageView *adImageView = [[UIImageView alloc] initWithFrame:CGRectMake(adImageX, adImageY, adImageWidth, adImageHeight)];
13             adImageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%@", ads[i]]];
14         
15             [self.scrollView addSubview:adImageView];
16         }
17        
18         // 设置滚动
19         self.scrollView.contentSize = CGSizeMake(ads.count * AD_VIEW_WIDTH, 0);
20         self.scrollView.scrollEnabled = YES;
21     }
22    
23     _ads = ads;
24 }
  (5)在主controller,设置好图片数据,创建头部控件加到头部位置
1     //设置头部广告
2     HeaderAdView *adView = [self genAdView]; // 手动拼装广告图片数据
3     self.tableView.tableHeaderView = adView;
  (6)添加页码和自动轮播器 Image(93)