Question

我正在尝试将缩略图添加到collectionview horizontal flowlayout上的内容，例如下面显示的苹果照片应用。

我应该为此使用什么？

感谢。

Answer 1

据我所知，你的意思是说你需要显示一堆图像，当从一个图像移动到另一个图像时，背景图像会相应地改变。

样式-1： -

您可以在屏幕底部使用collectionView在背景中显示缩略图图像和imageView，在collectionView:didSelectItemAtIndexPath:上，您可以通过将其设置为tapped indexPath处的值来更改您的背景图像。

Style-2： -

你可以带一个＆＃34; collectionView1＆＃34;在屏幕的底部显示缩略图和另一个＆＃34; collectionView2＆＃34;在它背后。当您点击collectionView:didSelectItemAtIndexPath:（对于＆＃34; collectionView1＆＃34;）时，您可以滚动＆＃34; collectionView2＆＃34;到那个indexPath，这样就会产生一种感觉：某人正在使用它来推送它： -

collectionView2.scrollToItemAtIndexPath(tappedIndexPath, atScrollPosition: .CenteredHorizontally, animated: true)

检查您是否正确设置了UICollectionViewDelegateFlowLayout的委托方法。

func collectionView(collectionView: UICollectionView,
    layout collectionViewLayout: UICollectionViewLayout,
    sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
        return CGSize(width: 40, height: 40)
}

func collectionView(collectionView: UICollectionView,
    layout collectionViewLayout: UICollectionViewLayout,
    insetForSectionAtIndex section: Int) -> UIEdgeInsets {
        return sectionInsets 
    //returns the spacing between the cells, headers, and footers.
}

func collectionView(collectionView: UICollectionView,
        layout collectionViewLayout: UICollectionViewLayout,
        minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat {
            return 5.0
            // spacing between items
}

func collectionView(collectionView: UICollectionView, layout
    collectionViewLayout: UICollectionViewLayout,
    minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat {
        return 1.0
            // spacing between lines
}

另外，不要忘记在collectionViewCell中为其中的imageViews添加约束。将top，bottom，trailing和leading约束设置为0.您可以通过storyboard以编程方式设置它。

肯定会锻炼。删除对象并再次添加约束。清理并运行您的代码。

Answer 2

你去，这将扩大单元格。只需复制scrollViewDidEndDeacelerating上的功能即可。代码是自解释的，只需选择indexPath并使用performBatchUpdates重新加载集合：

//
//  CollectionViewController.swift
//  ExpandableCollection
//
//  Created by Marcos Griselli on 5/23/16.
//  Copyright © 2016 marcosgriselli. All rights reserved.
//

import UIKit

private let reuseIdentifier = "Cell"

class CollectionViewController: UICollectionViewController {

    private var selectedPath: NSIndexPath?
    private var defaultSize: CGSize = CGSizeMake(40.0, 100.0)
    private var expandedSize: CGSize = CGSizeMake(80.0, 100.0)

    override func viewDidLoad() {
        super.viewDidLoad()

        // Register cell classes
        self.collectionView!.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: reuseIdentifier)

        self.collectionView?.backgroundColor = UIColor.magentaColor()
        self.collectionView?.pagingEnabled = true
    }

    // MARK: UICollectionViewDataSource

    override func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
        return 1
    }


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

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

        cell.backgroundColor = UIColor.blueColor()

        return cell
    }

    //MARK: UICollectionView Delegate

    override func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {

        selectedPath = nil

        collectionView.performBatchUpdates({ 
            self.selectedPath = indexPath
            }, completion: nil)
    }
}

//MARK: UICollectionViewDelegateFlowLayout
extension CollectionViewController: UICollectionViewDelegateFlowLayout {

    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {

        guard let selectedIndex = selectedPath else { return defaultSize }
        return selectedIndex == indexPath ? expandedSize : defaultSize
    }

    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat {
        return 10.0
    }

}

Answer 3

如果您正确配置了您的collectionView的水平流程布局。您可以使用流动的委托方法重新创建照片应用程序等效果。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.android.multidex.myapplication">
    <application
        ...
        android:name="android.support.multidex.MultiDexApplication">
        ...
    </application>
</manifest>

唯一的问题是selectedItem的lineSpacing。

像PhotosApp一样的Collectionview SubImages

3 个答案: