2017-03-11 104 views
1

私は画像ビューのコレクションビューを持っており、iPhone 7のシミュレータで実行すると、レイアウトは私が望む通りです。画像は1行に3つずつ表示され、間にスペースはありません。しかし、私は私の携帯電話(iPhone 6 +)でそれを実行すると、イメージの間に間隔があります。コレクションビューのイメージビューを画面サイズに応じてサイズ変更する方法を教えてください。

これらは、レイアウトを設定する機能です。

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets { 
    return UIEdgeInsetsMake(0,0,0,0) 
} 

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat { 
    return 0 
} 

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat { 
    return 0 
} 

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

    let imgWidth = view.bounds.width/3.0 
    let imgHeight = imgWidth 

    return CGSize(width: imgWidth, height: imgHeight) 
} 

私はsizeForItemは、幅が3で割った画面の幅になることを示すことによって、再スケール画像だろう、と同じ高さのことを考えていましたそれに。しかし、私はそれについて混乱していると思います。おそらく、セル内の画像の表示ではなく、セルのサイズを変更するだけです。しかし、私は、画面サイズで動的に拡大縮小するように画像の表示サイズをどこで設定できるかわかりません。

コレクションビューのイメージセルがそれに応じてサイズ変更されるように変更するにはどうすればよいですか?

EDITは:

enter image description here

EDIT 2:cellForItemメソッドへcell.postImage.contentMode = UIViewContentMode.scaleAspectFillを入れた後iOSFreakのソリューションを試みた後、問題が解決しない:

enter image description here

+0

あなたは 'myImageView.contentMode = UIViewContentModeScaleAspectFill'を使用していますか? – Zhang

+0

イメージビューのコンテンツモードを、ストーリーボードに記入するように縮尺を設定しました。しかし、私があなたのアドバイスを試して、 'cell.postImage.contentMode = UIViewContentMode.scaleAspectFill'を私の' cellForItem'メソッドに追加したとき、問題は多少は解決されましたが、完全ではありません - 今やいくつかのセルは正しく並んでいます彼らの側にはスペースがあります。そして第1行と第2行の間にまだスペースがあります。私は写真をアップロードしようとします。 – KingTim

+0

今私が見ていることを示すために私の投稿を編集しました。 – KingTim

答えて

1

あなたは自動レイアウトセル0トップを使用したコレクションビューのセルに固定ImageViewの、0ボトム、0をリードする、と.flexible高さの0-末尾または自動サイズ変更を持っていると。柔軟な幅あなたの例でなぜそれがうまくいかないのか分かりません。あなたの方法は正しく見えます。

宣言の例でUICollectionViewDelegateFlowLayoutがありますか?

class ViewController: UIViewController,UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout {} 
+0

これで終わりました - 私は、コレクションビューのイメージビューで自動レイアウトを設定していませんでした。私がそれを加えた後、私は元のコードに戻り、すべてが良く見えました。 – KingTim

+0

それをうまく解決した – agibson007

0

以下のコードを試してみてください

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

    let imgWidth = CGRectGetWidth(collectionView.frame)/3.0 
    return CGSize(width: imgWidth, height: imgWidth) 
} 

これが動作しない場合、あなたはセットコレクションビューがカスタムレイアウトとレイアウト必要

class CustomImageLayout: UICollectionViewFlowLayout { 

var numberOfColumns:CGFloat = 3.0 

override init() { 
    super.init() 
    setupLayout() 
} 

required init?(coder aDecoder: NSCoder) { 
    super.init(coder: aDecoder) 
    setupLayout() 
} 

override var itemSize: CGSize { 
    set { } 
    get { 
     let itemWidth = (self.collectionView!.frame.width - (self.numberOfColumns - 1))/self.numberOfColumns 
     return CGSize(width: itemWidth, height: itemWidth) 
    } 
} 

func setupLayout() { 
    minimumInteritemSpacing = 1 // Set to zero if you want 
    minimumLineSpacing = 1 
    scrollDirection = .vertical 
} 
} 

3.0迅速に更新

以下のようにUICollectionViewFlowLayoutのサブクラスを作成します。提供

class ViewController: UIViewController { 

    @IBOutlet weak var colleciton: UICollectionView! 

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

Please find attached image of working code!

+0

最初のアプローチは、私は私の編集に掲載同じことになった、と私は第二のアプローチを少し変更しなければならなかった(CGSizeMakeはIフレームを作ったので、廃止されました) 'と' CGSize(dictionaryRepresentation返すでした!。CFDictionaryとしてフレームを) 'エラーを取り除くために、細胞の全ての間の間隔をもたらしたことを、0 – KingTim

+0

に' minimumInterlineSpacing'を設定する場合でも、私はちょうどあなたの編集してみましたスウィフト3、および静止画用のバージョンが適切に配置されていない - 。行の間の間隔がありますし、特定の画像が同様に側面のスペースを持っている私は、更新された画像と第二編集を掲載 – KingTim

+0

私は私は、追加されます。これは物事にどのような影響を与えているのか分からないが、私の2回目の編集では写真の4枚が携帯電話のカメラ(ネコ、ラズベリーパイ、スクリーンの2枚の写真)から撮影され、残りはカメラロールからアップロードされ、とにかくインターネットからダウンロードした写真をトックする。しかし、ストーリーボードの画像ビューは、写真の原点に関係なく、塗りつぶすように設定されています。なぜなら、私の電話機で撮った写真だけが両面に間隔を空けているのはなぜか分かりません。 – KingTim

関連する問題