设计师应该了解的iOS应用开发基础知识

设计师应该了解的IOS应用开发基础知识1201307031048佚名COCOACHINA我要评论0字号T|T本文的目的就是帮助各位设计师在最短的时间内，以实战的方式探索IOS应用开发工具及相关的基础知识。希望文章内容对大家有所帮助。AD2013大数据全球技术峰会课程PPT下载作为一名交互或视觉设计师，你希望顺应当前大环境的发展趋势，向移动领域拓展自己的视野和能力，于是决定挽起袖子学习IOS应用开发。兴奋之余，你开始做一些初步的研究，但是很快发现，除非自己有足够丰富的编程经验，否则要实现目标还真不是件易事。确实是这样。苹果提供的开发文档主要是面向技术人员的，市面上多数IOS开发书籍都会一上来就问你是否掌握了足够的OBJECTIVEC知识，而网上各种教程的质量又参差不齐，其中有不少还是面向着很旧版本的IOS系统及开发工具的。本文的目的就是帮助各位设计师在最短的时间内，以实战的方式探索IOS应用开发工具及相关的基础知识。我们将一同了解应用开发流程中的一些重要环节，包括理论讲解及方法演示，即使你没什么编程经验也没问题。我们的实战案例是一款非常简单的、用来展示设计作品的应用，如下图所示本地原生开发方式所谓“本地”，即是指通过苹果原生的开发工具SDK及OBJECTIVEC语言开发IPHONE和IPAD应用的方式。在我们对这套方法进行探索之前，最好稍微花点时间了解一下还有哪些替代方案，以及我们之所以选择原生开发方式的原因。也许很多人已经听说过WEBAPP及“混合型应用”这样的说法，这些就是所谓的“替代方案”。我们确实可以使用基于HTML5、CSS、JAVASCRIPT的WEB前端开发技术打造应用，这其中最为常见的解决方案包括TITANIUMMOBILE、PHONEGAP、JQUERYMOBILE以及SENCHATOUCH等框架。通过这种方式开发的应用通常具有很好的跨平台特性。不过，通过这种非原生方式开发的应用有着明显的弊端。基于浏览器WEBAPP或“原生应用壳”混合型应用的运作方式使它们的效率无法与本地应用媲美，而且对硬件功能的访问及利用能力也是非常有限的。此外，代码框架本身也是需要学习的，它们有着各自不同的使用方式，在框架之外还有各种扩展库需要摸索。另外，框架本身的质量和成熟程度也是必须考虑的因素。还有其他一些第三方开发方案可以考虑，例如COCOS2DFORIPHONE和PUGPIG。这类方案允许你将框架文件与OBJECTIVEC对象建立关联，以达到特定的目标，例如创建游戏或杂志类应用等。要使用这类技术，你最好也要对苹果本地开发工具包具有基本程度的了解。准备工作正式起步前的准备工作包括两方面硬件一台运行着最新或新近版本OSX系统的MAC机，包括MACBOOKPRO/AIR、MACMINI、IMAC或是MACPRO均可。软件苹果的XCODE应用。XCODE可以从MAC应用商店MACAPPSTORE或是苹果的开发者站点中免费下载到，大约15GB的样子。图片资源在等待XCODE下载完成的过程中，我们可以同步开始图片方面的工作。由于要为普通屏幕320480和RETINA屏幕640960各自准备一套图像资源最新的IPHONE5规格为6401136，我们应该在PHOTOSHOP中尽量多的使用矢量图形VECTORSHAPE、图层样式LAYERSTYLE以及智能对象SMARTOBJECT等技术，以确保图像的无损缩放。比较合理的流程是从RETINA版本入手进行构建，然后等比缩放到普通版本的规格。在缩放过程中，一些元素的细节有可能发生变形，记得做好手动调整。另外，我们还可以在网上找到很多原生风格的IPHONE界面PSD模板，其中比较著名的一款是来自TEEHAN和LAX的IPHONE4GUIPSD。如果要打造的应用在界面方面以IOS原生风格为主，那么这类模板可以帮助我们节省掉很多时间。即使你更倾向于定制化的用户界面，这些模板同样可以在控件规格、布局规则等方面提供精确的参考。相关阅读先了解规则，再寻求创新关于IOS应用界面自定义在PHOTOSHOP或是你更习惯的图像编辑工具中创建一个新文档，规格如下尺寸640960PIXELSDPI72色彩模式RGB由于本文的焦点主要将集中在开发的基础知识上，所以在视觉设计方面不做深入探讨。更多关于IOS界面设计技术及流程方面的信息，可以参考MARCEDWARDS的DESIGNINGFORIPHONE4RETINADISPLAY一文。关于图片导出的小贴士虽然你可以在应用中使用多种格式的图片，不过鉴于ALPHA通道及无损压缩等方面的考虑，我们最为推荐的仍是PNG格式。多数情况下，要将按钮导出为不包含文案的背景图片，以便更加灵活的在开发环境中调整文字属性，或是对多语种进行支持。对于按钮的背景图片，要确保实际按钮的部分不包括阴影或外发光等效果的区域处于背景图片的正中，因为我们在XCODE的INTERFACEBUILDER当中很难对背景图片及前景文字之间的位置关系进行精密的调整。很多时候，我们需要在制作背景图片的过程中，在按钮的另外一侧添加一块空白的区域，以弥补阴影效果所占据的空间，确保按钮自身处于正中央。在设计方案允许的情况下，尽可能将那些在视觉上叠加在一起的元素直接保存在一张背景图片当中，而不要留到开发环节里再进行层叠处理，否则成本将会变的很高。另外，这样做也有助于减少资源文件的数量，提高应用运行的效率，减少内存占用。只有那些需要对用户行为进行交互响应的界面元素需要独立的背景图片或是动画效果。在所有适用于RETINA屏的图片文件名中增加特殊的后缀“2X”作为标示，使系统能够进行识别IMAGEPNG适用于普通屏幕。IMAGE2XPNG适用于RETINA屏幕。可以尝试使用SUPERSLICR这样的自动化批处理脚本对PSD中的UI元素进行格式化及导出。所有的资源文件都会保存在APP包APPBUNDLE的同一个路径当中，所以文件名不能有重复的情况。PHOTOSHOP不大擅长对PNG图片进行压缩。可以试着使用IMAGEOPTIM这样的工具减小图片尺寸，然后再导入到XCODE当中。另外，XCODE本身也会对导入过来的图片进行一定程度的压缩，不过有时反而会增加图片的尺寸。XCODE概览XCODE已经安装好了接下来我们去下载一套用于本次案例学习的模板文件，其中包括一些PSD、PNG资源，还有一些用来起步的代码文件。进入里面的BEGINHERE文件夹，找到PORTFOLIOXCODEPROJ文件，双击打开。文件加载成功之后，点击左侧导航栏NAVIGATOR中的项目PORTFOLIO,1TARGET,IOSSDK，这时我们就可以在编辑区中看到这个项目的概况信息了，如下图所示。关于这些概况信息的用处，我们稍后解释。点击左侧导航栏当中项目名称旁边的箭头，我们可以看到一个资源列表，里面包含了当前项目所涉及到的所有资源文件，例如代码和图片等。我们把注意力放在PORTFOLIO路径当中，其中有三个类型的文件H文件头文件HEADER，也可称为INTERFACE文件。M文件消息文件MESSAGE，也可称为IMPLEMENTATION文件。XIB文件在INTERFACEBUILDER中进行界面可视化编辑的XML文件，出于历史原因，通常也被称为NIB文件。中间编辑区EDITOR所呈现的内容会根据当前正在执行的任务而发生变化。当我们像之前那样点击了导航栏中的项目名称时，这里展示的就是目标概况TARGETSUMMARY，其中包括当前应用的一些基本信息，例如设备类型、IOS版本、屏幕定向方案等等。此外，应用的图标及加载图片也是在这里进行设置的；我们将会在后文中进行演示。在导航栏中单击PORTFOLIO路径中的APPDELEGATEM文件，编辑区就会相应的进入代码编辑状态。接下来单击PORTFOLIO路径中的MAINWINDOWXIB文件，这时编辑区所呈现的就是用于编辑用户界面的INTERFACEBUILDER，如下图所示。我们通常会在这里对应用界面做最基本的构建。右侧的检查器INSPECTOR当中共有6组工具，其中后面4组是开发工作当中最常用的，从右到左依次为连接检查器CONNECTIONINSPECTOR、规格检查器SIZEINSPECTOR、属性检查器ATTRIBUTESINSPECTOR、识别检查器IDENTITYINSPECTOR。另外一个最常用的操作莫过于XCODE左上角的“运行RUN”按钮了。这个操作会将项目代码编译成为应用，并在IOS设备模拟器中运行，以便我们直接查看程序的工作情况，而不必每次都部署到实际设备中。不妨现在就点击“运行”按钮或使用快捷键COMMANDR，来看看我们的模板项目打包成应用之后的样子什么也没有。IPHONE模拟器的工作机制与实际设备差不多，HOME按键是可以点击的，其他的一些内置应用也都是可以正常工作的，包括SAFARI、照片、联系人、GAMECENTER、最新的PASSBOOK等等，有兴趣的话可以玩玩看。另外，我们还可以在“STOP”按钮右侧的下拉列表中选择IPAD作为模拟设备。更多关于XCODE的使用方法，可以参考苹果官方的“XCODE4USERGUIDE”。别走开，下页继续将图片导入XCODE我们下载的模板包当中是包括图片文件的，不过项目默认是不会将这些资源文件加载进来的，我们必须手动导入。方法有两种你可以在左侧导航栏当中CONTROL单击IMAGES文件夹，选择“ADDFILESTOPORTFOLIO”，然后找到模板包当中PNGS路径下的全部文件，执行添加ADD；或者也可以首先在FINDER中找到这些文件，然后全部拖到XCODE导航栏的IMAGES文件夹中。如果采用第二种方式，在执行导入的时候，XCODE会提供一些操作选项，记得勾选其中的“COPYITEMSINTODESTINATIONGROUPSFOLDER”，确保资源文件最终会被打包到应用项目当中。应用界面的可视化编辑IOS开发的圈子当中始终存在一个争论是完全通过代码的方式创建应用更好，还是使用INTERFACEBUILDER更加直观的构建界面来的更好些。两种方式都是可行的，而且它们在本质上可以说是互补而不是矛盾的关系，具体的开发策略还是由实际项目的特点所决定。倾向于纯代码方式的开发者们也许真的忽视了可视化编辑工具在界面创建过程中所体现出的高效与直观。对于我们这些习惯了ADOBE系列工具的设计师来说，可视化编辑的方式无疑是最好的切入点；而且我们的案例是很典型的基于视图VIEW的应用，在这里使用INTERFACEBUILDER进行界面构建也是最合理的。首先，我们来看看怎样创建一些可以通过标签栏TABBAR进行切换的界面，或者说视图VIEW。在XCODE左侧的导航栏中点击MAINWINDOWXIB，进入INTERFACEBUILDER编辑模式。在右下角的库LIBRARY中选择“SHOWTHEOBJECTLIBRARY”图标看上去像个立方体的那个，在下面的列表中找到“VIEWCONTROLLER”。拖拽一个VIEWCONTROLLER对象到编辑区左侧的文档结构列表DOCUMENTOUTLINE当中，并在“TABBARCONTROLLER“上面放开。此时后者会展开，一个VIEWCONTROLLER嵌套在里面。重复执行两次这样的操作，使TABBARCONTROLLER当中包含3个VIEWCONTROLLER，此时我们也可以在编辑区当中看到，默认的VIEWCONTROLLER的标签栏里已经有了3个未命名的TAB，如下图所示什么是VIEWCONTROLLERVIEW视图和CONTROLLER控制器都是MVC开发模式MODELVIEWCONTROLLER的组成部分。这种开发模式旨在将程序的数据、业务逻辑与表现进行分离类似前端的“内容、样式、行为分离”。其中“MODEL“包括数据和算法等方面，“VIEW”涉及软件的人机交互界面，而“CONTROLLER”负责将这两者衔接起来，对用户行为进行处理；而VIEWCONTROLLER即是指专门负责某个特定VIEW的CONTROLLER。创建类CLASS我们需要创建一些“类”来生成视图。在OBJECTIVEC这样的面向对象编程语言当中，“类”用来定义对象OBJECT所共有的属性与方法。通过“类”，我们可以实例化出更多的同类对象。在我们的案例当中，每个视图都是一个对象，它们有各自的内容与行为特征。所以我们需要创建3个不同的类，以便对每个视图的属性和方法进行定义。这些类所扮演的就是VIEWCONTROLLER的角色。要创建新的类，使用快捷键COMMANDN，在左侧的列表中选择“COCOATOUCH”中的“OBJECTIVECCLASS”，如下图所示点击“NEXT”，在“CLASS”文本框中将这个类命名为“HOMEVIEWCONTROLLER”，在下面的“SUBCLASSOF”列表中选择“UIVIEWCONTROLLER”，并勾选“WITHXIBFORUSERINTERFACE”。继续点击“NEXT”，在接下来的对话窗中，将类文件的保存路径设置为“BEGINHEREPORTFOLIO”，点击“CREATE”。以相同的方法再创建两个类，分别命名为“PORTFOLIOVIEWCONTROLLER”和“CONTACTVIEWCONTROLLER”。之后，你可以手动在导航栏中对文件进行拖放排序，使它们看上去更符合逻辑为TAB与视图建立关联回到MAINWINDOWXIB当中，在文档结构列表里选中我们之前添加的第一个VIEWCONTROLLER，在右侧的识别检查器IDENTITYINSPECTOR中，展开“CLASS”下拉列表，选择其中的“HOMEVIEWCONTROLLER”。接下来切换到属性检查器ATTRIBUTESINSPECTOR，在“TITLE”中输入“HOME”，并在“NIBNAME”中选择“HOMEVIEWCONTROLLER”。在文档结构列表中展开这个VIEWCONTROLLER，选中其中的“TABBARITEM”，然后到属性检查器当中将“TITLE”设置为“HOME”，并在“IMAGE”下拉列表中选择我们之前导入的图片文件之一，TABICONHOMEPNG，这里你并不需要特别为RETINA屏幕指定带有2X后缀的文件，应用会在运行的时候自动识别。以同样的方法对另外两个VIEWCONTROLLER进行操作，将它们分别与“PORTFOLIOVIEWCONTROLLER”、“CONTACTVIEWCONTROLLER”建立关联、挂上NIB文件，并为它们各自的TABBARITEM设置相应的TITLEPORTFOLIO、CONTACT与图标TABICONPORTFOLIOPNG、TABICONCONTACTPNG。TAB在高亮状态时的颜色也是可以定义的。在文档结构列表中选中“TABBAR”对象，然后在右侧的属性检查器中找到“IMAGETINT”，在其中设置我们所需要的配色方案。不过这里所做的设置只有在IOS5以上的系统中才会有效，对于IOS4以及更低版本的系统来说，高亮状态仍然时默认的蓝色。我们已经为TAB与视图建立了关联，要检视它们能否正常工作，我们还需要在每个视图当中添加一些范例内容。在XCODE左侧的导航栏中选择HOMEVIEWCONTROLLERXIB，然后从右侧的对象库中拖拽一个LABEL控件到编辑区当中的空白VIEW上面。双击该控件，将文案更改为“HOME”。在PORTFOLIOVIEWCONTROLLERXIB与CONTACTVIEWCONTROLLERXIB当中也执行同样的操作，LABEL的文案相应的更改为“PORTFOLIO”和“CONTACT”。现在点击“RUN”按钮，或使用快捷键COMMANDR来运行一下叭。我们可以在IPHONE模拟器中看到，应用的标签栏已经可以正常的切换界面了。不赖别走开，下页继续向视图中添加图片和文字要通过INTERFACEBUILDER向视图当中添加图片和文字，我们首先需要创建一些对应着不同类型内容的“容器”，也就是“IMAGEVIEW”与“TEXTVIEW”。与添加VIEWCONTROLLER的方式相同，我们也需要将这两类VIEW从右侧的对象库当中拖拽出来放到界面当中。我们还可以在规格检查器SIZEINSPECTOR中对这些容器进行精准的定制，包括布局位置、尺寸等。而在属性检查器ATTRIBUTESINSPECTOR中，我们可以为图片容器指定其中所要显示的图片，也可以控制文字容器的各种属性。接下来我们要向HOMEVIEWCONTROLLERXIB当中添加图片。首先删除之前的LABEL控件，从库中拖拽一个IMAGEVIEW到界面当中，在属性检查器当中的“IMAGE”下拉列表里选择“HOMEBGPNG”，然后将“MODE”设置为“TOPLEFT”。到规格检查器SIZEINSPECTOR中，确保其中的4个属性值分别为“0”、“20”、“320”、“480”，如下图所示接下来，拖拽一个TEXTVIEW到界面中，双击编辑其中的文案，例如更改为“ACATCHYSLOGANHERE”，在属性检查器中设置为居中对齐，将字色设置为白色，并禁用背景色，然后将FONT类型更改为“CUSTOM”，将其他属性设置为“SNELLROUNDHAND,REGULAR,24”。现在我们的HOMEVIEWCONTROLLERXIB看上去大致是这样的因为这三个界面都是被放置在TABBARCONTROLLER体系当中的，也就是说我们在设计这些单独界面的时候必须考虑到底部标签栏的占位。XCODE可以帮助我们在界面当中模拟这类全局元素的占位情况。确保在XCODE左侧的导航栏里选中HOMEVIEWCONTROLLERXIB文件，在文档结构列表中选择“VIEW”对象，然后在右侧的属性检查器ATTRIBUTESINSPECTOR中找到最上面的“SIMULATEMETRICS”一栏，在“BOTTOMBAR”中选择“TABBAR”，如下图所示这个功能并不会向实际应用里又添加一个标签栏，它只是为我们提供一个可视化的设计指引，帮助我们对界面元素进行更精准的定位。接下来，我们可以向PORTFOLIO及CONTACT界面中添加图片和文字内容了。具体的样式可以参考本文开始时的目标演示图片，或参考模板包当中提供的PSD文件。在PORTFOLIO界面当中创建案例缩略图，以及在CONTACT界面中创建联系方式按钮时，我们需要使用对象库中的ROUNDRECTBUTTON控件，而不是之前那样使用IMAGEVIEW；因为这些地方都是需要响应用户的操作并由此触发相关行为的，按钮类的控件可以帮我们实现这个目标。将ROUNDRECTBUTTON拖拽到界面内，到右侧的属性检查器当中，将按钮类型TYPE设置为“CUSTOM”，然后就可以通过下面的“IMAGE”属性为其设置具体的背景图片了；如果需要的话，还可以进入规格检查器SIZEINSPECTOR当中对按钮的尺寸进行设置，使其符合按钮图片的大小。3个界面都打造完毕后，点击“RUN”按钮或使用快捷键COMMANDR来运行应用，通过IPHONE模拟器来检视当前的工作成果。其他技巧在IPHONE模拟器中点击HOME按键回到首屏，你会发现我们的APP图标只是一个干巴巴的白板，在应用被打开的时候也没有任何额外的加载图像。回到XCODE中，点击导航栏中的PORTFOLIO项目图标，此时内容区会呈现出应用的信息概况。在其中找到“APPICONS”和“LAUNCHIMAGES”，这里就是我们为应用添加图标和加载图像的地方了。设置的方法很简单，在FINDER里面找到模板包APPICONS路径下的相关图片文件，直接拖拽到那4个空位当中就OK了。如果要自己制作应用图标，在尺寸方面要符合以下规格以像素计标准5757RETINA114114加载图像的尺寸则与屏幕一致标准480320RETINA960640除了在IPHONE当中显示以外，应用图标的使用环境还有很多，例如两种规格的IPAD、系统设置SETTINGS、SPOTLIGHT搜索结果、ITUNES等等。这篇文章很详细的给出了这些上下文环境中所需的图标规格，另外也可以参考IOSHUMANINTERFACEGUIDELINES对于图标规格及使用方法的说明。值得一提的是，IOS会自动为你的图标添加圆角和高光，所以在制作的时候你并不需要自己处理这些效果。如果不希望系统为图标添加高光效果，可以在之前设置图标的地方勾选“PRERENDERED”。下图演示的是勾选“PRERENDERED”前后的效果对比要改变图标下面显示的应用名称，点击应用概况中的“INFO”选项卡，这里所呈现的就是应用的PLIST文件当中的内容。PLIST是一个XML文件，里面包含了应用的主要设置信息其中的一些信息，例如“MAINNIBFILEBASENAME”，所指向的是应用在第一次打开时需要加载的资源文件。其他信息，例如“BUNDLEIDENTIFIER”，则与通过ITUNESCONNECT向APPSTORE提交应用时的相关环节有关。在这些信息中找到“BUNDLEDISPLAYNAME”一项，将右侧的“PRODUCT_NAME”修改为你想要的名称即可。辅助编辑器ASSISTANDEDITOR到目前为止，我们的自定义按钮是可以对点击动作作出响应的，不过也仅此而已，它们还不会做任何其他事情。为了使它们能够工作起来，我们需要借助辅助编辑器的帮助来写一些代码。在XCODE左侧的导航栏当中选择CONTACTVIEWCONTROLLERXIB，然后到XCODE界面的右上角找到辅助编辑器按钮，选中它在这种模式下，编辑界面会被分割为两部分，其中左侧是CONTACTVIEWCONTROLLERXIB的可视化编辑界面，右侧是与其对应的头文件，即CONTACTVIEWCONTROLLERH。我们可以在下图中看到，文档结构列表和右侧边栏已经被收起了，以便为两个编辑视图提供更多的空间。你可以到XCODE菜单中的“VIEW”一项中找到相关的切换操作。另外你大概也发现了，图中代码编辑区的样式风格与你的有所不同，这是因为我英文原文作者使用了“DUSK”主题；你可以在XCODEPREFERENCES的“FONTSANDCOLORS”更改代码编辑区的主题。别走开，下页继续声明属性PROPERTY与方法METHOD一个“类”通常包含特定的“属性”和“方法”。我们可以将“属性”理解为“类”所拥有的特性特征，而“方法”则是指“类”能做些什么。当我们向CONTACTVIEWCONTROLLER中添加按钮时，我们需要将这个按钮声明为CONTACTVIEWCONTROLLER类的属性，并通过“方法”告诉按钮在被点击时应该做怎样的反应。在CONTACTVIEWCONTROLLERH文件中，我们可以看到如下代码其中，第一行代码的作用是让我们的类可以访问UIKIT框架当中的各种预置的UI类。接下来一行INTERFACE的作用是将CONTACTVIEWCONTROLLER声明为UIVIEWCONTROLLER的一个子类。UIVIEWCONTROLLER是在UIKIT库中预先定义的，它的子类可以继承它的所有特性包括属性和方法。我们可以在INTERFACE与END之间声明各种自定义的属性和方法。按住CONTROL键，从CONTACTVIEWCONTROLLERXIB里的“WWW”按钮上拖出一条导线，一直拉到H文件的代码中INTERFACE与END之间的部分，释放。这时会出现一个对话窗确保“CONNECTION”当中所选的是“OUTLET”，并在“NAME”里输入“WEBSITEBUTTON”，点击“CONNECT”，XCODE会自动生成一段代码。接下来再执行一次相同的拖放操作，这次，在对话窗中为“CONNECTION”选择“ACTION”，并在“NAME”中输入“OPENWEBSITE”，点击“CONNECT”，XCODE同样会自动生成一段代码。到目前为止CONTACTVIEWCONTROLLERH中的代码看上去应该是这样的还不赖，不过这些代码都是什么意思PROPERTY用来声明一个新的属性，括号中是两个参数，其中“RETAIN”涉及内存管理，我们将在后文中讲到；而“NONATOMIC”则与多线程管理相关，多数的属性都要声明为NONATOMIC，禁用多线程。接下来是关于返回类型的声明，其中“IBOUTLET”代表这个属性是绑定于用户界面中某个特定的控件的；“UIBUTTONWEBSITEBUTTON”的作用是将当前属性命名为“WEBSITEBUTTON”，并使其继承UIKIT中定义的UIBUTTON类。接下来一行代码用来声明新的方法。其中的“IBACTION”同样用来将方法与XIB文件中的界面控件绑定起来。“OPENWEBSITE”是这个方法的名称，冒号后面的“IDSENDER”是参数，用来传递产生动作的对象信息，不过我们现在用不到它。也许你已经注意到了，我们在创建VIEWCONTROLLER类的时候，名称都是以大写字母开头的，但属性和方法的名称却不是这样。这是面向对象编程语言的一种公约，即“类的命名以大写字母开头，属性变量和方法函数的命名以小写字母开头”。我们之前演示的“拖动自动生成代码”的方法是很方便的。我们当然也可以自己手动编码，只是使用辅助编辑器会更加快捷一些。属性合成SYNTHESIS与内存管理现在，我们将编辑器切换回标准模式STANDARDEDITOR，弹击选中CONTACTVIEWCONTROLLERM，在大约12行的地方，你可以看到系统帮我们自动生成的代码这会告诉编译器在构建应用的时候为属性生成设置器SETTER与访问器GETTER，我们不需要手动编写代码就可以使程序具有访问和设置属性值的能力。再下面，找到这两行代码觉得眼熟之前在CONTACTVIEWCONTROLLERH当中，系统确实自动生成了类似的代码，不过在H文件中的代码只是一种“声明”，真正编写方法函数还是要在M文件中进行。具体来说，我们需要将按钮的反映行为编写到这里。你还可以在M文件中找到类似下面这样的代码这段代码与内存管理有关。内存管理对于移动应用编程来说是非常重要的，因为移动设备在内存方面的资源确实很有限。当WEBSITEBUTTON属性被定义时，通过“RETAIN”参数，系统会将一部分内存分配给这个属性。“RETAIN”的具体作用是告诉系统分配出一定的内存，并且在我们进一步下达命令之前不要将这部分内存收回。而“DEALLOC”方法只会在当前VIEW的实例被销毁时执行，所以在这个方法中添加“WEBSITEBUTTONRELEASE”就相当于告诉系统“你可以在这里收回这部分内存资源了，我们不再需要它了”。如果没有这行代码，那么即使界面已经切换、WEBSITEBUTTON不再存在，这部分内存依然在被占用；这种情况就叫做“内存泄漏MEMORYLEAK”。如果在开发过程中不做相关处理，那么这种情况就会逐渐累加起来，导致程序运行效率低下甚至崩溃，或是造成系统电量损耗等其他不良后果。幸运的是，对应着IOS5以上版本的SDK当中增加了ARC机制AUTOMATICREFERENCECOUNTING，它可以帮助我们进行自动化的内存管理。在创建新项目的时候，你可以选择是否启用ARC。在当前案例中，我们并没有用到它，因为我们要在这里对相关知识进行简要的介绍。代码绑定之前使用辅助编辑器为按钮自动创建属性和方法的时候，系统不仅帮我们生成了相关的代码，而且还对按钮控件与相关代码进行了绑定。选择CONTACTVIEWCONTROLLERXIB，展开文档结构列表，在“PLACEHOLDERS”下，选择“FILESOWNER”，它所代表的就是整个CONTACTVIEWCONTROLLER类。现在到XCODE右侧，打开连接检查器CONNECTIONSINSPECTOR，看上去应该是这样的在“OUTLETS”当中，我们可以看到，WEBSITEBUTTON属性已经被关联到了XIB文件的按钮控件上。而在“RECEIVEDACTIONS”里，OPENWEBSITE方法也已经与该按钮的“TOUCHUPINSIDE”事件建立了关联。这个事件所代表的就是用户在界面中轻触按钮并抬起手指的整个动作，它是按钮控件的默认事件。手动编写OBJECTIVEC代码接下来我们要告诉按钮在被点击之后应该做些什么。在CONTACTVIEWCONTROLLERM中，将定义OPENWEBSITE方法的代码更新为在这段代码中，我们做了两件事。首先，我们在第59行的代码中创建了一个临时变量“WEBADDRESS”，用来存储一段包含特定URLHTTPWWWAPPLECOM“的字符串。这里的写法是一种比较快捷的方式，系统可以自动为NSURL实例分配内存，也会在需要的时候自动释放。而后面的代码则告诉系统可以使用相关的应用例如SAFARI来打开这个链接。对于CONTACT界面中的其他按钮，我们也可以通过类似的步骤来设定响应规则。将上面代码中的“OPENURL”替换为“MAILTO”，可以使应用触发默认邮件客户端执行相关的邮件工作，而“TEL”则可调出系统的拨号键盘界面，直接拨打预设好的电话号码。使界面以模态的方式呈现当前的PORTFOLIO界面中有一些作品的缩略图，我们希望用户在点击它们的时候，对应的大图可以弹出。要实现这一点，我们可以创造模态视图，使新界面以动画过渡的方式呈现出来，并覆盖在其他界面之上。创建模态视图要创建模态视图并不难。首先，我们要创建一个新的类，名字叫做BIGIMAGEVIEWCONTROLLER，具体方式与我们之前创建3个自定义类是相同的。然后打开BIGIMAGEVIEWCONTROLLERXIB文件，向界面中添加一个IMAGEVIEW作为图片容器，并将它的“IMAGE”设置为PORTFOLIOMODALBGPNG图片文件。接下来，在左上角添加一个类型为“CUSTOM”的圆角按钮控件，使用BUTTONCLOSEPNG作为其背景，并将字色设置为白色，文案为“CLOSE”。然后在现有界面基础上再添加一个IMAGEVIEW，大致尺寸和位置如下图所示切换至辅助编辑器模式，在新添加的空白IMAGEVIEW上执行CONTROL拖拽，并指向BIGIMAGEVIEWCONTROLLERH代码当中INTERFACE与END之间的部分，以此方法分别建立名为“IMAGEFRAME”的OUTLET，以及名为“CLOSEVIEW”的ACTION。系统将在H文件中自动添加如下代码而具体的CLOSEVIEW代码还需要我们手动添加到M文件当中这段代码的作用是关闭当前已经激活的模态视图界面。加载模态界面的代码回到标准编辑器模式，打开PORTFOLIOVIEWCONTROLLERH文件，将代码手动更新为我们新写了一行IMPORT代码，用来将之前新建的BIGIMAGEVIEWCONTROLLER类引入到PORTFOLIOVIEWCONTROLLER当中，这样我们就可以在PORTFOLIO界面中与之通讯，在需要的时候告诉BIGIMAGEVIEWCONTROLLER为自己创建一个实例。我们还为PORTFOLIOVIEWCONTROLLER创建了一个属性和两个方法，其中第二个方法OPENBIGIMAGE并不需要与XIB文件中的任何控件建立关联，所以它的返回类型是“VOID”，而非“IBACTION”。你也许会觉得奇怪，为什么在这里创建属性和方法