恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
熟悉模板与控件-为设计师准备的Xcode教程(02)
0.0°
2014-11-18 原创文章 教程 原作者: 原作者 举报 11238 60 26 10

xcode提供了便捷的图形化设计工具,让我们几乎不用编写代码,就可完成一个简单的app设计.本节中,我们先从xcode的文件结构入手,然后自己设计一个app界面


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


熟悉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教程,其中某些术语并不规范,专业人士请勿见笑.同时恳请大家指正文中存在的各种错误.

5.写教程非常不易,恳请各位站长在转载时注明作者及出处.静电感激不尽.

6.欢迎扫描二维码关注静电的微信号-jingdesign91.

7.xcode教程第一篇请戳>> 搞定一像素不求人-为设计师准备的Xcode教程(01)

更新:2014-11-18

下载
收藏

60人已收藏

hixulei

微信公号: jingdesign91,欢迎关注.

  • 44

    作品

  • 6763

    粉丝

  • 13

    关注

  • 图形工具解析-静电的Figma完全学习日记-Day.03
  • Sketch颠覆者!静电Figma完全学习日记-Day.02
  • Sketch颠覆者!静电Figma完全学习日记-Day.01
  • 十分钟快速掌握iPhone X UI界面适配技巧

    猜你喜欢

      2014-11-18 原创文章 教程 原作者: 原作者 举报 11238 60 26 10

      熟悉模板与控件-为设计师准备的Xcode教程(02)

      0.0°

      你确定要举报熟悉模板与控件-为设计师准备的Xcode教程(02)

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2014年11月18日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      26
      60
      10

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录