Unity3d學習筆記（8）-- 可展開公告牌

模仿這個網站制造一個可展開的公告牌 http://www.tasharen.com/ngui/example9.html（PS：請用ie打開）

一.首先上個最終的效果圖：

二.首先建立一個ScollView，然後給Content添加一個VerticalLayoutGroup元件，并為Content建立三個Button和Text子對象，并把每個Button的Transition設為None，結果如下圖所示：

三.給Canvas添加一個Image的元件，把公告牌的背景圖檔放上去（左圖），還要給ScrollView加上一張背景（右圖）

順便提一下怎麼把一張圖檔轉化為Sprite，點選圖檔，把TextureType設定為Sprite（2D and UI）：

四.之後設定一下ScrollView的Anchors

五.之後要弄的是設定各個Button的圖檔和ScrollBar的圖檔，顔色和設定各個Text（包括Button的Text）的内容，之後你可能

會發現文本不能全部顯示和滾動條沒能出現之類的問題，這是隻要設定Text的高度和Content的高度就可以了，如果以上步驟都沒問題的話，應該和下圖差不多：

好了，到了這裡，布局就完成了，剩下的就是點選button時，文本折疊起來和展開。

六.我這裡是通過旋轉文本和改變文本的高度來實作的，先看下代碼

IEnumerator rotateIn()
    {
        float rx = 0;
        float xy = 120;
        for (int i = 0; i < frame; i++)
        {
            rx -= 90f / frame;
            xy -= 120f / frame;
            text.transform.rotation = Quaternion.Euler(rx, 0, 0);
            text.rectTransform.sizeDelta = new Vector2(text.rectTransform.sizeDelta.x, xy);
            if (i == frame - 1)
            {
                text.gameObject.SetActive(false);
            }
            yield return null;
        }
    }
           

這是折疊的代碼，因為剛學到協程，是以是通過協程來實作的，通過每幀來改變文本的角度和文本的高度，來實作折疊的效果，展開的也類似。好了，到了這裡，

整個實作也完成了，以下是所有的代碼

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class Bulletin : MonoBehaviour {

    private Button yourButton;
    public Text text;
    private int frame = 20;

    // Use this for initialization
    void Start()
    {
        Button btn = this.gameObject.GetComponent<Button>();
        btn.onClick.AddListener(TaskOnClick);
    }

    IEnumerator rotateIn()
    {
        float rx = 0;
        float xy = 120;
        for (int i = 0; i < frame; i++)
        {
            rx -= 90f / frame;
            xy -= 120f / frame;
            text.transform.rotation = Quaternion.Euler(rx, 0, 0);
            text.rectTransform.sizeDelta = new Vector2(text.rectTransform.sizeDelta.x, xy);
            if (i == frame - 1)
            {
                text.gameObject.SetActive(false);
            }
            yield return null;
        }
    }

    IEnumerator rotateOut()
    {
        float rx = -90;
        float xy = 0;
        for (int i = 0; i < frame; i++)
        {
            rx += 90f / frame;
            xy += 120f / frame;
            text.transform.rotation = Quaternion.Euler(rx, 0, 0);
            text.rectTransform.sizeDelta = new Vector2(text.rectTransform.sizeDelta.x, xy);
            if (i == 0)
            {
                text.gameObject.SetActive(true);
            }
            yield return null;
        }
    }


    void TaskOnClick()
    {
        if (text.gameObject.activeSelf)
        {
            StartCoroutine(rotateIn());
        }
        else
        {
            StartCoroutine(rotateOut());
        }
        
    }
}