【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记15 storyboard中的绘图 MVC模式

简介: 上一话中我们实现了对一个小人表情的绘制,但是我们需要修改代码才能实现表情的变换,而且我们也没有一个明确地模型,这很明显不符合MVC的要求,这一话中我们将要修改它已符合MVC的要求。

上一话中我们实现了对一个小人表情的绘制,但是我们需要修改代码才能实现表情的变换,而且我们也没有一个明确地模型,这很明显不符合MVC的要求,这一话中我们将要修改它已符合MVC的要求。

在上一话中我们已经完成了faceView的代码,但是HappinessViewController中完全是空的,我们要修复我们的Model,但是在那之前要介绍一些storyboard中很酷的功能。打开你工程中的storyboard,你会看到视图中是空白一片。


但实际你的小人脸已经被绘制好了,我想要在storyboard中就能看到这个小人脸,那么我该怎么办呢,返回到FaceView的代码中,在类的定义前面增加代码@IBDesignable:

import UIKit
@IBDesignable
class FaceView: UIView {
很神奇,当你再回到storyboard中的时候你会发现小人脸已经出现在场景中了,xcode会自动识别那是一个IBDesignable类。


现在我们可以更方便地看到FaceView发生了什么,因为它会被绘制到storyboard中,你修改代码中小人脸的情绪,它就会被重新绘制到storyboard中去。这样的操作仍然有些繁琐,因为你需要切换到代码中去做修改,实际上我们可以在storyboard中修改FaceView的参数。回到代码中,在一些可以编辑的数值前面增加一个xcode的组件代码:

 @IBInspectable
    var lineWidth:CGFloat = 3 {didSet{setNeedsDisplay()}}
    @IBInspectable
    var color:UIColor = UIColor.blueColor(){didSet{ setNeedsDisplay()}}
    @IBInspectable
    var scal:CGFloat  = 0.90{didSet{ setNeedsDisplay()}}

你会发现在storyboard中的属性编辑器最顶部出现了:


在storyboard中属性编辑器中修改这三个选项后可以看到:


这些参数不仅仅在你的storyboard中被修改了,实际上它们被设置为了默认值,当你运行的时候看到的也是相同的图案。现在万事俱备了我们该讨论一下我们的MVC了。

在Happiness中新建一个模型:

   var happiness:Int = 50 {//0代表伤心,100代表开心
    
    }

这个模型是个Int类型的,不要跟FaceView中的smilieness搞混,smiliness搞混,这个是模型而smiliness只是一个数值表示嘴角上扬的弧度而已,取值范围也不同。但是这没关系,因为控制器所做的其中一项工作就是向视图解释模型,所以我们需要增加一些代码去完成这个操作,使得模型的0和100可以分别被表现成一个哭脸和笑脸。我们需要控制一下Happiness的数值范围。

import UIKit

class HappinessViewController: UIViewController {
    var happiness:Int = 50 {//0代表伤心,100代表开心
        didSet{
            happiness = max(min(happiness, 100), 0)
            println("happiness = \(happiness)")
            updateUI()
        }
    }
    func updateUI(){
    
    }
}

这里的Happiness是一个最简单的模型,在模型改变的时候我们需要更新我们的视图,这里的updateUI方法还没有加入代码,而且我们的模型也并没有跟视图连接起来,无论你现在把Happiness的值修改为什么它都不会改变小人的表情,这些操作我会在之后讲到。这一话的重点是理解MVC。
目录
相关文章
|
设计模式 存储 前端开发
MVVM、MVC、MVP三种常见软件架构设计模式的区别
MVC、MVP 和 MVVM 是三种常见的软件架构设计模式,主要通过分离关注点的方式来组织代码结构,优化开发效率。
1786 12
|
前端开发 数据安全/隐私保护
什么是mvvm,mvp、mvc和mvvm模式有什么区别?
什么是mvvm,mvp、mvc和mvvm模式有什么区别?
618 0
|
设计模式 存储 前端开发
MVC(Model-View-Controller)是一种软件设计模式,用于将应用程序的输入逻辑、业务逻辑和用户界面逻辑分离
【6月更文挑战第17天】**MVC模式**是软件设计模式,用于分离输入逻辑、业务逻辑和用户界面。模型处理数据和业务,视图展示数据,控制器协调两者响应用户请求。优点包括:关注点分离、提高开发效率、简化测试、支持多视图及便于大型项目管理。
451 3
|
设计模式 存储 前端开发
MVC(模型-视图-控制器)是一种在Web应用程序开发中广泛使用的软件设计模式
【5月更文挑战第12天】MVC模式是Web应用开发中的常见设计模式,将逻辑、数据和界面分离,提升代码可维护性和重用性。模型处理数据逻辑,视图展示数据,控制器协调用户输入与模型视图交互。优点包括代码分离、易维护、可扩展和组件重用,促进高效灵活的开发。
404 2
|
存储 前端开发 测试技术
MVC、MVP、MVVM 模式
MVC、MVP 和 MVVM 是三种常见的软件架构模式,用于分离用户界面和业务逻辑。MVC(Model-View-Controller)通过模型、视图和控制器分离数据、界面和控制逻辑;MVP(Model-View-Presenter)将控制逻辑移到 Presenter 中,减少视图的负担;MVVM(Model-View-ViewModel)通过数据绑定机制进一步解耦视图和模型,提高代码的可维护性和测试性。
|
设计模式 开发框架 前端开发
MVC 模式在 C# 中的应用
MVC(Model-View-Controller)模式是广泛应用于Web应用程序开发的设计模式,将应用分为模型(存储数据及逻辑)、视图(展示数据给用户)和控制器(处理用户输入并控制模型与视图交互)三部分,有助于管理复杂应用并提高代码可读性和维护性。在C#中,ASP.NET MVC框架常用于构建基于MVC模式的Web应用,通过定义模型、控制器和视图,实现结构清晰且易维护的应用程序。
409 2
|
前端开发 测试技术 开发者
MVC模式在现代Web开发中有哪些优势和局限性?
MVC模式在现代Web开发中有哪些优势和局限性?
|
前端开发 Java
【案例+源码】详解MVC框架模式及其应用
【案例+源码】详解MVC框架模式及其应用
1395 0
|
存储 前端开发 数据库
MVC模式和三层架构
MVC模式和三层架构
|
设计模式 前端开发 PHP
PHP中实现简易的MVC模式
【8月更文挑战第31天】 本文将引导你了解如何在PHP中应用MVC(Model-View-Controller)架构模式,通过一个简单的例子展示其实现过程。我们将从基础的概念出发,逐步深入到代码实践,最终让你能够自己动手构建一个简易的MVC框架。文章不仅提供理论知识,还包含具体的代码示例,帮助你更好地理解并运用MVC模式。