iOS中UIScrollerView的用法及基于AotoLayout的控件悬停

UIScrollView为了显示多于一个屏幕的内容或者超过你能放在内存中的内容。Scroll View为你处理缩小放大手势,UIScrollView实现了这些手势,并且替你处理对于它们的探测和回应。其中需要注意的子类是UITableView以及UITextView(用来显示大量的文字)。还有一个UIWebView,尽管那不是UIScrollView的直接子类,它适用UIScrollView去显示网页内容contentsize是内容的宽和高,contentsize.width是内容的宽度,contentsize.heght是高度,contentsize是UIScrollView的一个属性,它是一个CGSize,是由核心图形所定义的架构,那定义了你可以滚轴内容的宽度和高度,你也可以添加可以上下滚动的额外区域。第一种方法是你可以通过添加内容的大小来完成。另外一个比较动态的选择是UIScrollView的另一个属性contentInset,contentInset增加你在contentsize中指定的内容能够滚动的上下左右区域数量contentInset.top以及contentInset.buttom分别表示上面和下面的距离。

在滚轴视图中,有一个叫做ContentOffset的属性跟踪UIScrollView的具体位置,你能够自己获取和设置它,ContentOffset是你当前可视内容在滚轴视图边界的左上角那个点。如图:

可以看出,ContentOffset内容中的那个点不是从contentInset的左上角开始的,而是内容的左上角,此时的ContentOffset是正值,但有时也是负值,如下图所示:

使用一个ScrollView
创建一个UIScrollView

代码如下:

CGRectframe = CGRectMake( 0, 0, 200, 200);
scrollView= [[UIScrollView alloc] initWithFrame: frame];

添加子视图(框架可以超过scroll view的边界)

代码如下:

frame= CGRectMake( 0, 0, 500, 500);
myImageView= [[UIImageView alloc] initWithFrame: frame];
[scrollViewaddSubview:myImageView];

设置内容尺寸

代码如下:

scrollView.contentSize= CGSize(500,500);

扩展Scroll View 的行为

  • 应用程序通常需要知道有关的滚图的事件
  • scrolloffset改变的时候
  • 拖动开始和结束
  • 减速的开始和结束

通过子类化扩展Scroll View 的行为

  • 创建一个子类
  • 重写一些功能并改变行为
  • 关于这种方式的争议

应用程序的逻辑和行为变成了视图本身的一部分,就像,你可能有一些定制的滚轴逻辑,,在那你只在意一个视图控制,但你想在不同地方重复使用你的滚轴视图,如果你必须为每个都子类化,你最后会有很多不同的滚轴视图子类以及在视图中的特定应用逻辑。

编写很多子类是很沉闷的事情,你最后会有很多无法重复使用的单独视图,而MVC的视图部分的一个重点是视图是可以在不同的控制器和不同的模式之中重复使用的,如果我们把所有逻辑都放在视图中,它减少了可复用性。

你的代码变得很牢固地配对在一起,它实际上变成了超类的一部分,你无法从UIScrollView中析取它,之后用其它东西代替,如果它在你控制器中且为控制器的一部分,在之后更容易改变它工作的方式和重新安排你应用程序的一些部分。

通过委派来扩展Scroll View 的行为(常用的)
委派是一个单独的对象,协议,定义了委派会实现的一系列功能的Objective-C协议,它创建了一系列很清晰的撤销点,在那里你能定制行为和外观。它在这些对象之间保持了松散的配对,视图本身与视图控制器或任何其它的控制器对象,委派不是滚轴视图的直接子类,它比起牢固配对的子类更加的松散。


理论篇
在滚动的过程中,实际上就是contentOffset的值在不断变化,当手指触摸后,UIScrollView会暂时拦截触摸事件,使用一个计时器。假如在计时器到点后没有发生手指移动事件,那么UIScrollView发送 tracking events 到被点击的 subview 上面。如果在计时器到点前发生了移动事件,那么UIScrollView取消 tracking 然后自己发生滚动。

可以重载子类

代码如下:

- (BOOL)touchesShouldBegin:(NSSet *)touches withEvent:(UIEvent *)event inContentView:(UIView *)view;

决定自己是否接受 touch 事件

代码如下:

- (BOOL)touchesShouldCancelInContentView:(UIView *)view;

开始发送 tracking messages 给 subview 的时候调用这个方法,决定是否发送 tracking messages 消息到 subview。
返回NO -> 发送,表示不取消
返回YES -> 不发送,表示会取消

属性篇


代码如下:

@property(nonatomic,readonly,getter=isTracking) BOOL tracking;

当 touch 后还没有拖动的时候值是YES,否则NO

代码如下:

@property(nonatomic,readonly,getter=isZoomBouncing) BOOL zoomBouncing;

当内容放大到最大或者最小的时候值是YES,否则NO

代码如下:

@property(nonatomic,readonly,getter=isZooming) BOOL zooming;

当正在缩放的时候值是YES,否则NO

代码如下:

@property(nonatomic,readonly,getter=isDecelerating) BOOL decelerating;

当滚动后,手指放开但是还在继续滚动中。这个时候是YES,其他时候是NO

代码如下:

@property(nonatomic) CGFloat decelerationRate;

设置手指放开后的减速率

代码如下:

@property(nonatomic) CGFloat maximumZoomScale;

表示放大的最大倍数

代码如下:

@property(nonatomic) CGFloat minimumZoomScale;

表示缩小的最小倍数

代码如下:

@property(nonatomic,getter=isPagingEnabled) BOOL pagingEnabled;

当值为YES的时候,就会产生翻页那种效果

代码如下:

@property(nonatomic,getter=isScrollEnabled) BOOL scrollEnabled;

决定是否可以滚动

代码如下:

@property(nonatomic) BOOL delaysContentTouches;

当值为YES的时候,用户一旦触碰,然后再一定时间内没有移动,UIScrollView会发送 tracking events,然后用户移动手指足够长度触发滚动事件,这个时候,UIScrollView发送了-(void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event到 subview,然后UIScrollView开始滚动。假如值为NO,UIScrollView发送 tracking events 后,就算用户移动手指,UIScrollView也不会滚动。

代码如下:

@property(nonatomic) BOOL showsHorizontalScrollIndicator;

滚动时是否显示水平滚动条

代码如下:

@property(nonatomic) BOOL showsVerticalScrollIndicator;

滚动时是否显示垂直滚动条

代码如下:

@property(nonatomic) BOOL bounces;

默认是YES,就是滚动超过边界会有反弹回来的效果,如果设置为NO,那么滚动到边界就会立刻停止

代码如下:

@property(nonatomic) BOOL bouncesZoom;

这个效果反映在缩放上面,如果缩放超过最大缩放,就会有反弹效果,加入设置为NO,则达到最大或者最小的时候立刻停止

代码如下:

@property(nonatomic,getter=isDirectionalLockEnabled) BOOL directionalLockEnabled;

默认是NO,可以在垂直和水平方向同时运动。当值为YES的时候,加入一开始是垂直或者水平运动,那么接下来会锁定另外一个方向的滚动。加入一开始是对角方向滚动,则不会禁止某个方向

代码如下:

@property(nonatomic) UIScrollViewIndicatorStyle indicatorStyle;

滚动条的样式,基本只是设置颜色

代码如下:

@property(nonatomic) UIEdgeInsets scrollIndicatorInsets;

设置滚动条的位置

方法篇
直接上代码看

代码如下:

#pragma mark UIScrollViewDelegate
//只要滚动了就会触发
- (void)scrollViewDidScroll:(UIScrollView *)scrollView;  
{
//    NSLog(@" scrollViewDidScroll");
    NSLog(@"ContentOffset  x is  %f,yis %f",scrollView.contentOffset.x,scrollView.contentOffset.y);
}
//开始拖拽视图
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView;  
{
   NSLog(@"scrollViewWillBeginDragging");
}
//完成拖拽
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate;
{
   NSLog(@"scrollViewDidEndDragging");
}
//将开始降速时
- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView;  
{
   NSLog(@"scrollViewWillBeginDecelerating");
}

//减速停止了时执行,手触摸时执行
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView;  
{
   NSLog(@"scrollViewDidEndDecelerating");
}

//滚动动画停止时执行,代码改变时出发,也就是setContentOffset改变时
- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView;
{
   NSLog(@"scrollViewDidEndScrollingAnimation");
}

//设置放大缩小的视图,要是uiscrollview的subview
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView;  
{
   NSLog(@"viewForZoomingInScrollView");
    return viewA;
}

//完成放大缩小时调用
- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(float)scale;
{
    viewA.frame=CGRectMake(50,0,100,400);
   NSLog(@"scale between minimum and maximum. called after any 'bounce' animations");
}// scale between minimum and maximum. called after any 'bounce' animations

//如果你不是完全滚动到滚轴视图的顶部,你可以轻点状态栏,那个可视的滚轴视图会一直滚动到顶部,那是默认行为,你可以通过该方法返回NO来关闭它
- (BOOL)scrollViewShouldScrollToTop:(UIScrollView *)scrollView;  
{
    NSLog(@"scrollViewShouldScrollToTop");
   returnYES;
}

- (void)scrollViewDidScrollToTop:(UIScrollView *)scrollView;    
{
    NSLog(@"scrollViewDidScrollToTop");
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
   // Return YES for supported orientations
    return (interfaceOrientation == UIInterfaceOrientationPortrait);
}

@end

基于AotoLayout的控件悬停

在很多的电商类的APP中我们经常会用到一种滑动悬停的效果,所以这次尝试着利用AutoLayout来实现这种效果。话不多说先上图
效果:

效果上过了,还是理顺下思路上吧。从效果图上不难发现我们的程序是基于UIScrollerView的。界面上的展示同样都是UIScrollView的子控件。当然了难点也就是基于UIScrollerView的内部子控件的布局以及AutoLayout约束的修改。
我们看一下我们的需要的一些基本的控件布局:

好了,现在开始开始搭建新的项目了,首先在Storyboard上搭建最基本的布局,并将控件基本布局到相应的位置,以备我们更方便的添加约束。

到了这里就开始对我们的控件添加基本的约束了从上开始吧。上面的控件我们能确定是UIImageView的heigth以及top、left以及rihgt。至于bottom到了后面会着重设置的。

然后继续来操作悬停的View。这个View因为处在两个view的中间所以我们要暂时确定height以及left和right的约束就足够了了

终于到最后一个UIImageView了,同样的能确定的是height、right、left以及bottom这四项。

到了这里针对单个的控件的布局基本完成了,细心的你可能会发现以上的操作都没有进行关联以及没有对width进行约束。那么下面我们就要开始进行三者的关联以及width上的设置。
因为悬停的view处与两个imageView的中间,所以我们只需要对它进行处理就好了

其实这两个约束完全是可以在设置悬停view的时候的添加,之所以在这里添加是我们在后面的控制器会用到这两个约束,为了好辨认我们就给他们定义上别名:

然后我们按住command选择我们的三个控件然后按住control拖向scrollView的父控件view设置等width。

好了,到了这里我们的约束已经不会再报错了,然后在逻辑上也是基本是通顺的了,但是对于我们悬停的功能来说就少了关键的一个环节那么就是一旦悬停view悬停了,那么它与上下两个imageView的约束要怎么处理呢?所以我们还需要一个辅助的约束用来悬停之后的关联处理

添加之后我们给这个约束起个别名hidden悬停,不过细心的你一定会发现添加之后会sb会提示出有冲突的约束,那么我们只需要对我们刚刚添加的约束进行一下操作就OK了

好了,到了这里我们在AutoLayout上要做的事情就这些了,下面我们就可以安心的写代码了。

代码如下:

@interface ViewController ()/**中间的View*/@property (weak, nonatomic) IBOutlet UIView *centreView;/**上面的ImageView*/@property (weak, nonatomic) IBOutlet UIImageView *topImageView;/**centreView的top约束*/@property (weak, nonatomic) IBOutlet NSLayoutConstraint *topConstraint;/**centreView的bottom约束*/@property (weak, nonatomic) IBOutlet NSLayoutConstraint *bottomConstraint;/**topImageView暂禁用的约束*/@property (weak, nonatomic) IBOutlet NSLayoutConstraint *hiddenConstraint;
@end

然后在scrollView的滑动代理方法中实现

代码如下:

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    //获得top图片的高度
    CGFloat imageH = self.topImageView.frame.size.height;
    //获取偏移量
    CGFloat offsetY = scrollView.contentOffset.y;
    //centrView的frame
    CGRect centreFrame = self.centreView.frame;
    if (offsetY>=imageH) {
        //将centreView的向上和向下的约束禁用
        self.bottomConstraint.active = NO;
        self.topConstraint.active = NO;
        //将topImageView与bottomImageView的约束使用关联
        self.hiddenConstraint.active = YES;
        //悬停在位置
        centreFrame.origin.y = 0;
        self.centreView.frame = centreFrame;
        //添加在scrollView的父控件
        [self.view addSubview:self.centreView];
    }else{
        //添加在topIamgeView的下面
        centreFrame.origin.y = imageH;
        self.centreView.frame = centreFrame;

[scrollView addSubview:self.centreView];
        //记住一定要先添加到scrollView上之后在修改约束的内容,不然添加的约束会不成,因为系统无法建立他们之间的联系。
        self.hiddenConstraint.active = NO;
        self.topConstraint.active = YES;
        self.bottomConstraint.active = YES;

}
    //等比例的伸缩
    CGFloat scale= 1-(offsetY/60);
    scale = (scale>=1)?scale :1;
    self.topImageView.transform = CGAffineTransformMakeScale(scale, scale);

}

最后补充:

在子控件的尺寸不能通过UIScrollView来计算,可以通过以下方式计算

  • 设置固定值(width==100,height==300)
  • 相对于UIScrollView以外的其他控件来计算尺寸

在UIScrollView里面布局子控件,sb里面默认是是需要子控件的尺寸以及子控件与UIScrollView之间的间距来计算出scroller的conentSize的。所以这就是上面的子控件要与父控件来等宽的原因了。
UIScrollView的frame应该通过子控件以外的其他控件来计算。

时间: 2016-03-14

Android程序开发之UIScrollerView里有两个tableView

一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController : UIViewController <UIScrollViewDelegate,UITableViewDelegate,UITableViewDataSource> { UIScrollView *_scrolView; UITableView *_tableView; UITableView

详解Android应用开发中Scroller类的屏幕滑动功能运用

今天给大家介绍下Android中滑屏功能的一个基本实现过程以及原理初探,最后给大家重点讲解View视图中scrollTo 与scrollBy这两个函数的区别 .   首先 ,我们必须明白在Android View视图是没有边界的,Canvas是没有边界的,只不过我们通过绘制特定的View时对Canvas对象进行了一定的操作,例如 : translate(平移).clipRect(剪切)等,以便达到我们的对该Canvas对象绘制的要求 ,我们可以将这种无边界的视图称为"视图坐标"----

深入理解Android中Scroller的滚动原理

View的平滑滚动效果 什么是实现View的平滑滚动效果呢,举个简单的例子,一个View从在我们指定的时间内从一个位置滚动到另外一个位置,我们利用Scroller类可以实现匀速滚动,可以先加速后减速,可以先减速后加速等等效果,而不是瞬间的移动的效果,所以Scroller可以帮我们实现很多滑动的效果. 首先我们先来看一下Scroller的用法,基本可概括为"三部曲": 1.创建一个Scroller对象,一般在View的构造器中创建: public ScrollViewGroup(Cont

Android Scroller完全解析

在Android中,任何一个控件都是可以滚动的,因为在View类当中有scrollTo()和scrollBy()这两个方法,如下图所示: 这两个方法的主要作用是将View/ViewGroup移至指定的坐标中,并且将偏移量保存起来.另外: mScrollX 代表X轴方向的偏移坐标 mScrollY 代表Y轴方向的偏移坐标 这两个方法都是用于对View进行滚动的,那么它们之间有什么区别呢?简单点讲,scrollBy()方法是让View相对于当前的位置滚动某段距离,而scrollTo()方法则是让Vi

javascript AutoScroller 函数类

复制代码 代码如下: /* * Copyright (C) 2007-2009 skylark * Email:aohailin@gmail.com * Version:2.1 * 原创程序,转载请保留版权 */ var $=function(o){return typeof o=="string"?document.getElementById(o):o;}; function AutoScroll(){ this.obj=[]; this.version="2.1&quo

android实现上下滚动的TextView

一 说明    这里重要应用类 AutoTextView,这是一个自定义的类,继承至TextSwitcher,下面临 AutoTextView类做简要说明: 1. 该类应用的重点,在于设置两个动画, setInAnimation(...)  和 setOutAnimation(...),分离是文字进入的动画和文字退出的动画: 2. 类中定义了一个外部类-Rotate3dAnimation,重要靠该类实现文字进出动画,该外部类继承至Animation.说来偶合,这个恰好是在apiDemo中看到了,

Android中实现多行、水平滚动的分页的Gridview实例源码

功能要求: (1)比如每页显示2X2,总共2XN,每个item显示图片+文字(点击有链接). 如果单行水平滚动,可以用Horizontalscrollview实现. 如果是多行水平滚动,则结合Gridview(一般是垂直滚动的)和Horizontalscrollview实现. (2)水平滚动翻页,下面有显示当前页的icon. 1.实现自定义的HorizontalScrollView(HorizontalScrollView.java): 因为要翻页时需要传当前页给调用者,所以fling函数中自己

jQuery滚动条插件nanoscroller使用指南

网站在展示信息时,如果信息量过大,解决方法主要有三种.1.分页,将信息分页显示.2.整页显示,但是页面过长,影响浏览体验.3.使用滚动条,而默认滚动条样式太单一,用户体验不友好.所以我们需要美化滚动条. 美化滚动条最简单的方式就是使用jquery插件,本文介绍的就是jquery插件中的滚动条插件nanoscroller. 官方展示,样式可自定义 1.nanoscroller插件功能 对内容实现滚动功能 2.nanoscroller官方地址 http://jamesflorentino.githu

详解Android Scroller与computeScroll的调用机制关系

Android ViewGroup中的Scroller与computeScroll的有什么关系? 答:没有直接的关系 知道了答案,是不是意味着下文就没必要看了,如果说对ViewGroup自定义控件不感兴趣,可以不用看了. 1.Scroller到底是什么? 答:Scroller只是个计算器,提供插值计算,让滚动过程具有动画属性,但它并不是UI,也不是滑动辅助UI运动,反而是单纯地为滑动提供计算. 无论从构造方法还是其他方法,以及Scroller的属性可知,其并不会持有View,辅助ViewGrou

android开发之横向滚动/竖向滚动的ListView(固定列头)

由于项目需要,我们需要一个可以横向滚动的,又可以竖向滚动的 表格.而且又要考虑大数据量(行)的展示视图.经过几天的研究终于搞定,做了一个演示.贴图如下:      好吧.让我们看思路是什么样的: 1. 上下滚动直接使用 listView来实现. 2. 左右滚动使用HorizontalScrollView,来处理滚动.我写一个类MyHScrollView继承 自它. 2.1 . ListView里的每行(row)分为 两部分,不滚动的和可滚动的区域.比如本demo的第一列,就是静态的.而后面的所有

Android开发实现横向列表GridView横向滚动的方法【附源码下载】

本文实例讲述了Android开发实现横向列表GridView横向滚动的方法.分享给大家供大家参考,具体如下: Android 横向列表实现,可左右滑动,如下图 1. 主界面布局代码:activity_main.xml a.包裹HorizontalScrollView控件是GirdView横向滚动的基本条件 b.GirdView外包裹LinearLayout是java代码中参数设置的必要条件 <?xml version="1.0" encoding="utf-8"

android开发实现列表控件滚动位置精确保存和恢复的方法(推荐)

Android开发经常要对列表的滚动位置进行保存和恢复,网上也有很多关于此功能的方法文章,但绝大多数都只能保存恢复到某一行,对于滚动到半行的情况不能精确的恢复.也有很多文章介绍了好几种方法,也说某些方法能够精确的控制,但实际上根本不能实现.还有些介绍了很多玄乎且非常复杂的方法,但也没看到能完整实现的代码. 经过一段时间的研究测试,下面的代码可以完美的实现列表滚动位置的精确保存和恢复,而且只是在原来记忆到行位置的基础上增加了2行代码而已. 具体见下面代码和注释: //保存位置: int posit

Android GridView实现横向列表水平滚动

本文实例为大家分享了Android GridView实现横向列表水平滚动的具体代码,供大家参考,具体内容如下 有时候根据项目需要,使用可横向滑动的GridView.仅以该文记录一下,毕竟没什么技术含量. 1.主界面布局代码:activity_main.xml.设置android:numColumns="auto_fit"是因为可以不定项的添加子项. <?xml version="1.0" encoding="utf-8"?> <

Android开发实现ScrollView中嵌套两个ListView的方法

本文实例讲述了Android开发实现ScrollView中嵌套两个ListView的方法.分享给大家供大家参考,具体如下: 做的项目中要使用两个ListView在同一个页面上下显示,因为数据源不同,不能通过在Adapter中设置标志位去区分显示,最后只能硬着头皮做一个ScrollView嵌套两个ListView,但按正常情况是不能同时显示的,会出现上面的ListView完全显示,下面的只显示一个Item,查了一些资料终于成功了 主要有一个ListViewUtility ,代码如下: import

Android ScrollView实现横向和竖向拖动回弹效果

本文实例为大家分享了Android ScrollView实现拖动回弹效果的具体代码,供大家参考,具体内容如下 原理 在android2.3版本中,View类中新增了一个方法:overScrollBy.通过覆盖该方法,就可以达到阻尼回弹的效果. 示例1.竖向滚动 public class ReboundScrollView extends ScrollView{ private static final int MAX_SCROLL = 200; private static final floa

Android开发基于ScrollView实现的渐变导航栏效果示例

本文实例讲述了Android开发基于ScrollView实现的渐变导航栏效果.分享给大家供大家参考,具体如下: 前些日子项目要在原来的页面上加入渐变导航栏的功能,查了很多资料,很多资源都是监听到listview的高度来实现渐变导航栏的效果,可是项目里面很多的界面都是使用ScrollView来实现滑动效果. 实在没办法,就自己写了一个test来实现这个效果. 话不多说,马上看一下思路吧,其实渐变导航栏无非就是改变导航栏的透明度也就是可以设定一个高度,根据这个高度,监听ScrollView滑动的距离

Jquery原生态实现表格header头随滚动条滚动而滚动

最近在做一个项目,功能已经实现,突然用户要求表头是浮动的(因为内容在同一页面展示,当滚动时,看不到列头).由于功能已经实现使用jquery+纯html,为了改动少只能使用jquery原生态实现滚动. html表头代码: 复制代码 代码如下: <tr class="header" > <td width="150" style="border-bottom:0px;"> </td> <td colspan=

Android开发ListView中下拉刷新上拉加载及带列的横向滚动实现方法

ListView 控件可使用四种不同视图显示项目.通过此控件,可将项目组成带有或不带有列标头的列,并显示伴随的图标和文本. 可使用 ListView 控件将称作 ListItem 对象的列表条目组织成下列四种不同的视图之一:1.大(标准)图标2.小图标3.列表4.报表 View 属性决定在列表中控件使用何种视图显示项目. 还可用 LabelWrap 属性控制列表中与项目关联的标签是否可换行显示.另外,还可管理列表中项目的排序方法和选定项目的外观. 相信有很人做的项目估计都用的到这个.就是List

Android开发实现自定义水平滚动的容器示例

本文实例讲述了Android开发实现自定义水平滚动的容器.分享给大家供大家参考,具体如下: public class HorizontalScrollView extends ViewGroup { //手势 private GestureDetector mGestureDetector; private HorizontalScroller mScroller; private int curID; //快速滑动 private boolean isFlying; //--回调函数-----