UIScroll View的使用及注意点

项目层次:

scrollviewbg是600x150的背景图,Inspector视图如下:

panel就是scrollview父容器了,size为600x150,Inspector视图如下:

item就是scrollview里面的每一项了,大小200x150,Inspector视图如下:

以上附加的脚本都是默认设置,此时运行程序,效果如下:

可以看出最后不需要显示的图片没有隐藏,解决办法就是设置panel下UIPanel的Clipping,把此项设置为soft clip即可!运行效果:

如果想实现这样的效果:当拖拽到最后一张图片的时候,此时不是就没了,而是播放第一张图片,相当于把这些图片串成一个圆圈一样,此时我们只要给Panel加个UIWrap Content脚本即可,Item Width为每一项的宽度,我这里的每一项宽度为200,所以我设置成200,Cull Content不要勾选,勾选的情况等下讲,此时效果如下:

但使用UIWrap Content脚本会出现一个问题就是,程序未运行时,每一项展现的次序分别为1,2,3,4,5,其中4,5是隐藏的,那么程序运行起来应该展现的是1,2,3

但是程序运行起来,展现的确实5,2,3,所以如果想展现的是1,2,3的话,那么就要把1放在5的位置,2放在1的位置,3放在2的位置即可!

下面说说Cull Content被勾选的情况:

我们先看看被勾选时运行的效果吧,对一个选项不明白的话,有时候运行程序就能看出区别了:

从效果图可用看出,图片并不会绕圈播放,而是显示空白,而且只有点击每一项才能进行拖动,因为只有每一项添加了UIDrag Scroll View拖拽脚本,如果想点击背景的空白处也能拖拽,控制每一项向左或向右移动,此时我们只要给scrollviewbg添加一个UIDrag Scroll View和Box Collider,并且UIDrag Scroll View脚本的Scroll View设置为panel即可!

效果如下:

同样也可以设置为竖向滑动或者自定义滑动,只要设置UIScroll View脚本的Movement选项即可!

时间: 2025-02-01 10:50:21

UIScroll View的使用及注意点的相关文章

NGUI学习笔记(六):ScrollView、Grid和Table

下面我们来看看游戏UI开发中比较核心的开发,我称为列表开发,比如背包和各种形式不一的列表等,下面我们来看几个具体的样例:   基本上就是一些重复的制作好的多个UI控件进行排列,同时可以支持滚动,当然,高级一点的话也可能需要支持拖拽操作等. 下面我们来学习一下这些功能该如何使用NGUI实现,最后再给出一个具体的示例. 基础控件 NGUI已经帮助我们设计好了相关的组件,所以我们要实现上面的效果不需要从头开始,只要学会使用NGUI提供的相关的脚本即可,非常简单. ScrollView 即滚动视口组件,

0000_0000_0000_0011 frame and bounce

0000 0000 0000 0011 写于2015.04.05 19:23 1.frame bounce 这两天被UIScroll View 搞的晕头转向,主要还是几个问题没有完全搞懂,总在以为搞定它们时候,又被一个demo否定.目前可能对frame 和 bounce还算理解吧.因此特地写下来记录下. 首先它们的存储都是(x,y,width,height),要分为两个部分看(x,y)和(width,height).前者是origin,后者是size,分别表示点和尺寸. 1-1.frame fr

iOS 设计模式

Ios 设计模式,你可能听说过,但是你真正知道这是什么意思么?大部分的开发者大概都同意设计模式很重要,但是关于这一部分却没有很多的文章去介绍它,我们开发者很多时候写代码的时候也并不重视设计模式. 设计模式是在软件设计上去解决普通问题的可重用的方法.他们是是帮助你让所写的代码更加容易理解和提高可重用性的模板.它们还可以帮你创建松散耦合的代码是你能不费很大功夫就可以改变或者替代你的代码中的一部分. 如果你对设计模式感到生疏,那么我有个好消息告诉你!首先,你已经用了很多ios设计模式多亏了Cocoa

NGUI 基础知识

UIRoot 管理 scalePixelPerfect : 像素匹配,图片不会被缩放,除非屏幕高度小于 Minimum Height 或者大于 maximum  Height,如果那样的话,就使用 FixedSize. FixedSize : 图片都会被等比缩放. FixedSizeOnMobile : 意思是PC用 PixelPerfect,手机用 FixedSize. Sprite的各种类型 Simple: 简单的填充,缩放 Sliced: 九宫格,要设置好border Tiled: 重复平

NGUI学习总结笔记

学习NGUI一直断断续续的,目前打算做一个总结的笔记. 我使用的是比较老的3.6.0版本. 1.使用NGUI,需要开启“Edit”->“Project Settings”->“Physics”里的“Raycasts Hit Tiggers”选项,否则无法使用交互系统,当前该选项是默认开启的. 2.NGUI控件要添加 Box Collider 组件才可以接受交互事件: 3.如果要让按钮上的文本也可以根据按钮的状态改变颜色,可以再在按钮上添加另一个Button组件,然后把组件的Target设置为文

好吧就让我们结束这一切吧

http://www.tudou.com/programs/view/K7lbU7LsiJI/HGN13.htmlhttp://www.tudou.com/programs/view/SfcF7r7DsCk/XCWU7.htmlhttp://www.tudou.com/programs/view/BbljqbN52ZY/ieGvM.htmlhttp://www.tudou.com/programs/view/R4thdEitDik/17gGr.htmlhttp://www.tudou.com/p

法涉法而尴尬的收入法国

http://www.tudou.com/programs/view/pQOO07vn4Sc/l99Fi.htmlhttp://www.tudou.com/programs/view/EDJkM6ojYkc/r7RA6.htmlhttp://www.tudou.com/programs/view/Gf0zVZygPtU/EmvXY.htmlhttp://www.tudou.com/programs/view/UhqFbgbyQ6k/Z23Lx.htmlhttp://www.tudou.com/p

我不要说谎好吗

http://www.tudou.com/programs/view/KhjSmQKHEzM/McEy9.htmlhttp://www.tudou.com/programs/view/5FNDTTRKi6Y/9719g.htmlhttp://www.tudou.com/programs/view/UWFf0dz2DEk/3xPj2.htmlhttp://www.tudou.com/programs/view/b2zsYr4dCZg/gv6FP.htmlhttp://www.tudou.com/p

我不要说谎

http://www.tudou.com/programs/view/KhjSmQKHEzM/McEy9.htmlhttp://www.tudou.com/programs/view/5FNDTTRKi6Y/9719g.htmlhttp://www.tudou.com/programs/view/UWFf0dz2DEk/3xPj2.htmlhttp://www.tudou.com/programs/view/b2zsYr4dCZg/gv6FP.htmlhttp://www.tudou.com/p