首页 >IOS频道 >【IOS研究院之应用开发】 > IOS研究院之滚动视图UIScrollView的简单应用(九)
2012
08-23

IOS研究院之滚动视图UIScrollView的简单应用(九)

           最近MOMO需要搞一个IOS软件的项目,搞了几天感觉还不错,进度挺快的,哇咔咔。Unity3D游戏开发暂时先告一段落,这段时间写一些IOS软件相关的东东,也算是给工作的一个总结。好啦现学现卖啦!!HOHO~~ 

           UIScrollView在软件开发中是很常见的控件,总体来说ScrollView又可以分为两种:第一种是根据手指滑动的力度计算滚动的距离。第二种时以页面为单位一次滑动切换一页,这和IOS桌面左右滑动类似。 有了IOS提供的UIScrollView控件实现这些都不是什么难事。如下图所示,MOMO一共给页面中加载了5个View,通过手指左右滑动喔。

 

IOS研究院之滚动视图UIScrollView的简单应用(九) - 雨松MOMO程序研究院 - 1

 

不知道说什么,直接上代码吧。

//
//  ScrollViewController.m
//  ScrollView
//
//  Created by 雨松MOMO on 12-8-23.
//  Copyright (c) 2012年 雨松MOMO. All rights reserved.
//

#import "ScrollViewController.h"

@interface ScrollViewController ()

@end

@implementation ScrollViewController

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {

    }
    return self;
}

- (void)viewDidLoad
{
    [super viewDidLoad];

    //设置ScrollView的整体触摸与显示区域
    //注意 宽 高不要超过 320X480
    //否则会出现无法滚动的情况
    _scrollView = [[[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 320,440)] autorelease];

    //设置ScrollView滚动内容的区域
    //它通常是需要大于ScrollerView的显示区域的
    //这样才有必要在ScrollerView中滚动它
    [_scrollView setContentSize:CGSizeMake(320 * 5, 240)];

    //开启滚动分页功能,如果不需要这个功能关闭即可
    [_scrollView setPagingEnabled:YES];

    //隐藏横向与纵向的滚动条
    [_scrollView setShowsVerticalScrollIndicator:NO];
    [_scrollView setShowsHorizontalScrollIndicator:NO];

    //在本类中代理scrollView的整体事件
    [_scrollView setDelegate:self];

    //如果你打开横向或纵向的滚动条,这里可以设置滚动条的风格
    // UIScrollViewIndicatorStyleDefault, 默认风格
    // UIScrollViewIndicatorStyleBlack,   黑色风格
    // UIScrollViewIndicatorStyleWhite    白色风格
    //[_scrollView setIndicatorStyle:UIScrollViewIndicatorStyleBlack]

    for (int i =0; i<5; i++)
    {

        //在这里给每一个ScrollView添加一个图片 和一个按钮
        UIImageView *imageView= [[[UIImageView alloc] initWithFrame:CGRectMake(i * 320,0,320,440)] autorelease];
        [imageView setImage:[UIImage imageNamed:@"image.png"]];

        UIButton * button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
        button.frame = CGRectMake(i * 320, 10, 100, 30);

        [button setTitle:@"这是一个按钮" forState:UIControlStateNormal];

        [button addTarget:self action:@selector(buttonClick) forControlEvents:UIControlEventTouchUpInside];

        //把每页需要显示的VIEW添加进ScrollerView中
        [_scrollView addSubview:imageView];
        [_scrollView addSubview:button];
    }

    //整体再将ScrollerView显示在窗口中
    [self.view addSubview:_scrollView];

    //页面控制小工具
    //它会在底部绘制小圆点标志当前显示页面
    _pageControl = [[[UIPageControl alloc] initWithFrame:CGRectMake(0, 440,self.view.frame.size.width, 20)]autorelease];
    //设置页面的数量
    [_pageControl setNumberOfPages:5];
    //监听页面是否发生改变
    [_pageControl addTarget:self action:@selector(changePage:) forControlEvents:UIControlEventValueChanged];
    [self.view addSubview:_pageControl];

}

- (void)changePage:(id)sender
{
    //得到当前页面的ID
   //int page = [sender currentPage];

    //在这里写你需要执行的代码
    //......
}

//手指离开屏幕后ScrollView还会继续滚动一段时间只到停止
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{

   NSLog(@"结束滚动后缓冲滚动彻底结束时调用");
}

-(void) scrollViewWillBeginDecelerating:(UIScrollView *)scrollView
{

  NSLog(@"结束滚动后开始缓冲滚动时调用");
}

-(void)scrollViewDidScroll:(UIScrollView*)scrollView

{
     //页面滚动时调用,设置当前页面的ID
     [_pageControl setCurrentPage:fabs(scrollView.contentOffset.x/self.view.frame.size.width)];
    NSLog(@"视图滚动中X轴坐标%f",scrollView.contentOffset.x);
    NSLog(@"视图滚动中X轴坐标%f",scrollView.contentOffset.y);
}

-(void)scrollViewWillBeginDragging:(UIScrollView*)scrollView
{
    NSLog(@"滚动视图开始滚动,它只调用一次");
}

-(void)scrollViewDidEndDragging:(UIScrollView*)scrollView willDecelerate:(BOOL)decelerate
{
   NSLog(@"滚动视图结束滚动,它只调用一次");

}

-(void)buttonClick
{
    NSLog(@"按钮点击了");

}

- (void)viewDidUnload
{
    [super viewDidUnload];
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    return (interfaceOrientation == UIInterfaceOrientationPortrait);
}

@end

 

后天就要坐上火车去成都了,然后去九寨沟旅游啦。希望这是一趟美好的旅途,一周后北京再见!!

源码下载地址:http://vdisk.weibo.com/s/b4W2a

最后编辑:
作者:雨松MOMO
专注移动互联网,Unity3D游戏开发
捐 赠写博客不易,如果您想请我喝一杯星巴克的话?就进来看吧!

IOS研究院之滚动视图UIScrollView的简单应用(九)》有 12 条评论

  1. 严喆说:

    希望有空讲解一下ngui或ugui的uiscorllview

  2. weight loss before and after pictures…

    If you drink a full glass of water before beginning your meal, your stomach simply doesn?t hold as much food. No, you will not gain weight from drinking a lot of water….

  3. alex说:

    楼主,你好,中间[_scrollView setContentSize:CGSizeMake(320 * 5, 240)];应该是[_scrollView setContentSize:CGSizeMake(320 * 5, 440)];吧,240的话好像不执行代理中的方法

  4. phylony说:

    这个最好还是不要这样写,毕竟海量图片,uiscrollerview不做重用机制是很悲剧的事情,以前是要自己写reusable的,现在直接用uicollectionview就很轻松了,arc,轻松搞定几十上百个的uiviewcontroller.

  5. 楼主幸苦说:

    请问下楼主 scrollview 图片切换 中间一张完整的 两边各半张的 用cliptobounds = NO 实现后 怎样添加两个超出去的半张的响应?

  6. 很有用 谢谢你 希望多多更新啊 我经常来

  7. 婀娜007说:

    真心滴感谢雨松MOMO,你写的有关IOS的博文我都看了一边,很基础,很实用,纯代码,让我更好滴理解了IOS中的种种关系,期待您的新文噢

留下一个回复

你的email不会被公开。 必填项已用 * 标注。