【iOS 开发】iOS 开发 简介 (IOS项目文件 | MVC 模式 | 事件响应机制 | Storyboard 控制界面 | 代码控制界面 | Retina 屏幕图片适配)

一. iOS 项目简介

1. iOS 文件简介

创建一个 HelloWorld 项目, 在这个 IOS 项目中有四个目录 : 如下图;

-- HelloWorldTests 目录 : 单元测试相关的类和资源;

(1) HelloWorld 目录

HelloWorld 目录介绍 : 

-- 命名规则 : 该目录名称与 IOS 项目名称相同, 是主目录;

-- 存放内容 : IOS 项目的 源码文件, 界面设计文件, 资源文件都存放在该目录下;

-- 源文件 : Objective C 的 .m 和 .h 后缀的文件;

-- 界面设计文件 : Main.storyboard 是界面设计文件, 原来使用的是 nib 界面设计文件, storyboard 是新版本使用的;

-- Supporting Files : 支持库, 一般保存 不是 Objective-C 的源代码 和 资源文件;

Supporting Files 目录简介 : 

-- HelloWorld-info.plist 文件 : 文件名格式为 项目名-info.plist, 属性列表文件, 保存 IOS 项目的各种信息;

-- InfoPlist.strings 文件 : 该文件保存字符串, 主要为程序提供国际化支持;

-- main.m 文件 : main() 函数程序入口文件;

-- HelloWorld-Prefix.pch 文件 : 项目中用到的来自外部框架的头文件在这里面注明, Xcode 会预编译这些文件内容;

(2) Frameworks 目录

Frameworks 目录简介 : 

-- 包含文件 : 包含项目所依赖的框架 或者 库, 还有 声音 图像 等资源文件也可以放在该文件中;

-- 自动链接 : 框架和库一旦被添加到该目录后, 会自动链接到应用中, IOS 应用可以调用这些资源 和 库中的类 和 函数;

-- 系统默认框架 : Foundation.framework, CoreGraphics.framwork, UIKit.framework, CoreData.framework, XCTest.framework 五个默认框架;

(3) Products 目录

Products 目录 : 

-- 包含内容 : 包含该项目所生成的应用程序, 其中 HelloWorld.app 就是安装文件;

-- 红色显示 : 由于还没有编译程序, 该文件显示红色, 这说明该文件目前不存在;

(4) 目录对应

Xcode 与 文件系统 : 

-- Xcode 逻辑分组 : 

-- 真实文件系统 : 

localhost:HelloWorld octopus$ tree
.
|____.DS_Store
|____Base.lproj
| |____.DS_Store
| |____Main.storyboard
|____en.lproj
| |____.DS_Store
| |____InfoPlist.strings
|____HelloWorld-Info.plist
|____HelloWorld-Prefix.pch
|____HelloWorld.xcdatamodeld
| |____.xccurrentversion
| |____HelloWorld.xcdatamodel
| | |____contents
|____Images.xcassets
| |____.DS_Store
| |____AppIcon.appiconset
| | |____Contents.json
| |____LaunchImage.launchimage
| | |____Contents.json
|____main.m
|____OCTAppDelegate.h
|____OCTAppDelegate.m
|____OCTDetailViewController.h
|____OCTDetailViewController.m
|____OCTMasterViewController.h
|____OCTMasterViewController.m

-- 不对应 : Xcode 导航面板中的目录 文件 与 真实文件系统中的目录文件不是对应的;

-- 逻辑分组 : Xcode 将 真实文件进行了逻辑分组, 并不是真实的文件结构;

-- 自定义分组 : 开发者还可以创建自定义的分组;

mac 中的 tree 命令 : 

-- tree 命令模拟 : 

find . -print | sed -e 's;[^/]*/;|____;g;s;____|; |;g'

-- 模拟 tree 命令 : 之后可以调用 tree 命令了;

alias tree="find . -print | sed -e 's;[^/]*/;|____;g;s;____|; |;g'"

2. Interface Builder 简介

(1) 删除 Main.storyboard 文件

删除 Main.storyboard 文件 : 

-- 删除方法 : 选择文件, 按 Delete 键, 弹出以下对话框, 选择 Move to Trash 选项, 直接删除;

-- Remove Reference 选项 : 在文件系统保留该文件, 但是不编译该文件;

-- 修改配置 : 点击项目名称, 选择 General 面板, 然后删除 Main Interface 中的 Main 选项;

(2) 创建 xib 界面设计 文件

创建 xib 文件流程 : 

-- 选择文件类型 : 菜单栏选择 File -> New -> File, 弹出下面对话框, 选择 iOS 的 User Interface 选项卡中的 View 选项, 点击 Next 按钮; 

-- 创建文件 : 输入名称 Main.xib 自定义的, 选择分组 HelloWorld, 选择所输出的 app 文件;

-- 创建成功 : 

(3) xib 界面设计 文件 简介

xib 界面设计文件 : 

-- PlaceHolder 列表区 : 包括 File's Owner 和 First Responder 两个文件;

-- Objects 列表区 : 保存界面布局文件中的 UI 控件实例;

PlaceHolder 列表区 : 

-- File's Owner 文件 : 代表加载界面设计文件对象, 即 布局文件对象, 谁负责加载 Main.xib 界面设计文件, 谁就是该 界面设计文件的 File's Owner;

-- First Responder 文件 : 代表正在与用户交互的对象, 即获取到焦点的对象, 其代表的控件会变化, 用户点击按钮时, 按钮就成为了其代表的控件;

Objects 列表区 : 

-- 主要作用 : 该列表区 保存 xib 界面 所用到的 UI 控件实例;

-- 工作流程 : 开发者将 UI 控件 拖入 xib 文件, app 运行时会加载 xib 文件, 并为每个控件都创建对象, Objects 列表区可以看到所有的 UI 控件;

(4) xib 和 nib 文件

xib 和 nib 后缀文件 : 

-- 新旧区别 : nib 后缀是传统格式, xib 后缀是新格式;

-- 默认模板 : Xcode 默认使用 xib 作为默认格式;

xib 与 nib 主要区别 :

-- 文件类型 : xib 是文本文件, nib 是二进制文件, Xcode 编译项目时 会将 xib 文件转为 nib 文件; 

-- nib 文件 : Interface Builder 把窗口, 菜单栏 以及 各种 UI 组件都冻结在 nib 文件中, 使用 nib 界面设计文件, 这些 UI 控件对象已经被创建好, app 运行时, 只需要苏醒这些 UI 控件 即可;

-- xib 文件优点 : xib 更方便, 便于版本控制;

3. nib 文件添加控件

xib 添加控件 : 

-- 对象库面板快捷键 : 使用 control + option + command + 1 快捷键, 即可显示对象库面板;

-- 添加 Label 控件 到界面中 : Label 拖到中间会有 水平 和 垂直两条 蓝色引导线;

-- 边界引导线 : 如果把控件拖到边界, 会出现边界引导线, 说明不能再向外拖了;

上 :   左 :   右 :     

下 : 

-- 显示 UI 控件轮廓 : Editor -> Canvas -> Show Layout Rectangles, 可以看到布局出现下面的轮廓;

4. 控件属性修改相关面板

相关面板 : 

-- 文件检查器面板 : 快捷键 option + command + 1, 文件相关信息;

-- 快速帮助检查器面板 : 快捷键 option + command + 2, 显示先关的帮助文档;

-- 身份检查器面板 : 快捷键 option + command + 3, 管理界面控件的 实现类, 恢复 ID 等属性;

-- 属性检查器面板 :快捷键 option + command + 4, 管理控件的 拉伸方式, 背景色 等外观属性;

-- 大小检查器面板 : 快捷键 option + command + 5, 管理控件 大小 位置 相关属性;

-- 连接检查器面板 :  快捷键 option + command + 6, 管理控件 与 代码之间关联;

4. UIView 属性

UIView 属性 : 

(1) Mode 属性

Mode 属性 :

-- 主要作用 : 用于控制 UI 控件内图片的对齐方式, 是否缩放适配控件;

-- Scale To Fit : 缩放图片, 保证图片适配该控件;

-- Aspect Fit : 保持纵横比缩放图片, 保证图片能够适应控件;

-- Aspect Fill : 保持纵横比缩放图片, 保证图片能够填充控件;

-- 注意 : 缩放会带来不必要的开销, 最好为不同屏幕尺寸创建对应的图片;

(2) Tag 属性

Tag 属性 : 该属性是 控件的 唯一标识, 可以根据该 标识 获取该 UI 控件的引用;

(3) Interaction 属性

Interaction 属性 : 

-- User Interface Enable : 勾选, 表明该控件支持与用户交互;

-- Multiple Touch : 勾选, 表明该控件支持多点触控, 支持更复杂的手势;

(4) Alpha 属性

Alpha 属性 : 

-- 作用 : 用于控制该控件的透明度, 其属性支持 0.0 ~ 1.0 任意浮点数;

-- 注意 : 如果设置为半透明效果, 会增加额外开销;

(5) Background 属性

background 属性 : 

-- 作用 : 设置控件的背景色;

(6) Drawing 属性

Drawing 属性 : 

-- Opaque : 设置控件是否为 不透明, 如果设置为不透明, 不管该控件的透明度是否是半透明, 该控件后的其它控件将不会被绘制;

-- Hidden : 隐藏该控件, 用户看不到本控件;

-- Clears Graphics Context : 清除该控件所覆盖的区域, 勾选该选项后 IOS 会清除该控件覆盖的区域, 然后绘制该控件, 会降低性能;

-- Clip Subviews : 是否裁剪子控件, 当该控件包含多个子控件, 并且这些子控件超出了父类容器, 勾选后, 超出部分就不会被绘制;

-- Autoresize Subviews : 是否自动调整子控件大小, 如果勾选, 该控件大小改变时, 其子控件也会随之调整大小;

(7) Streching 属性

Streching 属性 :

-- 主要作用 : 用于控制 UIView 拉伸区域, 只有在需要调整控件大小并重绘控件时才需要定义拉伸区域;

5. UILabel 属性

UILabel 属性 : 

(1) Text 属性

Text 属性 : 

-- 属性值 : 支持 Plain 和 Attribute 属性, 一般设置为 Plain;

-- 文本 : 在 Text 属性下面有一个文本框, 在这个文本框中输入要显示的文本内容;

(2) Color 属性

Color 属性 : 控制 UILabel 中的文本颜色;

(3) Font 属性

Font 属性 : 

 

-- 作用 : 控制文本 字体 文字大小 风格等属性;

-- System : 系统默认字体, 不能修改 Family Style Size 属性;

-- System Bold : 系统默认的粗体字;

-- System Italic : 系统默认的斜体字;

(4) Alignment 属性

Alignment 属性 : 

-- 作用 : 设置对齐方式, 左对齐, 居中对齐, 右对齐;

(5) Lines 属性

Lines 属性 : 

-- 作用 : 控制 文本行数;

(6) Behavior 属性

Behavior 属性 : 

-- Enabled : 控制 UILabel 是否可用, 如果没有勾选, 该 Label 不可用, 处于淡灰色;

-- Highlighted : 控制 UILabel 是否处于高亮状态, 勾选该控件后处于高亮状态, 控件中的文本以高亮显示;

(7) Line Break 属性

Line Break 属性 : 

-- 作用 : 该属性对 UILabel 内的文本进行截断, UILabel 中的字符串比较多, UILabel 无法容纳这些字符串, 可以将字符串截断, 显示一部分;

-- Truncate Head : 显示后半部分字符串, 前半部分使用 ... 代替;

-- Truncate Middle : 显示 前后 部分, 中间使用 .. 替代;

-- Truncate Tail : 截断后半部分, 后半部分使用 ... 替代;

(8) AutoShrink 属性

AutoShrink 属性 : 

-- 作用 : UILabel 中字符串较多 以至于 UILabel 无法容纳字符串时, AutoShrink 属性控制文本自动收缩;

-- Fixed Font Size : 不缩放;

-- Minimum Font Scale : 设置最小的缩放倍数, 设置的值是 0.0 ~ 1.0 之间的浮点数;

-- Minimum Font Size : 设置最小的字号大小, 设置的值是字体大小;

-- Tighten Letter Spacing : 勾选该复选框 会自动压缩字符串中的空白, 保证 UILabel 能容纳这些文本中的内容;

(9) Highlighted 属性

Highlighted 属性 : 

-- 作用 : 为 UILabel 中的文本设置高亮显示, 前提 Behavior 属性的 Highlighted 属性勾选;

(10) Shadow 属性

Shadow 属性 : 

-- 作用 : 为文本设置阴影颜色;

(11) Shadow Offset 属性

Shadow Offset 属性 : 

-- 作用 : 控制阴影文本与正常文本之间的偏移量, 

-- Horizontal : 属性值 >0 向右偏移, < 0 向左偏移;

-- Vertical : 属性值 >0 向下偏移, 0){ // 将集合中的最后一个 UILabel 控件从布局中删除 [[self.labels lastObject] removeFromSuperview]; // 将 UILabel 控件从集合中删除 [self.labels removeLastObject]; // y 坐标自减, 用于添加控件使用 nextY -= 50; } } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } @end -- 演示效果 : 

3. 自定义 UI 控件

(1) 自定义组件简介

自定义组件简介 : 

-- UIView 基类 : 所有的 UI 控件都继承了 UIView 基类, UI 组件在 UIView 提供的空白区域上绘制具体的细节;

-- 适用情况 : 在 IOS 系统提供的组件不满足需求时, 就需要自定义组件;

(2) UIView 基类常用方法

UIView 基类常用方法简介 : 

-- "initWithFrame :" 方法 : UI 控件初始化方法, 用于对 UI 控件额外初始化操作时使用;

-- "initWithCoder :" 方法 : 界面设计文件中加载完该控件后, 自动调用的方法;

-- "drawRect : " 方法 : 自行绘制控件内容, 重写该方法, 在该方法中实现;

-- "layoutSubviews : " 方法 : 精确控制子控件布局;

-- "addAddSubviews : " 方法 : 添加完子控件后回调的方法;

-- "willRemoveSubview : " 方法 : 将要删除子控件时, 回调该方法;

-- "didMoveToSuperview : " 方法 : 把控件添加到父控件完成时 回调该方法;

-- "willMoveToSuperview : " 方法 : 在将要添加到父控件之前, 回调该方法;

-- "didMoveToWindow : " 方法 : 将控件添加到窗口完成时, 回调该方法;

-- "willMoveToWindow : " 方法 : 将控件添加到窗口之前, 回调该方法;

-- "touchesBegan : withEvent : " 方法 : 开始触摸控件时触发的方法;

-- "touchesMoved : withEvent : " 方法 : 手指在控件上移动回调方法;

-- "touchesEnd : withEvent : " 方法 : 手指结束触摸回调方法;

-- "touchesCanceled : withEvent : " 方法 : 取消触摸回调方法;

(2) 自定义组件示例

自定义组件 流程 及 代码示例 : 

-- 创建 SingleViewApplication : 

-- 查看 Main.storyboard 的控件 : 点击 界面设计文件中的 UIView 根控件, 使用 command + option + 3 打开身份检查器, 由身份检查器上可以看到 其 Custom Class 属性为 UIView, 因此该界面的根控件时 UIView;

-- 创建自定义类 : 选择菜单中的 File -> New File -> Cocoa Touch -> Objective-C Class;

-- OCFollowTouchView.h 代码 : 

//
//  OCFollowTouchView.h
//  FollowTouch
//
//  Created by octopus on 15-11-25.
//  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.
//

#import 

@interface OCFollowTouchView : UIView

@end

-- OCFollowTouchView.m 代码示例 : 

//
//  OCFollowTouchView.m
//  FollowTouch
//
//  Created by octopus on 15-11-25.
//  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.
//

#import "OCFollowTouchView.h"

@implementation OCFollowTouchView

int currentX;
int currentY;

- (void) touchesMoved : (NSSet * ) touches withEvent:(UIEvent *)event
{
    //获取 UITouch 对象
    UITouch * touch = [touches anyObject];
    //获取触摸的位置
    CGPoint lastPoint = [touch locationInView:self];
    currentX = lastPoint.x;
    currentY = lastPoint.y;
    //重绘 UI 控件
    [self setNeedsDisplay];
}

- (void) drawRect:(CGRect)rect
{
    //获取绘图上下文对象
    CGContextRef ref = UIGraphicsGetCurrentContext();
    //设置所绘制的图像为红色
    CGContextSetFillColorWithColor(ref, [[UIColor redColor] CGColor]);
    //绘制图像
    CGContextFillEllipseInRect(ref, CGRectMake(currentX - 10, currentY - 10, 20, 20));
}

@end

-- 将自定义组件设置到 Main.storyboard 中 : 在 Custom Class 属性中, 输入自定义类, 然后点击回车, 默认的 View 就会变成我们设置的自定义类;

-- 演示效果 : 

六. UI 图片

参考文章 : 

-- IOS 图标图形 : http://www.zhihu.com/question/20248971 ;

-- IOS 7 官方推荐尺寸 : http://www.cnblogs.com/dyllove98/p/3233845.html ;

-- IOS 8 官方推荐尺寸 : 点击打开链接 ;

-- 图标图像大小 : http://www.cnblogs.com/dyllove98/p/3233845.html ;

1. IOS 图片规格

(1) Retina 视网膜屏

Retina 屏幕简介 : 

-- 像素 : 高清晰度的视网膜屏幕, 这种屏幕的分辨率是普通非 Retina 屏幕的 2 倍;

-- 市场状况 : 目前 IOS 已经下架了所有的 非 Retina 屏幕的设备, 目前在售的所有设备都是 Retina 设备, 但是之前卖出的许多设备有些不是 Retina 屏幕的;

-- 支持 Retina 屏幕的设备 : 现在在售的所有设备, iphone4 ~ 6S, ipod4, ipad 2 之后的新设备;

-- 不支持 Retina 屏幕设备 : 之前出售的低端 IOS 设备大都是非 Retina 屏幕的, ipod 1, ipod2, ipod3, iphone, iphone3G, iphone3GS, ipad1, ipad2.

-- 素材命名规范 : 非 Retina 屏幕名称为 pictire.png, Retina 屏幕的图片名称是 picture@2x.png;

(3) 圆角矩形

圆角矩形圆角 : 

-- 512 px : 90 px;

-- 114 px : 20 px;

-- 72 px : 12 px;

-- 57 px : 10 px;

-- 58 px : 10 px;

-- 29 px : 9 px;

(3) 应用图标规格

Retina 屏幕应用图标规格 : 

-- iPhone 4S ~ 6 (Retina @2x) : 120 x 120 ;

-- iPhone6 Plus (Retina @3x) : 180 x 180;

-- iPad 和 iPad Mini (Retina @2x) : 152 x 152 ;

非 Retina 屏幕应用图标规格 : 

-- iPad 和 iPad Mini (@1x) : 76 x 76 ;

-- iPhone 和 iPod : 57 x 57;

(4) 启动界面像素

Retina 屏幕启动画面 : 

-- iPhone 5 ~ 6 : 640 x 1136;

-- iPhone 4 ~ 4S : 640 x 960;

-- iPad : 1536 x 2048 (纵向), 2048 x 1536 (横向);;

非 Retina 屏幕启动图片 : 

-- iPad2 或 iPad Mini : 768 x 1024 (纵向), 1024 x 768 (横向);

2. IOS 图标设置

IOS 图片设置 : 直接从文件目录将图片拖动到 Xcode 相应的设置中.

-- 设置图标 : 在项目文件视图中, 点击 Images.xcassets, 选中左侧的 AppIcon 设置应用图标, 如下图;

-- 设置启动图片 :