美文网首页
scrollImage,拖动循环图片

scrollImage,拖动循环图片

作者: 萧非子 | 来源:发表于2017-10-25 16:52 被阅读28次

/***

  • 图片滑动

  • 新建Image重命名为ScrollPanel+ScrollRect组件,+Mask组件,ScrollRect:Content=GridLayout(拖拽内容=子空对象),此脚本挂载在ScrollPanel上

  • 新建空对象重命名为GridLayout为ScrollPanel子对象,+GridLayoutGroup组件

  • 新建几个Image为GridLayout子对象

  • GridLayoutGroup组件:中心点,设置左。Cell Size大小为每一个图片的大小:如300200,WidthHeight为,6张图片,630000*200

  • 需要引入事件命名空间using UnityEngine.EventSystems;using UnityEngine.UI;

  • 需要实现拖拽接口IBeginDragHandler,IEndDragHandler

  • //新建空对象重命名为ToggleGroup+ToggleGroup组件(开关//单选框使用)

  • //新建几个Image重命名为Toggle1为空对象ToggleGroup的子对象+Toggle组件,设置Group为父空对象,设置Graphic为子对象(选中后显示的图片)

  • //新建Imagec重命名为ToggleGraphic为Toggle的子对象(选中后显示的图片)

  • //为每个Toggle,写一个方法,并注册,

  • 非子萧201707
    */
    using System;
    using System.Collections;
    using System.Collections.Generic;
    using UnityEngine;
    using UnityEngine.EventSystems;//需要引入命名空间
    using UnityEngine.UI;//需要引入命名空间
    //需要实现拖拽开始,结束接口
    public class ScrollPanelControl : MonoBehaviour, IBeginDragHandler, IEndDragHandler,IDragHandler
    {

    private ScrollRect scrollRect;//滑动组件
    //4张图可滑动3张,(0-1)=1/3=0.333f,0.666f,1,;6张图可滑动5张,1/5=0.2f,0.4f,0.6f,0.8f,1f;10张图片课滑动9张,1/9=0.11f,0.22f;0.33f
    private float[] pageArray = new float[] { 0,0.111f,0.222f,0.333f,0.444f,0.555f,0.666f,0.777f,0.888f,1f };//图片数组位置
    //private float[] pageArray = new float[] { 0, 0.2f, 0.4f, 0.6f, 0.8f, 1f };//图片数组位置

    public Toggle[] toggleArray;//(单选框)开关数组;
    private float targetHorizontalPosition = 0;//目标位置
    private float smoothing = 4f;//滑动速度
    private bool isDrag = false;//是否拖拽=否
    private bool isDrag2 = false;//是否拖拽=否
    private Transform Content;//
    private int index=0;
    private Button nextButton;//下一个按钮
    private Button prevButton;//上一个按钮

    private void Awake()
    {
    scrollRect = GetComponent<ScrollRect>();

     Content =transform.Find("Content");
     nextButton = transform.parent.Find("NextPageButton").GetComponent<Button>();
     prevButton = transform.parent.Find("LastPageButton").GetComponent<Button>();
    
     prevButton.onClick.AddListener(OnPrevButtonClick);
     nextButton.onClick.AddListener(OnNextButtonClick);
    

    }
    void Start()
    {
    }
    void Update()
    {
    if (!isDrag)
    {
    scrollRect.horizontalNormalizedPosition = Mathf.Lerp(scrollRect.horizontalNormalizedPosition, targetHorizontalPosition, Time.deltaTime * smoothing);
    }
    ////循环拖动,到尾了,从头开始
    //if (Content.position.x > 100f)
    //{
    // scrollRect.horizontalNormalizedPosition = pageArray[pageArray.Length - 1];
    // targetHorizontalPosition = pageArray[pageArray.Length - 1];
    // toggleArray[pageArray.Length - 1].isOn = true;
    //}
    //if (Content.position.x < -17380f)
    //{
    // scrollRect.horizontalNormalizedPosition = pageArray[0];
    // targetHorizontalPosition = pageArray[0];
    // toggleArray[0].isOn = true;
    //}
    }
    public void OnDrag(PointerEventData eventData)
    {
    isDrag = true;
    }
    public void OnBeginDrag(PointerEventData eventData)//实现接口
    {
    isDrag = true;
    }
    public void OnEndDrag(PointerEventData eventData)//实现接口
    {
    isDrag = false;

     float posX = scrollRect.horizontalNormalizedPosition;
     //float offset = Mathf.Abs(pageArray[index] - posX);
     ////private int index=0;
     //for (int i = 0; i < pageArray.Length; i++)
     //{
     //    float offsetTemp = Mathf.Abs(pageArray[i] - posX);
     //    print("offsetTemp"+offsetTemp);
     //    if (offsetTemp < offset)
     //    {
     //        index = i;
     //        offset = offsetTemp;
     //    }
     //}
     //scrollRect.horizontalNormalizedPosition = pageArray[index];
     //targetHorizontalPosition = pageArray[index];
     //toggleArray[index].isOn = true;
     //print("offset"+offset);
    
     float offset2 = pageArray[index] - posX;
     //当向右拖动一定距离(0.02),就到达下一页
     if (offset2 > 0.015f)
     {
         OnPrevButtonClick();
         // print("next");
     }
     //当向左拖动一定距离,就到达上一页
     if (offset2 < -0.015f)
     {
         OnNextButtonClick();
         // print("prev");
     }
    

    }
    //上一个按钮点击,显示上一页
    public void OnPrevButtonClick()
    {
    if (index==0)
    {
    toggleArray[9].isOn = true;
    index = 9;
    }
    else
    {
    toggleArray[index-1].isOn = true;
    index = index - 1;
    }
    }
    //下一个按钮点击,显示下一页
    public void OnNextButtonClick()
    {
    if (index == 9)
    {
    toggleArray[0].isOn = true;
    index = 0;
    }
    else
    {
    toggleArray[index+1].isOn = true;
    index = index + 1;
    }
    }
    public void OnToggleChange0(bool isOn)
    {
    //if (isOn)
    //{
    targetHorizontalPosition = pageArray[0];
    //}
    }
    public void OnToggleChange1(bool isOn)
    {
    //if (isOn)
    //{
    targetHorizontalPosition = pageArray[1];
    //}
    }
    public void OnToggleChange2(bool isOn)
    {
    //if (isOn)
    //{
    targetHorizontalPosition = pageArray[2];
    //}
    }
    public void OnToggleChange3(bool isOn)
    {
    //if (isOn)
    //{
    targetHorizontalPosition = pageArray[3];
    //}
    }
    public void OnToggleChange4(bool isOn)
    {
    //if (isOn)
    //{
    targetHorizontalPosition = pageArray[4];
    //}
    }
    public void OnToggleChange5(bool isOn)
    {
    //if (isOn)
    //{
    targetHorizontalPosition = pageArray[5];
    //}
    }
    public void OnToggleChange6(bool isOn)
    {
    //if (isOn)
    //{
    targetHorizontalPosition = pageArray[6];
    //}
    }
    public void OnToggleChange7(bool isOn)
    {
    //if (isOn)
    //{
    targetHorizontalPosition = pageArray[7];
    //}
    }
    public void OnToggleChange8(bool isOn)

    {
    //if (isOn)
    //{
    targetHorizontalPosition = pageArray[8];
    //}
    }
    public void OnToggleChange9(bool isOn)
    {
    //if (isOn)
    //{
    targetHorizontalPosition = pageArray[9];
    //}
    }

}

相关文章

  • scrollImage,拖动循环图片

    /*** 图片滑动 新建Image重命名为ScrollPanel+ScrollRect组件,+Mask组件,Scr...

  • 图片拖动查看

    需求:图片放大后,看不到图片的全貌,需要鼠标拖动进行查看。 代码实现: //图片拖动move(e){letodiv...

  • html页面实现禁用功能

    禁止使用右键: 禁止复制: 禁止复制和剪切: 禁止图片拖动: 同时禁止右键点击,鼠标复制,以及图片的拖动:

  • iOS Scrollview轮播图无限循环

    如果只需要使用定时器时无限循环,因为是顺序轮播,只需要在最后面放上第一张图片就可以,但是如果想要手动拖动无限循环,...

  • 仿微信朋友圈图片拖拽到底部删除效果实现

    效果展示 效果分析 一组图片长按触发拖拽 原位置图片消失, 跟手拖动 拖动到底部时图片消失, 否则回弹原位置 实现...

  • Unity之UGUI

    初识UGUI 如何实现UGUI图片拖动

  • iOS--利用RunLoop优化加载表格

    引子和思路 runloop是每次循环就会渲染屏幕上所有的点,当我们在做一个table上显示很多张图片时,拖动tab...

  • iOS开发 Swift 图片裁剪

    KiClipperImageDemo 获取图片裁剪工具, 裁剪的尺寸可以自定, 可以自由拖动或者缩放, 图片, 裁...

  • 无限循环拖动的UI

    缺点是,在Unity中,自己要手动设置一下图片的位置。图片间的间隔固定。在Update中判断超出距离,就重新设置位...

  • DrawableRatingBar-图片评级

    DrawableRatingBar 图片评级,双图片评级控件,可设置图片间距,支持拖动进度及点击进度,可控制最大值...

网友评论

      本文标题:scrollImage,拖动循环图片

      本文链接:https://www.haomeiwen.com/subject/emoikxtx.html