UICollectionView 帶分頁的水平布局 IOS Swift 3.0

Question

我想顯示 UIcollectionview 單元格水平布局，分頁和兩個單元格之間的空間。

左右滑動移動收藏視圖頁面。

我從 storyboard 設置了以下屬性。

滾動啟用“假”，分頁啟用“真”，滾動方向“水平”

為此，我添加了 SwipeGesture，查看以下代碼。

   import UIKit

class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource , UICollectionViewDelegateFlowLayout, UIGestureRecognizerDelegate{

    @IBOutlet weak var pageControl: UIPageControl!;
    @IBOutlet weak var heightOfCollection: NSLayoutConstraint!;
    @IBOutlet weak var MyCollection: UICollectionView!;

    var cellHeight:CGFloat = 0.0;
    var numberOfItems: Float = 10;
    var setCurrentIndex:Int = 0;

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        //Add Gestures
        let swipeRight = UISwipeGestureRecognizer(target: self, action: #selector(respondToSwipeGesture(gesture:)));
        swipeRight.direction = UISwipeGestureRecognizerDirection.right;
        MyCollection.addGestureRecognizer(swipeRight);

        let swipeLeft = UISwipeGestureRecognizer(target: self, action: #selector(respondToSwipeGesture(gesture:)));
        swipeLeft.direction = UISwipeGestureRecognizerDirection.left;
        MyCollection.addGestureRecognizer(swipeLeft);
    }

    override func viewWillAppear(_ animated: Bool) {

        self.view.layoutIfNeeded();
        cellHeight = (MyCollection.frame.size.width - 20) / 3;
        heightOfCollection.constant = (cellHeight * 2) + 10;
        MyCollection.reloadData();

        MyCollection.clipsToBounds = true;

        let noOfPage = ceil(Double(numberOfItems/6));
        pageControl.numberOfPages = Int(noOfPage.rounded(.up));

    }

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

    // MARK: - Collection View Delegate Methods.

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

        return CGSize(width: cellHeight, height: cellHeight);
    }

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

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "MyCell", for: indexPath as IndexPath) as! MyCell;

        cell.backgroundColor = UIColor(red: CGFloat(drand48()), green: CGFloat(drand48()), blue: CGFloat(drand48()), alpha: 1.0);

        cell.lblNumber.text = "\(indexPath.row + 1)";

        return cell;
    }

    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {

        print(indexPath.row);
    }

    //MARK:- Handle Swipe Gesture Recognizer.
    func respondToSwipeGesture(gesture: UIGestureRecognizer) {

        if let swipeGesture = gesture as? UISwipeGestureRecognizer {

            switch swipeGesture.direction {
            case UISwipeGestureRecognizerDirection.right:
                if setCurrentIndex > 0 {
                    setCurrentIndex -= 1

                    let transition:CATransition! = CATransition();
                    transition.duration = 0.5;
                    transition.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut);
                    transition.type = kCATransitionPush;
                    transition.subtype = kCATransitionFromLeft;
                    MyCollection.layer.add(transition, forKey: nil);

                    MyCollection.contentOffset.x = (CGFloat(setCurrentIndex) * MyCollection.frame.size.width) + CGFloat(setCurrentIndex * 10)
                    pageControl.currentPage = setCurrentIndex;
                }


            case UISwipeGestureRecognizerDirection.left:

                if setCurrentIndex < pageControl.numberOfPages - 1 {
                    setCurrentIndex += 1;

                    let transition:CATransition! = CATransition();
                    transition.duration = 0.5;
                    transition.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut);
                    transition.type = kCATransitionPush;
                    transition.subtype = kCATransitionFromRight;
                    MyCollection.layer.add(transition, forKey: nil);

                    MyCollection.contentOffset.x = (CGFloat(setCurrentIndex) * MyCollection.frame.size.width) + CGFloat(setCurrentIndex * 10)
                    pageControl.currentPage = setCurrentIndex;
                }
            default:
                break
            }
        }
    }
}

我想顯示方面的 output 就像在紅框中的屏幕截圖中一樣。

Answer 1

我使用KSTCollectionViewPageHorizo​​ntalLayout解決了這個問題。

在github @https上看到這個演示：//github.com/kelystor/KSTCollectionViewPageHorizo​​ntalLayout

  override func viewWillAppear(_ animated: Bool) {

        self.view.layoutIfNeeded();
        cellHeight = (collectionListing.frame.size.width - 20) / 3;
        collectionHeightConst.constant = (cellHeight * 2) + 10;

        let pageHorizontalLayout = KSTCollectionViewPageHorizontalLayout();
        pageHorizontalLayout.itemSize = CGSize(width: cellHeight, height: cellHeight);
        pageHorizontalLayout.lineSpacing = 10;
        pageHorizontalLayout.interitemSpacing = 10;
        collectionListing.collectionViewLayout = pageHorizontalLayout;

        collectionListing.reloadData();
    }

Answer 2

多行水平滾動

• 我已經使用帶有組合布局的集合視圖解決了這個問題——

• 在Github上查看此演示

   private func secondLayoutSection() -> NSCollectionLayoutSection { let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.33), heightDimension: .absolute(100)) let item = NSCollectionLayoutItem(layoutSize: itemSize) item.contentInsets =.init(top: 0, leading: 0, bottom: 15, trailing: 15) let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .estimated(500)) let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item]) let group1 = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item]) let MainGroup = NSCollectionLayoutGroup.vertical(layoutSize: groupSize, subitems: [group,group1]) let section = NSCollectionLayoutSection(group: MainGroup) section.contentInsets.leading = 15 section.orthogonalScrollingBehavior =.groupPaging section.boundarySupplementaryItems = [ NSCollectionLayoutBoundarySupplementaryItem(layoutSize: .init(widthDimension: .fractionalWidth(1), heightDimension: .estimated(44)), elementKind: categoryHeaderId, alignment: .top) ] return section

  }