UIKit框架-高级控件:1.UIScrollView的基本认识

前面, 我们基本上把所有的基础控件都学完了, 并且把基础控件的常用知识都总结了一下~现在我们来进阶一下, 学习iOS开发中的高级控件, 现在我们就来动手学习.

UIScrollView基本属性

首先, 我们来搭建storyboard界面:



然后修改UIButton的Tag, 从0~3:



然后我们来关联控件:



现在我们进入重点, 让我们一起来了解一下ScrollView:

1. 加载图像:

- (void)scrollViewImage
{
// 1.创建一个图像视图
UIImage *image = [UIImage imageNamed:@"001.jpeg"];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
// 1.1添加Image
[_scrollView addSubview:imageView];

// 2.设置滚动属性
[_scrollView setContentSize:image.size];
}


2. 设置ScrollView的属性:
- (void)scrollViewEdgeAndOtherProperty
{
UIEdgeInsets edge = UIEdgeInsetsMake(10.0f, 10.0f, 10.0f, 10.0f);
[_scrollView setContentInset:edge];

[_scrollView setBackgroundColor:[UIColor grayColor]];

// 设置弹簧效果, 默认为YES
[_scrollView setBounces:NO];

// 水平方向的滚动条, 默认为YES
[_scrollView setShowsHorizontalScrollIndicator:NO];
// 垂直方向的滚动条, 默认为YES
[_scrollView setShowsVerticalScrollIndicator:NO];
}


3. 使用UIButton控制ScrollViewImage以及修正bug
- (IBAction)moveImage:(UIButton *)sender {
CGPoint offset = _scrollView.contentOffset;
switch (sender.tag) {
case 0:
offset.x -= 50;
break;
case 1:
offset.y -= 50;
break;
case 2:
offset.y += 50;
break;
case 3:
offset.x += 50;
break;

default:
break;
}

// 位置修正
// 水平方向, 注意在修正左边位置时, 需要用edge的-left.
UIEdgeInsets edge = _scrollView.contentInset;
if(offset.x < -edge.left) {
offset.x = -edge.left;
} else if (offset.x > _scrollView.contentSize.width - _scrollView.bounds.size.width + edge.right){
offset.x = _scrollView.contentSize.width - _scrollView.bounds.size.width + edge.right;
}

// 垂直方向, 注意在修正左边位置时, 需要用edge的-top.
if(offset.y < -edge.top) {
offset.y = -edge.top;
} else if (offset.y > _scrollView.contentSize.height - _scrollView.bounds.size.height + edge.bottom){
offset.y = _scrollView.contentSize.height - _scrollView.bounds.size.height + edge.bottom;
}

[_scrollView setContentOffset:offset animated:YES];

}


4. 最后再把所有方法加载到viewDidload
- (void)viewDidLoad {
[super viewDidLoad];
[self scrollViewImage];
[self scrollViewEdgeAndOtherProperty];
}


最终效果图:



现在我们来看看所使用到的属性:

CGSize
contentSize：设置UIScrollView的滚动范围
CGPoint
contentOffset：UIScrollView当前滚动的位置
UIEdgeInsets
contentInset：增加滚动视图四周的增加滚动范围

BOOL
showsVerticalScrollIndicator: 是否显示垂直方向条
BOOL
showsHorizontalScrollIndicator: 是否显示水平方向条
BOOL
bounces: 是否具有弹簧效果
BOOL
scrollEnabled: 是否能滚动

UIScrollViewIndicatorStyle
indicatorStyle: 设定滚动条的样式
BOOL
dragging:是否正在被拖拽
BOOL
tracking:按住手指还没有开始拖动的时候值是YES，否则NO
BOOL
decelerating:是否正在减速
BOOL
zooming:是否正在缩放

UIScrollView缩放属性
设置UIScrollView缩放之前, 我们需要设置UIScrollView的Delegate:



1. 把imageView设置成全局变量:

@interface ViewController ()
{
UIImageView *_imageView;
}
@end


1.1 设置成全局变量之后, 这里需要修改一下:

- (void)scrollViewImage
{
// 1.创建一个图像视图
UIImage *image = [UIImage imageNamed:@"001.jepg"];
_imageView = [[UIImageView alloc] initWithImage:image];
// 1.1添加Image
[_scrollView addSubview:_imageView];

// 2.设置滚动属性
[_scrollView setContentSize:image.size];
}

2. 设置缩放比例:
- (void)scrollViewZoomProperty
{
// 设置最大缩放比例
[_scrollView setMaximumZoomScale:1.5f];
// 设置最小缩放比例
[_scrollView setMinimumZoomScale:0.5f];
[_scrollView setDelegate:self];
}


PS: 以下两个方法都是必须设置代理方法后才能使用
1. 设置被缩放控件:

#pragma mark - scrollView缩放代理方法
#pragma mark 设置缩放控件
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
return _imageView;
}

2. 缩放中的操作方法:
- (void)scrollViewDidZoom:(UIScrollView *)scrollView
{
NSLog(@"正在缩放中....");
}


3. 缩放完之后的操作方法:
- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(CGFloat)scale
{
NSLog(@"缩放完成 %f", scale);

NSString *imageFile = [NSString stringWithFormat:@"%03d.jpeg", arc4random_uniform(10) + 1];

UIImage *image = [UIImage imageNamed:imageFile];

[_imageView setImage:image];
}


缩放属性:

minimumZoomScale: 缩小的最小比例
maximumZoomScale:放大的最大比例

好了, UIScrollView的基本认识就到这里, 下次我们继续~~