UI公告牌项目文档

一、 项目配置

直接运行SampleSence即可

二、 实现过程和方法

1. 总体设计思路

利用已有的UI元素——Canvas、Button、Text等实现静态的公告牌，结合代码控制Text文本框的大小实现公告的折叠和展开。

2. 具体实现

• 首先右键点击，在UI选项中找到Canvas，点击并新建。

• 为canvas添加Image组件，然后在canvas属性栏里的Image中，我们可以看到一个Source Image栏，我们可以拖动符合格式的文件到Source Image栏中，这样该文件将成为我们画布的背景。

• 选择适合作为公告牌的图片，导入作为资源，在其Inspector视图中，将Texture Type修改为Sprite（2D and UI），以便可以拖到Canvas的Image组件中的Source Image栏中。

• 右键点击canvas，在UI栏里找到ScrollView并新建一个ScrollView，然后给Content添加一个VerticalLayoutGroup组件，即垂直布局。

• 接着在ScrollView的Content下逐个新建Button和Text，最终结构如下：

  

• 接下来需要做的是调整Content大小，Button大小和颜色以及Text的框大小，直至可以正常显示。

• 调整好布局之后，便可在Text中输入文字，并在Button下的Text对象更改按钮上的文字。

• 最后需要实现的就是通过代码实现按钮点击触发公告文字的折叠和展开，实现代码如下：

  using System.Collections;
  using System.Collections.Generic;
  using UnityEngine;
  using UnityEngine.UI;
   
  public class Fold : MonoBehaviour
  {
      public Text text;//文本框对象
      private int frame = 20;//规定公告栏折叠和展开的帧数
   
      void Start()
      {
          text.gameObject.SetActive(false);//一开始文本框处于折叠状态
          Button btn = this.gameObject.GetComponent<Button>();//获取到button对象
          btn.onClick.AddListener(TaskOnClick);//为button设置点击监听
      }
   
      IEnumerator rotateIn()
      {
          float xy = 120;
          for (int i = 0; i < frame; i++)
          {
              xy -= 120f / frame;
              text.rectTransform.sizeDelta = new Vector2(text.rectTransform.sizeDelta.x, xy);
              if (i == frame - 1)
              {
                  text.gameObject.SetActive(false);
              }
              yield return null;
          }
      }
   
      IEnumerator rotateOut()
      {
          float xy = 0;
          for (int i = 0; i < frame; i++)
          {
              xy += 150f / frame;//调整该参数可控制展开的高度
              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());
          }
      }
  }
  

• 实现原理是通过利用协程每一帧改变Text文本框的大小。

• 最后把代码挂载到每一个button上，并把每个button对应的text拖到相应的栏目里面即可。

三、总结

本次作业通过UGUI实现了公告牌，主要涉及了画布Canvas，按钮Button和文本框Text。通过向Canvas的Image组件插入图片来实现公告牌的制作，通过Text呈现公告内容，利用Button响应用户的动作，通过代码控制Text的边框大小结合协程动画来实现文本的折叠和展开。Unity的协程系统是基于C#的一个简单而强大的接口 IEnumerator，通过协程可以方便地实现动画，其原理在于通过yield return 0 暂停当前的执行，直到下一帧到来继续执行，从而实现逐帧的变化。

四、效果展示

Unity3D作业-公告牌演示视频哔哩哔哩bilibili