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

@小乖乖老爸 :想提高设计还原度,尽可能缩小设计稿与完成品之间的差距吗?来学编程吧!这个系列的文章忽略了很多设计师用不上的技能,直接给出UI设计师工作中能用上的编程知识,简单易懂,一起来收!

往期回顾:

  1. 《提高设计还原度!写给设计师的IOS前端教程(一)》
  2. 《提高设计还原度!写给设计师的IOS前端教程(二)》

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

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

一、UIImageView出场

说完了文字组件UILabel,接下来我们有请图片组件 — UIImageView出场了。翠花,上代码!

    UIImageView *myImageView = [[UIImageView alloc] initWithFrame:CGRectMake(20, 160, 200, 200)];
    myImageView.image = [UIImage imageNamed:@"test_image"];
    myImageView.contentMode = UIViewContentModeScaleAspectFill;
    myImageView.layer.cornerRadius = 10;
    myImageView.layer.masksToBounds = YES;
    [self.view addSubview:myImageView];

二、代码详解

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

    UIImageView *myImageView = [[UIImageView alloc] initWithFrame:CGRectMake(20, 160, 200, 200)];

看过上一篇的同学应该能看懂这句话的意思了,就是说,在x坐标20,y坐标160的地方,放一个宽200,高200的图片。

2、图片地址(可选)

    myImageView.image = [UIImage imageNamed:@"test_image"];

2.1 图片怎么放到项目里?

你做好的图片要放在项目的什么地方了呢?

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

△ Xcode的文件目录

在很久很久以前,图片还是散落在项目的各个地方的,找起来很麻烦。后来苹果大人说了,都给我待一块儿去!于是,所有的图片都放在Assets.xcassets文件里了。

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

△ 添加图片或图片文件夹

上图的第二列,下方有个加号,点击后可以添加图片组(New Image Set),或者文件夹(New Folder),名字都可以自己改的。

每个图片组包含三个图片:

  • 1x的图片,是给iPhone 4出道之前那些老前辈用的。这年头,连iPhone 4s都算老古董了,咱们直接忽略吧。
  • 2x的图片,是给iPhone 4到iPhone 6这些retina屏幕用的。这些是主力,咱们得伺候好这些主儿。
  • 3x的图片,是给iPhone 6 plus用的。由于iPhone 6 plus用的人不是太多,就算用2x来显示效果也还可以接受,所以咱们就省点功夫,不做3x的图片了。

直白的说,我们只用到2x的图片,1x和3x都不用管了。

在很久很久以前,图片的名称都要加上@2x,比如「abc@2x.png」,现在不用了啊。只要把图片拖到2x对应的虚线框里边就行了。

2.2 图片名还是图片组名?

考你个问题:图片的文件名叫做abc.png,图片组(Image Set)的名称叫做def,那在代码里用哪个名字呢?

答案是用图片组的名称:

myImageView.image = [UIImage imageNamed:@"def"];

从个人习惯的角度,我会把图片的文件名和图片组的名称保持一致,谁让我是表里如一的人呢?

图片组起名字的时候要注意:

  • 不要用拼音,太low了;
  • 不要用大写字母,全都小写;
  • 不要用空格,中划线,要用下划线;

之所以有这些约定,不是因为Xcode不支持,而是为了避免写错,而且看着也顺眼。

2.3 坑爹的文件夹

再考你,请听题:

  • 同一个文件夹里,可以图片组的名称可以重名吗?
  • 不同的文件夹里,图片组可以重名吗?
  • 在文件夹里的图片组,程序调用的时候需要加上文件夹(目录)吗?

答案:

  • 同一个文件夹里,当然不能重名啦。
  • 可以。
  • 不用。

这就引出一个有意思的问题了:要是不同的文件夹里有重名的图片组,程序上会选择哪个呢?坑爹的是,我也不知道,没找到规律(……摊手)。

所以,不管什么文件夹,整个项目里,图片都不要重名,不管是iOS还是Android,都是如此。

3、图片的显示模式(可选)

    myImageView.contentMode = UIViewContentModeScaleAspectFill;

contentMode是个很容易被工程师忽略,但是对设计师很重要的属性。

你做的图片有个尺寸,在代码里放图片的容器也有一个尺寸,这两个尺寸并不总是相等的。这好比你把一张图片拖到Photoshop的画布了,图片和画布的宽高比例不一致。那你要怎么办呢?有些奇葩的方式就不说了,常规的,无非是「拉、补、裁」三种:

  • UIViewContentModeScaleToFill:不管图片的比例,把图片拉伸来适应容器;
  • UIViewContentModeScaleAspectFit:就像你在4:3的电视机上看16:9的电影,画面没有被拉伸,但是上下都会加上一个黑边;
  • UIViewContentModeScaleAspectFill:先等比例拉伸,再把多出来的部分裁掉;

想想自己做的图片被暴力拉伸,实在太恐怖了,设计师肯定不能忍受。但是很可惜,contentMode的默认值就是这样的。你也不愿意在上下/左右补两条黑边吧?所以最合理的方式就是「裁」了。

以后,你要是看到图片被拉伸了,不用问阿贵,肯定是忘了设置contentMode。你只要加上一句就OK啦!

myImageView.contentMode = UIViewContentModeScaleAspectFill;

4、圆角(可选)

    myImageView.layer.cornerRadius = 10;
    myImageView.layer.masksToBounds = YES;

这两句是配套的,第一句是设置了圆角的半径,第二句是说:「我确定一定以及肯定要多余的部分裁掉」。

5、显示出来(必选)

    [self.view addSubview:myImageView];

这行代码是老相识了,就是把图片添加到视图里。只有加了这句话,你的凡胎俗眼才能看得见它。

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

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

原文地址:jianshu

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

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

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

点赞
收藏
继续阅读相关文章

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

还可以输入 800 个字
 
 
载入中....
评论 收藏