搞定一像素不求人!为设计师量身打造的XCODE教程(2) - 优设网 - UISDC

搞定一像素不求人!为设计师量身打造的XCODE教程(2)

2014/12/02 10718评论区

xcode-tutorials-for-designer-2-1

编者按:前两天@JingDesign同学刚分享了Xcode自学指南的第一小节,今天继续分享第二小节,帮同学们进一步了解Xcode,并利用它设计一个App界面,想跟工程师做朋友?现在就得开动咯!

@JingDesign :上一节中,我们对Xcode有了初步的印象,相信很多的设计师朋友都可以顺利的在自己的Mac上运行自己的第一个app程序了,可喜可贺!静电说过,苹果的Xcode提供了非常便捷的图形化设计工具,可以让我们几乎不用编写代码,就可以完成一个简单的app设计。那么本节中,静电带大家进一步了解Xcode,让我们先从Xcode的文件结构入手,自己设计一个app界面,并运行它。

上一篇好文地址:《搞定一像素不求人!为设计师量身打造的XCODE教程(1)》

静电的Sketch教程合集:

  1. 《SKETCH设计教室!从零开始学APP设计利器SKETCH(一)》
  2. 《SKETCH设计教室!从零开始学APP设计利器SKETCH(二)》
  3. 《SKETCH设计教室!带你了解超好用的SKETCH插件》
  4. 《想要一稿过不加班?SKETCH绝配神器MIRROR抢先体验》

熟悉Xcode中的各项模板

还记得上一章中我们新建的Xcode工程吗?现在我们打开它! 神马?你把他删了?好吧,我们再来复习一遍,如何开始Xcode之旅。打开Xcode之后,我们选择左上角的“file”菜单, 接下来新建一个工程,也就是Project(快捷键是shift+command+n)。开发一款软件,我们就称之为一个工程,这样理解就可以了。

Xcode为我们提供了多种模板,如下图所示,application中一共有五种常用的开发模板,我们一个一个来看。

1. Master-detail Application:一种常见的列表式布局(类似于iOS中的备忘录结构)

2. Page-Based Application:基于页面的应用(运行后我们会发现有纸质书的翻页效果)

3. Single View Application:只有一个页面的独立应用(除了启动界面,打开后是大白板)

4. Tabbed Application:我们最常见的,底部有tab导航的模板

5. Game:游戏 (打开后我们会看到一架灰机)

静电把几种界面的截图都列在下图中,方便大家进一步理解。

在这里我们只介绍application标签里的项目,其它标签,现在我们还用不到,所以就先跳过吧。

使用Single View Application开始新尝试

Single View Application是最简单的模板,命名并保存后,我们可以看到,这个模板除了启动界面,就是一大白板。如下图:

上一章中,静电告诉大家,新建一个模板后,点击左上角的运行箭头,就可以直接运行模拟器来查看了。运行后,启动界面一闪而过, 然后就是一片空白。聪明的同学已经注意到了,新建后,上图正中的hello_Xcode文件就是我们在模拟器中看到的启动界面的内容。 然后我们看一下屏幕左边,有一列目录树。这就是我们新建模板工程里用到的所有文件了,看一下每项代表的意义。

 

对于1,2,4项.我们可以暂时忽略,这个阶段用不到这些文件. 第三项是我们着重要研究的几个文件,这一节我们从简单开始,首先看这个名为LaunchScreen.xib的文件,顾名思义,这个就是应用的启动界面,下面,来点好玩的东东吧!

熟悉控件–自定义启动界面

大家一定不会陌生,每个应用都会有自己的启动界面,启动界面传达出这个软件的功能,以及气质,设计的好坏直接关系到使用者的第一印象.但大家刚刚看到,现在这个界面实在是太!丑!啦!只有简陋的白底黑字。我们要让它看起来漂亮一些,Xcode中的xib里,会提供给我们各种各样的控件,什么是控件?打个比方,在Photoshop中,我们有文字工具,矩形工具,圆形工具等。iosAPP也由多种这样的元素构成,这就是控件。接下来我们在演示中慢慢来熟悉控件。

点击左侧开发文件 LaunchScreen.xib,即可开始编辑工作。但这时我们发现,这个启动界面的”画布”尺寸好像不对啊。是的,在新版本的Xcode中,苹果为了适应更大屏幕的手机,采取了自动适配布局。因此屏幕宽高就看起来好奇怪. 但对于初学者来说,自动适配这个属性,现在了解有点为时过早,为了更形象化的来操作“画布”,我们把这个特性关掉。

在软件右侧的属性栏中,找到如下设置,将Use Auto Layout功能关掉。 下面我们还会发现一项有用的东西,就是Ise as Launch Screen。打上对勾,这个xib可视化界面就会变成启动界面。当然,取消对勾,就是一个普通的xib界面啦。

关掉后选择下图的 Disable Size classes即可,默认选择iPhone的尺寸。

接着选择尺子图标,如下图。将这个“画布”的尺寸设置为iphone的尺寸如320-480,320-568等等。大家可能注意到了,这并不是iphone的分辨率呀?在这里静电要告诉大家,开发过程中,Xcode的长度,字号等单位,一律按设计稿的尺寸一律除以二。 也就是设计稿是640-960,除以二就是320-480。 如下图操作,这时,“画布”终于像点样子了。

继续操作,我们首先尝试下修改这个“画布”中的文字,与作图软件类似,选择元素后,右侧为属性。我们选择hello-Xcode文字,看到右侧属性栏已经起了变化,选择如图所示右侧按钮,我们可以看到,这是一个名为label的控件,框中的属性,我们一定不会陌生,试着调调看。

调整好元素的位置,颜色等。第一步就这样完成了,但我们还不太满意,这个启动界面的文字虽然可以定义了,但是我还想放一张图片在上边。ok,我们来放一张图片吧!这里我们要使用一个名为image View的控件。

控件所在的位置在屏幕右下角(如果你的屏幕跟静电的不一样,请回过头查阅教程第一节,看看界面如何自定义)。

控件库里有着各种各样的组件,我们刚才修改文字的那个,名为“label”,label主要用来承载文字内容。

那么现在我们要用这个image view来插入图片。拖动这个组件到“画布”上即可,这个时候的效果如下图所示,选中这个蓝色的框后,右侧属性发生变化了。 点击图片选择框,但是。。。。。为什么没有图片呢?那是因为我们还没有把图片资源导入工程中。

导入图片资源文件

我们需要准备一张跟你刚才“画布”尺寸大小一样的图(记得尺寸是两倍关系)。静电准备的是一张640-1136的图。接下来选择左侧有着蓝色图标的image.xcassets文件,打开后我们可以看到,左侧第二列中,只有appicon的选项,这不是我们现在想要设置的东西,在如图所示位置点右键,选择“New image set”。

我们发现第三栏中出现了很多空位线框,这些框表示各种尺寸的图片大小,适配不同的设备。将准备好的图片拖动进去。为了方便起见(不考虑适配),静电只准备了一张ip5尺寸的,如果想要完美适配,那么可以再准备一张640-960的图片,分别拖动到1x, 2x,与3x的虚线框中。同时,我们将右侧属性中的,image set 的name,设置为你想要的名字,我这里输入bg。 导入图片的工作就完成了。

接下来回到LaunchSreen.xib界面.选中刚才拖到”画布”中的蓝色image View 框,看右侧属性栏,将image view的名字设置为你刚才起的名字,静电起的名字是bg,这个时候大家发现没有,图片显示在image view框中了。接下来把image调整到与“画布”一样大小。

但是你会发现,图片把刚才的文字都盖住了,怎么办? 你想到了什么吗? 对,图层!xib中的图层顺序表示方法与ps等绘图软件相反,图层顺序表中,最上层的图片反而在最下边表示。这个时候我们把图片拖动到最上边。

刚才说的“画布”,其实是一个view(视图),我们可以将其理解为画布,这个是最简单的办法。将框中的图层调下顺序即可让图片在最下层了。(有的同学找不到图中所示的框,不要担心,他只是被藏起来了点击那跟竖线,将它向右拖动,找到了吧?)

这时我们的基本操作已经完工。如果大家觉得闪屏不需要文字的话,只管做一张漂漂亮亮的图片就行了,静电在这里放文字是为了让大家熟悉这几个控件。 运行模拟器看看效果,美丽的启动界面是不是已经出现了呢?

大家可以尝试用类似的方法,在image.xcassets里导入图标素材,这个时候,你会发现,自己的app已经有模有样了!为自己赞一个吧! 静电教程中的Xcode工程文件已经附在文章末尾了,欢迎下载研究.

写在本章最后

1. 熟悉如何新建Xcode工程,这是你开始工作的第一步。

2. 熟悉几个常用的文件, launchScreen.xib, imanges,xcassets,以及下一章我们要讲的Storyboard(故事板)。

3. 在可视化界面xib下操作”控件”,排列元素,本章我们用到的控件有image view和label,大家请回忆这两个控件的作用。下面的章节中,我们会熟悉更多的控件的用法。”控件”,是Xcode中非常重要的组成部分,如果大家感兴趣,可以玩一玩屏幕右下角组件库中的各种组件。

4. 本文是写给设计师看的Xcode教程,其中某些术语并不规范,专业人士请勿见笑。同时恳请大家指正文中存在的各种错误.

欢迎扫描二维码关注静电的微信号:

专为毕业生量身打造的三篇好文!帮你迅速找到好工作!

大咖前辈现身说法!亲历者经验!
《毕业生必看!刚入行的设计师如何敲开大公司的门》

有了这个,就不怕遇到黑心老板啦!
《找工作必备!教你一眼识穿招聘公司有木有坑》

朋友挤破头来让你帮个忙?看看这篇!
《人情练达即文章:如何拒绝朋友免费做设计的要求?》

原文地址:ui.cn
作者:@JingDesign

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量87万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

sdcweixin

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/xcode-tutorials-for-designer-2

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

设计师 版式设计 扁平化设计 交互设计师 界面设计 排版布局 优设专访 职场 优设大课堂 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 设计趋势 用户体验设计 设计规范 海报设计 动效设计 logo设计 图标设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里