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

点赞
收藏 1

发表评论 快来秀出你的观点

还可以输入 800 个字
 
 
载入中....
相关推荐
评论 收藏