用Unity3D实现可展开公告版_unity点击按钮出现公告

用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());
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

效果截图

开始界面：

点击公告栏可以展开或收起公告文本：

右方滚动条会随展开文本高度而变化滚动条长度：