@小乖乖老爸 :想提高设计还原度,尽可能缩小设计稿与完成品之间的差距吗?来学编程吧!这个系列的文章忽略了很多设计师用不上的技能,直接给出UI设计师工作中能用上的编程知识,简单易懂,一起来收!
往期回顾:
一,点语法 vs Set方法
能看到第四篇的,说明前面的你都能消化了。在开始进入今天的正题之前,先讲两个简单的概念,「点语法」与「Set方法」。
举个例子:
Lily.hair = [UIColor RedColor]; [Lily setHair:[UIColor RedColor]];
第一行是「点语法」,第二行是「Set方法」,这两行代码意思是一样的,都是把Lily的头发染成红色。要是咱们不仅要染头发,还要把指甲涂成蓝色呢?
//点语法得用两行 Lily.hair = [UIColor RedColor]; Lily.fingernail = [UIColor BlueColor]; //Set语法只用一行 [Lily setHair:[UIColor RedColor] andFingernail:[UIColor BlueColor]];
看到差异了吧?总结一下,点语法的好处是写起来简单,读起来也简单。Set方法的好处是效率高,适用面广。点语法的代码都可以转成Set方法,而Set方法的代码未必能转成点语法。
台下有位同学说「我会了」。那你来造个句子吧,她灵机一动,答道:
[myDream SetMyFather:@"马云" andMyHusband:@"王思聪"];
嗯,非常好,会举一反三了,这也是我的梦想,请坐吧。
二、UIButton出场
有两种按钮比较常见:第一种是按钮有个背景色,文字居中,再加个圆角;第二种是在前一种的基础上,多了个图标,图标在文字的左边;我们先从简单的第一种说起吧:
例子一:
UIButton *myButton = [[UIButton alloc] initWithFrame:CGRectMake(20, 380, 160, 44)]; [myButton setTitle:@"按钮的文字" forState:UIControlStateNormal]; [myButton.titleLabel setFont:[UIFont systemFontOfSize:17]]; [myButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal]; [myButton setTitleColor:[UIColor whiteColor] forState:UIControlStateHighlighted]; //[myButton setBackgroundColor:[UIColor blueColor]]; [myButton setBackgroundImage:[UIImage imageNamed:@"button_blue"] forState:UIControlStateNormal]; [myButton setBackgroundImage:[UIImage imageNamed:@"button_orange"] forState:UIControlStateHighlighted]; [myButton.layer setMasksToBounds:YES]; [myButton.layer setCornerRadius:6]; [self.view addSubview:myButton];
三、代码详解
别看到一大段代码就晕啊,我们一句句来解释。
1、赋值、坐标、尺寸(必选)
UIButton *myButton = [[UIButton alloc] initWithFrame:CGRectMake(20, 380, 160, 44)];
看过前两篇的应该都知道什么意思了,不解释了。
2、文字
[myButton setTitle:@"按钮的文字" forState:UIControlStateNormal];
这行代码是设置按钮上显示的文字。这句话只能用Set方法来写,不能转成点语法,UIbutton好多属性都是这样,所以干脆就全用Set方法来写啦,美观一些。forState:UIControlStateNormal 是什么鬼?别急啊,先放一放,稍后再解释。
3、文字的字体
[myButton.titleLabel setFont:[UIFont systemFontOfSize:17]];
这句话初学者很容易写错成:
\\ 以下错误的示范 [myButton setFont:[UIFont systemFontOfSize:17]]; [myButton setTitleFont:[UIFont systemFontOfSize:17]];
4、文字的颜色
[myButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal]; [myButton setTitleColor:[UIColor whiteColor] forState:UIControlStateHighlighted];
刚才已经碰到过一回forState:xxx 了,咱们来解释解释吧。按钮有六种状态,最常见的有四种:
- 普通:UIControlStateNormal
- 高亮:UIControlStateHighlighted,就是被点中的状态,类似网页里的Hover
- 不可用:UIControlStateDisabled
- 被选中:UIControlStateSelected
上面两行代码意思是:设置按钮在普通和高亮状态下,文字都是白色的。如果不写第二句,系统会在按钮被点击时,盖上一层淡淡的黑色。
5、背景色或背景图
[myButton setBackgroundColor:[UIColor blueColor]];
这是设置背景颜色。
[myButton setBackgroundImage:[UIImage imageNamed:@"button_blue"] forState:UIControlStateNormal]; [myButton setBackgroundImage:[UIImage imageNamed:@"button_orange"] forState:UIControlStateHighlighted];
这是设置背景图片。
需要注意的是,背景色是不支持按钮状态的,如果你不提前告诉工程师按钮还有高亮状态,他们就会用简单的setBackgroundColor来做了。
在扁平风横行的今天,按钮大多是纯色的了,很少再用渐变或者纹理什么的,本没必要用图片的。设计师要的效果,无非是普通状态一个颜色,高亮状态一个颜色。但要支持不同状态,就得用setBackgroundImage,就非得用图片才行。
从一个按钮来看,工作量不大,但你考虑到整个app,多少按钮,多少种尺寸啊!那得做多少套图片啊?
方法肯定比问题多,我摸索出两个比较简单的方法:
- 可拉伸的图片做背景,图片再小都无所谓,反正是平铺的;
- 用代码来生成一张虚拟的图片,如下面的代码;
[button setBackgroundImage:[UIImage imageForColor:[UIColor px_tomatoRed] size:CGSizeMake(1, 1)] forState:UIControlStateNormal]; [button setBackgroundImage:[UIImage imageForColor:[UIColor px_orangeColor] size:CGSizeMake(1, 1)] forState:UIControlStateHighlighted];
其中imageForColor这种方法不是系统自带的,需要另外写一些扩展的代码,这里就不赘述了。
6、圆角
[myButton.layer setMasksToBounds:YES]; [myButton.layer setCornerRadius:6];
之前说《提高设计还原度!写给设计师的IOS前端教程(三)》的时候介绍过了。
7、显示出来
[self.view addSubview:myButton];
一回生,两回熟。这都第三次见了,老相识就不客套了。
四、带图标的UIButton
本文开头时提到,有两种常见的按钮,第一种介绍过了,还有一种是带图标的按钮。这位仁兄在后台已经等很久了,终于轮到他上场啦。
UIButton *anotherButton = [[UIButton alloc] initWithFrame:CGRectMake(190, 380, 165, 44)]; [anotherButton setTitle:@"别点我" forState:UIControlStateNormal]; [anotherButton setTitleEdgeInsets:UIEdgeInsetsMake(0, 8, 0, 0)]; [anotherButton setContentEdgeInsets:UIEdgeInsetsMake(0, -12, 0, 0)]; [anotherButton setImage:[UIImage imageNamed:@"ic_diamond"] forState:UIControlStateNormal]; [anotherButton setImage:[UIImage imageNamed:@"ic_diamond"] forState:UIControlStateHighlighted]; [anotherButton setBackgroundImage:[UIImage imageNamed:@"button_blue"] forState:UIControlStateNormal]; [anotherButton setBackgroundImage:[UIImage imageNamed:@"button_orange"] forState:UIControlStateHighlighted]; [anotherButton.layer setMasksToBounds:YES]; [anotherButton.layer setCornerRadius:6]; [self.view addSubview:anotherButton];
五、代码再详解
别看代码多,好多前面都已经讲过了,只有三个看起来很面生。
1、文字的位移
[anotherButton setTitleEdgeInsets:UIEdgeInsetsMake(0, 8, 0, 0)];
图标在左,文字在右,setTitleEdgeInsets可以调整图标与文字之间的距离。UIEdgeInsetsMake括号里四个数字,分别对应「上、左、下、右」,也就是逆时针方向啦。
UIEdgeInsetsMake(0, 8, 0, 0)就是文字的左边,增加8pt。换句话说,就是向右移动8pt(向左还是向右,有点绕脑子啊)。再换句话说,文字与图标之间的距离拉大8pt。
2、文字+图标的位移
[anotherButton setContentEdgeInsets:UIEdgeInsetsMake(0, -12, 0, 0)];
setContentEdgeInsets是文字+图标一起移动。UIEdgeInsetsMake(0, -12, 0, 0)就是文字+图标一起向左移动12pt。
3、图标
[anotherButton setImage:[UIImage imageNamed:@"ic_diamond"] forState:UIControlStateNormal]; [anotherButton setImage:[UIImage imageNamed:@"ic_diamond"] forState:UIControlStateHighlighted];
setImage就是设置图标的图片地址啦,要分别设置普通和高亮时候的状态。
六、后记
UIButton里有几个属性很相似的,setImage、setBackgroundImage与setBackgroundColor,还有setTitleEdgeInsets与setContentEdgeInsets,大家用的时候要注意区分啊。
「优设八月份人气最高的好文」
- 一个常见问题:《为什么你的设计作品看上去不够专业?》
- 自学的正确姿势:《光临摹可不行!平面设计师在空余时间应该怎样自学?》
- 大家最喜欢的中文字体:《超实用!有哪些免费的中文字体可以下载?》
【优设网 原创文章 投稿邮箱:yuan@uisdc.com】
================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/。
设计微博:拥有粉丝量150万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。
发评论!每天赢奖品
点击 登录 后,在评论区留言,系统会随机派送奖品
2012年成立至今,是国内备受欢迎的设计师平台,提供奖品赞助 联系我们
AI时代的设计师生存手册
已累计诞生 648 位幸运星
发表评论
↓ 下方为您推荐了一些精彩有趣的文章热评 ↓