KYParallaxView 1.0.4
- 由
- KittenYang
一个
1.使用简单
2.高度自定义
3.两种使用方法
的视差滚动框架
它是一个易于使用/高度自定义/两种使用方法的视差效果框架。
安装 Installation
pod 'KYParallaxView', '~> 1.0.2'
本框架有两种使用场景：
使用此框架的两种情况：
1、如果你不需要使用水平滚动的框架，只需要使用效果图中单页垂直滚动效果，那么你只需在你的 ViewController 中。
如果您只想使用单个垂直滚动视图，您应该在您的 ViewController 中。
KYParallaxVerticalView *parallaxVerticalView= [[KYParallaxVerticalView alloc]initWithFrame:self.view.frame];
[self.view addSubview:parallaxVerticalView];
[parallaxVerticalView bkgImageViewSetImage: [UIImage imageNamed:@"[email protected]"]];// 指定背景图
就可以了。
That's it!
2、如果您需要使用整个框架，那么您需要在您的 ViewController 中：
If you wanna use the whole framework.
KYParallaxHorizontalView *parallaxHorizontalView = [[KYParallaxHorizontalView alloc]initWithFrame:self.view.frame andCollectionDelegate:self];
[self.view addSubview:self.parallaxHorizontalView];
-
然后实现 UICollectionDataSource 的协议方法：
然后实现 UICollectionDataSource 的协议方法
#pragma mark -- UICollectionDataSource
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return 5;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
KYParallaxCollectionCell *cell = (KYParallaxCollectionCell *)[collectionView dequeueReusableCellWithReuseIdentifier:@"HorizontalParallexCell" forIndexPath:indexPath];
/*****自定义cell视图*****/
/*****Custom the vertical scrollview content******/
//设置每个单页的背景图片 Set the background img of every vertical scrollview
[cell.verticalView bkgImageViewSetImage:[UIImage imageNamed:[NSString stringWithFormat:@"bkgImg_%ld.jpg",(long)indexPath.item+1]]];
cell.verticalView.customView.label.text = [NSString stringWithFormat:@"第%ld页",(long)indexPath.item+1];
cell.verticalView.customView.avatar.image = [UIImage imageNamed:[NSString stringWithFormat:@"kitten_%ld",(long)indexPath.item+1]];
cell.verticalView.customView.pic.image = [UIImage imageNamed:[NSString stringWithFormat:@"l%ld.jpg",indexPath.item+1]];
cell.verticalView.scroller.contentOffset = CGPointMake(0, 0); //解决cell同时复用scrollview位置的bug Fix resuing the contentOffset of cell
//...
return cell;
}
-
最后，您还需要实现 UIScrollViewDelegate 中的 scrollViewDidScroll 方法：
最后，您还需要实现 UIScrollViewDelegate 的协议方法
#pragma mark -- UITableViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
[self.parallaxHorizontalView parallax:scrollView];
}3.如何自定义单页滚动视图内容？
How to customize the vertical scroll view's content?
- 你会发现有三个文件。
-
你会发现 CustomViewXib 如下所示：
因此，您可以在 xib 中自定义内容。
-
是的，您可以通过可视化布局要滚动界面的内容在这里。当然，为了便于自定义内容，您还需要将这些视图拖到代码中来：
同样，您可以使用 IBOutlet 将 xib 和代码连接起来。
@property (strong, nonatomic) IBOutlet UILabel *label;
@property (strong, nonatomic) IBOutlet UIView *box1;
@property (strong, nonatomic) IBOutlet UIView *box2;
@property (strong, nonatomic) IBOutlet UIView *box3;
@property (strong, nonatomic) IBOutlet UIImageView *avatar;
@property (strong, nonatomic) IBOutlet UIImageView *pic;