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

iOS大典之UIScrollView

2015-10-03 22:14 561 查看
滚动视图

UIScrollView 补充了父类UIView的一些功能

就是滚动的功能

比如 : 相册的滑动切换, 利用UIScrollView的滚动功能就能实现.

以下是个相册例子, 5张照片, View只显示一张照片, 左右切换5张照片

利用重用机制布局视图,

显示3张照片给参考下

相册图片引用摄影师: 一张王义博

喜欢的可以去关注他



第一步: AppDelegate中设置

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


第二步: 创建根视图控制器 .m中设置

#import "RootViewController.h"

#define kScreenWidth [UIScreen mainScreen].bounds.size.width
#define kScreenHeight [UIScreen mainScreen].bounds.size.height

@interface RootViewController ()<UIScrollViewDelegate>

@end

@implementation RootViewController

- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.

[self addSubViews];  // 调用方法

}

#pragma mark -- 布局子视图 --

- (void)addSubViews
{

UIScrollView *bgScrollView = [[UIScrollView alloc] initWithFrame:[UIScreen mainScreen].bounds];
bgScrollView.backgroundColor = [UIColor cyanColor];
// 设置滑动显示范围
bgScrollView.contentSize = CGSizeMake(kScreenWidth * (5 + 2), kScreenHeight);

// 整屏滚动
bgScrollView.pagingEnabled = YES;
// 隐藏掉水平小光标
bgScrollView.showsHorizontalScrollIndicator = NO;

bgScrollView.contentOffset = CGPointMake(1 * kScreenWidth, 0);

[self.view addSubview:bgScrollView];
[bgScrollView release];
// 设置代理
bgScrollView.delegate = self;

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

//  创建小的UIScrollView
UIScrollView *smallScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0 + kScreenWidth * i, 0, kScreenWidth, kScreenHeight)];
smallScrollView.tag = 10 + i;
// 设置缩放属性
smallScrollView.maximumZoomScale = 2.0;
smallScrollView.minimumZoomScale = 0.5;
smallScrollView.delegate = self;

[bgScrollView addSubview:smallScrollView];
[smallScrollView release];

UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, kScreenHeight)];

if (i == 0) {
imageView.image = [UIImage imageNamed:@"3.jpg"];

}else if (i == 6){

imageView.image = [UIImage imageNamed:@"1.jpg"];
}else{
imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%d.jpg", i]];

}

[smallScrollView addSubview:imageView];
[imageView release];

}

// 创建滚动条PageControl
UIPageControl *pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, kScreenHeight - 50, kScreenWidth, 50)];
// 设置5个点
pageControl.numberOfPages = 5;
// 设置当前显示第几个
pageControl.currentPage = 0;
// 选中与未选中的颜色
pageControl.pageIndicatorTintColor = [UIColor blackColor];
pageControl.currentPageIndicatorTintColor = [UIColor whiteColor];
pageControl.tag = 999;

[self.view addSubview:pageControl];
[pageControl release];

}

#pragma mark -- 缩放 --
- (void)scrollViewDidZoom:(UIScrollView *)scrollView
{

UIImageView *imageView = scrollView.subviews[0];
imageView.center = self.view.center;
}
- (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(UIView *)view
{
NSLog(@"将要缩放");
}
- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(CGFloat)scale
{
NSLog(@"已经结束缩放");
}
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
return scrollView.subviews[0];
}

#pragma mark -- 滑动代理方法 --
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{

// 获取 当前是第几张
NSInteger index = scrollView.contentOffset.x / kScreenWidth;
if (index == 0) {
// 跳到第三张图
scrollView.contentOffset = CGPointMake(3 * kScreenWidth, 0);
}else if (index == 6){
scrollView.contentOffset = CGPointMake(1 * kScreenWidth, 0);
}

// 改变pagecontrol的位置, 偏移量的X坐标除以宽度
UIPageControl *pageControl = (UIPageControl *)[self.view viewWithTag:999];

NSInteger num = scrollView.contentOffset.x / kScreenWidth - 1;

if (num == 5) {
pageControl.currentPage = 0;
} else if (num == -1) {
pageControl.currentPage = 2;
}  else
{
pageControl.currentPage = num;
}

}


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