效果:
當前用的 Unity 版本為 5.6.7f1,場景分辨率為 1440 * 2560,下面的案例中,都是以這個分辨率為標準,如果你設置的屏幕大小和我的不一樣,那么在后面的操作中,參數可能會不一樣。
1.在場景中添加一個 Canvas 組件
2.在 Canvas 中添加一個 Panel 組件
添加完成后,場景界面如下
??
3.在 Panel 里添加一個空的游戲物體?Content
如下
將 Content 的大小調整一下
在場景中的顯示如下
4.在 Content 里添加一個 UI 控件 Text
將 Text 大小和位置設置和 Content 一樣,另外將字體設置為100,將顏色設置為紅色
在 Text 中隨便加入一些文字
場景中如下
5.在 Panel 上添加 Scroll Rect 控件
將 Content 游戲物體拖入到 Scroll Rect 控件中的 Content 屬性里
6.測試效果
運行后,就可以拖動了,但是此時控件會左右晃動,效果:
?這里可以添加一個限制,只要取消 水平軸 的勾選,就可以讓控件只能在水平方向移動
效果:
這里效果基本完成了,接下來給界面加個滾動條。
7.添加滾動條
在 Panel 中,添加一個 UI 控件 Scrollbar
將滾動條 Direction 屬性 設置為 Buttom To Top ,也就是設置滾動條的方向
8.調整滾動條的顏色
找到子物體 Handle ,這個就是鼠標拖動的那個白方塊
將顏色調整為鮮艷一點的顏色,更容易辨認
9.調整滾動條的位置
滾動條的位置和大小數據設置如下
此時場景中的顯示如下
10.Scroll Rect 控件綁定 Scrollbar?
點擊 Panel 控件,將 Scrollbar 控件拖入到?Scroll Rect 控件的 Vertical Scrollbar 屬性中,如下圖
這時,需求基本完成了,效果:
?當前只是文本控件拖動的形式,其實滾動列表原理差不多。
?
11.滾動列表
先刪除上面步驟中的 Text 控件,這個暫時不需要了。
在 Content 里面添加一個空的游戲物體?Parent
Parent 的 Rect Transform 數據如下:
在 Parent 添加一個 UI 控件 Image
調整 Image 的大小
完成了上面的操作,在場景中顯示如下?
給 Parent 添加一個 Vertical Layout Group 控件,將 Child Alignment 設置為 Upper Conter (向上對齊,并居中)
完成了上一步的操作后,Image 控件會自動移動到最頂部
我們將 Image 控件再復制十個
場景中顯示如下:
運行后效果:
此時,雖然實現了滾動列表的效果,但是,此時滾動時一片空白,不知道那個是那個,接下來就做了一點改動,先刪掉剛復制的 Image,再在 Image 里面添加了一個 Text 控件。
場景中顯示如下:
接下來,就給 Image?掛上一個腳本 Test.cs
Test.cs 代碼如下
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class Test : MonoBehaviour
{
// Use this for initialization
void Start()
{
transform.Find("Text").GetComponent<Text>().text = transform.gameObject.name;
}
// Update is called once per frame
void Update()
{
}
}
接下來,將 Image 控件復制十份
場景中界面如下:
運行后效果如下:
這樣就OK了。
下載連接:點擊下載文章來源:http://www.zghlxwxcb.cn/news/detail-787566.html
?end文章來源地址http://www.zghlxwxcb.cn/news/detail-787566.html
到了這里,關于Unity UGUI 滾動列表的文章就介紹完了。如果您還想了解更多內容,請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持TOY模板網!