1. 在Interface Builder中ScrollView设置auto layout 时出现需要设置确定高宽(当scrollView有子View时)的问题--解决方案是:在scrollview中添加一个View作为container,不仅设置container view的上下左右与scrollview对齐外,还要设置container view的高宽等于scrollView的高宽,或者container view中的子view高宽确定。
包含Container View。 Container View的Width约束
2. 在Interface Builder中创建的ScrollView中嵌套View,实现如“天猫”APP首页效果。。。。(important)
tableView添加head
3. 使用ScrollView实现图片的滚动展示,参考:http://www.cnblogs.com/wendingding/p/3763527.html
代码如下:
#import "AZScrollPictureViewController.h"
#define kImageCounts 4 // 图片数量
@interface AZScrollPictureViewController ()<UIScrollViewDelegate>
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
// 页码
@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;
@property (nonatomic, strong) NSTimer *timer;
@end
@implementation AZScrollPictureViewController
- (void)viewDidLoad {
[super viewDidLoad];
// 图片宽度
CGFloat imageWidth = self.scrollView.frame.size.width;
// 图片高度
CGFloat imageHeight = self.scrollView.frame.size.height;
// 图片Y
CGFloat imageY = 0;
// 1.依次添加图片
for (int i = 0 ; i < kImageCounts ; ++i) {
UIImageView *imageView = [[UIImageView alloc]init];
// 各图片的X
CGFloat imageX = i * imageWidth;
// 设置frame
imageView.frame = CGRectMake(imageX, imageY, imageWidth, imageHeight);
// 设置图片
NSString *imageName = [NSString stringWithFormat:@"imageScroll_0%d", i + 1];
imageView.image = [UIImage imageNamed:imageName];
// 隐藏scrollView的滚动指示条
self.scrollView.showsHorizontalScrollIndicator = NO;
[self.scrollView addSubview:imageView];
}
// 2.设置scrollView的滚动范围,不允许在垂直方向上进行滚动
CGFloat contentWidth = imageWidth * kImageCounts;
self.scrollView.contentSize = CGSizeMake(contentWidth, 0);
// 3.设置分业
self.scrollView.pagingEnabled = YES;
// 4.监听srollView的滚动
self.scrollView.delegate = self;
[self addTimer];
}
- (void)nextImage
{
int page = (int)self.pageControl.currentPage;
if (page == kImageCounts) {
page = 0;
}
else{
++page;
}
// 滚动scrollView
CGFloat x = page * self.scrollView.frame.size.width;
self.scrollView.contentOffset = CGPointMake(x, 0);
}
// scrollView滚动的时候 自动 调用
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
// 计算页码
// 页码 = (contentOffset.x + scrollView的一半宽度) / scrollView的宽度
CGFloat contentOffsetX = scrollView.contentOffset.x;
CGFloat scrollViewWidth = scrollView.frame.size.width;
int page = (contentOffsetX + scrollViewWidth / 2) / scrollViewWidth;
self.pageControl.currentPage = page;
}
// 拖拽scrollView时 自动 调用
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
// 关闭定时器
[self removeTimer];
}
// 拖拽结束时 自动 调用
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
// 开启定时器
[self addTimer];
}
/**
* 开启定时器
*/
- (void)addTimer
{
self.timer = [NSTimer scheduledTimerWithTimeInterval:1
target:self
selector:@selector(nextImage)
userInfo:nil
repeats:YES];
}
/**
* 关闭定时器
*/
- (void)removeTimer
{
[self.timer invalidate];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
4. 涉及的小知识点
contentSize: The size of the content view. 其实就是scrollview可以滚动的区域,比如frame = (0 ,0 ,320 ,480) contentSize = (320 ,960),代表你的scrollview可以上下滚动,滚动区域为frame大小的两倍。
contentOffset:The point at which the origin of the content view is offset from the origin of the scroll view. 是scrollview当前显示区域顶点相对于frame顶点的偏移量,比如上个例子你拉到最下面,contentoffset就是(0 ,480),也就是y偏移了480
contentInset:The distance that the content view is inset from the enclosing scroll view.是scrollview的contentview的顶点相对于scrollview的位置,例如你的contentInset = (0 ,100),那么你的contentview就是从scrollview的(0 ,100)开始显示