@小乖乖老爸:这个系列既然是写给计划师看的,就跳过怎样创建项目、怎样新建文件了,由于计划师通常是在已有的页面上做调解。计划师必要把握的iOS前端技能无非本日提到的这两个。
想改那边,就能改那边。(要在N多个文件里,找到你要改的是哪个文件,不是个简单的事变啊!)想改成什么样,就能改成什么样。
第一项本领可不简单。你想改某个页面,但是,对应到项目里是哪个文件呢?你在手机上看到的谁人页面,在代码里大概是由四五个文件凑起来的,整个项目里n多个文件,你该怎么找?想想都头疼啊。这里就临时不说,看看第二项本领。
第二项本领比力轻易上手,接下来我们就把常用的组件,逐个说清楚,不难。你把握了之后,就能做到想怎么改就怎么改了。
第一篇回顾:《进步计划还原度!写给计划师的IOS前端教程(一)》
写给计划师的网页前端教程系列:
一,UILabel出场
言归正传,我们先有请第一位出场,他的名字叫UILabel。iOS的开辟语言分两种,常用的叫Object-C,简称oc。尚有一个后起之秀,叫Swift。无论是Object-C还是Swift,UI组件的名字前面都带了UI两个字。
这个组件干嘛的呢,就是用来表现笔墨的,对应Photoshop里的笔墨工具「T」。
Photoshop里的笔墨工具
UILabel*myLabel=[[UILabelalloc]initWithFrame:CGRectMake(20,20,self.view.frame.size.width-40,120)];myLabel.text=@"这是多行的笔墨。这是多行的笔墨。这是多行的笔墨。这是多行的笔墨。这是多行的笔墨。这是多行的笔墨。这是多行的笔墨。这是多行的笔墨。";myLabel.textColor=[UIColorblueColor];myLabel.textAlignment=NSTextAlignmentCenter;myLabel.font=[UIFontsystemFontOfSize:17];myLabel.numberOfLines=2;myLabel.backgroundColor=[UIColorlightGrayColor];[self.viewaddSubview:myLabel];
二,代码详解
1.赋值、坐标、尺寸(必选)
别看到代码就犯晕,我们一句句来表明。
UILabel*myLabel=[[UILabelalloc]initWithFrame:CGRectMake(20,20,self.view.frame.size.width-40,120)];
UILabel是组件的名字,myLabel是本身取的名字,中心的星号表现新建。意思就是我要用UILabel组件来新建一个叫myLabel的笔墨。
星号的前面要加空格,也可以把空格放星号背面,乃至前后都有空格也行,反正最少得有一个空格。
再来看等号的背面,[UILabelalloc]是分配,具体什么意思不消管了,大概就是大吼一声「俺老孙来也」。
initWithFrame就是按照你的frame(包罗坐标和尺寸)来举行界说。
CGRectMake就是阐明你的组件在放在那边,占多大的地方。CGRectMake(x坐标,y坐标,宽度,高度)。
留意:这里的x、y坐标,指的是左上角的顶点,你在Photoshop里,移动工具默认的中心点,而不是左上角的顶点。别忘了切换一下。假如你看的是Info(信息)面板,这里表现的x、y就是左上角顶点的坐标啦。
△Photoshop移动工具的属性
△PhotoshopInfo面板
由于手机屏幕不是固定的,宽度通常是根据屏幕宽度来自顺应,self.view.frame.size.width就是这个页面的宽度。
这行代码挺长的,着实挺简单,打个比方:
婴儿*张三=[[婴儿大吼一声]出生在:xx都会xx医院,身高xx厘米,体重xx公斤];
说成明白话就是:有个叫张三的婴儿,身高xx厘米,体重xx公斤,在xx都会xx医院出生啦。
2.笔墨内容(可选)
myLabel.text=@"这是多行的笔墨。这是多行的笔墨。这是多行的笔墨。这是多行的笔墨。这是多行的笔墨。这是多行的笔墨。这是多行的笔墨。这是多行的笔墨。";
没啥好说的,就是表现的笔墨内容呗。
3.字体颜色(可选)
myLabel.textColor=[UIColorblueColor];
字体颜色有多种写法,常用的有:
体系自带的颜色,如[UIColorblueColor],[UIColorwhiteColor]等;RGBA颜色,就是RGB加上透明度(Alpha),如赤色就是:[UIColorcolorWithRed:255/255green:0/255blue:0/255alpha:1.0];(alpha便是1就是不透明,0就是完全透明)Hex颜色,就是网页颜色代码,如赤色就是[UIColorcolorWithHex:0xff0000];(这个方法不是体系自带的,必要自界说)
4.对齐方式(可选)
myLabel.textAlignment=NSTextAlignmentCenter;
默认是左对齐:NSTextAlignmentLeft居中对齐:NSTextAlignmentCenter右对齐:NSTextAlignmentRight
必要阐明的是,UILabel只支持程度方向的对齐,不支持垂直方向(纵向)的对齐,无论你是一行笔墨还是多行笔墨,你在frame里设置了高度是多少,都会在垂直方面上居中对齐。
很失常是不是?通常计划师要的是顶部对齐啊,那怎么办呢?办法固然有,就是轻微贫苦一点,用「sizeToFit」的方法。也就是根据内容的多少,重新定这个UILabel的尺寸,覆盖掉原来定的尺寸。然后还得手动设置坐标。不明白也无所谓,反正你就跟工程师说「sizeToFit」就行了,别被他一句「做不了」就忽悠了。
5.字体(可选)
myLabel.font=[UIFontsystemFontOfSize:17];
默认字体
字体最好是用体系的默认字体。iOS8或之前,中文是华文细黑,英文是HelveticaNeue。iOS9或之后,中文是苹方,英文是SanFrancisco。
[UIFontsystemFontOfSize:17]就是17pt的体系字体。由于我们是按照Retina屏幕的尺寸来计划的,17pt乘以2,就是34px。
体系别的字体
除了体系的默认字体之外,iOS里尚有其他字体,具体列表看这里,发起选择「InstalledsinceiOS7」的。如:
myLabel.font=[UIFontfontWithName:@"HelveticaNeue-Light"size:36];
自界说字体+精简的字体包
假如这都满意不了你,你还可以把字体交给工程师,让他们把字体文件放进代码里。不外这种方式肯定要慎重,由于会增长安装包的巨细。英文通常有1~2M,中文的字体包可就吓人了,动不动就5M以上的,肯定不能直接加进去,你还得手动做一个精简的字体包。
怎样手动做个精简的字体包?
先把你要的中笔墨的编码都找出来,信托我,你会吐血三升的。点这里再用挑出来的笔墨编码,天生一个精简的字体包。点这里
总之,挺贫苦的一件事儿,这里不罗嗦了。当你毅然决然要干这种事儿的时间,再去问工程师吧。
6.表现几行笔墨(可选)
myLabel.numberOfLines=2;
一样平常我们是不消设置这个参数的,反正超出了你界说的frame就会被省略了。但偶然间你要界说,比如「不高出两行」,那么就可以用到这个参数啦。
提及多行,怎么也该说说「行高」了吧。哎,要让各人扫兴了,UILabel并没有设置行高的属性,而默认的行高很小,太挤了。假如就两三行的,那就忍忍吧。假如是一大段的笔墨,乃至是通篇的长文本,行高的题目就很显着了,得换另一个组件,咱们临时不表,以后会说的。
7.配景颜色(可选)
myLabel.backgroundColor=[UIColorlightGrayColor];
iOS7之后,默认的配景色就是透明的了,不消挨个儿设置为[UIColorclearColor]了。
8.表现出来(必选)
[self.viewaddSubview:myLabel];
偶然间犯傻,我写的UILabel怎么死活出不来呢?缘故起因就是忘了添加到视图(view)里来了。打个比方,就是孩子生下来了,还待在产房里,没人领回家。
这行代码的意思就是把myLabel加到页面里来。
假如页面里有3个元素,而且他们的巨细和位置都是一样的,比方
[self.viewaddSubview:myLabelA];[self.viewaddSubview:myLabelB];[self.viewaddSubview:myLabelC];
那么,越是厥后被添加的,就越是在上面。C会覆盖B,B会覆盖A。
这篇到这里就竣事了,敬请等待第三篇。
欢迎计划师们投稿至yuan@uisdc.com,帮你提拔个品德牌形象:)
「本月最值得阅读收藏的美满像素利用手册」
原文地点:jianshu
【优设网原创文章投稿邮箱:yuan@uisdc.com】
我要评论