黑马程序员_iOS 的高级控件之UIScrollView

iOS，Android，Java培训，期待与您的交流

iOS应用开发的一项内容就是用户界面的开发。不管应用程序实际包含的逻辑有多复杂，如果这个应用程序没有提供友好的图形用户界面，將很难吸引用户。作为一个程序设计者，必须优先考虑用户的感受，一定要让用户感到爽，这个应用程序才有价值。

1 UIScrollView的基本概念

UIScrollView代表一个可滚动的控件，该控件允许用户拖动手指来滚动控件中的内容。通过滚动控件的支持，UIScrollView可以显示超过一个屏幕的内容。



UIScrollView支持如下的三个属性。

1、contentSize：该属性是CGSize类型，代表UIScrollView所需要显示内容的完整宽度和高度

2、contentInset：该属性是UIEdgeInsets类型，它是一个结构体，包含top、left、bottom、right四个成员变量，用于设置四个方向上，滚动条区域的大小

3、contentOffset：该属性是CGPoint类型，表示UIScrollView在显示内容上滚动的位置

- (void)viewDidLoad
{
[super viewDidLoad];

// 1.创建UIScrollView
UIScrollView *scrollView = [[UIScrollView alloc] init];
scrollView.frame = CGRectMake(0, 0, 250, 250); // frame中的size指UIScrollView的可视范围
scrollView.backgroundColor = [UIColor grayColor];
[self.view addSubview:scrollView];

// 2.创建UIImageView（图片）
UIImageView *imageView = [[UIImageView alloc] init];
imageView.image = [UIImage imageNamed:@"big.jpg"];
CGFloat imgW = imageView.image.size.width; // 图片的宽度，1366
CGFloat imgH = imageView.image.size.height; // 图片的高度，768
imageView.frame = CGRectMake(0, 0, imgW, imgH);
[scrollView addSubview:imageView];

// 3.设置scrollView的属性

// 设置UIScrollView的滚动范围（内容大小）,如果滚动区域小于imageView的frame，则只能看到一部分图片
scrollView.contentSize = imageView.image.size;
//    scrollView.contentSize = CGSizeMake(320, 480);

// 隐藏水平滚动条
scrollView.showsHorizontalScrollIndicator = NO;
scrollView.showsVerticalScrollIndicator = NO;

// 用来记录scrollview滚动的位置，指的是scrollview的frame左上角顶点在滚动范围的坐标，滚动范围的原点也是左上角，并且不受滚动条区域的影响(contentInset属性)
//    scrollView.contentOffset = ;

// 去掉弹簧效果
//    scrollView.bounces = NO;

// 控制滚动条的区域大小，不影响contentSize的大小，可以理解为是在contenSize的基础上向外扩展
// top  left  bottom  right,不影响可视范围的大小，在可视范围截取一部分
scrollView.contentInset = UIEdgeInsetsMake(100, 20, 20, 20);

_scrollView = scrollView;
}

2 UIScrollView的缩放功能

通过手势，能够缩放UIScrollView里的内容。这个功能是通过代理模式实现，代理对象应该实现协议UISCrollViewDelegate的一个方法。

1、- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView，返回需要缩放的视图控件

其他可以实现的方法。

2、-(void)scrollViewDidZoom:(UIScrollView *)scrollView，正在缩放的时候调用

3、-(void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(float)scale，缩放完毕的时候调用

- (void)viewDidLoad
{
[super viewDidLoad];

// 1.添加UIScrollView
UIScrollView *scrollView = [[UIScrollView alloc] init];
//    scrollView.frame = CGRectMake(0, 0, 320, 460);
scrollView.frame = self.view.bounds;
[self.view addSubview:scrollView];

// 2.添加图片
UIImage *image = [UIImage imageNamed:@"big.jpg"];
// 调用initWithImage:方法创建出来的UIImageView，它的宽高默认跟图片的宽高一样
_imageView = [[UIImageView alloc] initWithImage:image];
//    // 设置图片
//    imageView.image = [UIImage imageNamed:@"big.jpg"];
//
//    // 设置frame
//    imageView.frame = CGRectMake(0, 0, imageView.image.size.width, imageView.image.size.height);
[scrollView addSubview:_imageView];

// 设置内容范围
scrollView.contentSize = image.size;

// 设置scrollview的代理对象
scrollView.delegate = self;

// 设置最大伸缩比例
scrollView.maximumZoomScale = 2.0;
// 设置最小伸缩比例
scrollView.minimumZoomScale = 0.2;
}

//ScrollView实现图片缩放功能：只能缩放它内部的控件，只需告诉ScrollView缩放哪个控件

#pragma mark - UIScrollView 的 代理方法
#pragma mark 这个方法返回的控件就能进行捏合手势缩放操作
#pragma mark 当UIScrollView尝试进行缩放的时候就会调用
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
return _imageView;
}

#pragma mark 当缩放完毕的时候调用
- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(float)scale
{
//    NSLog(@"结束缩放 - %f", scale);
}

#pragma mark 当正在缩放的时候调用
- (void)scrollViewDidZoom:(UIScrollView *)scrollView
{
//    NSLog(@"-----");
}

3 UIScrollView的分页功能

UIScrollView的分页功能，一般都会和UIPageControl一起实现。UIPageControl由N个小圆点组成，每个原点代表一个页面，当前页面以高亮的原点显示。UIPageControl的常见属性。

NSInteger numberOfPages : 总页数

NSInteger currentPage : 当前的页码

BOOL hidesForSinglePage : 当只有一页的时候，是否要隐藏视图

UIScrollView的分页效果只需要设置pagingEnabled=YES

- (void)viewDidLoad
{
[super viewDidLoad];

CGFloat w = self.view.frame.size.width;
CGFloat h = self.view.frame.size.height;
for (int i = 0; i< kCount; i++) {
UIImageView *imageView = [[UIImageView alloc] init];

// 1.设置frame
imageView.frame = CGRectMake(i * w, 0, w, h);

// 2.设置图片
NSString *imgName = [NSString stringWithFormat:@"0%d.jpg", i + 1];
imageView.image = [UIImage imageNamed:imgName];

[_scrollView addSubview:imageView];
}

// height == 0 代表 禁止垂直方向滚动
_scrollView.contentSize = CGSizeMake(kCount * w, 0);
_scrollView.showsHorizontalScrollIndicator = NO;
_scrollView.pagingEnabled = YES;  //用scrollView的Frame进行分页
_scrollView.delegate = self;

// 添加PageControl
UIPageControl *pageControl = [[UIPageControl alloc] init];
pageControl.center = CGPointMake(w * 0.5, h - 20);
pageControl.bounds = CGRectMake(0, 0, 150, 50);
pageControl.numberOfPages = kCount; // 一共显示多少个圆点（多少页）
// 设置非选中页的圆点颜色
pageControl.pageIndicatorTintColor = [UIColor redColor];
// 设置选中页的圆点颜色
pageControl.currentPageIndicatorTintColor = [UIColor blueColor];

// 禁止默认的点击功能
pageControl.enabled = NO;

[self.view addSubview:pageControl];
_pageControl = pageControl;
}

#pragma mark - UIScrollView的代理方法
#pragma mark 当scrollView正在滚动的时候调用
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
int page = scrollView.contentOffset.x / scrollView.frame.size.width;
//    NSLog(@"%d", page);

// 设置页码
_pageControl.currentPage = page;
}

iOS，Android，Java培训，期待与您的交流