IOS 开发（四） — UIKIT 组件学习

前言

UIKit 提供了构建App，最核心的模块 ------ 主要处理提供视图展示内容，以及和用户的交互 基于 MVC 的设计模式 ------ 系统封装视图和逻辑，开发者提供数据驱动 交互 ------ 通过 Delegate 方式活着 Target-Action 方式

一、 UILabel

展示一行或者多行文字的视图

• text: @"IOS开发"
• font: UIFont (大小、粗体、斜体)
• textColor: 文字颜色
• textAlignment: 对其方式 （居中、左、右对齐）
• numberOfLines: 最大展示行数
• lineBreakMode: NSLineBreakByClipping 截断、NSLineBreakByTruncatingMiddle 中间省略号 ...
• -(void) sizeToFit 根据内容长度自动调整大小

1-1、创建一个新的 视图

替换掉 ViewController 中的系统的UITableViewCell, 然后去掉系统默认的文字和图标

创建自己的UILabel

#import "GTNormalTableViewCell.h"

@interface  GTNormalTableViewCell()

// 设置 Label 属性
@property(nonatomic,strong,readwrite) UILabel *titleLabel;
@property(nonatomic,strong,readwrite) UILabel *sourceLabel;
@property(nonatomic,strong,readwrite) UILabel *commentLabel;
@property(nonatomic,strong,readwrite) UILabel *timeLabel;

@end

@implementation GTNormalTableViewCell


// 重写初始化方法
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(nullable NSString *)reuseIdentifier{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if(self){
        [self.contentView addSubview:({
            self.titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(20, 15, 300, 50)];
//            self.titleLabel.backgroundColor = [UIColor redColor];
            self.titleLabel.font = [UIFont systemFontOfSize:16];
            self.titleLabel.textColor = [UIColor blackColor];
            self.titleLabel;
        })];
        
        [self.contentView addSubview:({
            self.sourceLabel = [[UILabel alloc] initWithFrame:CGRectMake(20, 80, 50, 20)];
//            self.sourceLabel.backgroundColor = [UIColor redColor];
            self.sourceLabel.font = [UIFont systemFontOfSize:12];
            self.sourceLabel.textColor = [UIColor grayColor];
            self.sourceLabel;
        })];
        
        [self.contentView addSubview:({
            self.commentLabel = [[UILabel alloc] initWithFrame:CGRectMake(100, 80, 50, 20)];
//            self.commentLabel.backgroundColor = [UIColor redColor];
            self.commentLabel.font = [UIFont systemFontOfSize:12];
            self.commentLabel.textColor = [UIColor grayColor];
            self.commentLabel;
        })];
        
        [self.contentView addSubview:({
            self.timeLabel = [[UILabel alloc] initWithFrame:CGRectMake(150, 80, 50, 20)];
//            self.timeLabel.backgroundColor = [UIColor redColor];
            self.timeLabel.font = [UIFont systemFontOfSize:12];
            self.timeLabel.textColor = [UIColor grayColor];
            self.timeLabel;
        })];
    }
    return self;
};

1-2、创建一个方法暴露出去，创建 tableViewCell 的时候进行调用

GTNormalTableViewCell.m

// 创建一个方法  在.h 中暴露
-(void) layoutTableViewCell{
  self.titleLabel.text = @"极客时间IOS开发";
  self.sourceLabel.text=@"极客时间";
  [self.sourceLabel sizeToFit];
  
  self.commentLabel.text=@"1888评论";
  [self.commentLabel sizeToFit];
  self.commentLabel.frame = CGRectMake(self.sourceLabel.frame.origin.x + self.sourceLabel.frame.size.width + 15, self.commentLabel.frame.origin.y , self.commentLabel.frame.size.width,self.commentLabel.frame.size.height);
  
  self.timeLabel.text=@"三分钟前";
  [self.timeLabel sizeToFit];
  
  self.timeLabel.frame = CGRectMake(self.commentLabel.frame.origin.x + self.commentLabel.frame.size.width + 15, self.timeLabel.frame.origin.y , self.timeLabel.frame.size.width,self.timeLabel.frame.size.height);
}

GTNormalTableViewCell.h

-(void) layoutTableViewCell;

1-3、每次创建的时候进行设置

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
      GTNormalTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"id"];
      if(!cell){
          cell = [[GTNormalTableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"id"];
      }
      // 每次的 TableView 需要布局的时候调用这个方法
      [cell layoutTableViewCell];
      return cell;
  }

二、UIImage 图片展示

2-1、 IOS 中图片数据都会被系统封装成 UIImage

调用 UIImage 对象进行视图展示，在上下文绘制

UIImageView.image = UIImage

2-2、 设置一组静态图片，成为动图

UIImageView.animationImages = @[UIImage,UIImage...]
UIImageView.animationDuration = 1
[UIImageView startAnimation]

2-3、UIViewContentMode 设置 UIImage 填充方式

// 添加属性
@property(nonatomic,strong,readwrite) UIImageView *rightImageView;
//...

// 自定义cell
[self.contentView addSubview:({
  self.rightImageView = [[UIImageView alloc] initWithFrame:CGRectMake(310, 15, 70, 70)];
  self.rightImageView.contentMode = UIViewContentModeScaleAspectFit;
  self.rightImageView;
})];

//...
// 执行方式时执行
self.rightImageView.image = [UIImage imageNamed:@"setting"];

三、 UIButton

3-1、UIButton

可以进行展示、交互、点击、拖拽、手势

// 添加属性
@property(nonatomic,strong,readwrite) UIButton *deleteButton;
//...

// 添加按钮
[self.contentView addSubview:({
    self.deleteButton = [[UIButton alloc] initWithFrame:CGRectMake(290, 88, 30, 20)];
    [self.deleteButton setTitle:@"X" forState: UIControlStateNormal];
    [self.deleteButton setTitle:@"V" forState: UIControlStateHighlighted];
    self.deleteButton.backgroundColor = [UIColor orangeColor];
    self.deleteButton;
})];

3-2、 Target-Action 设计模式

• 当某个事件触发时，调用对应target对象的相应方法
• 传值限制比较多

[self.button addTarget:self
                 action:@selector(clickButton:)
          forControlEvents:UIControEventTouchUpInside];

组件内部监听事件、target执行action，缺点不利于传值，优点利于组件化

UIControlEvents

• UIButton 通过Target-Action的模式，处理点击逻辑
• 系统封装用户操作事件
• 对应事件开发者实现自定义的方法

 // 添加 target action
 [self.deleteButton addTarget:self action:@selector(deleteButtonClick) forControlEvents:UIControlEventTouchUpInside];
 
 
-(void) deleteButtonClick{
      NSLog(@"deleteButtonClick");
}

3-3、UIControl

• UIControl 作为父类，继承了所有子类可能用到的事件
• 系统级封装的可交互视图，都继承自 UIControl

3-4、UIUIGestureRecognizer 识别用户屏幕中的触摸

手势封装

• UITapGestureReconizer
• UIPinchGestureReconizer
• UIRotationGestureReconizer
• UISwipeGestureReconizer
• UIPanGestureReconizer
• UILongPressGestureReconizer

1、创建手势 2、设置响应处理 3、在视图中添加

// 创建一个新的 view 添加手势demo
[view addSubview:({
    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(100, 200, 100, 100)];
    view.backgroundColor = [UIColor yellowColor];
    // 创建手势
    UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(viewClick)];
    // 添加到view
    [view addGestureRecognizer:tapGesture];
    view;
})];

// ------
// 执行方法
- (void)viewClick{
    NSLog(@"点击view");
}

3-5、 UIGestureRecognizerDelegate

处理复杂手势操作

• 是否响应手势
• 是否支持多手势
• 多个手势冲突时如何处理

// 将手势的 delegate 设置为self
tapGesture.delegate = self;

// 声明 UIGestureRecognizerDelegate

- (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer{
    // 手势是否需要识别
    return NO; 
};

此时点击将不再出发 viewClick 事件

四、UIAlertView

UIAlertView is deprecated.