[UI基础]第1天

1.学前须知

1.1  iOS开发需要学习哪些内容？   

1.2   谨记一条软件开发定律：万物皆对象!

        一张图片是一个UIImageView对象

        一段文字是一个UILabel对象

        一只按钮是一个UIButton对象 ……

        因此，搭建UI界面的过程极其简单 利用类创建对象 将对象显示到屏幕上 比如，如果要显示5个按钮 用UIButton类创建5个UIButton对象 将这5个UIButton对象显示到屏幕上

1.3  如何开发功能强大的移动应用？

        为了方便开发者开发出强大的功能，苹果提供了各种各样的框架

        UIKit：创建和管理应用程序的用户界面

        QuartzCore：提供动画特效以及通过硬件进行渲染的能力

        CoreGraphics：提供2D绘制的基于C的API

        CoreLocation：使用GPS和WIFI获取位置信息

        MapKit：为应用程序提供内嵌地图的接口

        AVFoundation：音频、视频处理 ……

        在开发过程中需要用到一些特殊功能时，可以先尝试使用系统自带的框架

1.3.1 UIKit框架

                顾名思义，UIKit框架是跟UI有关系的

                诸如前面所述的界面元素(如UIImageView)，都是封装在UIKit框架内部的

                UIKit框架中提供了丰富多彩的可视化组件元素：

(点击)

XCODE10.1需要点上面的按钮打开控件选择界面 

                利用UIKit框架提供的类来创建各种可视化组件对象，最后组成复杂而美观的UI界面

                UIKit没学好，相当于iOS白学了        

2.第一个IOS程序

2.0    创建一个IOS工程

其他的就跟OC时创建工程是一样的。 

 这里选择模拟器的类型。

这里选择屏幕大小

2.1    简介

        初学iOS开发，研究的程序不要过于复杂，应该从最基本的开始

        大房子都是由小砖一块一块堆成的，而大型App是由无数个小程序段组成的

        实现一个简单的“加法计算器”，作为第一个iOS程序

        分析可得，至少需要开发步骤：

        1）.添加需要的控件，搭建UI界面：1个按钮、3个文本标签、2个文本输入框

        2）.监听按钮的点击事件

        3）.取得2个文本框值，将计算好的最终结果显示到右边的文本标签上

        **注意：模拟器下无法调出键盘时，使用command + K键调出键盘。

       需要掌握内容：

• 往storyboard中添加控件
• UIViewController和UIView的关系
• 程序的运行过程
• IBAction、IBOutlet的作用
• 如何监听控件的事件（比如按钮的点击事件）
• 父控件和子控件的概念
• 退出键盘

2.2    Storyboard文件

左边的箭头表明：程序一启动就会显示箭头所指的界面

2.3 常见UI控件

2.3.1        UILabel – 文本标签

        文本标签的作用是显示一串固定的文字

2.3.2   UIButton – 按钮

        按钮的作用是：监听用户的点击事件，在用户点击后做出响应  

2.3.3  UITextField – 文本输入框

        文本输入框可以弹出键盘，让用户输入文本内容

 2.4  view和viewController

 2.4.1 UIView

•  屏幕上能看得见摸得着的东西就是UIView，比如屏幕上的按钮、文字、图片
• 一般翻译叫做：视图控件组件
• UIButton、UILabel、UITextField都继承自UIView
• 每一个UIView都是一个容器，能容纳其他UIView（比如右图中的整个键盘是一个UIView，里面容纳很多小格子的数字UIView）

2.4.2 父控件和子控件

• 在“加法计算器”中，最后面那块白色的全屏的东西也是一个UIView
• 白色的大UIView中容纳了很多小的UIView，视图层次结构如下图所示

2.4.3  UIViewController

        手机上自带的“设置”中有很多的界面，点击对应的选项可以跳到下一个界面

 每一个新的界面都是一个新的UIView，在切换过程中，涉及到了：

1. UIView的创建和销毁
2. UIView跟用户的交互（处理UIView内部每一行的点击）

• 其实，每当显示一个新界面时，首先会创建一个新的UIViewController对象，然后创建一个对应的全屏UIView，UIViewController负责管理这个UIView
• UIViewController就是UIView的大管家，负责创建、显示、销毁UIView，负责监听UIView内部的事件，负责处理UIView与用户的交互
• UIViewController内部有个UIView属性，就是它负责管理的UIView对象 ：

@property(nonatomic,retain) UIView *view;

        UIView与UIViewController的关系 

• UIView只负责对数据的展示，采集用户的输入、监听用户的事件等。
• 其他的操作比如：每个UIView的创建、销毁、用户触发某个事件后的事件处理程序等这些都交给UIViewController来处理。

严格来讲，下图箭头所指的应该是一个UIViewController对象，里面白色的界面仅仅是UIViewController内部的UIView属性

 在storyboard界面，点击双环按钮(Show the Assistant editor)可以打开助理编辑分窗口。

 加法计算器程序的运行流程

 综合分析，可以得出程序的简单运行流程： 

1. 读取Main.storyboard文件
2. 创建的CZViewController对象
3. 根据storyboard文件中描述创建CZViewController的UIView对象
4. 将UIView对象显示到用户眼前

2.5 监听按钮的点击

• 现在已经知道：应该由CZViewController来监听“计算”按钮的点击
• 换句话说，CZViewController应该提供一个方法出来(或者说有这么一个功能)，当用户点击“计算”按钮时，就调用这个方法来通知CZViewController按钮被人点了
• CZViewController就在这个方法中实现想做的任何事情，比如计算2个文本输入框内值的和

2.6 补充问题

• IBAction和IBOutlet究竟有什么作用？
• 还有其他拖线方式么？
• Storyboard文件中箭头的含义？
• 如何更换storyboard文件？
• 如何让文本框只能输入数字？
• 如何退出键盘？
• Company Identifier和Bundle Identifier的作用
• 模拟器还有哪些功能？

2.6.1 IBAction和IBOutlet究竟有什么作用？

        IBAction相当于void，但是能拖线。IBOutlet私有属性可以拖线。

        IBAction和IBOutlet

        IBAction

        从返回值角度上看，作用相当于void

        只有返回值声明为IBAction的方法，才能跟storyboard中的控件进行连线

        IBOutlet

        只有声明为IBOutlet的属性，才能跟storyboard中的控件进行连线

2.6.2  还有其他拖线方式么？

1. 点击控件右键连线
2. 按住control拖线（从控件到代码、从代码到控件）
3. 属性与方法代码写好后，打开View Controller Scene,选择View Controller右键将对应的方法拖到控件上。

2.6.4  Storyboard文件中箭头的含义？（这个新版xcode中没找到）

        程序的入口.新建一个ViewController后，设置Is Initial View Controller属性来让当前View Controller为默认启动项。

2.6.5    如何更换storyboard文件？

        项目 ->  General -> Deployment Info -> 改变Main.storyboard

2.6.6   如何让文本框只能输入数字？

        调出数字键盘（Number Pad）

2.6.7   如何退出键盘？

开发人员自己写代码退出。

1.[第一响应者 resignFirstResponder];

• resignFirstResponder
• 当叫出键盘的那个控件(第一响应者)调用这个方法时，就能退出键盘

2. [self.view endEditting:YES]）

• endEditing
• 只要调用这个方法的控件内部存在第一响应者，就能退出键盘

2.6.8  Company Identifier和Bundle Identifier的作用

• Company Identifier:公司的唯一标识
• Bundle Identifier:app的唯一标识
• Bundle Identifier对于中文都是-

2.6.9  模拟器还有哪些功能？

1. 查看模拟器的菜单。
2. window 菜单调整大小
3. 调试 设置位置 硬件 ->
4. 设备 来切换模拟器、旋转等
5. 回到主界面、退出某个程序、卸载某个程序

2.7  设置程序启动时加载的storyboard

这个设置表明：程序启动时会加载Main.storyboard

2.8 设置UITextField的键盘类型

2.9  常见问题 

        1.拖线后@property代码、事件处理方法被删除了。

                错误信息：This class is not key value coding–compliant for the key resultLabel.

        2.引用控件的属性、事件处理方法都写在.m文件的“类扩展”，保证封装性。

3.0 控件的常见属性

 如何修改控件的状态呢？方法很简单：

• 每一个UI控件都是一个对象
• 修改UI控件的状态，其实就是修改控件对象的属性
• 比如修改UILabel显示的文字，就修改UILabel对象的text属性即可
• 比如修改UIImageView显示的图片，就修改UIImageView对象的image属性即可

不难想到，每一个UI控件肯定都有很多属性，比如：

• UIProgressView进度条控件有progress属性（进度值）
• UILabel和UITextField都有text属性（显示文字）
• ……

虽然，每一个UI控件都有自己的独特属性，但是有些属性是每个UI控件都具备的，比如每一个UI控件都有自己的位置和尺寸、都有自己的父控件、子控件。于是，所有的UI控件最终都继承自UIView，UI控件的公共属性都定义在UIView中，比如：

• frame ：位置和尺寸
• center ：中心点位置
• ……

@property(nonatomic) CGRect frame;

控件所在矩形框在父控件中的位置和尺寸(以父控件的左上角为坐标原点)
可以定义控件的位置(origin)和大小(size)

@property(nonatomic) CGRect bounds;

控件所在矩形框的位置和尺寸(以自己左上角为坐标原点，所以bounds的x、y一般为0)
可以定义控件的大小(size)

@property(nonatomic) CGPoint center;

控件中点的位置(以父控件的左上角为坐标原点)
可以定义控件的位置(center)
在UIKit中，坐标系的原点(0，0)在左上角，x值向右正向延伸，y值向下正向延伸 

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

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

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

4.0 什么是按钮

• UIKit框架提供了非常多的UI控件，但并不是每一个都很常用，有些控件可能1年内都用不上，有些控件天天用，比如UIButton、UILabel、UIImageView、UITableView等等
• 现在就先来学习非常重要且比较基础的一个UI控件—UIButton，俗称“按钮”
• 一般情况下，点击某个控件后，会做出相应反应的都是按钮
• 按钮的功能比较多，既能显示文字，又能显示图片，还能随时调整内部图片和文字的位置
   

       4.1 接下来通过一个小案例来研究按钮的基本使用

4.1.1        功能分析

1. 左下角4个方向按钮，控制头像按钮的位置
2. 右下角分别是放大、缩小按钮，控制头像的尺寸
3. 头像按钮既有背景图片，又有文字

4.1.2        步骤分析

1. 搭建UI界面
2. 监听按钮点击
3. 修改头像按钮的属性来调整位置和尺寸
    

4.1.3        掌握

• 使用代码创建、添加控件
• 分别通过 storyboard 和代码设置按钮在不同状态的背景、文字、文字颜色
• 分别通过 storyboard 和代码监听按钮点击
• 修改控件的位置和尺寸
• 制作简单的动画效果
• 掌握frame(包含位置和大小)、center（只能修改位置）、bounds(只能修改大小)、transform的使用
   

4.1.4 基本操作

添加项目中用到的图片到Images.xcassets中（ 新版XCODE叫Images.xcassets）

下图是在设置控件的尺寸为35x35 

• 如果发现通过代码无法修改控件的位置或者尺寸时，应该去掉storyboard里面的autolayout功能，这是自iOS6开始出现的特性
• 顾名思义，autolayout是用来自动布局的，用来束缚控件的位置和尺寸。去掉这个功能，控件的位置和尺寸就不再有一些固定的束缚。
• 

- (IBAction)top:(UIButton *)sender {

    CGRect btnFrame = self.headBtn.frame;

    btnFrame.origin.y -= 10;

    self.headBtn.frame = btnFrame;

}

        self.headBtn.frame.origin.y -= 10;

代码重构

通过center、bounds实现移动缩放

简单总结

代码创建按钮

 实现简单动画

在iOS开发中，想实现一些小动画是非常容易的

• 系统会根据某个属性值的改变自动形成动画
• 比如x值本来是10，然后x值突然改为了100，系统会通过平移动画的方式让x值慢慢从10变到100

简易动画大致有2种方式：

头尾式

[UIView beginAnimations:nil context:nil]; // 开启动画
[UIView setAnimationDuration:1]; // 设置动画执行时间
/** 需要执行动画的代码 **/
[UIView commitAnimations]; // 提交动画

Block式

[UIView animateWithDuration:0.5 animations:^{
    /** 需要执行动画的代码 **/
}];

通过以下属性可以修改控件的位置
frame.origin
center

通过以下属性可以修改控件的尺寸
frame.size
bounds.size

利用transform属性可以修改控件的位移（位置）、缩放、旋转

创建一个transform属性

CGAffineTransform CGAffineTransformMakeTranslation(CGFloat tx,  CGFloat ty) ;
CGAffineTransform CGAffineTransformMakeScale(CGFloat sx, CGFloat sy);
CGAffineTransform CGAffineTransformMakeRotation(CGFloat angle)

(注意：angle是弧度制，并不是角度制)

在某个transform的基础上进行叠加

CGAffineTransform CGAffineTransformTranslate(CGAffineTransform t, CGFloat tx, CGFloat ty);
CGAffineTransform CGAffineTransformScale(CGAffineTransform t, CGFloat sx, CGFloat sy);
CGAffineTransform CGAffineTransformRotate(CGAffineTransform t, CGFloat angle);

清空之前设置的transform属性

view.transform = CGAffineTransformIdentity;

一个UIColor代表一种颜色，通过UIColor的类方法，可以获得很多常用的颜色

+ (UIColor *)blackColor;      // 0.0 white 黑色
+ (UIColor *)darkGrayColor;   // 0.333 white 深灰色
+ (UIColor *)lightGrayColor;  // 0.667 white 亮灰色
+ (UIColor *)whiteColor;      // 1.0 white 白色
+ (UIColor *)grayColor;       // 0.5 white 灰色
+ (UIColor *)redColor;        // 1.0, 0.0, 0.0 RGB 红色
+ (UIColor *)greenColor;      // 0.0, 1.0, 0.0 RGB 绿色
+ (UIColor *)blueColor;       // 0.0, 0.0, 1.0 RGB 蓝色
+ (UIColor *)cyanColor;       // 0.0, 1.0, 1.0 RGB 青色
+ (UIColor *)yellowColor;     // 1.0, 1.0, 0.0 RGB 黄色
+ (UIColor *)magentaColor;    // 1.0, 0.0, 1.0 RGB 品红
+ (UIColor *)orangeColor;     // 1.0, 0.5, 0.0 RGB 橙色
+ (UIColor *)purpleColor;     // 0.5, 0.0, 0.5 RGB 紫色
+ (UIColor *)brownColor;      // 0.6, 0.4, 0.2 RGB 棕色
+ (UIColor *)clearColor;      // 0.0 white, 0.0 alpha 清除颜色（空色）

一个UIImage对象代表一张图片，一般通过imageNamed:方法就可以通过文件名加载项目中的图片（PNG格式的图片可以省略扩展名）

UIImage *image = [UIImage imageNamed:@"btn_01"];

实际上，UIButton自带了很多种不同的样式

在用代码创建按钮的同时指定按钮样式
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom]; 
UIButtonTypeCustom：无类型，按钮的内容需要自定义
UIButtonTypeDetailDisclosure： 
UIButtonTypeInfoLight： 
UIButtonTypeInfoDark： 
UIButtonTypeContactAdd： 

5.0 加法计算器源代码：

//
//  ViewController.m
//

#import "ViewController.h"
// 类扩展
@interface ViewController ()

- (IBAction)computer;
@property (weak, nonatomic) IBOutlet UITextField *txtNum1;
@property (weak, nonatomic) IBOutlet UITextField *txtNum2;
@property (weak, nonatomic) IBOutlet UILabel *lblResult;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
}


- (IBAction)computer {

    //1.获取用户的输入
    NSString * n1 = self.txtNum1.text;
    NSString * n2 = self.txtNum2.text;
    //2.计算和求和
    long int result = n1.longLongValue + n2.longLongValue;
    //3.把结果显示到结果Label上
    self.lblResult.text = [NSString stringWithFormat:@"%ld",result];
    
    //4.把键盘叫回。
    // 方式1.谁是第一响应者，就让谁辞职。。
    //- (BOOL)resignFirstResponder;
    [self.txtNum2 resignFirstResponder];
    [self.txtNum1 resignFirstResponder];
    
    // 方式2.
    //self.view 就表示是当前控制器所管理的那个view(每一个控制器都会管理一个view)
    //这时把键盘叫回去的思路就是：让控制器所管理的view停止编辑，这样的话，凡是这个view中的子控件叫出来的键盘都回去了。
    //- (BOOL)endEditing:(BOOL)force;    // use to make the view or any subview that is the first responder resign (optionally force)
    [self.view endEditing: YES];
    
    
}
@end

代码007普通

打赏 收藏 海报 链接