UGUI之布局的使用

unity的LayoutGroup分为三种, Horizontal Layout Group(水平布局)Vertical Layout Group(垂直布局)Grid Layout Group (网格布局)

Grid Layout Group

  如果单纯的时候用滑动效果可以使用Scroll Rect组件即可。但使用布局就要使用布局控件

Grid Layout Group是网格布局,先看看一个效果

其实滑动依然是用的Scroll Rect。这个就不说了。这里主要说布局。

Spacing 表示 cell之间的距离。

Cell表示格子的宽度和和高度

Start Axis 表示布局方式,有横向和纵向

Child Alignment 表示对齐方式。

注意Layout Group节点下面的所有cell节点都是不能修改Rect Transform的。因为cell可能下面会放很多图片,这样我们会用个空的gameObject来当父节点。

但你仔细看。会发现。这个不是整块滑动的。比如手机屏幕左右滑动,是滑动区域判断的。没有划过来的时候。会退回去。像这样

这里可以根据Scroll Rect组件的normalizedPosition属性来判断。这是一个Vector2坐标。是滑动中XY的值

horizontalNormalizedPosition:水平的值

verticalNormalizedPosition:垂直的值

需要在拖动结束后判断。需要继承

IBeginDragHandler,IEndDragHandler。引用命名空间:using UnityEngine.EventSystems;

具体代码:

using UnityEngine;
using System.Collections;
using UnityEngine.EventSystems;
using UnityEngine.UI;

public class newScroll : MonoBehaviour, IBeginDragHandler, IEndDragHandler
{
    ScrollRect rect;

    //页面:0,1,2  索引从0开始
    //每夜占的比列:0/2=0  1/2=0.5  2/2=1
    float[] page = { 0, 0.5f, 1 };

    //滑动速度
    public float smooting = 4;

    //滑动的起始坐标
    float targethorizontal = 0;

    //是否拖拽结束
    bool isDrag = false;

    // Use this for initialization
    void Start()
    {
        rect = transform.GetComponent<ScrollRect>();
    }

    // Update is called once per frame
    void Update()
    {
        //如果不判断。当在拖拽的时候要也会执行插值,所以会出现闪烁的效果
        //这里只要在拖动结束的时候。在进行插值
        if (!isDrag)
        {
            rect.horizontalNormalizedPosition = Mathf.Lerp(rect.horizontalNormalizedPosition, targethorizontal, Time.deltaTime * smooting);
        }
    }

    /// <summary>
    /// 拖动开始
    /// </summary>
    /// <param name="eventData"></param>
    public void OnBeginDrag(PointerEventData eventData)
    {
        isDrag = true;
    }

    /// <summary>
    /// 拖拽结束
    /// </summary>
    /// <param name="eventData"></param>
    public void OnEndDrag(PointerEventData eventData)
    {
        isDrag = false;

        //    //拖动停止滑动的坐标
        //    Vector2 f = rect.normalizedPosition;
        //    //水平  开始值是0  结尾值是1  [0,1]
        //    float h = rect.horizontalNormalizedPosition;
        //    //垂直
        //    float v = rect.verticalNormalizedPosition;

        float posX = rect.horizontalNormalizedPosition;
        int index = 0;
        //假设离第一位最近
        float offset = Mathf.Abs(page[index] - posX);
        for (int i = 1; i < page.Length; i++)
        {
            float temp = Mathf.Abs(page[i] - posX);
            if (temp < offset)
            {
                index = i;

                //保存当前的偏移量
                //如果到最后一页。反翻页。所以要保存该值,如果不保存。你试试效果就知道
                offset = temp;
            }
        }

        /*
         因为这样效果不好。没有滑动效果。比较死板。所以改为插值
         */
        //rect.horizontalNormalizedPosition = page[index];

        targethorizontal = page[index];
    }
}
时间: 2024-08-25 03:49:19

UGUI之布局的使用的相关文章

05 GUI UGUI

在Unity开发过程中,不论是3D还是2D开发都需要大量的UI界面来配合使用,用来达到更好的效果 GUI:在Unity脚本生命周期回调方法OnGUI中实现,每一帧渲染两次,在OnGUI中的GUI界面元素布局分为自动布局和自定义布局GUI自定义布局常用方法:方法调用格式: GUI.方法名(); 在使用自定义GUI布局的时候,每一个GUI控件都需要用代码去设置控件位置信息,在确定控件位置时会用到布局结构体Rect(x,y,width,height) GUI自动布局自动布局的类为GUILayout,使

深入理解Canvas Scaler

Canvas Scaler: 这是一个理解起来相当繁琐复杂的一个组件,但又是一个至关重要的组件,不彻底了解它,可以说对UGUI的布局和所谓的"自适应"就没有一个完整的认识. Canvas Scale指的是UI Canvas整体的缩放比例,这个值在Canvas 的Render Mode为 Screen Space – Overlay 的情况下默认为1,在 Canvas 的 Render Mode 为 Screen Space – Camera 的情况下则不一定为1,会受到渲染UI的摄像机

UGUI技术之基本布局使用_Unity3D开发_蓝鸥

[uGUI]基本布局 文/宋小波啊(作者) 本节我们来学习如何相对 Canvas 和其他元素来布局我们的 UI.我们可以先创建一个 Image 用来测试,在 GameObject 菜单中选择 UI -> Image 来创建. Rect 工具 每个 UI 元素都会用一个矩形表示,这样方便布局.在工具栏中选择 Rect 工具之后,我们就能在 Scene 视图中操作这个矩形.Rect 工具既能用于 Unity 中的 2D 物体和 UI 系统,对 3D 物体也同样能够使用. 选择工具栏中的 Rect 工

【Unity】基于MVC模式的背包系统 UGUI实现

本文基于MVC模式,用UGUI初步实现了背包系统. 包含点击和拖拽两种逻辑,先献上源代码,工程和分析稍后补充. Model 层 using UnityEngine; using UnityEngine.UI; using System.Collections; using System.Collections.Generic; /// <summary> /// 脚本功能:MVC模式--Model层,定义物品结构,保存物品数据 /// 添加对象:Bag 背包(Canvas下的空对象) ///

UGUI ScrollRect完美使用

第一次在正式项目里用UGUI,遇到不少问题.其中ScrollRect是比较让人恼火的.看了很多网上已有教程和原代码,终于做出满足项目需求的样子来了.简单分享一下.如有错误的地方,希望大家可以指出,一起进步! 制作一个滚动列表,首先就会想到ScrollRect这个组件.但与NGUI的不同,NGUI的UIScrollView把很多功能都写好了,或者都写到滚动列表专用的几个脚本里.但UGUI的各组件更加分离,比如ScrollRect里面的布局,不是在做滚动列表才使用,而是对所有布局情况下都通用的.我们

如何快速优化手游性能问题?从UGUI优化说起

WeTest 导读 本文作者从自身多年的Unity项目UI开发及优化的经验出发,从UGUI,CPU,GPU以及unity特有资源等几个维度,介绍了unity手游性能优化的一些方法. 在之前的文章<手游内存占用过高?如何快速定位手游内存问题>中提到,Mono内存和native内存是PSS内存主要的组成部分,mono内存更多的起到内存调用的功能,因此常常成为了开发人员优化内存的起点:而在游戏的其他的进程中,同样有很多因素影响着游戏的性能表现.本文将从UGUI的优化角度,介绍unity游戏性能优化的

GJM :Unity UI 之 UGUI 开发

转载URL:http://www.manew.com/thread-41633-1-1.html 最近因为要做各种UI控件,于是与UGUI杠上了.首当其冲的就是RectTransform,最坑爹的是,这货竟然不是UGUI框架的,代码竟然封装在unityengine里面,所以,不得不吐槽下unity的开源动机,根本就是留一手,估计只是因为自己的研发力量不足,所以开放一部分出来而已.       RectTransform继承于Transform,配合Canvas专门交给UGUI使用,具体这边就不展

UGUI RectTransform详解

UGUI RectTransform.Unity RectTransform详解 The first:look look API. http://docs.unity3d.com/ScriptReference/RectTransform.html 在新的UI系统中,无论Button,Text,Image,Toggle等组件,都是基于RectTransform进行布局的. 你可以不知Button为何物,不知Text为何物,不知Image为何物,但是一定要知道RectTransform. 自Uni

UGUI实现拼图游戏

首先看看效果图 拼图完成后,会显示game over 来看看工程结构图 Canvas:画布 kanpask:背包 cell 格子,每个格子上面放一个分割的图片 food就是要拖动的图片 这里cell-food创建一个预设体 准备一个图片.分割成精灵 kanpask:组建 因为这里是5x5的格子,表格布局(Grid Layout Group)x:100 y:100,spacing:x=1 y=1 所以款和高分别是504 food添加组建,来控制是否启用射线 创建createImge.cs脚本挂载在