Unity3d--简单的公告牌制作
一、先给大家看一下最终的实现效果
二、接下来为大家介绍一下制作这个公告牌的整个思路。
1）首先公告牌里面会有许多公告，这些公告一开始都是折叠的，然后我们通过点击这些公告这些公告就会展开，再点击的话就会收缩。然后如果公告过多的话，我们还可以通过滑动鼠标滚轮或者拖动滚动条来实现下拉和上移。
2）很幸运的是，unity已经帮你开发了一个半成品的UI系统，所以很多东西都是现成的。
首先我们需要创建一个canvas，我们需要在这个画布上铺上我们的公告背景，然后将我们的公告栏的核心部分放在画布上。
右键，在UI中找到canvas，点击并新建。为canvas添加Image属性，然后在canvas属性栏里的Image中，我们可以看到一个Source Image栏，我们可以拖动符合格式的文件到Source Image栏中，这样该文件将成为我们画布的背景。
需要注意的的是，这里Source Image要求的文件格式是Sprite类型，所以普通的图片是不能够满足要求的。所以这里我们需要先将我们所找到的图片转化为Sprite类型。转换方法也十分简单，你先将你准备转换的图片导入到项目之中，点击这个图片，然后将它的TextureType设置为Sprite（2D and UI），接着把它拖到Source Image就行了。这样我们画布的背景就设置好了。
3）接下来我们需要创建的是公告栏的核心部分，也就是张贴公告的部分
首先我们右键点击canvas，在UI栏里找到ScrollView并新建，你会发现出现了这样的一个结构
第一步你需要给Content添加一个叫VerticalLayoutGroup的组件，即垂直布局。接着我们需要在Content里面创建若干个button和文本；我们的设想是当button被点击的时候，我们的文本就会出现，再次点击文本就会被折叠起来。
然后我们需要设置的地方有这些，看下图：
4）设置一下ScrollView的Anchors参数
这些参数里面比较重要的可能就是上面的Left、Top、Pos Z、Right、Bottom这几个参数，学过web的同学可能理解起来更加容易一点。这些参数就好像css里的margin一样，设置的是布局的外边距。然后下面哪些参数，大家自己可以自己动动手亲自去尝试一下每个参数到底代表了什么。
5）然后要弄的就是每个栏的高度以及一些背景颜色了
在这个过程中，你可能会遇到文本框不能完全显示的问题或者滚动条消失的问题，出现这些问题的原因是你的Content和你的text的高度不能适配，导致了Content不能完全包括text的整个区域，因为这样才会出现问题。下面给出我对于这些地方的设置，当然在你实现的时候你需要按照你心中想的自己慢慢的去调整各项参数了。
6）最后一步就是通过代码来对用户的点击事件进行相应，使得公告栏能做到向我们上面所说的，点击展开，再点击折叠的功能。下面给出我的所有代码：
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class Fold : MonoBehaviour
{
public Text text;//文本框对象
private int frame = 20;//规定公告栏折叠和展开的帧数
// Use this for initialization
void Start()
{
text.gameObject.SetActive(false);//在我的设置中，一开始文本框是处于折叠状态的
Button btn = this.gameObject.GetComponent<Button>();//获取到button对象
btn.onClick.AddListener(TaskOnClick);//为button设置点击监听
}
IEnumerator rotateIn() // 让公告折叠的函数
{
float rx = 0;
float xy = 120;
for (int i = 0; i < frame; i++)
{
rx -= 90f / frame;
xy -= 70f / 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 += 70f / 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());
}
}
}代码其实不多，也很容易看懂，大家就自己根据我的注释好好的钻研一下吧。不懂得就看官方手册，这个真的很重要也很有用。要说明的是，完成代码后，我们需要把它挂载到我们的每一个button之上，并把每个button对应的text拖到相应的栏目里面
到这里就全部结束了，希望大家有个快乐学习的过程~