Objective-C
最终效果:
- 图片水平滚动
- 图片初始位置在屏幕中间
- 滑动到最左和最右时图片停留在屏幕最中间.
- 中间任意位置停止滑动时, 总有一个图片显示在屏幕的最中间
实现原理
- 使用自定义布局,这里创建自定义类LineLayout继承自流水布局
UICollectionViewFlowLayout
#import "LineLayout.h"
@implementation LineLayout
/** collectView会在布局时调用该方法 */
- (void)prepareLayout
{
[super prepareLayout];
/** 设置滚动方向为水平滚动 */
self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
/** 设置内间距, 保证左右两边的显示的图片在collectView的最中间 */
CGFloat inset = (self.collectionView.frame.size.width - self.itemSize.width) * 0.5;
self.sectionInset = UIEdgeInsetsMake(0, inset, 0, inset);
}
/** 返回YES时, 每次滚动都会调用layoutAttributesForElementsInRect:方法; 默认返回NO,即轻微的滚动不会调用layoutAttributesForElementsInRect:方法 */
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
return YES;
}
/**
* 1.一个cell对应一个UICollectionViewLayoutAttributes对象;
* 2.UICollectionViewLayoutAttributes对象决定了cell的frame;
*
* layoutAttributesForElementsInRect:
* 返回值为一个数组,里面存放着rect范围内所有元素的布局属性;
* 返回值也就决定了rect范围内所有元素的排布(frame);
*/
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
// 调用super, 获得计算好的属性值
NSArray *attrs = [super layoutAttributesForElementsInRect:rect];
for (UICollectionViewLayoutAttributes *attr in attrs)
{
// collectView的中心点x = 偏移量 + 自身宽度的一半
CGFloat collectViewCenterX = self.collectionView.contentOffset.x + self.collectionView.frame.size.width * 0.5;
// cell的中心点x = 偏移量 + cell宽度的一半 = attr.center.x
CGFloat cellCenterX = attr.center.x;
// 计算cell的中心点到collectView中心点的距离(距离越近,尺寸越大)
CGFloat delta = ABS(cellCenterX - collectViewCenterX);
// 计算缩放比例
CGFloat scale = 1 - delta / self.collectionView.frame.size.width;;
// 设置缩放
attr.transform = CGAffineTransformMakeScale(scale, scale);
}
return attrs;
}
/**
* 作用: 让collectView停止滚动时总有一个cell显示在屏幕的最中间.
*
* @return 返回值决定了collectionView停止滚动时的偏移量
*/
- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
{
// 获得最终的矩形框frame
CGRect rect;
rect.origin.x = proposedContentOffset.x;
rect.origin.y = 0;
rect.size = self.collectionView.frame.size;
NSArray *attrs = [self layoutAttributesForElementsInRect:rect];
// 计算collectView最中心点的x的值
CGFloat centerX = proposedContentOffset.x + self.collectionView.frame.size.width * 0.5;
// 计算cell的的中心点x距离collectView中心x的最小值
CGFloat minDelta = MAXFLOAT;
for (UICollectionViewLayoutAttributes *attr in attrs) {
if (ABS(attr.center.x - centerX) < ABS(minDelta) ){
minDelta = attr.center.x - centerX;
}
}
// 修改最终的偏移量
proposedContentOffset.x += minDelta;
return proposedContentOffset;
}
@end
- 创建collectView, 并设置创建好的自定义布局
#import "ViewController.h"
#import "LineLayout.h"
#import "LVPictureCell.h"
@interface ViewController () <UICollectionViewDataSource, UICollectionViewDelegate>
@end
static NSString *ID = @"mycell";
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
/** 设置背景色 */
self.view.backgroundColor = [UIColor redColor];
/** 设置状态栏文字颜色 */
[UIApplication sharedApplication].statusBarStyle = UIStatusBarStyleLightContent;
/** 创建布局 */
LineLayout *layout = [[LineLayout alloc] init];
/** 设置cell的大小 */
layout.itemSize = CGSizeMake(250 * 0.5, 370 * 0.5);
/** 设置collectView的frame */
CGRect frame = CGRectMake(0, 100, self.view.frame.size.width, 370);
/** 创建collectView */
UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:frame collectionViewLayout:layout];
/** 注册cell */
[collectionView registerNib:[UINib nibWithNibName:NSStringFromClass([LVPictureCell class]) bundle:nil] forCellWithReuseIdentifier:ID];
/** collectView的背景色 */
collectionView.backgroundColor = [UIColor blackColor];
/** 设置collectView的代理和数据源 */
collectionView.dataSource = self;
collectionView.delegate = self;
/** collectView添加到当前view上 */
[self.view addSubview:collectionView];
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
LVPictureCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:ID forIndexPath:indexPath];
cell.imageName = [NSString stringWithFormat:@"%zd",indexPath.item];
return cell;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return 13;
}
@end
Swift
1. 自定义布局
private class NewFeatureLayout: UICollectionViewFlowLayout {
override func prepareLayout()
super.prepareLayout()
itemSize = UIScreen.mainScreen().bounds.size
minimumInteritemSpacing = 0
minimumLineSpacing = 0
scrollDirection = UICollectionViewScrollDirection.Horizontal
collectionView?.bounces = false
collectionView?.pagingEnabled = true
collectionView?.showsHorizontalScrollIndicator = false
}
}
2. 创建控制器继承自UICollectionViewController
private let reuseIdentifier = "Cell"
private let numberOfPages = 4
class FlowLayoutViewController: UICollectionViewController {
// 重写初始化方法, 初始化时必须指定布局
let layout: UICollectionViewFlowLayout = NewFeatureLayout()
init() {
super.init(collectionViewLayout: layout)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func viewDidLoad() {
super.viewDidLoad()
// 注册cell
self.collectionView!.registerClass(NewFeatureCell.self, forCellWithReuseIdentifier: reuseIdentifier)
}
// MARK: UICollectionViewDataSource
override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return numberOfPages
}
override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as! NewFeatureCell
cell.imageIndex = indexPath.item
return cell
}
}
3. 自定义cell
class FlowLayoutCell: UICollectionViewCell {
override init(frame: CGRect) {
super.init(frame: frame)
setupUI()
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
private func setupUI() {
// add subView onto contentView
contentView.addSubview(imageView)
contentView.addSubview(startButton)
// set constraints for ImageView
imageView.snp_makeConstraints { (make) -> Void in
make.top.equalTo(0)
make.bottom.equalTo(0)
make.leading.equalTo(0)
make.trailing.equalTo(0)
}
// set constraints for startButton
startButton.snp_makeConstraints { (make) -> Void in
make.centerX.equalTo(contentView)
make.bottom.equalTo(-150)
}
}
// set imageView's image when imageIndex was set
var imageIndex: Int? {
didSet{
imageView.image = UIImage(named: "new_feature_\(imageIndex! + 1)")
if imageIndex == 3 {
startButton.hidden = false
}
}
}
// lazy loading
private lazy var imageView = UIImageView()
private lazy var startButton: UIButton = {
let button = UIButton()
button.setImage(UIImage(named: "new_feature_button"), forState: .Normal)
button.setImage(UIImage(named: "new_feature_button_highlighted"), forState: .Highlighted)
button.addTarget(self, action: "enterWeiboClick", forControlEvents: .TouchUpInside)
button.hidden = true
return button
}()
// enterWeibo button click
func enterWeiboClick() {
print(__FUNCTION__)
}
}
-
方法调用顺序
- collectionView(_:numberOfItemsInSection:) // 询问控制器要显示的cell的个数
- prepareLayout() // 开始布局
- collectionView(_:cellForItemAtIndexPath:) // 问控制器要cell
- init(frame:) // 初始化cell
