iOS从入门开发系列01 （UI基础控件）

ios开发系列应注意点

本人作为一名ios开发者，将自己的ios开发过程中遇到的重点难点和易犯错点记录下来，希望可以帮助到大家

1.UI基础的一些知识点

1.如何连线

连线的方式：

    1）可以先在控制器中手写一个方法，返回值为IBAction，然后点击空心圆圈，拖线连到要监听的按钮上

    2）也可以按住control键，从控件直接拖线到控制器的 @implementation代码块里面，通过窗体配置事件的监听方法，点connect，完成连线

2.NSInteger对应的占位符%zd

%zd 的含义：

     * 从头文件可以看到：NSInteger在64为系统是 long类型的；在32为系统为int类型的；

     * 所以加入这里写 %ld或 %d，都不能满足两种CPU运行环境

     * %zd 会根据CPU不同，判断数据的长度

     

     在32位系统中：%zd == %d

     在64为系统中：%zd == %ld

3.如何对数字进行自动装箱（包装成对象）

@(result).description  先‘装箱’，把数字装箱成对象，然后调用对象的description方法，就会把数字对象打印成字符串

4.结构体赋值方法

要修改一个对象的结构体属性里面的一个变量时，不能直接修改，而要先取出整个结构体，然后修改，然后在把修改后的结构体赋值回对象

5.关于按钮控件

按钮控件是一个 ‘复合’控件：按钮里面内置了一个 UIImageView、一个 UILabel

6.可以下载源码的网站

www.code4app.com

2.三个案例

1.纯代码编写的小飞机案例

#import "ViewController.h"/** * 飞机按钮移动方向枚举 */typedef NS_ENUM(NSInteger, HMPlaneFlyDirection) {        HMPlaneFlyDirectionTop = 100,// 页面设置的Tag值    HMPlaneFlyDirectionBottom = 101,    HMPlaneFlyDirectionLeft = 102,    HMPlaneFlyDirectionRight = 103};@interface ViewController ()@property (nonatomic, weak) UIButton *btnPlane;@end@implementation ViewController/* * 控制器有创建视图的责任，在创建并且显示视图的过程中，有很多个阶段，每个阶段都会有一个方法被调用 * 例如： * - (void)viewWillAppear:(BOOL)animated;    // 视图将要显示的时候 * - (void)viewDidAppear:(BOOL)animated;     // 视图已经显示的时候 * - (void)viewWillDisappear:(BOOL)animated; // 视图将要消失的时候 * - (void)viewDidDisappear:(BOOL)animated;  // 视图已经消失的时候 */// 视图已经加载，但是还没有显示的时候- (void)viewDidLoad {    [super viewDidLoad];    // Do any additional setup after loading the view, typically from a nib. 翻译：在视图加载之后，可以在这里做一些附加的初始化。自己的语言理解：根视图view加载之后，想要在跟视图里面添加一些子视图，在这里做！        // 搭建界面：放一个背景图片框，一个飞机按钮，四个方向按钮。想象一下：代码太少不了，我们把这些代码封装到一个方法里面    [self setupUI];}- (void)setupUI{    // 创建一个背景图片框，放图片    /**     * 在屏幕上显示一个控件的过程     * 1. 创建一个控件对象     * 2. 设置控件要显示的位置和大小（frame）     * 3. 添加到一个视图里面（父试图）     */        // 1. 创建一个控件对象    UIImageView *imgVBackGround = [[UIImageView alloc] init];        // 2. 设置控件要显示的位置和大小（frame）    imgVBackGround.frame = self.view.frame;        // 2.1 设置控件的属性：图片    imgVBackGround.image = [UIImage imageNamed:@"background"];        // 3. 添加到一个视图里面（父试图）：通过addSubView方法将视图添加到父试图中    [self.view addSubview:imgVBackGround];                        // 添加飞机按钮    // 1. 创建一个控件对象    UIButton *btnPlane = [UIButton buttonWithType:UIButtonTypeCustom];        // 2. 设置控件要显示的位置和大小（frame）        // 2.1 设置控件的属性    UIImage *imgNormal = [UIImage imageNamed:@"hero1"];    UIImage *imgHighlighted = [UIImage imageNamed:@"hero2"];    // 为button设置图片的方法 ,    其中forState就是之前学的按钮的状态，Default(Normal) 和 Hightlighted    [btnPlane setImage:imgNormal forState:UIControlStateNormal];    [btnPlane setImage:imgHighlighted forState:UIControlStateHighlighted];        // 可以通过 CGRectMake 方法设置 frame 的值    // btnPlane.frame = CGRectMake(0, 0, 100, 100);    // 也可以通过确定控件的大小和位置的方式，让控件自己去计算frame    [btnPlane sizeToFit];// 确定了 控件的大小    btnPlane.center = self.view.center;// 确定了 控件的位置            // 3. 添加到一个视图里面（父试图）：通过addSubView方法将视图添加到父试图中    [self.view addSubview:btnPlane];        self.btnPlane = btnPlane;                // 添加四个方向按钮:一个按钮上面就那么多代码，何况四个呢。。。封装    UIButton *topButton = [self setupDirectionButton:@"top"];    UIButton *bottomButton = [self setupDirectionButton:@"bottom"];    UIButton *leftButton = [self setupDirectionButton:@"left"];    UIButton *rightButton = [self setupDirectionButton:@"right"];        // 把四个按钮添加到屏幕上    [self.view addSubview:topButton];    [self.view addSubview:bottomButton];    [self.view addSubview:leftButton];    [self.view addSubview:rightButton];        // 下面为四个按钮设置frame    // 首先定义一个浮点数：保存按钮的宽和高    CGFloat buttonWH = 40;        // 然后一个等宽等高的矩形，作为四个按钮的中间矩形（屏幕中点向下200的地方）    CGRect centerRect = CGRectMake(self.view.center.x - buttonWH * 0.5, self.view.center.y + 200, 40, 40);        // 设定一个偏移量    CGFloat offset = 50;    // CGRectOffset 根据某一个确定的rect，在x、y轴上进行一定的偏移后得到的rect    topButton.frame = CGRectOffset(centerRect, 0, -offset);    bottomButton.frame = CGRectOffset(centerRect, 0, offset);    leftButton.frame = CGRectOffset(centerRect, -offset, 0);    rightButton.frame = CGRectOffset(centerRect, offset, 0);        // 设置tag    topButton.tag = HMPlaneFlyDirectionTop;    bottomButton.tag = HMPlaneFlyDirectionBottom;    leftButton.tag = HMPlaneFlyDirectionLeft;    rightButton.tag = HMPlaneFlyDirectionRight;    }/** * 这个方法只负责创建按钮并设置图片，不负责设置frame和添加到视图中 * * @param strDirection 方向字符串：top | bottom | left | right * * @return 创建的按钮 */- (UIButton *)setupDirectionButton:(NSString *)strDirection{    UIButton *btnDirect = [UIButton buttonWithType:0];        UIImage *imgNormal = [UIImage imageNamed:[NSString stringWithFormat:@"%@_normal",strDirection]];    UIImage *imgHighlighted = [UIImage imageNamed:[NSString stringWithFormat:@"%@_highlighted",strDirection]];    [btnDirect setImage:imgNormal forState:UIControlStateNormal];    [btnDirect setImage:imgHighlighted forState:UIControlStateHighlighted];        /**     * 使用代码的方式添加按钮点击事件的监听（发生关系）     * 参数1：按钮的点击事件由谁来监听？self：代表当前对象方法的对象--控制器对象     * 参数2：按钮的点击事件由当前控制器对象的哪个方法来监听？这里需要定义一个方法,@selector(clickDirectionButton:)中的 ":" 代表的是后面有一个参数。按钮点击事件的监听方法后面的参数默认是触发事件的控件     *     *     */    [btnDirect addTarget:self action:@selector(clickDirectionButton:) forControlEvents:UIControlEventTouchUpInside];        return btnDirect;}- (void)clickDirectionButton:(UIButton *)button{    // 拿出控件的tag属性值    NSInteger tag = button.tag;        // 拿出飞机按钮的frame属性，准备修改    // center：控件的中心点在父试图中的坐标；通过修改控件的中心点在父试图中的位置的坐标，也可以实现控件位置的修改    // CGRect frm = self.btnPlane.frame;    CGPoint center = self.btnPlane.center;        // 给Magic Number 以一定的意义：偏移量    CGFloat offset = 10;        // 通过tag。分别按钮的不同方向，修改不同的变量    switch (tag) {                        // 在实际开发中，像下面这种‘100’，‘101’，‘10’……等数字我们称为‘硬编码’或‘Magic Number’（魔法数字），这种代码最好不要出现在编码中，因为我们写代码不是给机器看的，而是给人看的，是为了让别人能够看明白你的代码，能够维护你的代码，所以我们一定要给这种编码以一定的意义                    case HMPlaneFlyDirectionTop:// 向上            center.y -= offset;            break;        case HMPlaneFlyDirectionBottom:// 向下            center.y += offset;            break;        case HMPlaneFlyDirectionLeft:// 向左            center.x -= offset;            break;        case HMPlaneFlyDirectionRight:// 向右            center.x += offset;            break;        default:            break;    }        // 把结构体赋值回对象    self.btnPlane.center = center;}@end

2.纯代码编写的汇率计算器

#import "ViewController.h"#define HUILV 6.1314@interface ViewController ()@property (nonatomic,weak) UITextField *textNum;@property (nonatomic,weak) UILabel *labRes;@property (nonatomic,weak) UILabel *labHuiLv;@end@implementation ViewController- (void)viewDidLoad {    [super viewDidLoad];    [self setCountryImgView];    [self setTextView];    [self setLableView];    [self setSubView];            }- (void)didReceiveMemoryWarning {    [super didReceiveMemoryWarning];    // Dispose of any resources that can be recreated.}/** *  设置国家图片 * *  @param countryName 国家名称 *  @param imgRect     图片大小 */- (void)setCountryImgWith:(NSString*)countryName andwith:(CGRect)imgRect{        UIImageView *countryImgView = [UIImageView new];    UIImage *countryImg = [UIImage imageNamed:countryName];    [countryImgView setImage:countryImg];    countryImgView.frame = imgRect;    [self.view addSubview:countryImgView];        }/** *  创建图片视图 */-(void)setCountryImgView{        CGRect usaRect = CGRectMake(10, 30, 150, 110);        [self setCountryImgWith:@"USA" andwith:usaRect];        CGRect chinaRect = CGRectMake(10, 150, 150, 110);        [self setCountryImgWith:@"China" andwith:chinaRect];    }/** *  创建文字域视图 */- (void)setTextView{        UITextField *textNum = [UITextField new];    //设置无边框    [textNum setBorderStyle:UITextBorderStyleNone];    //设置无输入时文字    [textNum setPlaceholder:@"请在此输入金额"];    //设置字体大小    UIFont *textFont = [UIFont systemFontOfSize:14];    [textNum setFont:textFont];    //设置右对齐    [textNum setTextAlignment:NSTextAlignmentRight];    //设置数字键盘    [textNum setKeyboardType:UIKeyboardTypeNumberPad];    //设置清空按钮    [textNum setClearButtonMode:UITextFieldViewModeWhileEditing];    //设置位置    CGRect textRect = CGRectMake(200, 100, 150, 30);    textNum.frame = textRect;    [self.view addSubview:textNum];    _textNum = textNum;    }/** *  设置结果Lable */- (void)setLableView{        UILabel *labResultView = [UILabel new];    labResultView.text = @"此处显示结果";    UIFont *resFont = [UIFont systemFontOfSize:14];    [labResultView setFont:resFont];    [labResultView setTextAlignment:NSTextAlignmentRight];    CGRect resLabRect = CGRectMake(200, 220, 150, 30);    labResultView.frame = resLabRect;    [self.view addSubview:labResultView];    _labRes = labResultView;    }//创建子视图- (void)setSubView{    UIView *subView = [UIView new];    CGRect subViewRect = CGRectMake(0, 280, self.view.frame.size.width, self.view.frame.size.height-150);    subView.frame = subViewRect;    UIColor *subViewColor = [UIColor lightGrayColor];    [subView setBackgroundColor:subViewColor];    [self.view addSubview:subView];        //添加按钮    [self setButton];        //添加汇率描述    [self setHuiLvLab];        }//创建按钮- (void)setButton{    UIButton *butRes = [UIButton buttonWithType:UIButtonTypeCustom];    UIColor *nomColor = [UIColor greenColor];    [butRes setTitle:@"计算" forState:UIControlStateNormal];    [butRes setTitle:@"计算中" forState:UIControlStateHighlighted];    [butRes setBackgroundColor:nomColor];        CGRect butRect = butRes.frame;    CGSize butSize = CGSizeMake(100, 30);    butRect.size = butSize;    butRes.frame = butRect;    CGPoint butCenter = CGPointMake(self.view.center.x, 450);    butRes.center = butCenter;            [self.view addSubview:butRes];    [butRes addTarget:self action:@selector(clickResButton) forControlEvents:UIControlEventTouchUpInside];    }//设置汇率lab- (void)setHuiLvLab{        UILabel *labHuiLv = [UILabel new];    float huilv = HUILV;        NSString *dateStr = [self getNowTime];        UIFont *huilvFont = [UIFont systemFontOfSize:13];    [labHuiLv setFont:huilvFont];    labHuiLv.text = [NSString stringWithFormat:@"当前汇率为%.4f,更新于%@",huilv,dateStr];        CGRect huiLvRect = CGRectMake(20, 380, self.view.frame.size.width-40, 30);    labHuiLv.frame = huiLvRect;        [self.view addSubview:labHuiLv];        _labHuiLv = labHuiLv;        }//创建按钮监听-(IBAction)clickResButton{        NSInteger inputNum = self.textNum.text.integerValue;    NSString *resStr = @(inputNum * HUILV).description;    self.labRes.text = resStr;        float huilv = HUILV;    NSString *dateStr = [self getNowTime];    self.labHuiLv.text = [NSString stringWithFormat:@"当前汇率为%.4f,更新于%@",huilv,dateStr];    [self.view endEditing:YES];    }//得到当前时间- (NSString*)getNowTime{    NSDate *nowDate = [NSDate new];    NSDateFormatter *fom = [NSDateFormatter new];    fom.dateFormat = @"yyyy年MM月dd日HH时mm分ss秒";    NSString *dateStr = [fom stringFromDate:nowDate];    return dateStr;}@end

3.关于格式化时间输出的方法

//得到当前时间- (NSString*)getNowTime{    NSDate *nowDate = [NSDate new];    NSDateFormatter *fom = [NSDateFormatter new];    fom.dateFormat = @"yyyy年MM月dd日HH时mm分ss秒";    NSString *dateStr = [fom stringFromDate:nowDate];    return dateStr;}

3.快捷键

1.一些好用的快捷键

Control + A：移动光标到行首

Control + E：移动光标到行末

Control + D：删除光标右边的字符

Control + K：删除本行

Command + ->：移动到行尾

创建新工程：command + shift + n

快速看头文件：command + shift + o

模拟器home键：command + shift + h

模拟器键盘： command + h

4.UI基础控件的使用

1.UIView有关

// frame设置需要有中间值

CGRect frame = bigView.frame;

frame.size.width *= 2;

frame.size.height *= 2;

bigView.frame = frame;

// 圆角

bigView.layer.cornerRadius = 150;//角度设为frame.width/height则是个圆

bigView.clipsToBounds = YES;

// 边框

bigView.layer.borderWidth = 2;

bigView.layer.borderColor = [[UIColor blackColor] CGColor];

// 设置背景图片

self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"Default"]];

/*

 //相对父视图的坐标

 @property(nonatomic) CGRect frame;

 //相对于自己内容的坐标

 @property(nonatomic) CGRect bounds;

 //父视图

 @property(nonatomic,readonly) UIView *superview;

 //所有的子视图

 @property(nonatomic,readonly,copy) NSArray *subviews;

 //内容模式（填充一边位等比例模式）

 @property(nonatomic) UIViewContentMode contentMode;                // default UIViewContentModeScaleToFill

 

 //在最上层添加一个视图

 - (void)addSubview:(UIView *)view;

 //在指定层面插入一个视图(如果层级越界，就相当于add)

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

 //在某个视图是下级插入一个新视图

 - (void)insertSubview:(UIView *)view belowSubview:(UIView *)siblingSubview;

 //在某个视图的上级插入一个新视图

 - (void)insertSubview:(UIView *)view aboveSubview:(UIView *)siblingSubview;

 //从父视图中移除（自杀）

 - (void)removeFromSuperview;

 //修改2个视图的层级

 - (void)exchangeSubviewAtIndex:(NSInteger)index1 withSubviewAtIndex:(NSInteger)index2;

 //将某个视图移到最上层

 - (void)bringSubviewToFront:(UIView *)view;

 //将某个视力移到最底层

 - (void)sendSubviewToBack:(UIView *)view;

 

 //判断一个视图是否是别外一个视图的子视图（如果是同一个视图也会返回yes）

 - (BOOL)isDescendantOfView:(UIView *)view;

 //通过tag找view

 - (UIView *)viewWithTag:(NSInteger)tag;

 */

2.UILable有关

/*

 //设置文字

 @property(nonatomic,copy) NSString *text;

 

 //文字颜色

 @property(nonatomic,retain) UIColor *textColor;

 

 //阴影颜色

 @property(nonatomic,retain) UIColor *shadowColor;

 

 //阴影坐标

 @property(nonatomic) CGSize shadowOffset;

 

 //将label大小调整为单行展示文字所需要的大小

 - (void)sizeToFit;

 

 //对齐方式

 @property(nonatomic) NSTextAlignment textAlignment;

 

 //换行方式省略号位置

 @property(nonatomic) NSLineBreakMode lineBreakMode;

 

 //行数，默认是1，设为0后自动换行

 @property(nonatomic) NSInteger numberOfLines;

 

 //字体

 @property(nonatomic,retain) UIFont *font;

 */

// 不能自动换行，但能增加长度

[self.label sizeToFit];

//使用固定字体

label.font = [UIFont fontWithName:@"Zapfino" size:20];

//系统默认字体

label.font = [UIFont systemFontOfSize:20];

//系统默认字体加黑

label.font = [UIFont boldSystemFontOfSize:20];

//系统默认字体斜体

label.font = [UIFont italicSystemFontOfSize:20];

3.UIButton有关

// btn的类型，除了custom和system，另外4个都自带大小和外观

UIButton *btn = [UIButtonbuttonWithType:UIButtonTypeInfoDark];

// 设置文字垂直和水平的对齐方式

btn.titleLabel.font = [UIFont systemFontOfSize:15];

btn.contentVerticalAlignment = UIControlContentVerticalAlignmentBottom;

btn.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;

// 当btn接收到TouchUpInside这个事件时，会给self发送btnClick这个消息

// 事件-消息机制

[btn addTarget:self action:@selector(btnClick) forControlEvents:UIControlEventTouchUpInside];

4.UIImageView有关

// 图片转为NSData

UIImagePNGRepresentation(_ivView.image)

// 图片转为点阵图（防止渲染）

[_ivView.image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

// 显示图片大小为imageView大小

_starsView.contentMode = UIViewContentModeLeft;

_starsView.clipsToBounds = YES;

// 设置图像填充模式，等比例显示(CTRL+6)

iv.contentMode = UIViewContentModeScaleAspectFit;

// 从iPhone4开始，设备的屏幕都是retina屏（2倍，一个坐标位横向纵向显示2个像素点，高清屏，视网膜屏），（6p是3倍的）

// retina屏幕会优先找[e-mail]，找不到就找a.png

iv.image = [UIImage imageNamed:@"a"];

// 图片对象（自带的大小是坐标体系的大小，如果用的是@2x图片，像素大小的宽高除以2就是坐标体系的大小

UIImage *image = [UIImageimageNamed:@"c"];

// 用图片直接创建图片视图，x，y默认是0，宽高默认是图片的大小

UIImageView *secondIv = [[UIImageViewalloc]initWithImage:image];

/** 图片轮播 **/

// 设置图片视图轮播图片的数组，单次动画时间，循环次数(默认无线循环，0次也是无线循环），开始动画

iv.animationImages = tempArr;

iv.animationDuration = tempArr.count/10.0f;

iv.animationRepeatCount = 0;

[iv startAnimating];

/*

 //开始动画

 - (void)startAnimating;

 //手动结束动画

 - (void)stopAnimating;

 //判断动画状态

 - (BOOL)isAnimating;

 

 //图片

 @property(nonatomic,retain) UIImage *image;

 //动画的图片数组

 @property(nonatomic,copy) NSArray *animationImages;

 //动画时间(也就是一次完整的动画需要的时间)

 @property(nonatomic) NSTimeInterval animationDuration;

 //动画循环次数，循环完以后会自动停止

 @property(nonatomic) NSInteger animationRepeatCount;

 */

5.UITextFiled有关

// 占位提示符

tf.placeholder = @"请输入QQ号";

// 边框风格

tf.borderStyle = UITextBorderStyleLine;

// 背景图片（和边框风格冲突）

// 如果风格是圆角，那么背景图片失效

// 如果边框风格不是圆角，那么边框风格失效

tf.background = [UIImage imageNamed:@"tf_bg"];

// 当字符串的长度超过tf的长度，可以自动缩小字体

tf.adjustsFontSizeToFitWidth = YES;

// 自动缩小的最小值

tf.minimumFontSize = 30;

// 水平方向的对齐方式（同label）

tf.textAlignment = NSTextAlignmentRight;

// 垂直方向对齐方式（同button）

tf.contentVerticalAlignment = UIControlContentVerticalAlignmentBottom;

// 当字符串的长度超过tf的长度，可以自动缩小字体

tf.adjustsFontSizeToFitWidth = YES;

// 自动缩小的最小值

tf.minimumFontSize = 30;

// 水平方向的对齐方式（同label）

tf.textAlignment = NSTextAlignmentRight;

// 垂直方向对齐方式（同button）

tf.contentVerticalAlignment = UIControlContentVerticalAlignmentBottom;

// 当弹出键盘的时候，清空tf的文字

tf.clearsOnBeginEditing = YES;

// 设置清空按钮出现的方式

tf.clearButtonMode = UITextFieldViewModeWhileEditing;

// 安全输入（暗文输入，专门输入密码使用）

tf.secureTextEntry = YES;

// 键盘类型

tf.keyboardType = UIKeyboardTypeDefault;

// 回车键的外观（和功能没有任何关系）

tf.returnKeyType = UIReturnKeyNext;

// 设置tf的左边的附属view的出现模式（实际工作中一般都是图片imageview）

// 一个view只能成为一个地方的附属view

tf.leftView = view;

tf.leftViewMode = UITextFieldViewModeAlways;

// 键盘view和附属view

tf.inputView = view;

tf.inputAccessoryView = view;

// 收起这个页面的键盘

[self.view endEditing:YES];

// 放弃第一响应

[self.view resignFirstResponder]