彩世界开奖app官网-彩世界平台官方网址(彩票平台)
做最好的网站
来自 计算机编程 2019-12-07 01:31 的文章
当前位置: 彩世界开奖app官网 > 计算机编程 > 正文

UGUI制作滑动页面和滑动条【彩世界开奖app官网】

1.Image组件—“Source Image”,Set Native Size.

总结

父控件:指的是添加了LayoutGroups组件的GameObject
控件大小信息:指的是控件最小大小,最合适(期望)大小,控件最大大小

1.1 LayoutElement负责提供该组件所附加的物体的控件大小的信息,不提供位置信息。只提供大小信息,并且不直接控制自己的大小,由其它组件控制.例如,LayoutControl、LayoutGroups

1.2Text,Image本身就实现了ILayoutElement接口,提供了控件大小的信息,但它的控件大小信息是系统源码提供的;如果想修改Text,Image等控件大小的信息,可以给物体添加LayoutElement组件,系统会读取LayoutElement组件提供的大小

父对象LayoutGroups是如何利用控件提供的大小信息来控制子对象大小和位置,并分配空间的呢?
 首先,父对象获取控件期望的最小的大小,然后分配最小的大小,即使父控件的空间比子控件的期望大小要小,子控件也一样可以获得它期望的最小值,也就是最小的大小一定能够得到满足.
 其次,如果父对象还有足够的空间,那就分配控件的最合适(期望)的大小给控件.
 最后,如果父控件分配完最合适(期望)大小之后,还有额外空间.则按照控件提供的最大(扩展比率)大小,按照比率分配额外的空间给控件.

最大值,它是一个相对数值,是0和大于0的数组成。该值的意思是表示父控件的多个子控件分配额外空间的一个比率,最大值设置是在Layout Element的Flexible Width和Flexible Height.
举个栗子:比如一个父控件下有A、B两个子控件,A的最大值是1,B的最大值是2,则表示父控件剩余的空间平分三分,A占用1份,B占用2份,0表示不占用父控件的多余空间.

总之,父控件分配子控件的大小是按照先保证子控件满足最小大小的要求;然后,如果父控件还有足够的空间,就分配给子控件按照合适的大小;如果还有额外的空间,则分配给子控件比率空间.

再举个栗子:有A、B两个子控件,A设置宽高最小值为0,0,期望值为0,0,最大值2,2,B设置宽高最小值为0,0,期望值为100,100,最大值1,1,父控件的大小为160×160.

  • 第一轮 按照最小值分配给A、B,得到A、B控件的大小都为0,0
  • 第二轮 父对象此时空间依然还是160×160,空间足够,按照适合大小进行分配,A适合大小0,0,B适合大小100,100
  • 第三轮 分配完父容器还剩余60×60,还有额外空间,则按照A、B设置的最大值平分分配,A最大值2,B最大值1,一共3份,60/3=20,每份20,那么A分到的就是40×40,B分到的就是20×20,加上之前分配的,则A控件大小是40×40,B控件大小120×120,分配完毕.

现在运行就可以横向拖动滑动页面了,现在直接添加一个滑动条,再把新建的滑动条与Scroll Rect中的Horizontal Scrollbar联动

   (5)按页数进行滑动(分页)脚本

3.LayoutControl

LayoutControl主要用于控制组件附加物体的RectTransform,ContentSizeFitter就是一个LayoutControl组件,LayoutGroup下的子物体大小已被控制了,会冲突所以添加不了ContentSizeFitter

  • ##### 自动布局的实际运用

1.创建一个空物体作为布局容器(父物体),为父物体添加一种布局方式的组件如Grid Layout Group
2.把做好的格子(cell)拖放成Prefab,创建脚本实例化Prefab,把它设置为布局容器的子物体即可(setParent),Layout Group会根据大小自动计算布局,注意这个脚本最好挂在布局容器上

会看见有图标在Canvas之外显示,可以再在其底板上加上Mask组件

2.Image组件—“Image Type”——Sliced

1.LayoutElement

这个组件能提供组件的最大最小和最合适大小信息,比如Text,Image都是实现了ILayoutElement接口的组件,所以它会自动获取

彩世界开奖app官网 1

image.png

如果一个RectTransform的物体的其中一个组件实现了ILayoutElement接口,同时这个RectTransform的物体又添加了Layout Element组件, 那么起作用的是Layout Element

彩世界开奖app官网 2

image.png

彩世界开奖app官网 3

image.png

Image继承了ILayoutElement,重写了虚方法,如果没有图片就返回0,如果图片类型是九宫或者重复平铺类型,那么就返回图片的原始大小

彩世界开奖app官网 4

 

2.LayoutGroup

LayoutGroups是用来控制子对象位置的,实现布局,但它不控制自己;当父对象添加了LayoutGroup,那么子对象的位置不再由子对象自己控制

一共有3种组件如下图,网格布局(Grid)、水平布局(Horizontal)、垂直布局(Vertical),一个游戏物体最多只能添加一个LayoutGroup

彩世界开奖app官网 5

image.png

  • #### Horizontal & Vertical Layout Group

水平布局和垂直布局都差不多,区别只是一个排列是水平方向,一个是垂直方向,这里选水平方向来介绍.
 Padding:内边距,可以设置距离上下左右四个边框的偏移量
 Spacing:表示cell之间的距离,也就是整个布局中每个单元之间的距离
 Child Alignment:表示对齐方式
 Control Child Size:是否控制子物体的大小(新版UGUI水平和垂直布局都添加了这个选项,网格布局依旧自动控制,老版本三个布局组件都默认控制子对象大小)
 Child Force Expand:表示自适应 宽 高,勾选上后所有子物体会被拉伸以至填充满整个布局容器

彩世界开奖app官网 6

image.png

彩世界开奖app官网 7

image.png

  • #### Grid Layout Group

Cell Size:子物体大小
 Start Corner: 子物体排列的角度
 Start Axis: 子物体排列的方向
 Constraint: Flexible灵活的( 按照父物体长宽自动横竖行 ) Fixed Column Count 指定列数 Fixed Row Count 指定行数

彩世界开奖app官网 8

image.png

一般用空物体来作为布局容器(父物体)然后布局容器下就是很多个格子(cell)了,而一个cell下面可能会放很多图片,例如说要有一个格子的背景图片,然后一个物品图片,所以一个cell我们也会用空的gameobject来当父节点。

彩世界开奖app官网 9

image.png

再在其下面建一个空物体,改变其大小,它的大小直接影响到可以滑动的最大范围

   (2)创建一个Image组件—“背景图”,命名为ScrollPanel(作为父物体,作为Mask),此时将选项卡托至此背景图下作为子物体。

现在添加Scroll Rect组件,Comtent拖入GameObject,取消Vertical的钩(竖直方向不能拖动)

4.锚点问题,是GUI中容易忽视但却十分重要的点。

彩世界开奖app官网 10

 

有人会说这样想整齐摆放图片自己手动调很麻烦,现在可以在其父物体上挂上Grid Layout Group这个组件,它可以帮你自动排列

  编辑要放大缩小的图片,Sprite Editor,采用九宫格切图。

先新建一个Image,改变其大小,这是是作为滑动页面的底板,它的大小直接影响最后作成的滑动页面的大小

 1 using System.Collections;
 2 using System.Collections.Generic;
 3 using UnityEngine;
 4 using UnityEngine.EventSystems;
 5 using UnityEngine.UI;
 6 
 7 public class LevelButtonScrollRect : MonoBehaviour ,IBeginDragHandler,IEndDragHandler{
 8 
 9     // Use this for initialization
10     private ScrollRect scrollRect;
11     private float[] pageArrayFloats = new[] {0, 0.33333f, 0.66666f, 1}; 
12     void Start ()
13     {
14         scrollRect = GetComponent<ScrollRect>();
15     }
16     
17     // Update is called once per frame
18     void Update () { 
19         
20     }
22     public void OnBeginDrag(PointerEventData eventData)
23     {
24         
25     }
27     public void OnEndDrag(PointerEventData eventData)
28     {
29         //Vector2 offsetTemp = scrollRect.normalizedPosition;
30         float offsetTemp = scrollRect.horizontalNormalizedPosition;
31         print(offsetTemp);    
33     }
34 }

彩世界开奖app官网 11

   (4)在“背景图”上添加"Mask"组建。

彩世界开奖app官网 12

    创建空物体和创建Panel作为父物体是由区别的!

彩世界开奖app官网 13

     

现在运行后拖动滑动条就可以控制滑动页面了,当然不借助滑动条去滑动页面,滑动条也会跟着动

父物体添加过"ToggleGroup"组件

彩世界开奖app官网 14

   (3)在“背景图”上添加“Scroll Rect”滑动组建,Content对象为选项卡图标集合,来控制子物体。

再在其下面可以放例如道具类的图片了

   (1)选项卡图标排列整齐

彩世界开奖app官网 15

 1 using System.Collections;
 2 using System.Collections.Generic;
 3 using UnityEditor;
 4 using UnityEngine;
 5 using UnityEngine.EventSystems;
 6 using UnityEngine.UI;
 7 
 8 public class LevelButtonScrollRect : MonoBehaviour ,IBeginDragHandler,IEndDragHandler{
 9 
10     // Use this for initialization
11     private ScrollRect scrollRect;
12     private float[] pageArrayFloats = new[] {0, 0.33333f, 0.66666f, 1};
13     private float targetHorizontalPosition = 0;                              //默认为第一页
14     private bool isDrag = false;
15     public float speed = 5f;
16     void Start ()
17     {
18         scrollRect = GetComponent<ScrollRect>();                             //寻找组件,物体间的通信
19     }
20     
21     // Update is called once per frame
22     void Update () {
23         if (isDrag==false)
24         {
25             scrollRect.horizontalNormalizedPosition = Mathf.Lerp(scrollRect.horizontalNormalizedPosition,
26                 targetHorizontalPosition, speed * Time.deltaTime);
27         }
28     }
29 
30     public void OnBeginDrag(PointerEventData eventData)
31     {
32         isDrag = true;
33     }
34 
35     public void OnEndDrag(PointerEventData eventData)
36     {
37         isDrag = false;
38         float posX = scrollRect.horizontalNormalizedPosition;
39         int index = 0;
40         float offset = Mathf.Abs(pageArrayFloats[index] - posX);
41         for (int i = 0; i < pageArrayFloats.Length; i  )
42         {
43             float offsetTemp = Mathf.Abs(pageArrayFloats[i] - posX);
44             if (offsetTemp < offset)
45             {
46                 index = i;
47                 offset = offsetTemp;
48             }
49         }                                                                   //哪一页的位置与当前页的位置差最小,就定在哪一页上
50         //scrollRect.horizontalNormalizedPosition = pageArrayFloats[index];
51         targetHorizontalPosition = pageArrayFloats[index];
52     }
53 }
54 //注:最后一次鼠标滑动的位置是确定的,让这个位置与每一页的位置(4页的位置)比较,差值最小的,则固定在(4页位置)中的哪一页上 
55 //多次判断语句,用到for循环(特别是for{if(){}})

彩世界开奖app官网 16

   (6)单选按钮,进入制定页面,并与鼠标滑动脚本相关联。

再调一下Grid Layout Group中的参数

6.滚动图片列表的制作

5.Prefabs的有效使用,后期通过更改Prefabs来进行完整的映射修改。

3.创建空物体(作为父物体),添加Componment—Layout—Grid Layout Group(是下面的子物体自动排列)

本文由彩世界开奖app官网发布于计算机编程,转载请注明出处:UGUI制作滑动页面和滑动条【彩世界开奖app官网】

关键词: Unity之U... Unity学习笔记 UGUI