周りを検索すると、おそらくそれを行う方法はUICollectionView
を使用することであることがわかりました。StackOverflowには多くのチュートリアルや質問があるため、問題ありません。 3つの質問があります。
「セパレーター」(すべてのボックスを分割する線)については何も見つかりません。画面の境界線に水平に触れないことが気に入っています。プログラムで行われていますか?
すべてのデバイスでスペースを均等に分割するには(水平方向に3つのボックス/ボタン)、この答え answer を見つけました。これは正しいアプローチですか?
ぼかし効果については、私はこの答えを見つけました: 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
}
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
結果:
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に等しくします。これらの画像は、セルと同じ不透明度/背景を持つ必要があります。これにより、希望する画像のようになります。
私の答えがお役に立てば幸いです。がんばろう。
「セパレーター」(すべてのボックスを分割する線)について何も見つかりません。私はそれが水平方向に画面の境界線に触れないことが好きです。プログラムで行われていますか?
はい、 layer にレンダリングされているようです。 Quartz 2Dプログラミングガイドを読んで、レイヤーの描画と操作を理解してください。
すべてのデバイスでスペースを均等に分割するには(3つのボックス/ボタンを水平に)私はこの答えの答えを見つけました。これは正しいアプローチですか?
これはオプションになりますが、スクリーンショットから見たセパレーターの外観はわかりません。
セルビューのbackgroundColorをclearColorに設定し、UICollectionViewの backgroundViewプロパティ を、セパレーターとぼかし効果を含むビューに設定します。 UICollectionViewのbackgroundColorプロパティがclearColorに設定されていることを確認してください。
3番目の質問については、UIVisualEffectViewをぼかし目的に使用できますが、iOS 8以降でのみ互換性があり、iPad2に問題があると思います。しかし、あなたの問題については、collectionView自体ではなく各セルをぼかします(セル間隔はぼかしではないため)。
UICollectionViewのbackgroundViewプロパティを使用してセパレーターとぼかしを処理する場合、セルのbackgroundColorをclearColorに設定するだけで済みます。
これを行うには複数の方法があり、それぞれの方法には欠点があり、最適な方法を選択することに注意してください。
最初に言いたいのは、上記のすべての結果は ICollectionViewFlowLayout から得られることです。これはUICollectionViewのデフォルトレイアウトです。
UICollectionViewDelegateFlowLayout
には、要件を満たすことができるすべてのメソッドがあります。
FlowLayoutにはminimumLineSpacingForSectionAtIndex
とminimumInteritemSpacingForSectionAtIndex
があり、セル間の間隔(水平および垂直の両方)を指定します。
cellForItemAtIndexPath
でセルフレームを指定するのはよくありません(回答リンクを送信するように)。そのため、flowLayoutはセルsizeForItemAtIndexPath
をサイズ変更するためのデリゲートを提供します。
3番目の質問については、はい。UIVisualEffectView
をぼかしの目的に使用できますが、iOS 8以降でのみ互換性があり、iPad2に問題があると思います。しかし、あなたの問題のために、collectionView自体ではなく各セルをぼかします(セル間隔はぼかしではないため)。
このメソッドをカスタムレイアウト用に作成しました。リクエストに応じて変更して使用できます。
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
}