提高设计还原度!写给设计师的iOS前端教程(二) - 优设-UISDC

提高设计还原度!写给设计师的iOS前端教程(二)

2016/08/26 评论区

front-end-basic-ios-knowledge-2-1

@小乖乖老爸 :这个系列既然是写给设计师看的,就跳过如何创建项目、如何新建文件了,因为设计师通常是在已有的页面上做调整。设计师需要掌握的iOS前端技能无非今天提到的这两个。

  • 想改哪里,就能改哪里。(要在N多个文件里,找到你要改的是哪个文件,不是个简单的事情啊!)
  • 想改成什么样,就能改成什么样。

第一项本领可不简单。你想改某个页面,但是,对应到项目里是哪个文件呢?你在手机上看到的那个页面,在代码里也许是由四五个文件凑起来的,整个项目里n多个文件,你该怎么找?想想都头疼啊。这里就暂时不说,看看第二项本领。

第二项本领比较容易上手,接下来我们就把常用的组件,逐个说清楚,不难。你掌握了之后,就能做到想怎么改就怎么改了。

第一篇回顾:《提高设计还原度!写给设计师的IOS前端教程(一)》

写给设计师的网页前端教程系列:

  1. 《零基础也能看懂!写给设计师的前端小知识之小白入门篇(一)》
  2. 《零基础也能看懂!写给设计师的前端小知识之征服霸道DIV篇(二)》
  3. 《零基础也能看懂!写给设计师的前端小知识之网页排版(附实战)》
  4. 《零基础也能看懂!写给设计师的前端小知识之排版三步走起来》
  5. 《零基础也能看懂!写给设计师的前端小知识之各司其职》

一,UILabel出场

言归正传,我们先有请第一位出场,他的名字叫UILabel。iOS的开发语言分两种,常用的叫Object-C,简称oc。还有一个后起之秀,叫Swift。无论是Object-C还是Swift,UI组件的名字前面都带了UI两个字。

这个组件干嘛的呢,就是用来显示文字的,对应Photoshop里的文字工具「T」。

Photoshop里的文字工具

    UILabel *myLabel = [[UILabel alloc] initWithFrame:CGRectMake(20, 20, self.view.frame.size.width - 40, 120)];
    myLabel.text = @"这是多行的文字。这是多行的文字。这是多行的文字。这是多行的文字。这是多行的文字。这是多行的文字。这是多行的文字。这是多行的文字。";
    myLabel.textColor = [UIColor blueColor];
    myLabel.textAlignment = NSTextAlignmentCenter;
    myLabel.font = [UIFont systemFontOfSize:17];
    myLabel.numberOfLines = 2;
    myLabel.backgroundColor = [UIColor lightGrayColor];
    [self.view addSubview:myLabel];

二,代码详解

1. 赋值、坐标、尺寸(必选)

别看到代码就犯晕,我们一句句来解释。

UILabel *myLabel = [[UILabel alloc] initWithFrame:CGRectMake(20, 20, self.view.frame.size.width - 40, 120)];

UILabel是组件的名字,myLabel是自己取的名字,中间的星号表示新建。意思就是我要用UILabel组件来新建一个叫myLabel的文字。

星号的前面要加空格,也可以把空格放星号后面,甚至前后都有空格也行,反正起码得有一个空格。

再来看等号的后面,[UILabel alloc]是分配,具体什么意思不用管了,大概就是大吼一声「俺老孙来也」。

initWithFrame 就是按照你的frame(包括坐标和尺寸)来进行定义。

CGRectMake 就是说明你的组件在放在哪里,占多大的地方。CGRectMake(x坐标, y坐标, 宽度, 高度)。

注意:这里的x、y坐标,指的是左上角的顶点,你在Photoshop里,移动工具默认的中心点,而不是左上角的顶点。别忘了切换一下。如果你看的是Info(信息)面板,这里显示的x、y就是左上角顶点的坐标啦。

JZ20160826 (1)

△ Photoshop移动工具的属性

JZ20160826 (2)

△ Photoshop Info面板

由于手机屏幕不是固定的,宽度通常是根据屏幕宽度来自适应,self.view.frame.size.width就是这个页面的宽度。

这行代码挺长的,其实挺简单,打个比方:

婴儿 *张三 = [[婴儿大吼一声] 出生在:xx城市xx医院,身高xx厘米,体重xx公斤];

说成大白话就是:有个叫张三的婴儿,身高xx厘米,体重xx公斤,在xx城市xx医院出生啦。

2. 文字内容(可选)

myLabel.text = @"这是多行的文字。这是多行的文字。这是多行的文字。这是多行的文字。这是多行的文字。这是多行的文字。这是多行的文字。这是多行的文字。";

没啥好说的,就是显示的文字内容呗。

3. 字体颜色(可选)

myLabel.textColor = [UIColor blueColor];

字体颜色有多种写法,常用的有:

  • 系统自带的颜色,如[UIColor blueColor],[UIColor whiteColor]等;
  • RGBA颜色,就是RGB加上透明度(Alpha),如红色就是:[UIColor colorWithRed:255/255 green:0/255 blue:0/255 alpha:1.0];(alpha等于1就是不透明,0就是完全透明)
  • Hex颜色,就是网页颜色代码,如红色就是[UIColor colorWithHex:0xff0000];(这个方法不是系统自带的,需要自定义)

4. 对齐方式(可选)

myLabel.textAlignment = NSTextAlignmentCenter;
  • 默认是左对齐:NSTextAlignmentLeft
  • 居中对齐:NSTextAlignmentCenter
  • 右对齐:NSTextAlignmentRight

需要说明的是,UILabel只支持水平方向的对齐,不支持垂直方向(纵向)的对齐,无论你是一行文字还是多行文字,你在frame里设置了高度是多少,都会在垂直方面上居中对齐。

很变态是不是?通常设计师要的是顶部对齐啊,那怎么办呢?办法当然有,就是稍微麻烦一点,用「sizeToFit」的方法。也就是根据内容的多少,重新定这个UILabel的尺寸,覆盖掉原来定的尺寸。然后还得手动设置坐标。不理解也无所谓,反正你就跟工程师说「sizeToFit」就行了,别被他一句「做不了」就忽悠了。

5. 字体(可选)

myLabel.font = [UIFont systemFontOfSize:17];

默认字体

字体最好是用系统的默认字体。iOS 8或之前,中文是华文细黑,英文是Helvetica Neue。iOS 9或之后,中文是苹方,英文是San Francisco。

[UIFont systemFontOfSize:17]就是17pt的系统字体。由于我们是按照Retina屏幕的尺寸来设计的,17pt乘以2,就是34px。

系统其它字体

除了系统的默认字体之外,iOS里还有其他字体,详细列表看这里,建议选择「Installed since iOS 7」的。如:

myLabel.font = [UIFont fontWithName:@"HelveticaNeue-Light" size:36];

自定义字体+精简的字体包

如果这都满足不了你,你还可以把字体交给工程师,让他们把字体文件放进代码里。不过这种方式一定要慎重,因为会增加安装包的大小。英文通常有1~2M,中文的字体包可就吓人了,动不动就5M以上的,肯定不能直接加进去,你还得手动做一个精简的字体包。

如何手动做个精简的字体包?

  • 先把你要的中文字的编码都找出来,相信我,你会吐血三升的。点这里
  • 再用挑出来的文字编码,生成一个精简的字体包。点这里

总之,挺麻烦的一件事儿,这里不罗嗦了。当你毅然决然要干这种事儿的时候,再去问工程师吧。

6. 显示几行文字(可选)

myLabel.numberOfLines = 2;

一般我们是不用设置这个参数的,反正超出了你定义的frame就会被省略了。但有时候你要定义,比如「不超过两行」,那么就可以用到这个参数啦。

说起多行,怎么也该说说「行高」了吧。哎,要让大家失望了,UILabel并没有设置行高的属性,而默认的行高很小,太挤了。如果就两三行的,那就忍忍吧。如果是一大段的文字,甚至是通篇的长文本,行高的问题就很明显了,得换另一个组件,咱们暂且不表,以后会说的。

7. 背景颜色(可选)

myLabel.backgroundColor = [UIColor lightGrayColor];

iOS 7之后,默认的背景色就是透明的了,不用挨个儿设置为[UIColor clearColor]了。

8. 显示出来(必选)

[self.view addSubview:myLabel];

有时候犯傻,我写的UILabel怎么死活出不来呢?原因就是忘了添加到视图(view)里来了。打个比方,就是孩子生下来了,还待在产房里,没人领回家。

这行代码的意思就是把myLabel加到页面里来。

如果页面里有3个元素,而且他们的大小和位置都是一样的,例如

[self.view addSubview:myLabelA];
[self.view addSubview:myLabelB];
[self.view addSubview:myLabelC];

那么,越是后来被添加的,就越是在上面。C会覆盖B,B会覆盖A。

这篇到这里就结束了,敬请期待第三篇。

欢迎设计师们投稿至 yuan@uisdc.com,帮你提升个人品牌形象 :)

「本月最值得阅读收藏的完美像素使用手册」

  1. 《值得每个设计师收藏的《完美像素使用手册》之原理篇》
  2. 《中文版来了!值得每个设计师收藏的《完美像素使用手册》之细节篇》
  3. 《第三集!值得每个设计师收藏的《完美像素使用手册》之易用性篇》
  4. 《第四集!值得每个设计师收藏的《完美像素使用手册》之软件技巧篇》
  5. 《最终版!值得每个设计师收藏的《完美像素使用手册》之软件技巧篇》

原文地址:jianshu

yestone-uisdc-2

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

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量150万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/front-end-basic-ios-knowledge-2

发表评论 加载中....

评论加载中....

uisdc

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

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

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

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