我正在制作一个集合视图来生成轮播效果.

我需要中心单元格与左侧和右侧的其他两个单元格重叠.中心单元需要始终位于顶部.

但是,当我尝试将侧面的细胞与中心的细胞重叠时,它不起作用.相反,右侧单元格(蓝色单元格)与中心单元格(黑色单元格)重叠,如下图所示.

使用的代码是针对此效果如下:

以下是集合视图的视图控制器.

import UIKit

private let reuseIdentifier = "Cell"
let kRoomCellScaling: CGFloat = 0.6

class RoomsViewController: UICollectionViewController {

override func viewDidLoad() {
    super.viewDidLoad()

    // This method sets up the collection view
    let layout = UPCarouselFlowLayout()
    layout.itemSize = CGSizeMake(250,250)
    layout.scrollDirection = .Horizontal

    layout.sideItemAlpha = 1
    layout.sideItemScale = 0.8
    layout.spacingMode = UPCarouselFlowLayoutSpacingMode.overlap(visibleOffset: 60)

    collectionView?.setCollectionViewLayout(layout,animated: false)

}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // dispose of any resources that can be recreated.
}



// MARK: UICollectionViewDataSource

override func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
    // #warning Incomplete implementation,return the number of sections
    return 1
}


override func collectionView(collectionView: UICollectionView,numberOfItemsInSection section: Int) -> Int {
    // #warning Incomplete implementation,return the number of items
    return 3
}

override func collectionView(collectionView: UICollectionView,cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier,forIndexPath: indexPath)



    // Configure the cell
    switch indexPath.row%3 {

    case 0:
        cell.backgroundColor = UIColor.redColor()
    case 1:
        cell.backgroundColor = UIColor.blackColor()
    case 2:
        cell.backgroundColor = UIColor.blueColor()

    default:
        break

    }

    return cell
}


}

以下是用于集合视图的流程布局.

import UIKit


public enum UPCarouselFlowLayoutSpacingMode {
    case fixed(spacing: CGFloat)
    case overlap(visibleOffset: CGFloat)
}

public class UPCarouselFlowLayout: UICollectionViewFlowLayout {

    private struct LayoutState {
        var size: CGSize
        var direction: UICollectionViewScrollDirection
        func isEqual(otherState: LayoutState) -> Bool {
            return CGSizeEqualToSize(self.size,otherState.size) && self.direction == otherState.direction
        }
    }

    @IBInspectable public var sideItemScale: CGFloat = 0.6
    @IBInspectable public var sideItemAlpha: CGFloat = 0.6
    public var spacingMode = UPCarouselFlowLayoutSpacingMode.fixed(spacing: 40)

    private var state = LayoutState(size: CGSizeZero,direction: .Horizontal)


    override public func prepareLayout() {
        super.prepareLayout()

        let currentState = LayoutState(size: self.collectionView!.bounds.size,direction: self.scrollDirection)

        if !self.state.isEqual(currentState) {
            self.setupCollectionView()
            self.updateLayout()
            self.state = currentState
        }
    }

    private func setupCollectionView() {
        guard let collectionView = self.collectionView else { return }
        if collectionView.decelerationRate != UIScrollViewDecelerationRateFast {
            collectionView.decelerationRate = UIScrollViewDecelerationRateFast
        }
    }

    private func updateLayout() {
        guard let collectionView = self.collectionView else { return }

        let collectionSize = collectionView.bounds.size
        let isHorizontal = (self.scrollDirection == .Horizontal)

        let yInset = (collectionSize.height - self.itemSize.height) / 2
        let xInset = (collectionSize.width - self.itemSize.width) / 2
        self.sectionInset = UIEdgeInsetsMake(yInset,xInset,yInset,xInset)

        let side = isHorizontal ? self.itemSize.width : self.itemSize.height
        let scaledItemOffset =  (side - side*self.sideItemScale) / 2
        switch self.spacingMode {
        case .fixed(let spacing):
            self.minimumLinespacing = spacing - scaledItemOffset
        case .overlap(let visibleOffset):
            let fullSizeSideItemOverlap = visibleOffset + scaledItemOffset
            let inset = isHorizontal ? xInset : yInset
            self.minimumLinespacing = inset - fullSizeSideItemOverlap
        }
    }

    override public func shouldInvalidateLayoutForBoundsChange(newBounds: CGRect) -> Bool {
        return true
    }

    override public func layoutAttributesForElementsInRect(rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        guard let superAttributes = super.layoutAttributesForElementsInRect(rect),let attributes = NSArray(array: superAttributes,copyItems: true) as? [UICollectionViewLayoutAttributes]
            else { return nil }
        return attributes.map({ self.transformlayoutAttributes($0) })
    }

    private func transformlayoutAttributes(attributes: UICollectionViewLayoutAttributes) -> UICollectionViewLayoutAttributes {
        guard let collectionView = self.collectionView else { return attributes }
        let isHorizontal = (self.scrollDirection == .Horizontal)

        let collectionCenter = isHorizontal ? collectionView.frame.size.width/2 : collectionView.frame.size.height/2
        let offset = isHorizontal ? collectionView.contentOffset.x : collectionView.contentOffset.y
        let normalizedCenter = (isHorizontal ? attributes.center.x : attributes.center.y) - offset

        let maxdistance = (isHorizontal ? self.itemSize.width : self.itemSize.height) + self.minimumLinespacing
        let distance = min(abs(collectionCenter - normalizedCenter),maxdistance)
        let ratio = (maxdistance - distance)/maxdistance

        let alpha = ratio * (1 - self.sideItemAlpha) + self.sideItemAlpha
        let scale = ratio * (1 - self.sideItemScale) + self.sideItemScale
        attributes.alpha = alpha
        attributes.transform3D = CATransform3DScale(CATransform3DIdentity,scale,1)

        return attributes
    }

    override public func targetContentOffsetForProposedContentOffset(proposedContentOffset: CGPoint,withScrollingVeLocity veLocity: CGPoint) -> CGPoint {
        guard let collectionView = collectionView where !collectionView.pagingEnabled,let layoutAttributes = self.layoutAttributesForElementsInRect(collectionView.bounds)
            else { return super.targetContentOffsetForProposedContentOffset(proposedContentOffset) }

        let isHorizontal = (self.scrollDirection == .Horizontal)

        let midSide = (isHorizontal ? collectionView.bounds.size.width : collectionView.bounds.size.height) / 2
        let proposedContentOffsetCenterOrigin = (isHorizontal ? proposedContentOffset.x : proposedContentOffset.y) + midSide

        var targetContentOffset: CGPoint
        if isHorizontal {
            let closest = layoutAttributes.sort { abs($0.center.x - proposedContentOffsetCenterOrigin) < abs($1.center.x - proposedContentOffsetCenterOrigin) }.first ?? UICollectionViewLayoutAttributes()
            targetContentOffset = CGPoint(x: floor(closest.center.x - midSide),y: proposedContentOffset.y)
        }
        else {
            let closest = layoutAttributes.sort { abs($0.center.y - proposedContentOffsetCenterOrigin) < abs($1.center.y - proposedContentOffsetCenterOrigin) }.first ?? UICollectionViewLayoutAttributes()
            targetContentOffset = CGPoint(x: proposedContentOffset.x,y: floor(closest.center.y - midSide))
        }

        return targetContentOffset
    }
}

那么,我怎样才能使中心单元始终与其他两个单元格重叠?

解决方法

您可以根据距离中心的距离将项目转换为较小的负z值.

替换此行:

attributes.transform3D = CATransform3DScale(CATransform3DIdentity,1)

let visibleRect = CGRect(origin: self.collectionView!.contentOffset,size: self.collectionView!.bounds.size)
let dist = CGRectGetMidX(attributes.frame) - CGRectGetMidX(visibleRect)
var transform = CATransform3DScale(CATransform3DIdentity,1)
transform = CATransform3DTranslate(transform,-abs(dist/1000))
attributes.transform3D = transform

或者您可以根据与中心的距离围绕y轴旋转项目,并为transform.m34提供一个小的负值,这样它就会有透视和更真实的外观.

替换此行:

attributes.transform3D = CATransform3DScale(CATransform3DIdentity,size: self.collectionView!.bounds.size)
let dist = CGRectGetMidX(attributes.frame) - CGRectGetMidX(visibleRect)
let currentAngle = dist / (CGRectGetWidth(visibleRect)/2)
var transform = CATransform3DScale(CATransform3DIdentity,1)
transform.m34 = -1.0 / 1000
transform = CATransform3DRotate(transform,-currentAngle,1,0)
attributes.transform3D = transform

ios – 如何使UICollectionView的中心单元与位于侧面的其他两个单元重叠?的更多相关文章

  1. html5教你做炫酷的碎片式图片切换 (canvas)

    本篇文章主要介绍了html5教你做炫酷的碎片式图片切换 (canvas) ,具有一定参考价值,有兴趣的可以了解一下

  2. ios – 如何将UICollectionViewCell从一个UICollectionView拖到另一个UICollectionView?

    如果是这样,我将如何实施它?

  3. xcode – 在自定义表视图单元格中嵌入集合视图

    我有一个故事板的图像,你可以看到自定义表格单元格然后底部是一个集合视图,我想填充图像–只是不知道如何?我也不确定哪些信息可能会有所帮助,所以如果有信息遗失,我很抱歉.解决方法您应该将UICollectionView的Delagate和DataSource放在自定义UITableViewCell类中.这是一个nicetutorial.它是关于tableview单元格中的tableview,但这个想法非常相似.祝好运!

  4. ios – 使用动态单元格高度时,将表格视图滚动到底部

    使用动态单元格高度时,如何将表格视图滚动到底部?出于某种原因,此代码在此方案中不起作用:谢谢!

  5. ios – 渲染模式设置为图像目录中的矢量pdf模板,但UIImageView不会在自定义单元格中设置图像

    我已将所有图像文件迁移到资产目录.所有这些都是大小为1x的pdf向量.它们设置为呈现为模板.它们在大小和颜色方面都显得很好.但是有一个来自xib的自定义TableViewCell,我有6个UIImageView链接到目录中的6个这些图像.不知何故,他们不尊重色调,既不是默认也不是自定义.尝试以编程方式更改它们,但也没有工作.这些相同的图像在主故事板内的静态单元格的另一个tableview中显示正常

  6. ios – 我的表视图在滚动时在SWIFT中重用所选单元格

    实例变量

  7. ios – 带图像而不是标题的UITableViewRowAction

    可以告诉我如何解决它,或者其他方式来做到这一点?

  8. iOS – 自定义表格单元格不是UITableView的全宽度

    我可能会犯这个错误.所以我创建了一个UITableView,它基本上有一个设置为主视图的自动布局尾随空间.我正在为这个表创建一个自定义单元格,所以我在原型单元格上进行了定制,定制了它,并为它创建了我的类.这一切都很好.我似乎无法解决的是自定义单元格不是实际表格单元格的全宽,因此只显示白色背景.如果我不使用自定义单元格,则可以使用整个宽度表单元格.我为单元格内容设置了约束,以便背景图像填充单元格.我究竟做错了什么?

  9. UITableViewCellAccessoryCheckmark涵盖iOS 7上的单元格分隔符

    在iOS7上使用此代码会导致分隔符视图被覆盖或缩短:如何修复分隔符视图?

  10. ios – 在UITableviewcell swift中设置水平渐变

    我想在每个单元格上从左到右创建一个水平渐变我使用CAGradientLayey创建自定义图层并将此图层添加到tableview单元格这是我在swift中的代码但是渐变并不覆盖所有tableview单元格,它在渐变单元格和正常单元格背景颜色之间切换,似乎渐变覆盖了单元格文本.我不知道我做错了什么有什么建议吗?谢谢解决方法而不是使用框架,使用单元格的边界,也在索引0处插入子图层,因此它将落后于包括您的标签在内的所有其他图层

随机推荐

  1. iOS实现拖拽View跟随手指浮动效果

    这篇文章主要为大家详细介绍了iOS实现拖拽View跟随手指浮动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  2. iOS – genstrings:无法连接到输出目录en.lproj

    使用我桌面上的项目文件夹,我启动终端输入:cd然后将我的项目文件夹拖到终端,它给了我路径.然后我将这行代码粘贴到终端中找.-name*.m|xargsgenstrings-oen.lproj我在终端中收到此错误消息:genstrings:无法连接到输出目录en.lproj它多次打印这行,然后说我的项目是一个目录的路径?没有.strings文件.对我做错了什么的想法?

  3. iOS 7 UIButtonBarItem图像没有色调

    如何确保按钮图标采用全局色调?解决方法只是想将其转换为根注释,以便为“回答”复选标记提供更好的上下文,并提供更好的格式.我能想出这个!

  4. ios – 在自定义相机层的AVFoundation中自动对焦和自动曝光

    为AVFoundation定制图层相机创建精确的自动对焦和曝光的最佳方法是什么?

  5. ios – Xcode找不到Alamofire,错误:没有这样的模块’Alamofire’

    我正在尝试按照github(https://github.com/Alamofire/Alamofire#cocoapods)指令将Alamofire包含在我的Swift项目中.我创建了一个新项目,导航到项目目录并运行此命令sudogeminstallcocoapods.然后我面临以下错误:搜索后我设法通过运行此命令安装cocoapodssudogeminstall-n/usr/local/bin

  6. ios – 在没有iPhone6s或更新的情况下测试ARKit

    我在决定下载Xcode9之前.我想玩新的框架–ARKit.我知道要用ARKit运行app我需要一个带有A9芯片或更新版本的设备.不幸的是我有一个较旧的.我的问题是已经下载了新Xcode的人.在我的情况下有可能运行ARKit应用程序吗?那个或其他任何模拟器?任何想法或我将不得不购买新设备?解决方法任何iOS11设备都可以使用ARKit,但是具有高质量AR体验的全球跟踪功能需要使用A9或更高版本处理器的设备.使用iOS11测试版更新您的设备是必要的.

  7. 将iOS应用移植到Android

    我们制作了一个具有2000个目标c类的退出大型iOS应用程序.我想知道有一个最佳实践指南将其移植到Android?此外,由于我们的应用程序大量使用UINavigation和UIView控制器,我想知道在Android上有类似的模型和实现.谢谢到目前为止,guenter解决方法老实说,我认为你正在计划的只是制作难以维护的糟糕代码.我意识到这听起来像很多工作,但从长远来看它会更容易,我只是将应用程序的概念“移植”到android并从头开始编写.

  8. ios – 在Swift中覆盖Objective C类方法

    我是Swift的初学者,我正在尝试在Swift项目中使用JSONModel.我想从JSONModel覆盖方法keyMapper,但我没有找到如何覆盖模型类中的Objective-C类方法.该方法的签名是:我怎样才能做到这一点?解决方法您可以像覆盖实例方法一样执行此操作,但使用class关键字除外:

  9. ios – 在WKWebView中获取链接URL

    我想在WKWebView中获取tapped链接的url.链接采用自定义格式,可触发应用中的某些操作.例如HTTP://我的网站/帮助#深层链接对讲.我这样使用KVO:这在第一次点击链接时效果很好.但是,如果我连续两次点击相同的链接,它将不报告链接点击.是否有解决方法来解决这个问题,以便我可以检测每个点击并获取链接?任何关于这个的指针都会很棒!解决方法像这样更改addobserver在observeValue函数中,您可以获得两个值

  10. ios – 在Swift的UIView中找到UILabel

    我正在尝试在我的UIViewControllers的超级视图中找到我的UILabels.这是我的代码:这是在Objective-C中推荐的方式,但是在Swift中我只得到UIViews和CALayer.我肯定在提供给这个方法的视图中有UILabel.我错过了什么?我的UIViewController中的调用:解决方法使用函数式编程概念可以更轻松地实现这一目标.

返回
顶部