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

UI基础学习之(十一):UIScrollView

2015-12-08 14:23 501 查看
UIScrollView是可以滚动的View,UIView本身不能滚动,子类UIScrollView拓展了滚动的功能。
UIScrollView是所有滚动视图的基类。UITableView、UITextView等都继承于该类。
使用场景:显示不下(单张大图);内容太多(图文混排);滚动头条(图片);相册等。
UIScrollView主要专长于两个方面:
滚动:contentSize大于frame.size时,能够滚动。
缩放:自带缩放功能,可以指定缩放的倍数。

UIScrollView需要配套使用Image
如果创建UIImageView,没有设置frame,默认x = 0; y = 0,宽高就是图片原始尺寸
UIImageView * imv = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"01.jpg"]];

UIScrollView的相关属性:
//创建UISrollView
self.scrollView = [[[UIScrollView alloc] init] autorelease];
//设置UIScrollView的大小
self.scrollView.frame = self.bounds;
//设置UIScrollView的背景颜色
self.scrollView.backgroundColor = [UIColor redColor];

// conentsize大于frame的宽和高就可以滑动,即contentView的宽和高
//contentsize的类型为CGSize 确定显示内容的大小
//可以设置为和image的大小一致
//定义内容区域的大小,决定能否滑动
self.scrollView.contentSize = CGSizeMake(400, 700);
self.scrollView.contentSize = imv.frame.size;

//contentOffset 设置从Image的某个区域开始显示,Image左上角为(0,0)
//视图左上角距离坐标原点的偏移量 类型为CGPoint
self.scrollView.contentOffset = CGPointMake(200, 200);

//contentInset 内边距 设置scrollView距离边缘的距离 上左下右
self.scrollView.contentInset = UIEdgeInsetsMake(100, 100, 100, 100);

//弹簧效果 总开关
//默认关闭,如果contentSize小于scrollView.frame.size是没有弹簧效果的
self.scrollView.bounces = YES
//水平弹簧效果
self.scrollView.alwaysBounceHorizontal = YES;
//垂直弹簧效果
self.scrollView.alwaysBounceVertical = YES;

//滚动指示条是否显示
//水平滚动条
self.scrollView.showsHorizontalScrollIndicator = YES;
//垂直滚动条
self.scrollView.showsVerticalScrollIndicator = YES;

//是否能滚动 默认YES
self.scrollView.scrollEnabled = NO;

//点击手机状态栏,scrollView返回顶部 默认为YES
self.scrollView.scrollsToTop = NO;

//翻页显示
self.scrollView.pagingEnabled = YES;

[self addSubview:self.scrollView];

//将图片添加到ScrollView上
[self.scrollView addSubview:imv];

UIScrollView的Delegate方法

#pragma mark -----滚动代理方法
//显示移动过程中的偏移量
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
NSLog(@"%@", NSStringFromCGPoint(self.rootV.scrollView.contentOffset));

}

//拖拽的过程
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
NSLog(@"将要开始拖拽");
}

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
NSLog(@"已经结束拖拽");
}

- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView
{
NSLog(@"将要开始减速");
}

//通过这个方法确定滚动停止
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
NSLog(@"完成减速");
}

- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView
{
NSLog(@"滚动完成");
}

#pragma mark -----缩放代理方法
UIScrollView缩放的实现
// 创建图片
UIImageView * imv = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"3.jpeg"]];
//设置tag用来确定图片View
imv.tag = 100;
//设置图片frame
imv.frame = self.rootV.scrollView.bounds;
//将图片添加在UIScrollView上
[self.rootV.scrollView addSubview:imv];

//设置缩放属性
//最小缩放比例
self.rootV.scrollView.minimumZoomScale = 0.5;
//最大缩放比例
self.rootV.scrollView.maximumZoomScale = 2;

//缩放反弹
//self.rootV.scrollView.bouncesZoom = NO;

//设置代理
self.rootV.scrollView.delegate = self;
实现代理的方法:
//指定可以缩放的视图
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
return [scrollView viewWithTag:100];
}
//缩放比例发生改变
- (void)scrollViewDidZoom:(UIScrollView *)scrollView
{
NSLog(@"%f", scrollView.zoomScale);
// 判断缩小状态才居中
if (scrollView.zoomScale < 1) {

[scrollView viewWithTag:100].center = scrollView.center;
}else {
// 获取ImageView的frame
CGRect tempRect = [scrollView viewWithTag:100].frame;
// 修改原点位(0,0)
tempRect.origin = CGPointMake(0, 0);
// 将修改后的值赋给ImageView
[scrollView viewWithTag:100].frame = tempRect;
}
}

- (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(UIView *)view
{
NSLog(@"开始缩放");
}

- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(CGFloat)scale
{
NSLog(@"缩放完成");

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