iOS开发_自定义控件

1、自定义控件

• 1.1 CHDataView.h

#import <Foundation/Foundation.h>

@interface CHDataView : UIView

/** 数据模型 */
@property (nonatomic, strong) CHDataItem *dataItem;

@end

• 1.2 CHDataView.m

#import "CHDataView.h"
#import "CHDataItem.h"

@interface CHDataView ()

/** 标题按钮 */
@property (strong, nonatomic) UILabel *name;
/** 按钮 */
@property (strong, nonatomic) UIButton *button;

@end

@implementation CHDataView

// 将需要在本视图显示的控件在这里添加进去
- (id)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        
        self.name = [[UILabel alloc] init];
        self.button = [[UIButton alloc] init];
    }
    return self;
}

// 设置模型数据
- (void)setDataItem:(CHDataItem *)dataItem {
    _dataItem = dataItem;
  
    self.name.text = dataItem.deviceName;
    [self.button setTitle:dataItem.deviceMac forState:UIControlStateNormal];;
    
}

// 设置本页面各子控件的布局
- (void)layoutSubviews {
    [super layoutSubviews];
    
    self.name.frame = CGRectMake(0, 50, 200, 50);
    self.button.frame = CGRectMake(0, 110, 200, 50);
}

// 头部颜色渐变
- (void) drawRect:(CGRect)rect {
 
    // 头部标题背景颜色渐变
    CAGradientLayer *headerLayer = [CAGradientLayer layer];
    headerLayer.startPoint = CGPointMake(0, 0.5); //（0，0）表示从左上角开始变化。默认值是(0.5,0.0)表示从x轴为中间，y为顶端的开始变化
    headerLayer.endPoint = CGPointMake(1, 0.5); //（1，1）表示到右下角变化结束。默认值是(0.5,1.0)  表示从x轴为中间，y为低端的结束变化
    headerLayer.colors = [NSArray arrayWithObjects:(id)[UIColor whiteColor].CGColor,(id)[UIColor yellowColor].CGColor, (id)[UIColor whiteColor].CGColor, nil];
    // layer.locations = @[@0.0f, @1.0f];//渐变颜色的区间分布，locations的数组长度和color一致，这个值一般不用管它，默认是nil，会平均分布
    headerLayer.frame = self.button.bounds;
    [self.button.layer insertSublayer:headerLayer atIndex:0];
    [self.button.layer addSublayer:headerLayer];
}

@end

2、自定义控件中的实际执行顺序

// 01 将需要在本视图显示的控件在这里添加进去
- (id)initWithFrame:(CGRect)frame;
// 02 设置模型数据
- (void)setDataItem:(CHDataItem *)dataItem;
// 03 设置本页面各子控件的布局
- (void)layoutSubviews;
// 04 描绘控件的层级
- (void) drawRect:(CGRect)rect;

3、UIView的几个layout方法

• 3.1 layoutSubviews方法

  • 根据苹果官方帮助文档对layoutSubviews方法的解释：
    • 此方法用来重新定义子元素的位置和大小。当子类重写此方法，用来实现UI元素的更精确布局。如果要让布局重新刷新，那么就调用setNeedsLayout，即setNeedsLayout方法会默认用layoutSubViews方法。
  • 很多时候系统会自动调用layoutSubviews方法：
    • 1.初始化不会触发layoutSubviews，但是如果设置了不为CGRectZero的frame的时候就会触发。
    • 2.addSubview会触发layoutSubviews
    • 3.设置view的Frame会触发layoutSubviews，当然前提是frame的值设置前后发生了变化
    • 4.滚动一个UIScrollView会触发layoutSubviews
    • 5.旋转Screen会触发父UIView上的layoutSubviews事件
    • 6.改变一个UIView大小的时候也会触发父UIView上的layoutSubviews事件
  • 注：setNeedsLayout方法并不会立即刷新，立即刷新需要调用layoutIfNeeded方法。

• 3.2 setNeedsDisplay方法

  • 与setNeedsLayOut方法相似的方法是setNeedsDisplay方法。该方法在调用时，会自动调用drawRect方法。drawRect方法主要用来画图。
  • 总结
    • 所以，当需要刷新布局时，用setNeedsLayOut方法；当需要重新绘画时，调用setNeedsDisplay方法。
  • 延伸：
    • 当我们自定义UI控件时，需要重写一些方法：
    • UIView控件只是一个矩形的空白区域并没有任何内容。iOS应用的其他UI控件都继承了UIView这些UI控件都是在UIView提供的空白区域上绘制外观。
    • 基于UI控件的实现原理开发者完全可以开发出项目定制的控件——当iOS系统提供的UI控件不足以满足项目需要时开发者可以通过继承UIView来派生自定义控件。
    • 当开发者打算派生自己的UI控件时首先定义一个继承View基类的子类然后重写View类的一个或多个方法通常可以被用户重写的方法如下。

     initWithFrame:             前面已经见到程序创建UI控件时常常会调用该方法执行初始化因此如果你需要对UI控件执行一些额外的初始化即可通过重写该方法来实现。
     initWithCoder:             程序通过在nib文件中加载完该控件后会自动调用该方法。因此如果程序需要在nib文件中加载该控件后执行自定义初始化则可通过重写该方法来实现。
     drawRect:                  如果程序需要自行绘制该控件的内容则可通过重写该方法来实现。
     layoutSubviews             如果程序需要对该控件所包含的子控件布局进行更精确的控制可通过重写该方法来实现。
     didAddSubview:             当该控件添加子控件完成时将会激发该方法。
     willRemoveSubview:         当该控件将要删除子控件时将会激发该方法。
     willMoveToSuperview:       当该控件将要添加到其父控件中时将会激发该方法。
     didMoveToSuperview         当把该控件添加到父控件完成时将会激发该方法。
     willMoveToWindow:          当该控件将要添加到窗口中时将会激发该方法。
     didMoveToWindow            当把该控件添加到窗口完成时将会激发该方法。
     touchesBegan:withEvent:    当用户手指开始触碰该控件时将会激发该方法。
     touchesMoved:withEvent:    当用户手指在该控件上移动时将会激发该方法。
     touchesEnded:withEvent:    当用户手指结束触碰该控件时将会激发该方法。 
     touchesCancelled:withEvent:用户取消触碰该控件时将会激发该方法。
    

    • 当需要开发自定义View时开发者并不需要重写上面列出的所有方法而是根据业务需要重写上面的部分方法。例如下面的跟随手指运动的小球示例程序就只重写drawRect:方法。

     #import "FKCustomView.h"
     @implementation FKCustomView
     // 定义两个变量记录当前触碰点的坐标
     int  curX;
     int  curY;
     - ( void ) touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
          // 获取触碰事件的UITouch事件
          UITouch *touch = [touches anyObject];
          // 得到触碰事件在当前组件上的触碰点
          CGPoint lastTouch = [touch locationInView:self];
          // 获取触碰点的坐标
          curX = lastTouch.x;
          curY = lastTouch.y;
          // 通知该组件重绘
          [self setNeedsDisplay];
     }
    
     // 重写该方法来绘制该UI控件
     - ( void )drawRect:(CGRect)rect {
          // 获取绘图上下文
          CGContextRef ctx = UIGraphicsGetCurrentContext();
          // 设置填充颜色
          CGContextSetFillColorWithColor(ctx, [[UIColor redColor] CGColor]);
          // 以触碰点为圆心绘制一个圆形
          CGContextFillEllipseInRect(ctx, CGRectMake(curX - 10, curY - 10, 20, 20));
     }
     @end