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的基本认识就到这里, 下次我们继续~~