用Unity3D實現可展開公告版

項目地址

可展開公告版

完成效果圖

要求

• UI 效果制作：
  • 進入 NGUI 官方網站，使用 UGUI 實現可展開 Quest Log 公告牌效果：
    
    

項目實現過程

1、首先創建一個Scroll View，然后給Scroll View的子元素ViewPort的子元素Content添加一個Vertical Layout Group組件，讓里面的內容垂直分布，因為沒有用到橫向滾動的滑動條，所以可以將橫向滾動的滾動條，即Scroll View的子元素Scroll View的子元素Scrollbar Horizontal刪除，因為在官方網站示例的效果中，滾動條根據內容展示變化長度，所以再給Content添加一個Content Size Fitter組件，使滾動條可以自適應內容長度變化，Scroll View和Content的屬性設置為：

2、然后為Content創建三個Button和三個Text子對象，每個Button的Transition要設置為None，結果如下所示：

3、然后編寫按鈕的點擊腳本ButtonAction，使點擊按鈕后，相應的文本可以展開或收起，并把腳本掛載到按鈕上，設置相應控制文本，所編寫的代碼如下：

public class ButtonAction : MonoBehaviour {public Text expandText; // 要擴展的文本private int frame = 30; // 幀數private float height = 180; // 展開文本高度void Start() {// 為按鈕設置點擊事件Button button = this.gameObject.GetComponent<Button>();button.onClick.AddListener(OnClick);// 開始時文本收起StartCoroutine(Fold());}// 文本收起IEnumerator Fold() {// 獲取文本底部坐標float textY = height;// 按幀收起文本for (int i = 0; i < frame; ++i) {textY -= height / frame;expandText.rectTransform.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Right, 0, expandText.rectTransform.sizeDelta.x);expandText.rectTransform.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Bottom, 0, textY);if (i == frame - 1) {expandText.gameObject.SetActive(false);}yield return null;}}// 文本展開IEnumerator Unfold() {// 獲取文本底部坐標float textY = 0;// 按幀展開文本for (int i = 0; i < frame; ++i) {textY += height / frame;expandText.rectTransform.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Right, 0, expandText.rectTransform.sizeDelta.x);expandText.rectTransform.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Bottom, 0, textY);if (i == 0) {expandText.gameObject.SetActive(true);}yield return null;}}// 點擊事件void OnClick() {// 如果文本在展開狀態if (expandText.gameObject.activeSelf) {// 使用協程收起StartCoroutine(Fold());}else {// 使用協程展開StartCoroutine(Unfold());}} }

效果截圖

開始界面：

點擊公告欄可以展開或收起公告文本：

右方滾動條會隨展開文本高度而變化滾動條長度：

總結

以上是生活随笔為你收集整理的用Unity3D实现可展开公告版的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。