【 iOS 应用开发 】 UIKit 控件 ( UIView 属性 | storyboard 设置 | 模拟器 | 拖线关联 | tag | 软键盘操作 | 颜色值 | 代码生成控件 | 动画设置 )

文章目录

• 一. UIKit 相关知识点
• • 1. iOS 应用创建
  • • ( 1 ) 创建应用
    • ( 2 ) 运行应用
    • ( 3 ) iPhone 模拟器控制
  • 2. iOS 设计界面 storyboard
  • • ( 1 ) LaunchScreen.storyboard 应用欢迎界面
    • ( 2 ) Main.storyboard 界面
    • ( 3 ) Main.storyboard 界面具体机型设置
    • ( 4 ) Storyboard Entry Point ( 箭头 )
  • 3. iOS 常用 UI 控件
  • • ( 1 ) iOS 控件 对象 库
    • ( 2 ) iOS 常用 控件
    • ( 3 ) UIView
    • ( 4 ) UIViewController
  • 4. 控件常见属性
  • • ( 1 ) 修改控件状态
    • ( 2 ) UIView 属性
    • ( 3 ) UIView 坐标系
    • ( 4 ) UIView 常用操作控件方法
    • ( 5 ) 控件 与 坐标系
  • 5. UIButton 详解
  • • ( 1 ) 修改控件状态
    • ( 2 ) 代码创建按钮并绑定事件
• 二. 应用代码示例
• • 1. 实现简单加法运算
  • • ( 1 ) 创建应用
    • ( 2 ) 需求
    • ( 3 ) 界面编辑
    • ( 4 ) 按钮事件设置
    • ( 5 ) 定义控件属性 并 关联控件
    • ( 6 ) 软键盘设置
    • ( 7 ) 实现加法逻辑
  • 2. 按钮使用代码示例
  • • ( 1 ) 创建应用
    • ( 2 ) 需求
    • ( 3 ) 项目设置 ( ① 设置屏幕 | ② 拷贝素材 )
    • ( 4 ) 按钮状态设置 与 点击事件设置
    • ( 5 ) tag 标签使用 ( ① 设置资源 | ② 按钮状态背景 | ③ tag 设置 | ④ 多按钮绑定同方法 )
    • ( 6 ) 关闭自动布局 ( ① 选中 ViewController | ② 文件查看器 | ③ 取消 Use Auto Layout 勾选 )
    • ( 7 ) transfrom 属性 ( ① 位置 ( 创建 ) 修改 | ② 缩放 ( 创建 ) 修改 | ③ 角度 ( 创建 ) 修改 )
    • ( 8 ) 代码示例
    • ( 9 ) 效果展示
  • 3. UIView 属性 示例
  • • ( 1 ) 创建应用并设置
    • ( 2 ) 需求
    • ( 3 ) 拖线生成传入 Sender 的方法
    • ( 4 ) 设置颜色 及 随机颜色值
    • ( 5 ) 使用代码生成 UIView 对象
    • ( 6 ) 动画设置 ( 头尾式动画 | Block 动画 )
    • ( 7 ) 代码生成按钮 ( 创建按钮 | 设置按钮属性 | 绑定事件 )
    • ( 8 ) 本模块的完整代码
    • ( 9 ) 示例演示

博客总结 :

• 1.模拟器屏幕 : 模拟器太大导致无法全屏显示, Window -> Scale -> 33% 即可显示整个手机模拟器界面;
• 2.模拟器控制 : Home 键 : Shift + Command + H, 停止模拟器 : 点击 XCode 中的停止按钮;
• 3.程序入口配置 : 在 Deployment Info 中设置程序入口界面 Storyboard;
• 4.Storyboard 界面设置 : Main.Storyboard -> 文件查看器 (File Inspector) -> Interface Builder Document -> 取消 Use Size Class 选项, 设置设计界面与手机界面一致;
• 4.显示机型设置 : ViewController -> 属性 -> Size 选择屏幕尺寸;
• 5.Storyboard Entry Point 箭头 : 指向界面初始化时创建的第一个 ViewController, 可在 ViewController 中的 Is Initial View Controller 选项中设置箭头是否指向本 ViewController ;
• 6.按钮点击事件 : ① 从代码到 Storyboard 拖线关联 IBAction 返回值方法 与 界面控件, 默认绑定 Touch Up Inside 事件; ② 右键选择按钮从 Send Events 列表中的按钮事件向代码拖线, 可以选择 将 按钮的指定事件 与 代码中的方法 进行关联; ③ 按住 control 键, 从控件拖到 ViewControler.m 空白处, 弹出生成方法对话框 生成对应事件绑定的方法;
• 7.UI 控件 与 ViewController 关联 : 拖线关联 IBOutlet 修饰的属性 与 界面控件;
• 8.解决模拟器软键盘不弹出问题 : 选择 Hardware -> Keyboard -> Toggle Software Keyboard 选项 激活;
• 9.设置软键盘类型 : 设置 TextField 控件的 Keyboard Type 属性;
• 10.退出软键盘 : ① 谁触发谁关闭 调用UITextField 的 resignFirstResponser 方法, ② 调用 根节点 [self.view endEditing:YES] 关闭根节点及其子节点触发的软键盘;
• 11.图片素材管理 : 图片素材可以从 Finder 中拖到 Assets.xcassets 中;
• 12.按钮设置 : ① 按钮风格 通常使用 Custom, ② 按钮状态 Default, HighLighted , 分别可设置不同状态的 背景 文子 及 文子颜色 等属性; ③ 代码生成按钮 并 绑定事件 ( addTarget );
• 13. 生成随机颜色值 : 通过随机生成 float 类型设置到 UIClolr 的 colorWithRed:green:blue:alpha 方法中, 生成一个随机颜色值;
• 14.动画设置 : ① 常用的 Block 动画设置, ② 头尾式动画很少使用;

博客相关资源 :

• 1.代码下载 : 点击下载

一. UIKit 相关知识点

1. iOS 应用创建

( 1 ) 创建应用

创建应用 :

• 1.进入 Xcode 选择创建应用 : 在 环境首界面 选择 Create a new Xcode project 选项, 创建一个新应用 ;

• 2.选择创建类型 : 在下面的界面中 选择创建 iOS -> Application -> Single View Application, 即 创建一个只有一个 View 界面的 iOS 应用;

• 3.设置相关参数 : 设置 ① 应用名称 Caculater ② 组织名称 han ③ 组织标识 cn.han ④ 所使用的语言 Objective-C ④ 设备 iPhone ;

• 4.选择所在目录 : 选择一个目录, 注意 这个目录 是项目的上一级目录;

• 5.创建成功 : 下图是创建的新应用 ;

( 2 ) 运行应用

运行应用 :

• 1.运行操作 : 点击 运行 按钮, 即可运行刚创建的应用, 运行按钮 如下图的 红框中;

• 2.设置虚拟机大小 : Xcode 默认的 iPhone 虚拟机非常大, 屏幕中显示不全, 在 虚拟机的菜单 -> Window -> scale 设置;

• 3.虚拟机界面 : 下图是运行起来之后的虚拟机界面 ;

( 3 ) iPhone 模拟器控制

iPhone 模拟器控制 :

• 1.退出当前调试应用到桌面 : 使用 Shift + Command + H 快捷键 , 返回到 模拟器 桌面;
• 2.退出调试状态 : 点击 Xcode 中的停止按钮;

2. iOS 设计界面 storyboard

( 1 ) LaunchScreen.storyboard 应用欢迎界面

LaunchScreen.storyboard 界面 : 该界面不是用于展示应用程序的界面 ;

• 1.界面作用 : 该界面是 进入 首界面 之前的 一个欢迎界面, 该界面 是在 LaunchScreen.storyboard 中设置的;

( 2 ) Main.storyboard 界面

Main.storyboard 界面简介 :

• 1.设计界面与实际界面的差异 : 下图中的 Main.storyboard 界面中的规格 与 右侧 iPhone 6S 虚拟机的规格 明显不同; 中间的是设计界面, 右侧的是 iPhone 6S Plus 虚拟机;

• 2.版本 与 界面设计 的差异 : 在 Xcode 5 中 设计界面 与 手机界面是一样的, Xcode 6 及 以后的版本, 就只有一个设计界面, iPhone 的各个版本 与 iPad 的各个版本 都使用同一个设计界面 ;
• 3.选择 View Controller 进行设置 : 下面的设置都是 针对 View Controller 属性进行设置, 先要选中 View Controller;

• 4.定制不同界面选项 : 如果要在一个设计界面中, 定制不同的界面 , 那么在右侧的 Interface Builder Document 中选中 Use Size Class 选项;

• 5.取消 Size Class 选项 : 将 Use Size Class 选项取消, 那么 设计 界面 与 手机界面 就一致了 ;
  • ( 1 ) 选择界面类型 : 点击取消时会弹出一个对话框, 让我们 选择 为 iPhone 还是 iPad 设计界面, 这里我们选择 iPhone;

• ( 2 ) 对比设计界面 与 手机界面 : 此时 设计界面 与 手机界面基本一致, 但是这个界面 与 iPhone 6S Plus 界面还是有差异, 还需要设置一下界面的具体机型 ;

( 3 ) Main.storyboard 界面具体机型设置

Main.storyboard 界面机型设置 :

• 1.设置机型方法 : ① 选中 View Controller, ② 打开 View Controller 的 属性查看器, ③ 设置 虚拟机参数 ( Simulated Metrics ) 中的 size 参数, ④ 设置 iPhone 6S Plus 的大小 iPhone 5.5-inch ;

• 2.设计与真实大小一致 : 此时 iPhone 6S Plus 虚拟机 与 Main.storyboard 中的设计界面 能重叠在一次, 大小一致;

( 4 ) Storyboard Entry Point ( 箭头 )

Storyboard Entry Point 简介 :

• 1.程序入口配置 : 程序入口在 应用配置 ( 点击左侧最上面的应用按钮 ) 中的 General -> Deployment Info -> Main Interface 中进行配置, 这里将 Main.storyboard 设置为程序的入口;

• 2.Main.storyboard 中的箭头 : 这个箭头代表了当加载该 Main.storyboard 界面时, 先创建哪个 ViewController 控制器, 显示哪个控制器对应的 view 控件, 箭头所指的 ViewController 先进行初始化 并 显示对应的 控件;
• 3.storyboard 中 ViewController 数量 : 一个 storyboard 中可以有多个 ViewController, 右侧的对象库中, 第一个就是 ViewController 对象, 可以拖入到 storyboard 中, 拖入之后 storyboard 就有两个 ViewController , 但是箭头所指的是第一个, 那么界面显示的时候 首先显示的就是 第一个 ViewController 及其控制的控件; 箭头选中 :

• 4.箭头控制 - 拖动 : 界面中有多个 ViewController 时, 可以将箭头从 ViewController 之间来回拖动, 切换 storyboard 界面 初始的 ViewController 控制器;

• 5.箭头控制 - 删除 : 箭头的对象在左侧显示, 是 Storyboard Entry Point 对象, 选中该对象, 按下 Delete 键, 可删除该箭头;

箭头删除后 :

• 6.箭头控制 - 属性设置 : 如果将箭头删除, 此时的处理方法是, 选中界面的初始化 ViewController 然后打开属性查看器, 将 Is Initial View Controller 选项勾选, 此时 Storyboard Entry Point 对象就显示出来了, 界面中的箭头也显示出来了;

界面启动流程 : ① 解析 Deployment Info 程序中配置的程序入口 Storyboard, ② 根据 Storyboard Entry Point 箭头 指向创建 ViewController, ③ 创建 ViewController 控制的 根 节点 view 对象, ④ 创建其子节点 view 对象, 将这些子控件 按照级别添加到 根节点上;

Deployment Info 的其它配置信息 :

• 1.Deployment Info : 兼容的 iOS 的 最低版本 ;
• 2.Devices : 程序要部署的设备; iPhone iPad 或者 通用;
• 3.Main Interface : 程序入口的 storyboard ;
• 4.Device Orientation : 屏幕的方向; Portrait 竖屏, Landscape Left 横屏 按钮左侧, Landscape Right 横屏, 按钮在右边;

3. iOS 常用 UI 控件

( 1 ) iOS 控件 对象 库

iOS UI 对象库 :

• 1.查看 UI 对象库 : 开发环境 右下角 面板, 选择 Show the Object library 面板, 即可看到 对象库;
• 2.上拉扩展 对象库 面板 大小 : 将 鼠标移动到 对象库 面板的上边缘, 可以 扩大 对象库 面板框 大小;

( 2 ) iOS 常用 控件

iOS 常用控件 :

• 1.UILabel : 文本标签 控件, 显示 一个 字符串 文字;
• 2.UIButton : 按钮 控件, 可设置 点击事件监听器, 监听到 用户 点击后 进行一个操作 ;
• 3.UITextField : 文本输入框 控件, 用户自己输入一个字符串 ;
• 4.UITextView : 多行文本标签 控件, 支持 多行显示, 滚动功能, 用户可编辑 ;
• 5.UIProgressView : 进度条 控件, 水平 进度条 ;
• 6.UISlider : 滑块 控件, 可触摸滑动的进度条, 进行数值 调节 ;
• 7.UIActivityIndicator : 等待 控件, 圆圈形状的 等待进度条 ;
• 8.UIAlertView : 对话框 控件;
• 9.UIActionSheet : 底部对话框 控件 ;
• 10.UIScrollView : 滚动 控件, 内容超出屏幕, 使用该控件处理;
• 11.UIPageControl : 分页 控件;
• 12.UITableView : 列表 表格 控件;
• 13.UICollectionView : 九宫格 控件 ;
• 14.UIWebView : 网页 控件 ;
• 15.UISwitch : 开关 控件;
• 16.UISegmentControl : 选项卡 控件;
• 17.UIPickerView : 选择器 控件 ;
• 18.UIDatePicker : 日期选择器 控件 ;
• 19.UIToolbar : 工具条 控件;
• 20.UINavigationBar : 导航条 控件, 每个界面顶部必有一个导航条 ;

( 3 ) UIView

UIView 简介 :

• 1.定义 : iOS 手机屏幕上的所有能看到的内容都是 UIView 或 UIView 子类, 如 按钮 UIButton, 文字 UILabel 等都是继承自 UIView 的;
• 2.本质 : 每个 UIView 都可以当做一个容器, UIView 可以嵌套 另外若干个 UIView;
• 3.父控件 与 子控件 : iOS 的 整个界面是一个 UIView 控件, 该控件是父控件; 该界面中的元素被嵌套在了 父控件 UIView 中, 这些界面中的控件就是 子控件 ; 下图是 Main.storyboard 中的 截图;

( 4 ) UIViewController

UIViewController 简介 :

• 1.界面启动 时 UIViewController 的行为 : 每当跳转到一个新的界面, 先***创建一个全新的 UIViewController 对象***, 然后***由 UIViewController 负责创建与其对应的 UIView 界面***, 这个 UIView 是全屏控件的父容器, UIViewController 负责管理这个全屏的父容器 UIView ;
• 2.UIViewController 作用 : UIViewController 负责 ① 管理 UIView 的生命周期 创建 显示 销毁, ② 监听 UIView 内部控件的事件响应, ③ 控制 UIView 与 用户之间的进行交互 ;
• 3.UIViewController 开发环境中的对应关系 : 选中界面中的 View Controller 元素, 然后去 属性面板 中对应的 类面板, 其中的 Class 属性就是设置的其对应的 代码类, 这里是 ViewController.h 和 ViewController.m ;

• 4.ViewController.h 代码 :

//
//  ViewController.h
//  Caculater
//
//  Created by octopus on 18/5/8.
//  Copyright © 2018年 han. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController


@end

• 5.ViewController.m 代码 :

//
//  ViewController.m
//  Caculater
//
//  Created by octopus on 18/5/8.
//  Copyright © 2018年 han. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

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

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

4. 控件常见属性

( 1 ) 修改控件状态

修改控件状态 : 通过修改对应 UI 对象的属性来修改控件的状态;

• 1.UI 控件本质 : 每个控件都是一个对象, 修改控件的状态, 就是修改控件对象的属性; 如 修改 UILabel 显示的文字 就修改 text 属性, 修改 UIImageView 显示的图片 就修改 image 属性;
• 2.属性类别 : 分为控件独有的属性, 和 共有的属性, 很明显 共有属性是 UIView 中定义的, 而其他控件都是 UIView 的子类;
  • ① 独有属性 : 有些属性是控件独有的, 如 UIProgressView 的 progress 属性代表其进度值, UILabel 和 UITextField 的 text 属性 代表其文本内容;
  • ② 共有属性 : 控件有些属性是共有的, 如控件的 位置尺寸 frame 属性, 中心店位置 center 等属性, 这些属性都定义在 UIView 中,

( 2 ) UIView 属性

UIView 常用属性 :

• 1.superview 属性 : 获取父控件对象, UIView 中定义内容 @property(nonatomic,readonly) UIView *superview; ;
• 2.subviews 属性 : 获取子控件集合, UIView 中定义内容 @property(nonatomic,readonly,copy) NSArray *subviews; ;
• 3.tag 属性 : 控件标识属性, 父控件可以通过 tag 属性找到子控件, UIView 中定义内容 @property(nonatomic) NSInteger tag; ;
• 4.transform 属性 : 控件旋转缩放平移等操作属性, UIView 中定义内容 @property(nonatomic) CGAffineTransform transform; ;
• 5.frame 属性 : 控件 在 父控件 中的位置 和 尺寸, UIView 中定义内容 @property(nonatomic) CGRect frame; ;
• 6.bounds 属性 : 控件本身 所在矩形框的 位置 和 尺寸, 其中的位置就是 固定的 (0,0) 点, 尺寸就是矩形框大小, UIView 中定义内容 @property(nonatomic) CGRect bounds; ;
• 7.center 属性 : 控件中心点在 父控件 的位置, UIView 中定义内容 @property(nonatomic) CGPoint center; ;

( 3 ) UIView 坐标系

UIView 坐标系 :

• 1.原点 : 左上角 的位置 是原点, 向右是 x 轴, 向下是 y 轴, 向右移动 x 轴坐标增加, 向下移动 y 轴坐标增加;

( 4 ) UIView 常用操作控件方法

UIView 操作控件方法 :

• 1.添加一个子控件 : - (void)addSubview:(UIView *)view; ;
• 2.从父控件移除子控件 : - (void)removeFromSuperview; ;
• 3.根据 tag 标识找到对应子控件 : - (UIView *)viewWithTag:(NSInteger)tag; ;

( 5 ) 控件 与 坐标系

控件 与 坐标系 :

• 1.frame 属性 的 位置 与 大小 : 注意该属性是相对于父控件的 位置 和 大小; 此时的父控件是界面的 根控件;

• 2.Size Inspector (尺寸查看器) : 点击右侧 尺子 图标, 即可打开 Size Inspector, 该界面中显示 控件 位置先关信息;

• 3.再次强调下frame 属性是相对于父控件的 : 创建一个 view 控件, 将 label 控件放在 view 控件的左上角, 此时 label 控件的位置是 (0, 0), 大小不变;

5. UIButton 详解

( 1 ) 修改控件状态

( 2 ) 代码创建按钮并绑定事件

代码创建按钮并绑定事件 :

• 1.创建 UIButton 按钮 :

二. 应用代码示例

1. 实现简单加法运算

( 1 ) 创建应用

参考本博客 一. 1. 章节, 有创建应用的过程说明 ;

( 2 ) 需求

需求 :

• 1.界面元素 : ① 两个 UITextField 控件, ② 三个 UILabel 控件, ③ 加法 按钮;
• 2.UITextField 控件 : 弹出数字键盘, 用于接收用户输入的数字;
• 3.UILabel 控件 : 两个分别显示 + 和 = 符号, 这个不变, 最后一个 Label 标签 用于显示 用户从 UITextField 输入的两个数之和;
• 4.加法按钮 : 点击按钮, 将用户在 UITextField 输入的字符串转为 int 类型, 相加, 将结果转为字符串显示在 最后一个 UILabel 中;

( 3 ) 界面编辑

界面编辑 :

• 1.向 Main.storyboard 界面拖入 Text 控件 : Text 控件是用户输入框, 可以接收用户输入的信息; 拖入 1 个 Text 标签, 然后拖入第 2 个, 拖入第二个标签时会显示对齐信息, 该控件用于接收用户输入的数字, 然后进行加法计算;

• 2.拖入 Label 控件 并设置文本 : Label 标签 是文本显示标签, 只能单纯的显示文本, 不能进行操作; 如果在 storyboard 界面修改文本标签, 该标签会自动缩放到刚好包裹文本的大小; 依次拖入两个 Label, 然后双击控件, 将 Label 重命名为 + 和 = ;

• 3.拖入 Label 控件 并设置 属性 : 上面通过双击直接在界面修改控件文本控件会缩小; 解决这个问题需要在 控件 属性中进行设置, 将 Label 属性中的 Label Text 内容删除, 控件不显示内容, 但是大小不改变;

• 4.拖入 Button 控件 : 将 Button 控件拖入界面中, 放在 TextField 和 Label 控件下面, 并修改文字内容为 计算结果;

( 4 ) 按钮事件设置

设置按钮响应事件 :

• 1.声明按钮点击方法 : 在 ViewController.h 中声明按钮的点击事件, 注意返回值必须是 IBAction 类型的 ;

//声明计算方法
//① 这个 IBAction 相当于 void 类型
//② 只有返回值是 IBAction 类型才能与 Main.storyboard 进行交互
- (IBAction) caculate;

• 2.实现按钮的点击方法 : 在 ViewController.m 中实现该按钮的点击方法;

//实现计算方法
//① 这个 IBAction 相当于 void 类型
//② 只有返回值是 IBAction 类型才能与 Main.storyboard 进行交互
- (IBAction) caculate{
    NSLog(@"按钮点击");
}

• 3.关联按钮点击方法与按钮 : ① 打开辅助编辑器, 出现两个并列的编辑器, 一个现实 Main.storyboard 界面, 另一个现实 ViewController.h 代码界面, ② 将鼠标指针移动到 ViewController.h 界面中的按钮点击方法前的圆圈

中, 此时圆圈会变成

, 此时**按住鼠标左键, 拖到按钮控件上**, 此时按钮控件与点击方法就关联起来了;

• 4.解除按钮与点击方法关联 ( 非必要说明 ) : 如果要修改按钮的方法, 首先要删除之前设置的方法, 否则会报错; 右键点击按钮, 查看 Send Events 中的 Touch Up Inside 中的对应的点击事件, 点击左上角的 x 直接删除该事件即可接触按钮与点击事件的关联 ;

( 5 ) 定义控件属性 并 关联控件

定义控件属性 : 如果要在 ViewController 中操作控件, 就需要在 ViewController 中定义该控件的对象;

• 1.定义 TextField 属性 : @property (nonatomic, weak) IBOutlet UITextField * number1TextField; , 其中 @property 作用是生成其访问方法, 并制定该属性的指示符 nonatomic 代表该属性是 线程不安全 但是 性能高, weak 代表该属性是弱引用, 所有的控件都使用 weak 修饰; 属性 使用 IBOutlet 修饰 才能与 Main.storyboard 中的控件进行关联, 反之 没有左侧的 关联 符号; IBOutlet 只用标识该属性可以与 storyboard 进行连线;
• 2.关联属性与界面控件 : 建立 TextField 控件与 number1TextField 属性的连线, 过程与上面建立 按钮 与 点击 方法 关联的过程相同, ① 将鼠标移动到 ViewController.h 中的 IBOutlet 属性 左侧的圆圈, 此时该圆圈变为 加号, ② 按住鼠标左键, 拖到制定的控件处, 这样 ViewController.h 中的属性与 Main.storyboard 中的控件建立起了关联;
  • ① 属性左侧的圆圈图示 : 第一张是鼠标没有移动到圆圈上, 第二章是鼠标移动到了圆圈上;

  

  

  • ② 建立关联图示 : 打开辅助编辑器, 按住鼠标左键, 拖到 storyboard 中对应的控件上;

  

  建立连接后, 属性前的圆圈变为实心;

  

• 3.创建第二个 TextField 属性并关联界面 : 同上面的操作, 在创建第二个属性, 关联 ViewController.h 中的属性与 Main.storyboard 中的属性;

• 4.创建 Label 属性 并关联界面 : 在 ViewController.h 中定义 Label 属性 @property (nonatomic, weak) IBOutlet UILabel* resultLabel; , 除了类型 UILabel 与上面不同之外 其它一样;

( 6 ) 软键盘设置

软键盘设置 :

• 1.虚拟机软键盘弹出设置 : 虚拟机默认是使用电脑的键盘, 默认不弹出软键盘, 需要作如下设置, 虚拟机 菜单 Hardware -> Keyboard -> Toggle Software Keyboard 点一下这个选项即可弹出软键盘, 这样点击 TextField 控件才会弹出虚拟机的软键盘;

• 2.设置 TextField 键盘类型 : 在 Main.storyboard 中选中 TextField 控件, 选择 属性查看器, 设置其中的 keyboard Type, 设置为 Number Pad 数字键盘;

• 3.退出软键盘方式 : 两种方式 ① 哪个 TextField 触发的, 通过对应的 TextField 控件 关闭键盘; ② 通过 父控件 关闭 软键盘;
  • ① 谁触发谁关闭 : 调用控件的 resignFirstResponder 方法 退出软键盘, 该方法只能关闭控件本身触发的软键盘, 示例 [self.textField resignFirstResponder] 关闭 textField 属性对应的控件触发的软键盘;
  • ② 通过父控件关闭 : 调用界面的根节点 view 的 endEditing 方法关闭软键盘; 代码 [self.view endEditing:YES] 关闭 view 控件 及其 子控件 触发的软键盘;

( 7 ) 实现加法逻辑

实现计算逻辑 :

• 1.实现位置 : 点击按钮后执行加法运算, 接收 界面中输入的 两个数字, 并将计算结果输出到界面中, 主要逻辑都在按钮的点击方法中实现的, 下面是按钮点击方法代码 :

//实现计算方法
//① 这个 IBAction 相当于 void 类型
//② 只有返回值是 IBAction 类型才能与 Main.storyboard 进行交互
 - (IBAction) caculate{
    
    NSLog(@"按钮点击");
}

• 2.获取 用户在 UITextField 输入的值 : NSString * number1Str = self.number1TextField.text; 使用 self. 方式访问 @property 修饰的成员变量, 即访问其自动生成的 getter 方法, number1TextField.text 是访问其 text 属性, 即用户输入的值;
• 3.将 NSString 类型转为字符串 : 访问 NSString 类型的 intValue 属性, 即可获取其 int 值, 将 NSString 类型转为了 int 类型; 代码为 int number1 = number1Str.intValue;;
• 4.将 int 类型转为 NSString 类型 : 使用 NSString 的 stringWithFormat 方法处理, [NSString stringWithFormat:@"%d", result] ;
• 5.最终代码示例 :

//实现计算方法
//① 这个 IBAction 相当于 void 类型
//② 只有返回值是 IBAction 类型才能与 Main.storyboard 进行交互
 - (IBAction) caculate{
    
    //1.获取 TextField 值
    NSString * number1Str = self.number1TextField.text;
    NSString * number2Str = self.number2TextField.text;
    
    //2.将字符串值转为 int 类型, 并计算和
    int number1 = number1Str.intValue;
    int number2 = number2Str.intValue;
    int result = number1 + number2;
    
    //3.改变 Label 控件值, 注意要将 int 值转为 NSString 类型
    self.resultLabel.text = [NSString stringWithFormat:@"%d", result];
    
}

• 6.执行效果 :

2. 按钮使用代码示例

( 1 ) 创建应用

参考本博客 一. 1. 章节, 有创建应用的过程说明 ;

( 2 ) 需求

需求 :

• 1.界面元素 : ① 大按钮 可设置背景图片, ② 上下左右 四个小按钮, ③ 放大 缩小 两个小按钮;
• 2.大按钮功能 : 点击大按钮, 然后点击按下状态时, 大按钮显示另外一个背景图片;
• 3.上下左右按钮 : 点击四个按钮, 大按钮进行上下左右移动;
• 4.放大缩小按钮 : 点击放大, 大按钮放大, 点击缩小, 大按钮缩小;

( 3 ) 项目设置 ( ① 设置屏幕 | ② 拷贝素材 )

项目设置 : 设置屏幕大小, 拷贝需要用到的素材,

• 1.设置 Main.storyboard 设计大小 : ① 进入 Main.storyboard 界面, 在文件查看器界面, 取消 Use Size Classes 勾选, 在弹出的对话框中 选择 iPhone 选项; ② 点击 ViewController, 在其属性查看器中, 选择对应的设计尺寸;

• 2.拷贝图片素材 : 图片素材都是在 工程中的 Assets.xcassets 中存放的, 开发时 直接将素材拖到 Assets.xcassets 界面的 左侧位置, 如下图 红框位置;

素材直接从 Finder 中拖到这里即可;

( 4 ) 按钮状态设置 与 点击事件设置

Main.storyboard 界面开发 : 放置按钮, 并设置按钮的背景图片;

• 1.界面放置 Button 按钮 : 从右侧的对象库中 拖一个 Button 控件到 Main.storyboard 中;

• 2.设置按钮的背景 : 在 Button 的 background 属性中设置图片名称, 然后图片就会显示在布局中;

• 3.设置按钮的文字 : Button 中的 tittle 属性设置按钮的文字, 下面的 Font 设置字体和大小, Text Color 设置文字颜色;

• 4.设置按钮文字颜色 : 点击按钮的 Text Color 属性, 会弹出一个列表, 可以选择少数几种颜色, 点击列表底部弹出一个 颜色板 可以选择任何颜色;

• 5.设置按钮点击状态 : 在 State Config 属性中可以配置 五种状态, 其中的 Highlighted 状态就是按钮按下的状态, 每个状态都可以设置一套单独的 Tittle Background 等属性, 如下图的属性列表;

• 6.设置按钮点击状态的背景图片 : 将 State Config 切换到 Highlighted 状态, 此时可以设置 高亮状态下的按钮属性, 将 Background 中设置对应的按下的图片, 文字设置成按下的文字;

• 7.Main.storyboard 中查看 Highlighted 状态的设置 : 我们设置了 Highlighted 状态的 文字 和 背景图片, 此时无法看到, 可以在 Control 属性中勾选 Highlighted 属性, 此时就能查看高亮状态的 文字 和 背景图片了;

• 8.定制样式 : 使用 System 类型的属性, 会将 Highlighted 状态的图片默认设置成半透明, 这里为了避免这种情况, 需要 将 Type 属性设置为 Custom , 这样就可以自己定制按钮的属性了;

• 9.设置向上箭头按钮 : 设置向上箭头按钮, 并设置其 默认背景图片, 高亮状态背景图片, 并设置其类型为 定制类型, 不要点上去 高亮状态变为半透明;

设置按钮高亮状态下的属性, 注意在 Control 中的 Content 属性需要勾选 Highlighted 选项才会显示下图的内容;

• 10.ViewController 中定义按钮对象 : 在 ViewController.m 中定义按钮属性, 并拖线关联该属性与 Main.storyboard 中的按钮控件; 定义内容 @property (nonatomic, weak) IBOutlet UIButton * mainButton; ;

• 11.CGRect 结构体介绍 : 其中 CGPoint 和 CGSize 都是一个结构体; 使用 typedef struct CGRect CGRect 语句重命名结构体类型之后, 结构体不用使用 struct CGRect frame 来定义结构体, 使用 CGRect frame 声明即可;

/* Points. */

struct CGPoint {
    CGFloat x;
    CGFloat y;
};
typedef struct CGPoint CGPoint;

/* Sizes. */

struct CGSize {
    CGFloat width;
    CGFloat height;
};
typedef struct CGSize CGSize;


/* Rectangles. */

struct CGRect {
    CGPoint origin;
    CGSize size;
};

typedef struct CGRect CGRect;

• 12.ViewController.m 中定义向上按钮的点击方法 : 这里注意 frame 是一个 CGRect 类型的结构体, 修改该结构体不能直接在对象中修改 如 self.mainButton.frame.origin.y = 0, 这种方法是错误的, 需要先将 frame 结构体取出来, 然后再操作赋值;

//向上移动的方法
-(IBAction) up{

    //注意点 : OC 中不能直接 修改 对象的结构体成员,
    // 如果有此类需求, 需要先取出结构体, 修改结构体成员, 在将结构体赋值给对象
    
    //1.取出 frame 结构体
    CGRect frame = self.mainButton.frame;
    //2.修改结构体中的成员, 向上移动 即 y 值减少, 每点击一下按钮y减少10
    frame.origin.y -= 10;
    //3.将结构体设置回 UIButton 对象
    self.mainButton.frame = frame;
    
}

• 13.关联控件的 Touch Up InSide 与上面定义的方法 : 右键点击控件, 在弹出的黑色对话框中找到 Touch Up Inside 方法, 点击方法后的圆圈, 直接拖到对应的方法上;

• 14.定义其它三个方向的按钮及方法 : 方法基本与 up 方法相同, 就是 修改 CGRect frame 结构体的 x y 递增 递减, 拖线关联按钮与方法;

//向下移动的方法
-(IBAction) down{
    
    //注意点 : OC 中不能直接 修改 对象的结构体成员,
    // 如果有此类需求, 需要先取出结构体, 修改结构体成员, 在将结构体赋值给对象
    
    //1.取出 frame 结构体
    CGRect frame = self.mainButton.frame;
    //2.修改结构体中的成员, 向上移动 即 y 值减少, 每点击一下按钮y减少10
    frame.origin.y += 10;
    //3.将结构体设置回 UIButton 对象
    self.mainButton.frame = frame;
    
}

//向下移动的方法
-(IBAction) left{
    
    //注意点 : OC 中不能直接 修改 对象的结构体成员,
    // 如果有此类需求, 需要先取出结构体, 修改结构体成员, 在将结构体赋值给对象
    
    //1.取出 frame 结构体
    CGRect frame = self.mainButton.frame;
    //2.修改结构体中的成员, 向上移动 即 y 值减少, 每点击一下按钮y减少10
    frame.origin.x -= 10;
    //3.将结构体设置回 UIButton 对象
    self.mainButton.frame = frame;
    
}

//向下移动的方法
-(IBAction) right{
    
    //注意点 : OC 中不能直接 修改 对象的结构体成员,
    // 如果有此类需求, 需要先取出结构体, 修改结构体成员, 在将结构体赋值给对象
    
    //1.取出 frame 结构体
    CGRect frame = self.mainButton.frame;
    //2.修改结构体中的成员, 向上移动 即 y 值减少, 每点击一下按钮y减少10
    frame.origin.x += 10;
    //3.将结构体设置回 UIButton 对象
    self.mainButton.frame = frame;
    
}

• 15.定义放大缩小的方法 : 放大缩小即修改 frame 属性中的 size 结构体中的 width 和 height 值, 增加就是放大, 减少就是缩小; 拖入两个按钮并设置按钮的 Normal 和 Highlighted 状态的背景, 拖线关联 按钮与方法;

//向下移动的方法
-(IBAction) big{
    
    //注意点 : OC 中不能直接 修改 对象的结构体成员,
    // 如果有此类需求, 需要先取出结构体, 修改结构体成员, 在将结构体赋值给对象
    
    //1.取出 frame 结构体
    CGRect frame = self.mainButton.frame;
    //2.修改结构体中的成员, 宽高增加就是放大
    frame.size.width += 10;
    frame.size.height += 10;
    //3.将结构体设置回 UIButton 对象
    self.mainButton.frame = frame;
    
}

//向下移动的方法
-(IBAction) small{
    
    //注意点 : OC 中不能直接 修改 对象的结构体成员,
    // 如果有此类需求, 需要先取出结构体, 修改结构体成员, 在将结构体赋值给对象
    
    //1.取出 frame 结构体
    CGRect frame = self.mainButton.frame;
    //2.修改结构体中的成员, 宽高减少就是缩小
    frame.size.width -= 10;
    frame.size.height -= 10;
    //3.将结构体设置回 UIButton 对象
    self.mainButton.frame = frame;
    
}

( 5 ) tag 标签使用 ( ① 设置资源 | ② 按钮状态背景 | ③ tag 设置 | ④ 多按钮绑定同方法 )

tag 使用 :

• 1.放置资源 : 在 Assets.xcassets 中创建一个目录 , 专门用于存放指定用途的 按钮背景图片资源 , 2 个按钮在 Default 和 Highlighted 两种状态的图片 ;

• 2.按钮图片设置 : 为按钮 的 Default 和 Highlighted 两个状态设置不同的图片 ;
• 3.绑定方法 : 将两个按钮同时绑定到同一个方法上 ;

• 4.设置 tag : 给 两个按钮分别设置 tag 为 1 和 2 ;

• 5.方法关联 : 将两个按钮都关联到同一个方法上 , 注意这个方法必须能获取到按钮才可以 ;

• 6.获取 tag : 使用 sender.tag 即可获取 UIButton 标签 , 根据 tag 执行不同的逻辑 ;

控件关联的方法 , 是否传入 UIButton 控件 , 在于是否需要获取 按钮 相关资源 ,

( 6 ) 关闭自动布局 ( ① 选中 ViewController | ② 文件查看器 | ③ 取消 Use Auto Layout 勾选 )

关闭自动布局 : 如果 无法 控制 大小改变时 , 需要关闭自动布局 ;

( 7 ) transfrom 属性 ( ① 位置 ( 创建 ) 修改 | ② 缩放 ( 创建 ) 修改 | ③ 角度 ( 创建 ) 修改 )

transform ( 变换 ) 属性 :

• 1.作用 : 该属性可以修改控件的 位置 , 大小 , 旋转角度 ; 该属性定义在 UIView 中 ;

• 2.动画 : 可以使用动画 , 该属性可以放入 Block 动画中 , 生成动画效果 ;
• 3.创建位置 : 该方法 直接 创建 一个 新的 CGAffineTransform 结构体 , 除了 传入的参数外 , 其它 都是默认值 ;

/* Return a transform which translates by `(tx, ty)':
     t' = [ 1 0 0 1 tx ty ] */

CG_EXTERN CGAffineTransform CGAffineTransformMakeTranslation(CGFloat tx,
  CGFloat ty)

• 4.创建缩放 : 该方法 直接 创建 一个 新的 CGAffineTransform 结构体 , 除了 传入的参数外 , 其它 都是默认值 ;

/* Return a transform which scales by `(sx, sy)':
     t' = [ sx 0 0 sy 0 0 ] */

CG_EXTERN CGAffineTransform CGAffineTransformMakeScale(CGFloat sx, CGFloat sy)

• 5.创建角度 : 这里传入的值 不是 0 ~ 360 的度数 , 传入的是 π 弧度 , ① π 代表 180° , M_PI 常量代表该值 ; ② π / 2 代表 90° , M_PI_2 常量代表该值 ; ③ π / 4 代表 45° , M_PI_4 常量代表该值 ; 该方法 直接 创建 一个 新的 CGAffineTransform 结构体 , 除了 传入的参数外 , 其它 都是默认值 ;

/* Return a transform which rotates by `angle' radians:
     t' = [ cos(angle) sin(angle) -sin(angle) cos(angle) 0 0 ] */

CG_EXTERN CGAffineTransform CGAffineTransformMakeRotation(CGFloat angle)

• 6.位置 , 角度 , 缩放 修改 : 该方法 直接 创建 一个 新的 CGAffineTransform 结构体 , 除了 传入的参数外 , 其它 都是默认值 ;

/* Return the transform [ a b c d tx ty ]. */

CG_EXTERN CGAffineTransform CGAffineTransformMake(CGFloat a, CGFloat b,
  CGFloat c, CGFloat d, CGFloat tx, CGFloat ty)

• 7.修改角度 : 该方法 需要 传入一个 CGAffineTransform 结构体变量 , 然后 根据 传入的 弧度值 , 修改 传入的 变量 , 因为是在原有基础上进行修改, 该修改 会 累加 ;

/* Rotate `t' by `angle' radians and return the result:
     t' =  [ cos(angle) sin(angle) -sin(angle) cos(angle) 0 0 ] * t */

CG_EXTERN CGAffineTransform CGAffineTransformRotate(CGAffineTransform t,
  CGFloat angle)

• 8.修改角度代码 :

- (IBAction)rotate:(UIButton *)sender {
    
    //1. 获取要旋转的图片
    CGAffineTransform rotateTransform = self.mainButton.transform;
    
    //2. 获取修改旋转角度
    switch (sender.tag) {
        case 1:
            rotateTransform = CGAffineTransformRotate(self.mainButton.transform, M_PI_2);
            break;
        case 2:
            rotateTransform = CGAffineTransformRotate(self.mainButton.transform, -M_PI_2);
            break;
        default:
            break;
    }
    
    //3.将 CGAffineTransform 结构体设置回  对象 , 并添加动画
    [UIView animateWithDuration:1 animations:^{
        self.mainButton.transform = rotateTransform;
    }];
    
    
}

( 8 ) 代码示例

代码示例 :

//
//  ViewController.m
//  3.ButtonDemo
//
//  Created by octopus on 18/6/9.
//  Copyright © 2018年 han. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

//定义要操作的主要按钮, 即显示头像的按钮
@property (nonatomic, weak) IBOutlet UIButton * mainButton;

@end

@implementation ViewController

//向上移动的方法
-(IBAction) up{

    //注意点 : OC 中不能直接 修改 对象的结构体成员,
    // 如果有此类需求, 需要先取出结构体, 修改结构体成员, 在将结构体赋值给对象
    
    //1.取出 frame 结构体
    CGRect frame = self.mainButton.frame;
    //2.修改结构体中的成员, 向上移动 即 y 值减少, 每点击一下按钮y减少10
    frame.origin.y -= 10;
    //3.将结构体设置回 UIButton 对象 , 使用 block 动画效果
    [UIView animateWithDuration:1 animations:^{
        self.mainButton.frame = frame;
    }];
    
}

//向下移动的方法
-(IBAction) down{
    
    //注意点 : OC 中不能直接 修改 对象的结构体成员,
    // 如果有此类需求, 需要先取出结构体, 修改结构体成员, 在将结构体赋值给对象
    
    //1.取出 frame 结构体
    CGRect frame = self.mainButton.frame;
    //2.修改结构体中的成员, 向上移动 即 y 值减少, 每点击一下按钮y减少10
    frame.origin.y += 10;
    //3.将结构体设置回 UIButton 对象
    [UIView animateWithDuration:1 animations:^{
        self.mainButton.frame = frame;
    }];
    
}

//向下移动的方法
-(IBAction) left{
    
    //注意点 : OC 中不能直接 修改 对象的结构体成员,
    // 如果有此类需求, 需要先取出结构体, 修改结构体成员, 在将结构体赋值给对象
    
    //1.取出 frame 结构体
    CGRect frame = self.mainButton.frame;
    //2.修改结构体中的成员, 向上移动 即 y 值减少, 每点击一下按钮y减少10
    frame.origin.x -= 10;
    //3.将结构体设置回 UIButton 对象
    [UIView animateWithDuration:1 animations:^{
        self.mainButton.frame = frame;
    }];
    
}

//向下移动的方法
-(IBAction) right{
    
    //注意点 : OC 中不能直接 修改 对象的结构体成员,
    // 如果有此类需求, 需要先取出结构体, 修改结构体成员, 在将结构体赋值给对象
    
    //1.取出 frame 结构体
    CGRect frame = self.mainButton.frame;
    //2.修改结构体中的成员, 向上移动 即 y 值减少, 每点击一下按钮y减少10
    frame.origin.x += 10;
    //3.将结构体设置回 UIButton 对象
    [UIView animateWithDuration:1 animations:^{
        self.mainButton.frame = frame;
    }];
    
}

//向下移动的方法
-(IBAction) big{
    
    //注意点 : OC 中不能直接 修改 对象的结构体成员,
    // 如果有此类需求, 需要先取出结构体, 修改结构体成员, 在将结构体赋值给对象
    
    //1.取出 frame 结构体
    CGRect frame = self.mainButton.frame;
    
    //2.修改结构体中的成员, 宽高增加就是放大
    frame.size.width += 10;
    frame.size.height += 10;
    
    frame.origin.x -= 5;
    frame.origin.y -= 5;
    
    //3.将结构体设置回 UIButton 对象
    [UIView animateWithDuration:1 animations:^{
        self.mainButton.frame = frame;
    }];
    
}

//向下移动的方法
-(IBAction) small{
    
    //注意点 : OC 中不能直接 修改 对象的结构体成员,
    // 如果有此类需求, 需要先取出结构体, 修改结构体成员, 在将结构体赋值给对象
    
    //1.取出 frame 结构体
    CGRect frame = self.mainButton.frame;
    
    
    //2.修改结构体中的成员, 宽高减少就是缩小
    frame.size.width -= 10;
    frame.size.height -= 10;
    
    frame.origin.x += 5;
    frame.origin.y += 5;
    
    //3.将结构体设置回 UIButton 对象
    [UIView animateWithDuration:1 animations:^{
        self.mainButton.frame = frame;
    }];
    
}


- (IBAction)rotate:(UIButton *)sender {
    
    //1. 获取要旋转的图片
    CGAffineTransform rotateTransform = self.mainButton.transform;
    
    //2. 获取修改旋转角度
    switch (sender.tag) {
        case 1:
            rotateTransform = CGAffineTransformRotate(self.mainButton.transform, M_PI_2);
            break;
        case 2:
            rotateTransform = CGAffineTransformRotate(self.mainButton.transform, -M_PI_2);
            break;
        default:
            break;
    }
    
    //3.将 CGAffineTransform 结构体设置回  对象 , 并添加动画
    [UIView animateWithDuration:1 animations:^{
        self.mainButton.transform = rotateTransform;
    }];
    
    
}





@end

( 9 ) 效果展示

效果展示:

3. UIView 属性 示例

( 1 ) 创建应用并设置

参考本博客 一. 1. 章节, 有创建应用的过程说明 ;

设置大小 : 在 Main.storyboard 选中 UIViewController 打开属性查看器, 调节 Simulated Metrics 中的大小为 IPhone5.5-inch, 这样 Main.storyboard 就会显示成普通 iPhone 的样式;

( 2 ) 需求

需求 :

• 1.点击按钮, 修改控件颜色;
• 2.点击按钮修改控件颜色, 这个颜色是一个随机生成的颜色值;
• 3.使用代码生成 UIView 控件;
• 4.使用代码生成 UIView 控件, 并设置动画;
• 5.使用代码生成 UIButton 控件, 并绑定点击事件;

( 3 ) 拖线生成传入 Sender 的方法

拖线生成传入 Sender 的方法:

• 1.界面中设置 View 控件 : 拖入一个 UIView 控件到界面中, 并打开尺寸查看器, 将其大小修改为 300 x 300 , 放置在中心位置;

• 2.设置View中的子控件按钮及点击事件 : 将一个按钮控件拖入 UIView 控件中, 修改文字为 改变颜色; 这里尝试一种新的方法来进行按钮点击方法设置;
  • ① 进入辅助编辑器模式 : 一个显示 Main.storyboard, 另一个显示 ViewController.m 文件;

  

  • ② 拖线关联 : 按住 control 键 不放, 左键按住按钮, 拖到 ViewController.m 代码中;

  

  • ③ 设置对话框参数 : 在弹出的对话框中设置 方法名称 changeColor, 类型为 UIButton, 事件为 Touch Up Inside, 传入的参数暂时设置为 Sender 这里需要将 按钮本身传回, 用于获取其父控件 ; 点击 Connect 按钮, 就会自动生成方法;

  

  • ④ 自动生成方法 : 执行上述操作会自动生成与按钮点击事件相关联的方法;

  

( 4 ) 设置颜色 及 随机颜色值

设置颜色 及 随机 颜色值 :

• 1.添加按钮 ( 功能 修改父控件背景变颜色 ) :
  • ① 获取父控件 : 根据 按钮 点击方法传入的 按钮控件, 获取其父控件, UIView * superView = sender.superview; ;
  • ② 修改父控件颜色 : 背景颜色的属性是 backgroundColor , 修改该属性即可改变父控件颜色; 代码为 superView.backgroundColor = [UIColor blueColor]; ; 上述代码将父控件背景颜色修改为 蓝色;
• 2.添加按钮 ( 功能 修改父控件 随机 背景变颜色 ) :
  • ① 添加UIButton控件 : 添加一个 UIButton 控件, 修改标题为 “修改随机颜色” 从控件到 UIViewController.m 中拖线, 点击方传入 Sender , 参数如下设置; 生成的方法为 - (IBAction)changeRandomColor:(UIButton *)sender{} ;

  

  • ② 获取父控件 : 根据 按钮 点击方法传入的 按钮控件, 获取其父控件, UIView * superView = sender.superview; ;
• 3.生成随机颜色 : 调用 UIColor 的 colorWithRed:green:blue:alpha 方法, 该方法的参数传入 一个 0 ~ 1 之间的随机值, 类型为 float 类型; alpha 透明度设置为 1;
• 4.生成 0 ~ 1 之间的随机值 : 这里先生成一个 0 ~ 254 之间的随机值, 使用 C 语言的 arc4random_uniform() 方法, 代码为 arc4random_uniform(255) ; 使用 arc4random_uniform(255) / 255.0 即可 获得一个 0 ~ 1 之间随机 浮点数;
• 5.完整的随机颜色生成方法 :

    //2. 获取一个随机颜色
    //   colorWithRed:green:blue:alpha 方法传入的参数取值范围 0 ~ 1 的浮点数
    //   获取 0 ~ 1 之间的随机数, arc4random_uniform(255) 是 C 语言方法, 获取 0 ~ 254 随机值
    //   注意 : 除数要是 float 类型 255.0, 否则两个整型相除会按照整型计算
    float randomRed = arc4random_uniform(255) / 255.0;
    float randomGreen = arc4random_uniform(255) / 255.0;
    float randomBlue = arc4random_uniform(255) / 255.0;
    UIColor * randomColor = [UIColor colorWithRed:randomRed green:randomGreen blue:randomBlue alpha:1];

• 6.修改父控件的随机背景颜色 : 之前已经获取到了 父控件 superView, 因此修改父控件代码为 superView.backgroundColor = randomColor; ;
• 7.设置随机颜色值代码 :

- (IBAction)changeRandomColor:(UIButton *)sender {
    //1. 获取按钮的父控件
    UIView * superView = sender.superview;
    //2. 获取一个随机颜色
    //   colorWithRed:green:blue:alpha 方法传入的参数取值范围 0 ~ 1 的浮点数
    //   获取 0 ~ 1 之间的随机数, arc4random_uniform(255) 是 C 语言方法, 获取 0 ~ 254 随机值
    //   注意 : 除数要是 float 类型 255.0, 否则两个整型相除会按照整型计算
    float randomRed = arc4random_uniform(255) / 255.0;
    float randomGreen = arc4random_uniform(255) / 255.0;
    float randomBlue = arc4random_uniform(255) / 255.0;
    UIColor * randomColor = [UIColor colorWithRed:randomRed green:randomGreen blue:randomBlue alpha:1];
    
    //3. 修改父控件颜色
    superView.backgroundColor = randomColor;
}

( 5 ) 使用代码生成 UIView 对象

代码生成 View 控件 :

• 1.添加按钮 : 在 Main.storyboard 中添加一个按钮, 修改按钮文字为 “代码生成UIView控件”, 进入辅助编辑器模式, 按下 control 键不放, 左键拖动按钮到 ViewController.m 中, 在弹出的对话框中进行如下设置; 生成方法 为 - (IBAction)generateView:(UIButton *)sender {} ;
  • ① 拖线过程 : 按住 control 键, 左键拖控件到 代码中;

  

  • ② 设置按钮绑定的方法 : 名称 generateView, 控件类型为 UIButton, 事件为 Touch Up Inside, 参数为 Sender 即 按钮本身;

  

• 2.拖线 将 白色的 UIView 传入 UIViewController.m 中 : 按住 control 不放, 左键拖动 白色的 UIView 控件, 拖动到 ViewController.m 的扩展中;

• ① 设置控件属性参数 : 设置控件属性名称为 mainView, 引用为 weak 弱引用;

• 3.创建 UIView 对象 : 首先创建一个 UIView 对象, 代码为 UIView * generateView = [[UIView alloc] init]; ;
• 4.创建 CGRect 结构体变量 : 使用 CGRectMake 方法创建 CGRect 结构体, CGRectMake(0, 0, 100, 100); ;
• 5.设置创建的 UIView 对象 backgroundColor 与 frame 属性 : 如果不设置这两个属性, 那么创建的 View 控件就会看不清;

    //2. 设置 UIView 对像的 颜色值 和 位置大小属性
    generateView.backgroundColor = [UIColor blueColor];
    generateView.frame = CGRectMake(0, 0, 100, 100);

• 6.添加 UIView 控件到界面中 : 将控件添加到之前设置的 mainView 中, [self.mainView addSubview:generateView]; ;
• 7.生成 UIView 控件代码 :

- (IBAction)generateView:(UIButton *)sender {
    
    //1. 创建 UIView 对象
    UIView * generateView = [[UIView alloc] init];
    
    //2. 设置 UIView 对像的 颜色值 和 位置大小属性
    generateView.backgroundColor = [UIColor blueColor];
    generateView.frame = CGRectMake(0, 0, 100, 100);
    
    //3.添加到 mainView 中
    [self.mainView addSubview:generateView];
    
}

• 8.最终效果 :

( 6 ) 动画设置 ( 头尾式动画 | Block 动画 )

控件动画设置 :

• 1.添加触发按钮 : 按住 control 键, 按住鼠标左键拖线 从 UIButton 控件 到 ViewController.m 中, 在弹出的对话框中设置对应参数, 方法名, 控件类型, 参数 等; 生成的代码 - (IBAction)generateMovingView:(UIButton *)sender {} ;

• 2.头尾式动画 : 头尾式动画用法 ① 开始动画 调用 UIView 的 beginAnimations:context 方法, ② 设置动画的各种属性, 如 设置动画过程 setAnimationDuration, 设置动画延迟 setAnimationDelay, ③ 设置控件的改变, 如 frame 属性的 位置 大小 改变, ④ 提交动画 , [UIView commitAnimations]; 这种头尾式动画 代码量过大, 用法比较少;

    //头尾式动画, 开始动画, 并设置动画的属性, 很少使用
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:2];
    [UIView setAnimationDelay:1];
    generateView.frame = frame;
    [UIView commitAnimations];

• 3.Block 动画 : 调用 UIView 的 animateWithDuration:animations 方法, 动画改变内容设置在 block 代码块中;

    //Block 动画, 常用
    [UIView animateWithDuration:2 animations:^{
        generateView.frame = frame;
    }];

• 4.动画设置代码 :

- (IBAction)generateMovingView:(UIButton *)sender {
    
    //1. 创建 UIView 并设置尺寸
    UIView * generateView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
    
    //2. 设置 UIView 背景颜色
    generateView.backgroundColor = [UIColor greenColor];
    
    //3. 将创建的 UIView 添加到 mainView 中去;
    [self.mainView addSubview:generateView];
    
    //4. 获取 frame 属性, 并修改其位置, 向右移动 100 像素
    CGRect frame = generateView.frame;
    frame.origin.x = 100;
    
    //5. 头尾式动画, 开始动画, 并设置动画的属性, 很少使用
    /*
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:2];
    [UIView setAnimationDelay:1];
    generateView.frame = frame;
    [UIView commitAnimations];
     */
    
    //5. Block 动画, 常用
    [UIView animateWithDuration:2 animations:^{
        generateView.frame = frame;
    }];
    
}

( 7 ) 代码生成按钮 ( 创建按钮 | 设置按钮属性 | 绑定事件 )

代码生成按钮 :

• 1.创建按钮 并设置 frame 属性 : 创建 UIButton 对象, 调用 [UIButton buttonWithType:UIButtonTypeCustom] 创建一个按钮, 同时指定按钮的类型为 Custom 类型, 一般我们使用的按钮类型都是 该类型的 ; 每个控件必须设置 frame 属性, 这里使用 CGRectMake 方法创建一个 CGRect 结构体变量, 代码为 [button setFrame:CGRectMake(0, 0, 100, 100)]; ;
• 2.设置按钮在不同状态下的内容与颜色 : ① 调用 setTitle:forState 为某个状态指定文字, 这里 [button setTitle:@"普通状态" forState:UIControlStateNormal]; 为普通状态指定文字, [button setTitle:@"按下状态" forState:UIControlStateHighlighted]; 为高亮状态指定文字; ② 调用 setTitleColor:forState 为某种状态指定文字颜色, [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal]; 为普通状态指定文字颜色, [button setTitleColor:[UIColor redColor] forState:UIControlStateHighlighted]; 为高亮状态指定文字颜色;
• 3.设置背景图片 : ① 获取图片对象 : 使用 [UIImage imageNamed:@"bg.png"]; 可以获取 UIImage 对象; ② 设置按钮的背景图片属性 [button setBackgroundImage:image forState:UIControlStateNormal]; ;
• 4.将按钮添加到布局中 : 使用 父控件的 addSubView 方法即可, [self.mainView addSubview:button]; ;
• 5.为按钮添加点击事件 : 调用 UIButton 的 addTarget 方法为按钮添加点击事件, [button addTarget:self action:@selector(generateButtonThing) forControlEvents:UIControlEventTouchUpInside];, 其中 action 参数设置点击事件名称, forControlEvents 参数设置绑定的按钮事件;
• 6.代码生成按钮的代码内容 :

//生成一个按钮并绑定事件
- (IBAction)generateButton:(UIButton *)sender {
    
    //1.创建 UIButton 按钮, 创建按钮时需要制定按钮的 Type 类型, 一般情况下使用 Custom 类型, 并设置图片的 frame 属性
    UIButton * button = [UIButton buttonWithType:UIButtonTypeCustom];
    [button setFrame:CGRectMake(0, 0, 100, 100)];
    
    //2.设置按钮的文字内容 与 文字样式
    [button setTitle:@"普通状态" forState:UIControlStateNormal];
    [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [button setTitle:@"按下状态" forState:UIControlStateHighlighted];
    [button setTitleColor:[UIColor redColor] forState:UIControlStateHighlighted];
    
    //3. 设置普通状态的背景图片, 如果图片后缀是 png 或 jpg 格式, 可以只写图片名称
    UIImage * image = [UIImage imageNamed:@"bg.png"];
    [button setBackgroundImage:image forState:UIControlStateNormal];
    
    //4. 将按钮添加到 mainView 中
    [self.mainView addSubview:button];
    
    //5. 为按钮添加点击事件
    [button addTarget:self action:@selector(generateButtonThing) forControlEvents:UIControlEventTouchUpInside];
    
}

- (void) generateButtonThing{
    NSLog(@"generateButtonThing");
}

( 8 ) 本模块的完整代码

完整代码 :

//
//  ViewController.m
//  4.UIViewColor
//
//  Created by octopus on 18/6/11.
//  Copyright © 2018年 han. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@property (weak, nonatomic) IBOutlet UIView *mainView;

@end

@implementation ViewController

//修改 按钮牛所在的 父控件 View 控件颜色
- (IBAction)changeColor:(UIButton *)sender {
    //1. 获取按钮的父控件
    UIView * superView = sender.superview;
    //2. 修改父控件颜色
    superView.backgroundColor = [UIColor blueColor];
}


- (IBAction)changeRandomColor:(UIButton *)sender {
    //1. 获取按钮的父控件
    UIView * superView = sender.superview;
    //2. 获取一个随机颜色
    //   colorWithRed:green:blue:alpha 方法传入的参数取值范围 0 ~ 1 的浮点数
    //   获取 0 ~ 1 之间的随机数, arc4random_uniform(255) 是 C 语言方法, 获取 0 ~ 254 随机值
    //   注意 : 除数要是 float 类型 255.0, 否则两个整型相除会按照整型计算
    float randomRed = arc4random_uniform(255) / 255.0;
    float randomGreen = arc4random_uniform(255) / 255.0;
    float randomBlue = arc4random_uniform(255) / 255.0;
    UIColor * randomColor = [UIColor colorWithRed:randomRed green:randomGreen blue:randomBlue alpha:1];
    
    //3. 修改父控件颜色
    superView.backgroundColor = randomColor;
}

- (IBAction)generateView:(UIButton *)sender {
    
    //1. 创建 UIView 对象
    UIView * generateView = [[UIView alloc] init];
    
    //2. 设置 UIView 对像的 颜色值 和 位置大小属性
    generateView.backgroundColor = [UIColor blueColor];
    generateView.frame = CGRectMake(0, 0, 100, 100);
    
    //3.添加到 mainView 中
    [self.mainView addSubview:generateView];
    
}

- (IBAction)generateMovingView:(UIButton *)sender {
    
    //1. 创建 UIView 并设置尺寸
    UIView * generateView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
    
    //2. 设置 UIView 背景颜色
    generateView.backgroundColor = [UIColor greenColor];
    
    //3. 将创建的 UIView 添加到 mainView 中去;
    [self.mainView addSubview:generateView];
    
    //4. 获取 frame 属性, 并修改其位置, 向右移动 100 像素
    CGRect frame = generateView.frame;
    frame.origin.x = 100;
    
    //5. 头尾式动画, 开始动画, 并设置动画的属性, 很少使用
    /*
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:2];
    [UIView setAnimationDelay:1];
    generateView.frame = frame;
    [UIView commitAnimations];
     */
    
    //5. Block 动画, 常用
    [UIView animateWithDuration:2 animations:^{
        generateView.frame = frame;
    }];
    
}

//生成一个按钮并绑定事件
- (IBAction)generateButton:(UIButton *)sender {
    
    //1.创建 UIButton 按钮, 创建按钮时需要制定按钮的 Type 类型, 一般情况下使用 Custom 类型, 并设置图片的 frame 属性
    UIButton * button = [UIButton buttonWithType:UIButtonTypeCustom];
    [button setFrame:CGRectMake(0, 0, 100, 100)];
    
    //2.设置按钮的文字内容 与 文字样式
    [button setTitle:@"普通状态" forState:UIControlStateNormal];
    [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [button setTitle:@"按下状态" forState:UIControlStateHighlighted];
    [button setTitleColor:[UIColor redColor] forState:UIControlStateHighlighted];
    
    //3. 设置普通状态的背景图片, 如果图片后缀是 png 或 jpg 格式, 可以只写图片名称
    UIImage * image = [UIImage imageNamed:@"bg.png"];
    [button setBackgroundImage:image forState:UIControlStateNormal];
    
    //4. 将按钮添加到 mainView 中
    [self.mainView addSubview:button];
    
    //5. 为按钮添加点击事件
    [button addTarget:self action:@selector(generateButtonThing) forControlEvents:UIControlEventTouchUpInside];
    
}

- (void) generateButtonThing{
    NSLog(@"generateButtonThing");
}



@end

( 9 ) 示例演示

效果演示 :

博客相关资源地址 :

• 1.代码下载 : 点击下载