NGUI學習筆記（一）UILabel介紹

來個前言：

做爲一個U3D程序員，天然要寫一寫U3D相關的內容了。想來想去仍是從UI開始搞起，可能這也是最直觀同時也最重要的部分之一了。U3D自帶的UI系統，也許略坑，也沒有太多介紹的價值，那麼從今天開始就記錄一下主流的UI插件-NGUI吧。

NGUI版本：

v3.6.8

學習筆記一

假定你們都已經將ngui導入到了項目中，這裏須要注意，插件(.package)的存放路徑不能有中文，不然會致使解壓失敗。

導入以後能夠看到幾個文件夾咯，Editor,Examples,Resources,Scripts，辣麼，做爲剛剛接觸U3D或者NGUI的小夥伴們，就能夠去Examples的Scenes目錄下去看看相應的例子，都是一些完成好的場景哦~

打開場景以後，能夠看到已經完成的UI，可是這時候默認的都是3D場景，而通常的UI都是2D的，因此記得在Scene視窗中把2D選項點上。這樣看起來就是2D的UI了。

建立UIRoot

OK，光說不練假把式，下面咱們本身來建立一個Scene，來製做本身的第一個UI。

建立好新的場景以後，在菜單欄的NGUI選項中能夠發現Options-->Reset Prefab Toolbar，點擊之，能夠發現NGUI預設的一些控件出現了。這就是方便咱們建立UI控件的地方。

那麼爲了知足承載NGUI的UI的需求，咱們須要一個UIRoot來做爲承載UI容器。那麼如何建立呢？很簡單，直接把Prefab Toolbar中的控件拖入場景中，你會發如今Hierarchy中出現了一個UIRoot。UIRoot建立成功，打開能夠發現其自帶了一個Camera，做爲UI的攝像機來渲染UI元素。

選中Scene中的UIRoot，右鍵，能夠看到菜單上出現了Create用來建立各類UI元素的選項,Attach添加滾動視野，屬性綁定等的選項,Tween添加動畫選項。

建立UILabel

UILabel，顧名思義，用來顯示文字。右鍵UIRoot，Create，UILabel。注意，若是右鍵UIRoot控件，沒有菜單彈出，則看下右側UIRoot的Inspector中的腳本是否沒有展開，若沒有展開則沒法運行相應的功能。

建立玩Label以後，點中它，能夠看到在屏幕右側的Inspector。咱們的關注點就在Inspector中UILabel腳本中的各個屬性。

Font:

首先是字體屬性Font，能夠看到有2種字體第一種是NGUI第二種是Unity,選擇NGUI則意味着使用的是咱們經過NGUI建立的字體（在菜單欄NGUI下拉菜單中選擇Open->FontMaker來建立NGUI字體，以後會介紹），

 

 

選擇Unity，能夠發現默認狀況下其只有一個Arial字體，辣麼一目瞭然咯，Unity字體其實就是動態字體.TTF。咱們能夠經過下載TTF字體放到項目目錄，再經過Unity字體來使用。

Font Size:

下面介紹下Font Size咯，就是字號，默認20。那麼咱們將字號設爲100，爲什麼發現字體沒有相應的變大呢？這是因爲Label控件自己還有一個Size的問題，就是一個容器和容器內容的關係，容器內容不可能比承載它的容器大。那麼只要設置Widget的Size屬性就能夠調節大小了。當Label控件的尺寸足夠大，則字體會按照設定的Font Size來顯示。固然字體顯示的方式，還與下面介紹的Overflow屬性有關。

Overflow:

和字體顯示相關一個屬性，至關於一個字體顯示的策略。包括4種策略，即ShrinkContent, ClampContent, ResizeFreely, ResizeHeight4種。下面來分別介紹。

ShrinkContent:即默認的策略，文字顯示的大小與Label的Size自動適應，Label控件的Size不足以顯示字體的大小時，字體的尺寸會去適應Label控件的大小。

ClampContent:如字面意思，就是裁剪掉沒法顯示的字體內容。字體內容會按照Font Size設定的大小來顯示，可是當Label控件的大小不足以盛放字體內容時，相應的字體內容被裁剪掉不會顯示。

ResizeFreely：與第一種策略相對應，這時是Label控件的大小去適應字體內容的大小。

ResizeHeight：同字面意思，Label控件的高度沒法手動調節，而是隨着字體內容的大小需求去適配字體內容，只能手動調節Label控件的寬度。

Alignment:

對齊方式選項。包括5種策略，好比常見的自動對齊，左中右對齊，還有一個較爲特殊的Justified對齊方式。

Justified：即自動擴展，使文字與Label控件的寬度保持一致。不過有一點須要注意，該對齊方式只對英文有效。中文就不要使用了。。。

Gradient:

字體顏色漸變的設置。包括Top和Bottom，即從Top色變到Bottom色。

Effect：

效果，無需贅述，包括描邊（outline）和陰影（Shadow）。

Color Tint：

字體渲染的顏色。

好啦，今天就先總結到這裏了。