您的位置:首页 > 产品设计 > UI/UE

iOS编程-------UIScrollView / UIPageControl

2015-10-05 18:50 381 查看
//
//  AppDelegate.h
//  UI07_UIScrollView_UIPageControl
//
//  Created by l on 15/9/9.
//  Copyright (c) 2015年 . All rights reserved.
//

#import <UIKit/UIKit.h>

@interface AppDelegate : UIResponder <UIApplicationDelegate>

@property (strong, nonatomic) UIWindow *window;

@end

//
//  AppDelegate.m
//  UI07_UIScrollView_UIPageControl
//
//  Created by l on 15/9/9.
//  Copyright (c) 2015年 . All rights reserved.
//

#import "AppDelegate.h"
#import "RootViewController.h"
@interface AppDelegate ()

@end

@implementation AppDelegate
- (void)dealloc{
[_window release];
[super dealloc];
}

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
self.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]] autorelease];
// Override point for customization after application launch.
self.window.backgroundColor = [UIColor whiteColor];
[self.window makeKeyAndVisible];

RootViewController *rootVC = [[RootViewController alloc] init];
self.window.rootViewController = rootVC;
[rootVC release];

return YES;
}

@end

///////////////////////////////////////////////////////////////

//
//  RootViewController.h
//  UI07_UIScrollView_UIPageControl
//
//  Created by l on 15/9/9.
//  Copyright (c) 2015年 . All rights reserved.
//

#import <UIKit/UIKit.h>

@interface RootViewController : UIViewController

@end

//
//  RootViewController.m
//  UI07_UIScrollView_UIPageControl
//
//  Created by lanou on 15/9/9.
//  Copyright (c) 2015年 孙天龙. All rights reserved.
//

#import "RootViewController.h"

@interface RootViewController ()<UIScrollViewDelegate>//遵守协议
@property (nonatomic, retain) UIPageControl *pageControl;
@property (nonatomic, retain) UIScrollView *scrollView;
@end

@implementation RootViewController
- (void)dealloc{
[_scrollView release];
[_pageControl release];
[super dealloc];
}

- (void)viewDidLoad {
[super viewDidLoad];

//UI07 UIScrollView UIPageCntrol

//一.滚动视图 scrollView
//UIScrollView 拓展了UIView 两个方面的功能
//(1)滚动 当 contentSize 大于 frame.size时
//(2)缩放 可以设置最小最大缩放比例

//(1)滚动
//1.创建UIScrollView
_scrollView = [[UIScrollView alloc] initWithFrame:(CGRectMake(50, 50, 208, 312))];

//2.设置属性
// 滚动相关的属性
_scrollView.delegate = self;//设置代理
_scrollView.contentSize = CGSizeMake(5 * 208, 312);//内容区域大小 宽: 5 * width  高:1 * height
//    scrollView.contentOffset = CGPointZero;//内容偏移量(0, 0)
_scrollView.contentOffset = CGPointMake(208, 0);//内容偏移量(208, 0)

_scrollView.scrollEnabled = YES;//是否能够滚动
_scrollView.pagingEnabled = YES;//是否整页翻动

_scrollView.showsHorizontalScrollIndicator = YES;//显示水平滚动条
_scrollView.showsVerticalScrollIndicator = YES;//显示竖直滚动条

_scrollView.bounces = YES;//滚动到边界是否反弹

//3.方法 添加子视图 scrollView addSubView

//练习1:添加5个imageView 到scrollView中,实现手动图片轮播效果.提示:使用for循环
for (int i = 1; i <= 5; i++) {
//偏移量
CGFloat offSetX = 208 * i;
//把衔接图放到最前面
if (i == 5) {
offSetX = 0;
}

NSString *imageName = [NSString stringWithFormat:@"p%d.jpg", i];
UIImageView *imageView = [[UIImageView alloc] initWithFrame:(CGRectMake(offSetX, 0, 208, 312))];
imageView.image = [UIImage imageNamed:imageName];
[_scrollView addSubview:imageView];
[imageView release];
}

//    UIImageView *imageView = [[UIImageView alloc] initWithFrame:(CGRectMake(0, 0, 208, 312))];
//    imageView.image = [UIImage imageNamed:@"p1.jpg"];
//    [scrollView addSubview:imageView];

//4.添加  把scrollView 添加到父视图上
[self.view addSubview:_scrollView];

//5.释放
[_scrollView release];

//(2) 缩放
//1.创建
UIScrollView *scrollView2 = [[UIScrollView alloc] initWithFrame:[UIScreen mainScreen].bounds];
//2.设置缩放属性,对scrollView 内的视图缩放,必须设置代理
scrollView2.delegate = self;//设置代理
scrollView2.minimumZoomScale = 0.5;//最小缩放比例0.5
scrollView2.maximumZoomScale = 3;//最大缩放比例3倍

//3.添加内容
UIImageView *imageView2 = [[UIImageView alloc] initWithFrame:[UIScreen mainScreen].bounds];
imageView2.image = [UIImage imageNamed:@"p1.jpg"];

[scrollView2 addSubview:imageView2];
[imageView2 release];

//4.添加
//    [self.view addSubview:scrollView2];

//5.释放
[scrollView2 release];

//二. UIPageControl 页面控制
//起到指示作用,通常和其他的控件结合使用,表示当前正在展示哪个页面.

//1.创建 pageControl 对象
_pageControl = [[UIPageControl alloc] initWithFrame:(CGRectMake(50, 300, 208, 40))];
//2.设置属性
_pageControl.numberOfPages = 4; //共有4个页面
_pageControl.currentPage = 0;//当前页面,index从0开始
_pageControl.currentPageIndicatorTintColor = [UIColor redColor];//当前指示器颜色
_pageControl.pageIndicatorTintColor = [UIColor yellowColor];//填充色
_pageControl.backgroundColor = [UIColor blueColor];

//*** 添加事件
[_pageControl addTarget:self action:@selector(changeScroll:) forControlEvents:(UIControlEventValueChanged)];

//3.添加
[self.view addSubview:_pageControl];
//4.释放
[_pageControl release];

//三. 补充知识点: NSTimer 计时器
//NSTimer 的作用是设置好 时间间隔后,每过一个时间间隔就会重复执行某个方法
//创建计时器,使用类方法,创建完毕后,自动添加到runloop,事件循环中.

//时间间隔2秒
//userinfo 传递信息
//repeats yes 重复执行
[NSTimer scheduledTimerWithTimeInterval:2 target:self selector:@selector(autoPlay:) userInfo:@"传递给timer的信息" repeats:YES];

// Do any additional setup after loading the view.
}

#pragma mark- pageControl 触发的方法
- (void)changeScroll:(UIPageControl *)pageControl{

//1.获取pageControl的当前页面
NSInteger currentPage = pageControl.currentPage;
//2.更改scrollView的偏移量
CGFloat width = _scrollView.frame.size.width;
[_scrollView setContentOffset:(CGPointMake((currentPage  + 1 ) * width, 0)) animated:YES];
}

#pragma mark- 定时器自动执行的方法
- (void)autoPlay:(NSTimer *)timer{

//    [timer invalidate];//从runloop 中移除该定时器

//1. 获取scrollView的宽度
CGFloat width = _scrollView.frame.size.width;

//2.获取scrollView的偏移量
CGPoint offSet = _scrollView.contentOffset;

//3.让scrollView 偏移并且做动画
//添加判断
//如果已经是最后一张
if (offSet.x + width == width * 5) {
//切换到第一张图片
[_scrollView setContentOffset:(CGPointZero) animated:NO];//注意切换的时候不做动画
//切换后,然后偏移width
[_scrollView setContentOffset:CGPointMake(width, offSet.y) animated:YES];
}else{

[_scrollView setContentOffset:(CGPointMake(offSet.x + width, offSet.y)) animated:YES];
}

//更改pageControl的currentPage
//1.获取更改后的偏移量 *再获取一次
offSet = _scrollView.contentOffset;
//2.计算当前显示的页面
NSInteger page = offSet.x / width;

_pageControl.currentPage = page;

}

#pragma mark- scrollViewDelegate
//滚动时触发
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
//    NSLog(@"正在滚动");

//实现循环滚动
CGFloat width = scrollView.frame.size.width;//滚动视图的宽度
//1.获取scrollView 的contentOffSet 内容偏移量
CGPoint offSet = scrollView.contentOffset;

//2.添加判断
if (offSet.x > width * 4) {

//从头开始滚动.偏移量为最前面一张图所在的位置
[scrollView setContentOffset:(CGPointZero) animated:NO];

}if (offSet.x < 0) {//如果已经滚到最左边

//从最后开始滚动,偏移量设置为最后一张图所在的位置
[scrollView setContentOffset:(CGPointMake(width * 4, 0)) animated:NO];
}
}

// called on finger up as we are moving
- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView{

NSLog(@"将要开始减速");
}

//called when scroll view grinds to a halt
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
NSLog(@"滚动停止,已经结束减速");

//滚动停止的时候,改变pageControl的当前页面
//1.scrollView 的宽度
CGFloat width = scrollView.frame.size.width;
//2.获取内容的偏移量
CGPoint offSet = scrollView.contentOffset;
//3.计算当前显示的是第几张图片
NSUInteger page = offSet.x / width;

//如果为第一张图片,因为第一张图片为衔接图,与最后一张图相同,pageControl设置为最后一页
if (page == 0) {
//*** 因为第一张图 和 最后一张图 相同,在pageControl 上面都显示为最后一个圆点.
_pageControl.currentPage = _pageControl.numberOfPages - 1;
}else{
_pageControl.currentPage = page - 1;
}
}

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView{

return scrollView.subviews[0];//
}
//缩放的时候改变中心点的位置
//缩放的时候触发
- (void)scrollViewDidZoom:(UIScrollView *)scrollView{
//获取缩放视图的中心点
CGPoint center = self.view.center;
//获取缩放视图
UIView *view = scrollView.subviews[0];
//改变中心点
view.center = center;
}

- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}

@end
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: