提高设计还原度！写给设计师的iOS前端教程（二）

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

@小乖乖老爸 ：这个系列既然是写给设计师看的，就跳过如何创建项目、如何新建文件了，因为设计师通常是在已有的页面上做调整。设计师需要掌握的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就是左上角顶点的坐标啦。

△ Photoshop移动工具的属性

△ 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

【木子设计网 原创文章 投稿邮箱：yuan@uisdc.com】

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