前面, 我们基本上把所有的基础控件都学完了, 并且把基础控件的常用知识都总结了一下~现在我们来进阶一下, 学习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的Delegate:
1. 把imageView设置成全局变量:
@interface ViewController ()
{
UIImageView *_imageView;
}
@end
- (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];
}
1. 设置被缩放控件:
#pragma mark - scrollView缩放代理方法
#pragma mark 设置缩放控件
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
return _imageView;
}
- (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的基本认识就到这里, 下次我们继续~~