[iOS基础控件

A.需求

1.头部广告

2.自定义cell：含有图片、名称、购买数量、价格

3.使用xib设计自定义cell，自定义cell继承自UITableViewCell

4.尾部“加载更多按钮”，以及其被点击之后的数据加载刷新、动画效果

 

code source: https://github.com/hellovoidworld/GroupPurchase

 

 

 

 

B.实现

1.使用MVC

M：团购Model

V：总View、cell的View（包含类和界面）

C：ViewController

 

2.分类管理代码文件

 

3.尾部footerView “加载更多"功能

    // 设置尾部控件
    self.tableView.tableFooterView = footerView;

 

 

footerView设置的按钮自动宽度为tableView宽度，只能设置高度；x和y也不能设置。

要自定义按钮的的，使用xib进行自定义footerView嵌套

（1）使用button, 设计一个“加载更多”按钮

（2）加上等待图标

 

—>如何利用xib封装一个View：

• 新建xib描述view的结构
  
  
  
• 新建一个继承UIView的类（取决于xib根对象的class）
• 新建类名，和xib保持一致
  @interface FooterRefreshView : UIView
  
  
• 设置xib控件的class，连线
  
  
  
• 在自定义class中定义xib的加载类方法（屏蔽xib加载过程）
  

  /** 初始化方法 */
  + (instancetype) footerRrefreshViewWithDelegate:(id<FooterRefreshViewDelegate>) delegate {
      FooterRefreshView *footerRefreshView = [[[NSBundle mainBundle] loadNibNamed:@"FooterRefreshView" owner:nil options:nil] lastObject];
     
      if (nil != delegate) {
          footerRefreshView.delegate = delegate;
      }
     
      return footerRefreshView;
  }

• class持有controller引用，发送消息给controller刷新数据
  下面使用代理模式

 

 

—>改进：使用代理设计模式

• 自定义view的class持有controller的引用，耦合性强 —>使用代理
• 协议命名规范：控件类名+Delegate
• 代理方法普遍都是@optional
• 代理对象遵守代理协议，实现代理协议里面的方法
• 在需要的地方调用代理方法，给代理发送消息

FooterRefreshView.h
#import <UIKit/UIKit.h>

@class FooterRefreshView;

// 定义delegate协议
@protocol FooterRefreshViewDelegate <NSObject>

@optional
- (void) footerRefreshViewClickedFooterRefreshButton:(FooterRefreshView *) footerRefreshView;

@end

@interface FooterRefreshView : UIView

+ (instancetype) footerRrefreshViewWithDelegate:(id<FooterRefreshViewDelegate>) delegate;

@end

 

4.xib中创建的view初始化完毕之后不会调用class中的init方法，而是调用awakeFromNib方法

FooterRefreshView.h

// xib控件的初始化调用方法
- (void)awakeFromNib {
    self.loadingImage.hidden = YES;
}

 

 

5.分割线

其实就是高度为1的UIView

 

6.自定义cell

（1）.自定义cell的子控件都要放到contentView里面

默认就是会放到contentView中

 

（2）创建继承自UITableViewCell的类

@interface GroupPurchaseCell : UITableViewCell

 

（3）创建xib文件描述cell的界面

 

（4）指定view的class，对控件进行连线

 

（5）在cell类中，定义一个model成员，用来存储这个cell的数据

/** 自定初始化的类方法，传入model数据 */
+ (instancetype) groupPurchaseCellWithGroupPurchase:(GroupPurchase *) groupPurchase;

 

（6）创建初始化方法，使用model数据作为传入参数

/** 自定初始化的类方法，传入model数据 */
+ (instancetype) groupPurchaseCellWithGroupPurchase:(GroupPurchase *) groupPurchase {
    GroupPurchaseCell *cell = [[[NSBundle mainBundle] loadNibNamed:@"GroupPurchaseCell" owner:nil options:nil] lastObject];
   
    // 加载model中的数据，初始化界面
    cell.groupPurchase = groupPurchase;
   
    return cell;
}

/** 没有model数据的空cell */
+ (instancetype)groupPurchaseCell {
    return [self groupPurchaseCellWithGroupPurchase:nil];
}

 

（7）传入model数据的同时，加载数据到view上面

/** 加载Model数据，初始化界面 */
- (void) setGroupPurchase:(GroupPurchase *) groupPurchase {
    if (nil != groupPurchase) {
        self.titleLabel.text = groupPurchase.title;
        self.iconImageView.image = [UIImage imageNamed:groupPurchase.icon];
        self.priceLabel.text = [NSString stringWithFormat:@"￥%@", groupPurchase.price];
        self.buyCountLabel.text = [NSString stringWithFormat:@"%@人已经购买", groupPurchase.buyCount];
    }
   
    _groupPurchase = groupPurchase;
}

 

7.头部广告

其实就是之前的滚动广告放到 self.tableView.tableHeaderView

（1）设计界面

 

 

（2）创建class加载图片数据

 

（3）传入图片名的数组作为成员

// 广告组
@property(nonatomic, strong) NSArray *ads;

 

（4）加载图片

/** 设置ads */
- (void) setAds:(NSArray *)ads {
    if (nil != ads) {
        CGFloat adImageWidth = AD_VIEW_WIDTH;
        CGFloat adImageHeight = AD_VIEW_HEIGHT;
        CGFloat adImageY = 0;
       
        for (int i=0; i<ads.count; i++) {
            // 计算当前图片的水平坐标
            CGFloat adImageX = i * adImageWidth;
           
            UIImageView *adImageView = [[UIImageView alloc] initWithFrame:CGRectMake(adImageX, adImageY, adImageWidth, adImageHeight)];
            adImageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%@", ads[i]]];
        
            [self.scrollView addSubview:adImageView];
        }
       
        // 设置滚动
        self.scrollView.contentSize = CGSizeMake(ads.count * AD_VIEW_WIDTH, 0);
        self.scrollView.scrollEnabled = YES;
    }
   
    _ads = ads;
}

 

（5）在主controller，设置好图片数据，创建头部控件加到头部位置

    //设置头部广告
    HeaderAdView *adView = [self genAdView]; // 手动拼装广告图片数据
    self.tableView.tableHeaderView = adView;

 

（6）添加页码和自动轮播器