web-dev-qa-db-ja.com

SwiftのUICollectionViewを使用したグリッドレイアウト

私はこの結果を達成したいと思います： enter image description here

周りを検索すると、おそらくそれを行う方法はUICollectionViewを使用することであることがわかりました。StackOverflowには多くのチュートリアルや質問があるため、問題ありません。 3つの質問があります。

  1. 「セパレーター」（すべてのボックスを分割する線）については何も見つかりません。画面の境界線に水平に触れないことが気に入っています。プログラムで行われていますか？

  2. すべてのデバイスでスペースを均等に分割するには（水平方向に3つのボックス/ボタン）、この答え answer を見つけました。これは正しいアプローチですか？

  3. ぼかし効果については、私はこの答えを見つけました： ITableViewで適応セグエを使用してUIVisualEffectViewを実装する方法

TableViewの場合：

if (!UIAccessibilityIsReduceTransparencyEnabled()) {
tableView.backgroundColor = UIColor.clearColor()
let blurEffect = UIBlurEffect(style: .Light)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
tableView.backgroundView = blurEffectView
}

このようなことはできますか？

     @IBOutlet var collectionView: UICollectionView!
    if (!UIAccessibilityIsReduceTransparencyEnabled()) {
    collectionView.backgroundColor = UIColor.clearColor()
    let blurEffect = UIBlurEffect(style: .Light)
    let blurEffectView = UIVisualEffectView(effect: blurEffect)
    collectionView.backgroundView = blurEffectView
    }
iosswiftgridviewuicollectionviewuicollectionviewcell
28
mat

UICollectionViewControllerをサブクラス化するファイルに、このようなUICollectionViewControllerを作成します。

convenience override init() {
    var layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
    layout.itemSize = CGSizeMake(<width>, <height>)
    // Setting the space between cells
    layout.minimumInteritemSpacing = <Space between columns>
    layout.minimumLineSpacing = <Space between rows>
    return (self.init(collectionViewLayout: layout))
}

viewDidLoadでは、次のような背景色を設定します。

self.collectionView.backgroundColor = UIColor.orangeColor()

私の推測では、このような背景画像を設定できます：

self.collectionView?.backgroundColor = UIColor(patternImage: UIImage(named: "image.png")!)

あなたが見つけたぼかし効果はよさそうです。しかし、それがどのように機能するかを理解するのに苦労しています。おそらく backgroundView プロパティを使用して設定します。

答えが見つかったら更新します。

更新：

セルをぼかすのに役立つかもしれない何かのアイデアがあります。

UICollectionViewCellからサブクラス化するcocoa-touchクラスを作成し、次のコードを追加します：

convenience override init(frame: CGRect) {
    self.init(frame: frame)
    var blurEffect: UIVisualEffect
    blurEffect = UIBlurEffect(style: .Light)
    var visualEffectView: UIVisualEffectView
    visualEffectView = UIVisualEffectView(effect: blurEffect)
    visualEffectView.frame = self.maskView!.bounds
    self.addSubview(visualEffectView)
}

override func layoutSubviews() {
    super.layoutSubviews()
    self.maskView!.frame = self.contentView.bounds
}

次に、CollectionViewControllerファイルのviewDidLoadで、次のコード行を変更します。

self.collectionView!.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: reuseIdentifier)

変化する UICollectionViewCell.selfから<Name of CollectionViewCell file>.self

11
Caleb Kleveter

結果：

1）まず、そのレイアウトの見方を変える必要があると思います。区切り記号はありません。セル間に間隔を空けて不透明度を下げ、ぼかしを加えたUICollectionView Cellsのみ。

この設定により、投稿した画像に近いものが得られます。後で必要に応じて編集できます。

ストーリーボードで、UICollectionViewのサイズインスペクターに移動します。
最小間隔->セル= 2、ライン= 2。
セクションのインセット->左= 7、右= 7。

2）アプリでこれを使用して、3つのセルに均等にスペースを分割しています。設定に合わせて変更しました。コピー/ペーストするだけで準備完了です。

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
        let screenSize: CGRect = UIScreen.mainScreen().bounds
        let screenWidth = screenSize.width
        return CGSize(width: (screenWidth/3)-6, height: (screenWidth/3)-6);
        }
    }

最後のステップでは、ビューの左右にCollectionViewの上に2つの画像を配置し、幅を7に、高さをUICollectionViewに等しくします。これらの画像は、セルと同じ不透明度/背景を持つ必要があります。これにより、希望する画像のようになります。
私の答えがお役に立てば幸いです。がんばろう。

8
enoktate

「セパレーター」（すべてのボックスを分割する線）について何も見つかりません。私はそれが水平方向に画面の境界線に触れないことが好きです。プログラムで行われていますか？

はい、 layer にレンダリングされているようです。 Quartz 2Dプログラミングガイドを読んで、レイヤーの描画と操作を理解してください。

すべてのデバイスでスペースを均等に分割するには（3つのボックス/ボタンを水平に）私はこの答えの答えを見つけました。これは正しいアプローチですか？

これはオプションになりますが、スクリーンショットから見たセパレーターの外観はわかりません。

セルビューのbackgroundColorをclearColorに設定し、UICollectionViewの backgroundViewプロパティ を、セパレーターとぼかし効果を含むビューに設定します。 UICollectionViewのbackgroundColorプロパティがclearColorに設定されていることを確認してください。

3番目の質問については、UIVisualEffectViewをぼかし目的に使用できますが、iOS 8以降でのみ互換性があり、iPad2に問題があると思います。しかし、あなたの問題については、collectionView自体ではなく各セルをぼかします（セル間隔はぼかしではないため）。

UICollectionViewのbackgroundViewプロパティを使用してセパレーターとぼかしを処理する場合、セルのbackgroundColorをclearColorに設定するだけで済みます。

これを行うには複数の方法があり、それぞれの方法には欠点があり、最適な方法を選択することに注意してください。

2
Pete Hornsby

最初に言いたいのは、上記のすべての結果は ICollectionViewFlowLayout から得られることです。これはUICollectionViewのデフォルトレイアウトです。

UICollectionViewDelegateFlowLayoutには、要件を満たすことができるすべてのメソッドがあります。

  1. FlowLayoutにはminimumLineSpacingForSectionAtIndexとminimumInteritemSpacingForSectionAtIndexがあり、セル間の間隔（水平および垂直の両方）を指定します。

  2. cellForItemAtIndexPathでセルフレームを指定するのはよくありません（回答リンクを送信するように）。そのため、flowLayoutはセルsizeForItemAtIndexPathをサイズ変更するためのデリゲートを提供します。

  3. 3番目の質問については、はい。UIVisualEffectViewをぼかしの目的に使用できますが、iOS 8以降でのみ互換性があり、iPad2に問題があると思います。しかし、あなたの問題のために、collectionView自体ではなく各セルをぼかします（セル間隔はぼかしではないため）。

2
Kusal Shrestha

このメソッドをカスタムレイアウト用に作成しました。リクエストに応じて変更して使用できます。

func setCollectionLayout() {
    let layout:UICollectionViewFlowLayout = UICollectionViewFlowLayout()
    layout.sectionInset = UIEdgeInsets(top:0,left:0,bottom:0,right:0)
    layout.itemSize = CGSize(width: UIScreen.main.bounds.size.width/2 - 1, height: 136)
    layout.minimumInteritemSpacing = 1
    layout.minimumLineSpacing = 1
    collectionView.collectionViewLayout = layout
}
0
Manish Mahajan