[iOS新手入門]UI設計系列(1/4) — 認識 UI設計的基本元素UIVIew
各位親愛的朋友好久不見！
威爾哥這麼久沒發表文章，
想必大家一定想我想的快屎掉，是吧！
還好天公有保庇，哥終於找到新家也搬好了房子。
寧靜與安靜終於又回到了我的身邊。
所以，本人很高興在這邊宣佈，威爾哥的iOS小教室
強勢回歸，滿血復活，連載再開！！！！
好，那麼在這麼值得高興的日子，我們要分享的主題是什麼呢！！
答案就是～
打造APP畫面的基本元件 — View！(鄉親啊，婆阿蝦給它催落去)。
下面是本篇文章的大綱！！！
- 前言
- 什麼是View
- View的組成要素 — UIResponder + CALayer
- 把View加到畫面上吧 — iOS的座標系統
- iOS的View階層關係 — 座標相同怎麼辦？
- iOS中只有一個座標系統嗎 ？
- 實作影片
- 結論
前言
正所謂 桌機誠可貴，筆電價更高，若為手機故，兩者皆可拋。在這個手機比電腦重要的時代，相信大家的手機上一定安裝了許許多多的APP。而每當我們打開我們安裝的APP，首先映入眼簾的就是各種設計精美的UI(User interface使用者介面, 泛指我們看到的畫面).
而這些精美的UI是怎麼打造出來的呢？
答案就是，透過不同類型的元件一層一層搭建起來的。
舉例來說
上面這張圖是App Store的截圖，圖中有三個框框，分別框住了三個常見的元件。
由上至下分別是
紅色框框:UIImageView，常用於顯示圖片。
綠色框框:UILabel，常用於顯示文字。
藍色框框:UIButton，常用於提供使用者點擊，並進行互動。
當然，圖中還有許多元件沒有提到。
不過重點是，這些元件跟我們今天的主題有什麼關係？
簡單的說，只要是我們用來搭建UI的元件，都是眾多不同View類型的其中一種。
也就是說，這些元件都是從最單純的View所演化而來的。
古早人說，擒賊先擒王，抓猴抓老王(單壓*1)。
所以我們如果可以在針對各種元件深入研究之前，
先了解這些元件所共同擁有的特性。
那麼以後如果我們碰到其他元件的時候，一定可以舉一反三，輕鬆駕馭！
是不是很美好阿！
什麼是View?
就如上一節所提到的，APP畫面上所有的元件都是屬於View的一種，只是因為功能或者目的不同，所以變成不同的元件，並且一起堆放在畫面上，組成我們看到的UI。
所以簡單的說，
View就是構成UI的基本元素。
因此每一款APP的UI都可以看成是，由許許多多不同類型的View所堆疊而成。
而每一個View又可以分解成兩個部分，
1.Responder
Responder是一層薄薄的透明薄膜，專門負責與使用者互動，回應各種操作。
2.Layer
Layer是用來顯示各種內容的圖層。舉凡文字，圖片，色塊，邊框等等各式各樣的內容。只要是需要呈現給使用者看的內容，通通是CALayer負責繪製。
如果將上面這兩點畫成圖片就是~
覺得不好理解的夥伴們，請直接拿起你的手機。
當我們手指頭在手機的觸控螢幕上點來點去的時候，我們實際上點的是一層透明的液晶螢幕，而不是整根手指頭插到手機裡面 對吧？
這一層負責跟我們的手指互動的液晶螢幕，就是View中Responder所擔任的角色。
而我們所看到的內容，則是交由View中的Layer負責顯示。
總得來說，
一個View沒有Responder，那麼這個View就不會對使用者的操作有任何反應
一個View沒有Layer，那麼這個View就無法顯示任何內容。
如何，這樣是不是有比較好懂一點啦。
所以說一個身心健全的View，具備有兩個重要的功能，
- 與使用者互動
- 顯示內容
小結:👉 UI上的元件都是View的一種
👉 View由UIReponder與CALayer組成
👉 View可以與使用者互動，也可顯示內容
把View加到畫面上吧 — iOS的座標系統
看完了上一段之後，相信大家對UIView已經不再感到陌生，甚至想要開始打造屬於自己的UI。
好，大家鼻要著急。
你們的渴望，哥已經感受到了。
但是before我們將想要使用的元件放到螢幕上之前，我們有幾個重要的問題必須要先解決！
那就是
- 位置，這個元件要放在哪裡？
- 大小，這個元件要多大？
雖然說我們現在使用的都是智慧型手機，但是目前這些手機的智慧還是不足以自己判斷我們的APP UI要怎麼呈現。因此當我們要打造自己的UI時，必須要明確的指定這兩個資訊。
圖片去那兒？ — iOS的座標系統
首先，讓我們從位置這個問題開始解決！
老闆，上圖兒～
從上圖中我們可以看到，iOS使用X軸與Y軸來表示手機螢幕上的每一個位置，這就是iOS中顯示畫面元件的座標系統。
座標系統的原點(0.0)，座落在畫面的左上角。
X的值增加，位置往右移動。
Y的值增加，位置往下移動。
當我們將元件放到畫面上的時候，必須指定這個View的原點的座標。這個座標代表的是這個UIView的左上角的位置，一般儲存在UIView物件中的orgini這個屬性。
如上圖， x:40 , y:40 這個點就是這張圖片的原點。
每一個View都要指定原點的座標才能正確被顯示。
好，那既然每個View都需要指定原點的座標才能被顯示，那這就衍生出另一個問題，就是
iOS中只有一個座標系統嗎？
很遺憾的，這個問題目前還無法回答，讓我們先往下看，之後再繞回來解答這個問題吧！
元件的大小
解決了位置之後，下一個問題是，決定元件的大小。
一般來說，如果我們想顯示的圖形是正方形或者長方形。
我們只要指定長跟寬就解決了。
但是現在的APP，每一個都越來越花俏。畫面上各種奇形怪狀層出不窮，例如圓形，三角形，半圓形…等。
針對這些不同的形狀，我們要怎麼給定大小呢？
大家不要緊張，這個問題相信蘋果的工程師也曾經煩惱過。而最後他們想出來的解決方案是，
不論是什麼奇形怪狀的圖案，在設定大小的時候，一律視為矩形來處理！
具體的解法就像下圖一樣
上圖中，有四個不同形狀的紅色物體，外面被藍色框匡包著。
不管紅色的部分如何改變，我們只需要指定藍色框框的大小就可以了。
也就是說，不管我們要顯示的內容是什麼圖形，iOS在計算大小的時候，一律是以矩型計算。我們只要固定給長跟寬就可以了！
至於框框內的內容如何改變…就交給CALayer去煩惱吧！
雖然只要給定原點的座標跟View的長與寬，就可以把我們想要使用的元件放到畫面上！
但是，手機螢幕就像是土地，一直蓋房子總會有用光的一天。
所以說，萬一我們有兩個元件要放在一樣的地方那要怎麼辦呢？
或者說如果我們有些元件不小心重疊到的話，那又該怎麼辦呢？
小結:👉 將View加到畫面上時，需要指定原點(X軸,Y軸)與面積(長,寬)。
👉 不管View的內容是什麼形狀，View本身面積都以矩型計算。
View的階層關係
如果要解決位置重疊這種問題。
那我們必須先暸解一下iOS中，View與View之間的
- 階層關係
- 父子關係
View的階層關係
View的階層關係，就是iOS用來處理元件位置重疊的機制。
而iOS採用的機制，就是疊羅漢機制！
什麼叫做疊羅漢機制呢？
簡單的說，每一個View不管面積大小，自己都代表一層。
每次加入一個View，不管面積大小，整個View就往上疊加一層。
所以說，上圖中最右邊這個圖案，總共疊加了三層。
也因為View的階層是像疊羅漢一樣，一層一層的往上蓋。
所以如果位置有重疊的話，那麼下面的View就會被上面的View給蓋住看不到啦。
有沒有實際的例子呢？
上面這張從官方文件借來的圖，清楚的說明了我們平常看到的UI是怎麼被繪製出來的。
就像我們上面講的一樣，所有的元件其實是一層一層往上疊加之後構成的。
所以像上圖這個簡單的畫面，其實就蓋了四層之多。
這樣解釋不知道大家是否能夠理解？
什麼？完全不知道在講什麼東西？？
好吧！！
下圖是我們使用Storyboard製作UI的時候會看到的畫面。
畫面左上角有一個列表，這個列表列出了我們畫面中所有的元件。
從圖中可以看到，我們使用了三個view - redLayer, blackLayer 還有 greenLayer，來構成這個圖形。
雖然這三個Layer的中心位置都一樣，但是面積不一樣。所以如果有被覆蓋到的地方，那就只能看到在該位置的最上方的那一個View而已。
PS:在Storyboard中，顯示View的階層關係時，要上下顛倒看，在列表下方的元件，在邏輯上是屬於上方的。
View的父子關係
理解了UI的階層關係之後，接下來讓我們來看看什麼是View與View之間的父子關係！
前面我們提到，View負責了顯示內容以及與使用者互動兩個主要任務。
而在顯示內容這個任務中，View擔任了一個被稱為Container的角色。
所謂Container，中文可以翻譯成容器。
顧名思義，容器裡面可以放許多其他的View。
所有放在這個容器裡面的View與容器之間，就形成了一個父子關係。
被放入container中的view，稱為child view 或者 sub view。（子視圖）
擁有child view的container則成為所有child view 的 parent view。（父視圖）
一個view只能有一個parent view。（一個人只能有一個老爸）
但是一個view可以有很多個child view。(一個人可以生很多兒子)。
Parent view的責任
既然當了別人的老爸，那麼身為parent view的container就要負責管理所有的child view。
管理的內容包含：新增child view，移除child view，更新child view顯示的內容或者大小位置…等等。
而在Parent View管理的眾多事務中，有兩個特別重要。
1.每一個Parent view都有屬於自己的階層關係。
不管是什麼View，只要成為了別人的parent view，那麼所有的child view一定都是從自己開始，一層一層往上疊。就像現實社會中，當老爸的永遠是在最下面乖乖的支撐著家人。
2.parent view定義了所有child view可以被看到的範圍。
只要變成別人的Child View，那麼可正常被顯示出來的範圍就只侷限在parent view的範圍之內。
意思就是說，如果child view放置在parent view的面積之外，有可能不被顯示。
例如：
上面這張圖是威爾哥之前出國玩的照片。
我們把這張圖加到某個View裡面，變成別人的child view。
藍色的框框，是parent view的大小。
很明顯的，這麼一個小框框完全無法束縛住哥的帥氣。
所以身體以及背景的船隻都超出了藍色的框框。
不過如果我們不做任何修改，直接執行我們的APP
咦？什麼都沒有變，還是一樣看到整張圖片。
這是因為在View的layer中，有一個屬性叫做 masksToBounds。
這個屬性負責的任務就是，是否將超出範圍的內容省略不顯示。
預設是false，也就是不省略。
如果我們將這個值改成true，則結果如下
我們只能在畫面上看到上面這麼一小塊圖案。
所以說，超出parent view範圍的內容，有可能被省略。
最後，讓我們下面這個例子來做一個總結。
兩個色塊，綠色在下面，紅色在上面。
如果色塊之間不是父子關係，那麼當有重疊的時候會如下圖。
紅色在上面，所以會蓋住綠色。紅色會完整顯示。
如果色塊之間是父子關係，而且parent view的masksToBounds設定為true。
則如下圖，
因為紅色是綠色的child view，所以紅色一定是在綠色的上面，而紅色超出綠色的部份則不顯示。
小結:👉 View與View之間有階層關係，像疊羅漢一樣一層一層疊上去。
👉 上面層的View會蓋住下面層重疊的地方。
👉 每個View都是Container，可以容納其他View。
👉 每個View只有一個Parent View(Super View)
👉 每個View可以有很多Child View(SubView)
iOS中只有一個座標系統嗎？
在一開始講到座標的時候，有一個問題沒有被解答。
這個問題就是，
iOS中只有一個座標系統嗎？
答案是，有很多個座標系統。
前面說到，parent view 定義了所有Child view可以被看見的範圍。
這句話說明了，每個身為parent view的View，都 提供了一個座標系統給child view使用。
讓我們一步一步來了解這個機制到底是如何運作！
首先，每次我們將View放到畫面上的時候，其實我們在做的事情，
都是把View加到另一個View中，變成別人的Child View。
而加入View的時候，需要指定原點座標。
這邊的原點座標，使用的就是parent view的座標系統
也就是在parent view裡面的座標。
有點難懂？
那來看看Picture吧！
案例1
上面兩張圖，我們將某個View加到另一個View，某個View的原點設定為(100,100)。
因為parent view的長與寬各是400 400，所以100,100會出現在Parent view的中間部分。
案例2
但是如果Parent view的長寬只有200,200。那麼將同一個View加入這個 view的話，
結果就如圖上所示，顯示在parent view的右下角啦！
因此可以得到結論：
iOS中有許多座標系統，因為每個身為parent view的View 都會提供一個座標系統給Child View使用。
小結:👉 每個View都會提供自己的座標系統給child view使用
實作影片
相信經過上面的解釋，各位帥帥與水水們一定對View有了很清楚的認識。
什麼？沒有！！Σ(*ﾟдﾟﾉ)ﾉ
那還是看示範影片吧。
導播，上影片～
結論:
UIView是iOS中構築使用者介面最基本的元素，將UIView放到畫面中的時候，必須指定這個View的位置以及大小才能正常顯示，而這個位置是指在parent view的座標系統中的位置。每一個View只能有一個唯一的parent view，但是可以擁有複數的subview。在同一個parent view之下的subView 是採用疊羅漢的方式一層一層疊加上去，所以如果顯示的內容有重疊的話，上面的view會蓋住下面的view。最後，child view的活動範圍不能超出parent view的範圍，超出的部份不會被顯示。
了解了上面這些關於View的基本特性之後，相信我們在打造UI的時候必定能夠更加得心應手。
不過關於這篇文章中有一點沒有提到，就是同一個UI如果顯示在不同大小的iPhone上，究竟會變得怎樣呢？
預知詳情，請期待UIView系列第二篇！
持續關注威爾哥，學習iOS笑呵呵。
威爾哥的iOS小教室，我們下次見！
️千山萬水總是情，按個「拍手」行不行。如果你覺得我的文章還不錯，可以「Follow」我，然後順手按個拍手鼓勵鼓勵我！我會非常高興的。按住👏 1秒 ，神清氣爽。
按住👏 5秒 ，通體舒暢。
按住👏 10秒，說吧，要吃什麼，今晚宵夜我請。謝謝大家！
