在线看一级片,国产精品99视频,亚洲国产日韩欧美

提高設計還原度！寫給設計師的iOS前端教程（二）

@小乖乖老爸?：這個系列既然是寫給設計師看的，就跳過如何創建項目、如何新建文件了，因為設計師通常是在已有的頁面上做調整。設計師需要掌握的iOS前端技能無非今天提到的這兩個。

想改哪里，就能改哪里。（要在N多個文件里，找到你要改的是哪個文件，不是個簡單的事情?。。?/li>
想改成什么樣，就能改成什么樣。

第一項本領可不簡單。你想改某個頁面，但是，對應到項目里是哪個文件呢？你在手機上看到的那個頁面，在代碼里也許是由四五個文件湊起來的，整個項目里n多個文件，你該怎么找？想想都頭疼啊。這里就暫時不說，看看第二項本領。

第二項本領比較容易上手，接下來我們就把常用的組件，逐個說清楚，不難。你掌握了之后，就能做到想怎么改就怎么改了。

第一篇回顧：《提高設計還原度！寫給設計師的IOS前端教程（一）》

寫給設計師的網頁前端教程系列：

一，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移動工具的屬性

提高設計還原度！寫給設計師的iOS前端教程（二）

△ 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，幫你提升個人品牌形象：)

「本月最值得閱讀收藏的完美像素使用手冊」

原文地址：jianshu

提高設計還原度！寫給設計師的iOS前端教程（二）

【優設網原創文章投稿郵箱：yuan@uisdc.com】

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