@小乖乖老爸?：想提高設計還原度，盡可能縮小設計稿與完成品之間的差距嗎？來學編程吧！這個系列的文章忽略了很多設計師用不上的技能，直接給出UI設計師工作中能用上的編程知識，簡單易懂，一起來收！

往期回顧：

1. 《提高設計還原度！寫給設計師的IOS前端教程（一）》
2. 《提高設計還原度！寫給設計師的IOS前端教程（二）》

寫給設計師的網(wǎng)頁前端教程系列：

1. 《零基礎也能看懂！寫給設計師的前端小知識之小白入門篇（一）》
2. 《零基礎也能看懂！寫給設計師的前端小知識之征服霸道DIV篇（二）》
3. 《零基礎也能看懂！寫給設計師的前端小知識之網(wǎng)頁排版（附實戰(zhàn)）》
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 圖片怎么放到項目里？

你做好的圖片要放在項目的什么地方了呢？

△ Xcode的文件目錄

在很久很久以前，圖片還是散落在項目的各個地方的，找起來很麻煩。后來蘋果大人說了，都給我待一塊兒去！于是，所有的圖片都放在Assets.xcassets文件里了。

△ 添加圖片或圖片文件夾

上圖的第二列，下方有個加號，點擊后可以添加圖片組（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」，現(xiàn)在不用了啊。只要把圖片拖到2x對應的虛線框里邊就行了。

2.2 圖片名還是圖片組名？

考你個問題：圖片的文件名叫做abc.png，圖片組（Image Set）的名稱叫做def，那在代碼里用哪個名字呢？

答案是用圖片組的名稱：

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

從個人習慣的角度，我會把圖片的文件名和圖片組的名稱保持一致，誰讓我是表里如一的人呢？

圖片組起名字的時候要注意：

• 不要用拼音，太low了；
• 不要用大寫字母，全都小寫；
• 不要用空格，中劃線，要用下劃線；

之所以有這些約定，不是因為Xcode不支持，而是為了避免寫錯，而且看著也順眼。

2.3 坑爹的文件夾

再考你，請聽題：

• 同一個文件夾里，可以圖片組的名稱可以重名嗎？
• 不同的文件夾里，圖片組可以重名嗎？
• 在文件夾里的圖片組，程序調(diào)用的時候需要加上文件夾（目錄）嗎？

答案：

• 同一個文件夾里，當然不能重名啦。
• 可以。
• 不用。

這就引出一個有意思的問題了：要是不同的文件夾里有重名的圖片組，程序上會選擇哪個呢？坑爹的是，我也不知道，沒找到規(guī)律（……攤手）。

所以，不管什么文件夾，整個項目里，圖片都不要重名，不管是iOS還是Android，都是如此。

3、圖片的顯示模式（可選）

    myImageView.contentMode = UIViewContentModeScaleAspectFill;

contentMode是個很容易被工程師忽略，但是對設計師很重要的屬性。

你做的圖片有個尺寸，在代碼里放圖片的容器也有一個尺寸，這兩個尺寸并不總是相等的。這好比你把一張圖片拖到Photoshop的畫布了，圖片和畫布的寬高比例不一致。那你要怎么辦呢？有些奇葩的方式就不說了，常規(guī)的，無非是「拉、補、裁」三種：

• 拉 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. 《中文版來了！值得每個設計師收藏的《完美像素使用手冊》之細節(jié)篇》
3. 《第三集！值得每個設計師收藏的《完美像素使用手冊》之易用性篇》
4. 《第四集！值得每個設計師收藏的《完美像素使用手冊》之軟件技巧篇》
5. 《最終版！值得每個設計師收藏的《完美像素使用手冊》之軟件技巧篇》

原文地址：jianshu

【優(yōu)設網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關于優(yōu)設網(wǎng)================
"優(yōu)設網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設計師學習平臺，專注分享網(wǎng)頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量150萬的人氣微博@優(yōu)秀網(wǎng)頁設計 ，歡迎關注獲取網(wǎng)頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網(wǎng)站推薦，設計師必備導航：http://hao.uisdc.com