Question

我尝试开发像Lyft app

这样的页面

使用此类视图的集合视图，但未获得图像中的预期结果。需要一种集中放置图像的替代方法，它必须是可滚动的

Answer 1

此代码将为您提供如何获得中心点。

我为此做了示例，你可以自定义这个基础。

在Collectionview

中将scrolling direction Horizontal设为lineSpacing，将10设为Storyboard

如果要显示20个项目，请添加21行。获取中间的最后一行。

var numbOfItems : Int = 21

let cellWidth : CGFloat = 70



override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return numbOfItems
}

override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier:  "Cell", for: indexPath) as! RulesCollectionViewCell
    cell.backgroundColor = UIColor.clear

    cell.layer.borderColor = UIColor(red: 83/255, green: 50/255, blue: 129/255, alpha: 1.0).cgColor
    cell.layer.borderWidth = 1.0
    cell.txtLbl.text = String(indexPath.item)
    cell.txtLbl.textAlignment = .center
    cell.txtLbl.textColor = UIColor.darkGray


    cell.layer.cornerRadius = 5
    cell.alpha = 1.0

    if indexPath.row == numbOfItems - 1
    {
        cell.alpha = 0.0
    }
    return cell
}


func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {

    let leftPadding = (collectionView.frame.size.width / 2) - (cellWidth / 2)
    let rightPadding = (collectionView.frame.size.width / 2) - (cellWidth / 2)


    return UIEdgeInsets(top: padding, left: leftPadding, bottom: padding, right: rightPadding)
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    return CGSize(width: cellWidth,height: cellWidth )
}

override func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {

    getCenterPointOfCollectionViewLogic()
    print("Drag_ends")
}

override func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {

    getCenterPointOfCollectionViewLogic()

}


func getCenterPointOfCollectionViewLogic()
{
    let contenOff = self.collectionView?.contentOffset
    let ip : [IndexPath] = (collectionView?.indexPathsForVisibleItems)!
    var itemsArr = [Int]()
    var m2  = Int()
    var centerIp = IndexPath()
    var gettingCell = RulesCollectionViewCell()
    var setPointX : CGFloat = 0.0


    if (contenOff?.x)! > CGFloat(50.0)
    {
        for i in 0..<ip.count
        {
            itemsArr.append(ip[i].item)
        }
        m2 = Int(calculateMedian(array: itemsArr))

        let lastItemPointX = CGFloat(((numbOfItems - 1) * Int(cellWidth)) + ((numbOfItems - 1) * 10)) // THIS "10" is CollectionViewCell's LineSpacing.

        print("lastItemPointXlastItemPointX    ", lastItemPointX)

        if (contenOff?.x)! >= lastItemPointX
        {
            m2 = m2 + 1
        }
        setPointX = CGFloat(m2) * cellWidth + CGFloat((m2 * 10))  
    }
    else
    {
        m2 = 0

        setPointX = 0.0
    }

    centerIp = IndexPath(item: m2, section: 0)
    gettingCell = collectionView?.cellForItem(at: centerIp) as! RulesCollectionViewCell
    self.collectionView?.setContentOffset(CGPoint(x: setPointX, y: 0.0), animated: true)

}

func calculateMedian(array: [Int]) -> Float {
    let sorted = array.sorted()
    if sorted.count % 2 == 0 {
        return Float((sorted[(sorted.count / 2)] + sorted[(sorted.count / 2) - 1])) / 2
    } else {
        return Float(sorted[(sorted.count - 1) / 2])
    }
}

集中放置像lyft应用程序的图像视图

1 个答案: