【Swift】storyboardを利用しないテンプレート（UICollectionView、UICollectionViewCell）

3878 ワード
Storyboard iOS PureLayout Swift Xcode Xcode テキストリンク

概要

PureLayoutのサンプル（UICollectionView、UICollectionViewCell） 第3弾です。
Yahooオークションの検索APIの結果をCollectionViewに表示しています。
次回はUITabBar

目的

storyboardを利用しない必要最低限のテンプレート（Swift） を参照ください。

メリット （PureLayout vs Storyboard）

[Swift] storyboardを利用しないテンプレート（基本的なView） を参照ください。

対象View

  • UICollectionView
  • UICollectionViewCell

結果

サンプル

github

AutoLayout設定

CollectionView（& SearchBar）

    private func addConstraints() {
        searchBar.autoPinToTopLayoutGuideOfViewController(self, withInset: 0)
        searchBar.autoPinEdgeToSuperviewEdge(.Left)
        searchBar.autoPinEdgeToSuperviewEdge(.Right)

        collectionView.autoPinEdge(.Top, toEdge: .Bottom, ofView: searchBar)
        collectionView.autoPinEdgeToSuperviewEdge(.Left)
        collectionView.autoPinEdgeToSuperviewEdge(.Right)
        collectionView.autoPinEdgeToSuperviewEdge(.Bottom)
    }

CollectionViewCell内の各View

    private func addConstraints() {
        itemImageView.autoPinEdgeToSuperviewEdge(.Top, withInset: 2)
        itemImageView.autoPinEdgeToSuperviewEdge(.Left, withInset: 2)
        itemImageView.autoPinEdgeToSuperviewEdge(.Right, withInset: 2)

        titleLabel.autoPinEdge(.Top, toEdge: .Bottom, ofView: itemImageView, withOffset: 3.0)
        titleLabel.autoPinEdgeToSuperviewEdge(.Left, withInset: 2)
        titleLabel.autoPinEdgeToSuperviewEdge(.Right, withInset: 2)

        priceLabel.autoPinEdge(.Top, toEdge: .Bottom, ofView: titleLabel, withOffset: 3.0)
        priceLabel.autoPinEdgeToSuperviewEdge(.Left, withInset: 2)
        priceLabel.autoPinEdgeToSuperviewEdge(.Right, withInset: 2)

        endTimeLabel.autoPinEdge(.Top, toEdge: .Bottom, ofView: priceLabel, withOffset: 3.0)
        endTimeLabel.autoPinEdgeToSuperviewEdge(.Left, withInset: 2)
        endTimeLabel.autoPinEdgeToSuperviewEdge(.Bottom, withInset: 5)

        bidLabel.autoPinEdge(.Top, toEdge: .Bottom, ofView: priceLabel, withOffset: 3.0)
        bidLabel.autoPinEdge(.Left, toEdge: .Right, ofView: endTimeLabel, withOffset: 10.0)
        bidLabel.autoPinEdgeToSuperviewEdge(.Bottom, withInset: 5)

    }