6-11 Decorating Login User Interface

前幾章已簡單介紹過NHibernate的用法了，接下來便要開始實作我們的登入、註冊功能啦！首先最重要的，就是要來佈置我們的登入畫面，我想大家都不希望登入畫面醜醜的吧，所以我先上個完成圖給大家看，大致上如下圖這樣。

但由於這張登入畫面是我付費購入的版權資源，就不方便提供給大家。但是網路上隨意找找的話還是有很多好看的免費登入畫面唷，比方說這裡
https://colorlib.com/wp/template/login-form-v4/

這個網頁有提供50個免費的登入畫面範本唷，雖然比較像是給網頁用的，但重點是裡面提供的圖片資源啦，稍加改造還是很適合當作手機版本的登入畫面：
https://colorlib.com/wp/html5-and-css3-login-forms/

好的，那接下來回來佈置我們的畫面。首先在Scene的設定選擇2D。

接著選擇GameObject/UI/Canvas，建立一個新畫布。

然後在Canvas的Canvas Scaler組件中，將UI Scale Mode設定為Scale With Screen Size，這樣UI才會隨著螢幕大小進行縮放唷。


Reference Resolution可設為1920x1080，這是以網路上大多可下載的範例都是用螢幕解析為主。也可以考慮主要的手機螢幕尺寸解析度為主，如iPhone 8 是1334x750。


接著在Canvas底下按右鍵選擇UI/Image。

命名為Background，用來放置背景圖。

設定好後，按下Set Native Size，會自動將Image的大小設定成圖片的大小。

效果上超出了Canvas。

所以我們將它調整小一點。

 接著在Canvas底下繼續新增Image，我命名為Login Window。

針對Login的背景圖我向大家介紹一個功能，首先到該圖片的Inspector中，按下Sprite Editor。

大家仔細看，應該會看見圖片的邊緣有綠色框線。

接著將框下拉到如下圖的樣子，此設定可以讓圖片在伸縮的時候，只會將圖中被框住的部位進行伸縮，其他部位維持不變。比方說圖片裡不是有一些凹角嗎？如果凹角也跟著伸縮的話就有可能會變得很醜。

然後Image Type必須設定為Sliced。

接著請看原本的大小如下。

然後我將寬度改變了以後，那些凹角的角度與形狀並沒有變形。

接著在Login Window底下建立一個Header的Image。

同樣自己放入背景圖，如上所述使用Sprite Editor編輯，接著選擇Sliced。

成果如下，然後在Header底下再新增一個Text。

Text設定可參考如下。

然後我們可以替文字加入一個Shadow組件。

使用Shadow組件後就能使文件產生陰影。

效果如下圖。

然後是登入框的框線，由於前面都已經講解過Image的概念了，就不再贅述。

但是這邊介紹一個好東西給大家，比方說有左右邊框線的時候，是否就要再額外製作另外一邊的資源呢？如下圖，其實我們可以使用程式碼的方式，將左框線反轉變成右框線。

匯入事先寫好的UIFlippable.cs，然後將Horizontal勾選起來，就可以進行水平翻轉，如果勾選Veritical的話就能垂直翻轉了。很方便吧！又可以節省一個圖片資源。

效果如下圖。

以下提供UIFlippable.cs的原始碼：

using UnityEngine;
using System.Collections.Generic;

namespace UnityEngine.UI
{
 [RequireComponent(typeof(RectTransform)), RequireComponent(typeof(Graphic)), DisallowMultipleComponent, AddComponentMenu("UI/Flippable")]
#if UNITY_5_2 || UNITY_5_3_OR_NEWER
    public class UIFlippable : MonoBehaviour, IMeshModifier {
#else
    public class UIFlippable : MonoBehaviour, IVertexModifier {
#endif
        [SerializeField] private bool m_Horizontal = false;
  [SerializeField] private bool m_Veritical = false;
  
  /// 

  /// Gets or sets a value indicating whether this  should be flipped horizontally.
  /// 
  /// true if horizontal; otherwise, false.
  public bool horizontal
  {
   get { return this.m_Horizontal; }
   set { this.m_Horizontal = value; }
  }
  
  /// 

  /// Gets or sets a value indicating whether this  should be flipped vertically.
  /// 
  /// true if vertical; otherwise, false.
  public bool vertical
  {
   get { return this.m_Veritical; }
   set { this.m_Veritical = value; }
  }
  
#if UNITY_EDITOR
  protected void OnValidate()
  {
   this.GetComponent().SetVerticesDirty();
  }
#endif

#if UNITY_5_2 || UNITY_5_3_OR_NEWER
        public void ModifyMesh(VertexHelper vertexHelper)
  {
   if (!this.enabled)
    return;
   
   List list = new List();
   vertexHelper.GetUIVertexStream(list);
   
   ModifyVertices(list);  // calls the old ModifyVertices which was used on pre 5.2
   
   vertexHelper.Clear();
   vertexHelper.AddUIVertexTriangleStream(list);
  }

        public void ModifyMesh(Mesh mesh)
        {
            if (!this.enabled)
                return;

            List list = new List();
            using (VertexHelper vertexHelper = new VertexHelper(mesh))
            {
                vertexHelper.GetUIVertexStream(list);
            }

            ModifyVertices(list);  // calls the old ModifyVertices which was used on pre 5.2

            using (VertexHelper vertexHelper2 = new VertexHelper())
            {
                vertexHelper2.AddUIVertexTriangleStream(list);
                vertexHelper2.FillMesh(mesh);
            }
        }
#endif

        public void ModifyVertices(List verts)
  {
            if (!this.enabled)
                return;

            RectTransform rt = this.transform as RectTransform;
   
   for (int i = 0; i < verts.Count; ++i)
   {
    UIVertex v = verts[i];
    
    // Modify positions
    v.position = new Vector3(
     (this.m_Horizontal ? (v.position.x + (rt.rect.center.x - v.position.x) * 2) : v.position.x),
     (this.m_Veritical ?  (v.position.y + (rt.rect.center.y - v.position.y) * 2) : v.position.y),
     v.position.z
    );
    
    // Apply
    verts[i] = v;
   }
  }
 }
}