Unity 3D 可展开公告牌

一、项目结构

二、制作流程

0.准备图片资源

将所需图片放于Assets文件夹下

在unity中转化为Sprite(2D and UI)

不转化图片无法加载进canvas

1.添加canvas并调节参数加上背景

在image组件里面就可以设置背景

2.在canvas中加入Scroll View

用于显示信息和滚动条

调节Scroll View参数：加入背景图片

调节content参数，添加VerticalLayoutGroup和Content Size Fitter 组件

3.在content下添加3个button以及3个text

调节按钮高度、文本框高度以及背景图片

4.调节滚动条的参数

包括图片、颜色、位置等

5.静态调整button与text的位置

调整后效果：

6.给button挂载折叠代码

三、折叠公告牌代码

using System.Collections;using System.Collections.Generic;using UnityEngine;using UnityEngine.UI;public class FolderScript : MonoBehaviour {private Button btn;public Text text;public int frame;public float height;void Start() {btn = this.gameObject.GetComponent<Button>();btn.onClick.AddListener(OnClick);StartCoroutine(TextCollapsed());}IEnumerator TextCollapsed() {float y = height;for (int i = 0; i < frame; ++i) {y -= height / frame;text.rectTransform.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Right, 0, text.rectTransform.sizeDelta.x);text.rectTransform.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Bottom, 0, y);if (i == frame - 1) {text.gameObject.SetActive(false);}yield return null;}}IEnumerator TextVisible() {float y = 0;for (int i = 0; i < frame; ++i) {y += height / frame;text.rectTransform.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Right, 0, text.rectTransform.sizeDelta.x);text.rectTransform.SetInsetAndSizeFromParentEdge(RectTransform.Edge.Bottom, 0, y);if (i == 0) {text.gameObject.SetActive(true);}yield return null;}}void OnClick() {if (text.gameObject.activeSelf) {StartCoroutine(TextCollapsed());//启动协程收起公告}else {StartCoroutine(TextVisible());//启动携程展开公告}}}

四、其他bug

制作过程中遇到了显示文字为方块问题，百度后发现是unity不支持中文，需要导入文字。

参考博客：Unity textMeshpro 显示中文设置_JK Chen的博客-CSDN博客_textmeshpro 中文

五、项目汇总

参考博客：Unity3d学习笔记（8）-- 可展开公告牌_x2_yt的博客-CSDN博客

Unity3D | UI系统 折叠展开公告板_Metamorphosis_Anja的博客-CSDN博客_unity中ui收起和展开

项目演示：Unity 3D可展开公告栏_哔哩哔哩_bilibili

项目地址1：/download/weixin_53301716/87385812

项目地址2：unity: 1111 -