轻量级应用开发之（02）UIView

一 控件

1.屏幕上的所有UI元素都叫做控件（也有叫做视图、组件）比如按钮（UIButton）、文本（UILabel）都是控件.

2.控件的共同属性有哪些？

　　尺寸,位置,背景色

3. 苹果将控件的共同属性都抽取到父类UIView中

　　所有的控件最终都继承自UIView

　　UIButton、UILabel都继承自UIView（可以查看头文件验证）

二 UIView

1. UIView是所有控件的父控件。

2. 父控件和子控件

1）每个控件都是个容器，能容纳其他控件

2）内部小控件是大控件的子控件

3）大控件是内部小控件的父控件

3）每一个控制器（UIViewController）内部都有个默认的UIView属性

　@property(nonatomic,retain) UIView *view;
　控制器中管理的其他所有控件都是这个view的子控件（直接或者间接）
　ViewDidLoad 方法

3.UIView的常用属性

@property(nonatomic,readonly) UIView *superview;
 获得自己的父控件对象

@property(nonatomic,readonly,copy) NSArray *subviews;
 获得自己的所有子控件对象

@property(nonatomic) NSInteger tag;
 控件的ID(标识)，父控件可以通过tag来找到对应的子控件

@property(nonatomic) CGAffineTransform transform;
 控件的形变属性(可以设置旋转角度、比例缩放、平移等属性)

@property(nonatomic) CGRect frame;
 控件矩形框在父控件中的位置和尺寸(以父控件的左上角为坐标原点)

@property(nonatomic) CGRect bounds;
 控件矩形框的位置和尺寸(以自己左上角为坐标原点，所以bounds的x、y一般为0)

@property(nonatomic) CGPoint center;
 控件中点的位置(以父控件的左上角为坐标原点)

CGRect的数据结构如下：CGRets是个结构体。

CGPoint表示UIView的坐标，CGSize表示UIView的宽度和高度。

4.UIView的常用方法

- (void)addSubview:(UIView *)view;
 添加一个子控件view

- (void)removeFromSuperview;
 从父控件中移除

- (UIView *)viewWithTag:(NSInteger)tag;
 根据一个tag标识找出对应的控件（一般都是子控件）

- (void)insertSubview:(UIView *)view atIndex:(NSInteger)index;
- (void)insertSubview:(UIView *)view aboveSubview:(UIView *)siblingSubview;
- (void)insertSubview:(UIView *)view belowSubview:(UIView *)siblingSubview;

三 UIKit坐标系

在UIKit中，坐标系的原点(0，0)在左上角，x值向右正向延伸，y值向下正向延伸。向右延伸，x值增加；向下延伸，y值增加。

例子1

 #import "ViewController.h"

 @interface ViewController ()
 @property (weak, nonatomic) IBOutlet UIView *redView;

 @end

 @implementation ViewController

 - (void)viewDidLoad {
     [super viewDidLoad];

     UIView * view = [[UIView alloc]init];
     view.backgroundColor = [UIColor blueColor];
     view.frame = CGRectMake(, , , );
     [self.redView addSubview:view];

 }

 @end

例子2

 #import "ViewController.h"

 @interface ViewController ()

 @property (weak, nonatomic) IBOutlet UIView *blueView;
 @end

 @implementation ViewController

 - (void)viewDidLoad {
     [super viewDidLoad];

 }

 - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{

     UIView * redView = [[UIView alloc]init];
     redView.backgroundColor = [UIColor redColor];
     CGFloat w =  + arc4random_uniform();
     CGFloat h =  + arc4random_uniform();
     self.blueView.frame = CGRectMake(, , w, h);
 }

 @end

四 UIButton

1.UIButton的状态

1)normal（普通状态）
　　默认情况（Default）
　　对应的枚举常量：UIControlStateNormal

2)highlighted（高亮状态）
　　按钮被按下去的时候（手指还未松开）
　　对应的枚举常量：UIControlStateHighlighted

3)disabled（失效状态，不可用状态）
　　如果enabled属性为NO，就是处于disable状态，代表按钮不可以被点击
　　对应的枚举常量：UIControlStateDisabled

2设置按钮的背景图片

　　设置按钮在不同状态下的背景图片
　（为了保证高亮状态下的图片正常显示，必须设置按钮的type为custom）

3 Storyboard到代码的转换

五 九宫格计算思路

 #import "ViewController.h"

 @interface ViewController ()

 @end

 @implementation ViewController

 - (void)viewDidLoad {
     [super viewDidLoad];

     //代码创建添加按钮
     UIButton * addBtn = [[UIButton alloc]init];
     [addBtn setImage:[UIImage imageNamed:@"add"] forState:UIControlStateNormal];
     addBtn.tag = ;
     [addBtn setImage:[UIImage imageNamed:@"add_highlighted" ] forState:UIControlStateHighlighted];
     addBtn.frame = CGRectMake(, , , );
     [self.view addSubview:addBtn];

     //代码创建删除按钮
     UIButton * removeBtn = [[UIButton alloc]init];
     removeBtn.frame = CGRectMake(, , , );
     [removeBtn setImage:[UIImage imageNamed:@"remove"] forState: UIControlStateNormal];
     [removeBtn setImage:[UIImage imageNamed:@"remove_highlighted"] forState:UIControlStateHighlighted];
     removeBtn.tag = ;
     [self.view addSubview:removeBtn];

     //代码添加监听 1. 监听者 2，方法名 3.什么事件
     [addBtn addTarget:self action:@selector(addClick: ) forControlEvents: UIControlEventTouchUpInside];
     [removeBtn addTarget:self action:@selector(removeClick:) forControlEvents:UIControlEventTouchUpInside];

 }

 - (void) addClick : (UIButton *) btn{
     NSLog(@"添加");
 }

 - (void) removeClick : (UIButton *) btn{
     NSLog(@"删除");
 }

 @end

对按钮进行封装：

 - (void)viewDidLoad {
     [super viewDidLoad];

     [self addBtnWithImage:@"add" highlightedImage:@"add_highlighted" disableImage:@"add_disabled" frame:CGRectMake(, , , ) action:@selector(addClick: )];
     [self addBtnWithImage:@"remove" highlightedImage:@"remove_highlighted" disableImage:@"remove_disabled" frame: CGRectMake(, , , ) action:@selector( removeClick: )];

 }

 - (void) addBtnWithImage:(NSString *)image highlightedImage: (NSString *)highlightedImage disableImage: (NSString *)disableImage
                    frame:(CGRect ) frame action:(SEL) action{
     UIButton * btn = [[UIButton alloc]init];
     btn.frame=  frame;
     [btn setImage:[UIImage imageNamed:image] forState: UIControlStateNormal];
     [btn setImage:[UIImage imageNamed:highlightedImage] forState:UIControlStateHighlighted];
     [btn setImage:[UIImage imageNamed: disableImage] forState:UIControlStateDisabled];

     [self.view addSubview:btn];
     [btn addTarget:self action:action forControlEvents: UIControlEventTouchUpInside];
 }

实现点击添加按钮的事件。

 - (void) addClick : (UIButton *) btn{
     //搞一个整体出来
     UIView * shopView = [[UIView alloc]init];
     shopView.frame = CGRectMake(, , , );
     shopView.backgroundColor = [UIColor redColor];

     //创建图片
     UIImageView * shop = [[UIImageView alloc]init];
     shop.image = [UIImage imageNamed:@"danjianbao"];
     shop.frame = CGRectMake(, , , );
     [shopView addSubview:shop];

     //创建文字
     UILabel *label = [[UILabel alloc]init];
     label.text = @"单肩背";
     label.frame = CGRectMake(, , , );
     label.textAlignment = NSTextAlignmentCenter ;
     label.font = [UIFont systemFontOfSize:];
     [shopView addSubview:label];

     [self.shopsView addSubview:shopView];

 }

经过优化后的按钮添加事件：

 - (void) addClick : (UIButton *) btn{
     //搞一个整体出来
     CGFloat shopW = ;
     CGFloat shopH = ;
     int cols = ;
     NSInteger index = self.shopsView.subviews.count;
     NSLog(@"index=%ld" , index );

     //计算X
     //计算间距= （shopView的宽度 - 列数 * 单元格宽度 ) / (列数 -1)
     CGFloat margin =  (self.shopsView.frame.size.width - cols * shopW) / (cols-);

     int col = index % cols;
     int marginH = ;
     CGFloat shopX = col * (shopW + margin);
     int row = index / cols;
     CGFloat shopY = row * (shopH + marginH);

     UIView * shopView = [[UIView alloc]init];
     shopView.frame = CGRectMake( shopX , shopY , , shopH);
     shopView.backgroundColor = [UIColor redColor];

     //创建图片
     UIImageView * shop = [[UIImageView alloc]init];
     shop.image = [UIImage imageNamed:@"danjianbao"];
     shop.frame = CGRectMake(, , , );
     [shopView addSubview:shop];

     //创建文字
     UILabel *label = [[UILabel alloc]init];
     label.text = @"单肩背";
     label.frame = CGRectMake(, , , );
     label.textAlignment = NSTextAlignmentCenter ;
     label.font = [UIFont systemFontOfSize:];
     [shopView addSubview:label];

     [self.shopsView addSubview:shopView];
 }

知识点：

1. 在调试app时，显示 View Frames.

Debug -> View Debugging -> Show View Frames

XCode 快捷按钮

command + shift + N  新建文件

XCode中编写注释：

#pragma mark - <添加按钮的方法>

#pragma mark - <监听点击>

OC 中 字符串格式化：

 int idx =  ;
 idx ++;
 NSString * indexStr = [NSString stringWithFormat:@"单肩背%d",idx];