2017-12-23 16 views
1

これに制約を設定する適切な方法が不思議です。私は、ユーザーが投稿する画像間をスワイプする方法として、テーブルビューのセルの内部にコレクションビューを持っています。各投稿(テーブルビューセル)には、複数の画像(それぞれがコレクションビューに表示されます)を含めることができます。私は、あなたが画像間でスワイプすることができるinstagramと同様のスタイルに向っています。私が抱えている問題は、デバイス間で変更されないコレクションビューとイメージビューに制約を設定する場合です。これを行う唯一の方法は、ユーザーが使用しているデバイスに応じてコレクションビューのセルとイメージビューのサイズを手動で変更することです。私が達成しようとしている外観を達成するための他の方法も同様に評価されるだろう。ここでテーブルビューのセル内でコレクションビューの制約を設定する適切な方法

Here are the constraints set on the collection view

は、ここで収集ビューに

enter image description here

を設定する制約である。ここポストはiPhone SE上でどのように見えるか

enter image description here

ある方法ですポストはiPhone 8 Plusを見ることになっていますenter image description here

インターフェイスビルダーのストーリーボード全体のポスト。 enter image description here

画像に設定されている制約は、コレクションビュー内にあります。

答えて

0

私は答えを感謝し、私はこの問題を解決方法は、私は、画像の制約を実現し、このコード

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { return CGSize(width: UIScreen.main.bounds.width, height: 346) }

を使用してコレクションビューセルのサイズを変更していましたセルに制約があり、セル自体に制約を設定する方法がないため、イメージが拡大または縮小するようにセルのサイズを変更する必要があります。

1

ステップ1:コレクションビューを含むUITableviewCell(InstagramViewCellと同様)を作成します。

InstagramViewCell

import UIKit 

class InstagramViewCell: UITableViewCell { 

    @IBOutlet weak var innerCellView:innerCell! 
    @IBOutlet weak var collectionView: UICollectionView! 

    var totalElements = 0 

    override func awakeFromNib() { 

    super.awakeFromNib() 

    let flowLayout = UICollectionViewFlowLayout.init() 
    flowLayout.itemSize = CGSize.init(width: self.frame.size.width, height: self.frame.size.height) 
    flowLayout.scrollDirection = .horizontal 
    self.collectionView?.collectionViewLayout = flowLayout 

    self.collectionView.delegate = self 
    self.collectionView.dataSource = self 
    self.collectionView.register(UINib.init(nibName: "ImageCollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "ImageCollectionViewCell") 

    } 

    override func setSelected(_ selected: Bool, animated: Bool) { 
    super.setSelected(selected, animated: animated) 

    // Configure the view for the selected state 
    } 

    func setInformation(_ numberOFCell : Int, _ information : NSDictionary) { 
    self.totalElements = numberOFCell 
    self.collectionView.reloadData() 
    } 

} 

extension InstagramViewCell:UICollectionViewDelegateFlowLayout,UICollectionViewDataSource { 

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { 
     return CGSize.init(width: self.frame.size.width, height: self.frame.size.height) 
    } 

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

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

    func numberOfSections(in collectionView: UICollectionView) -> Int { 
     return 1 
    } 

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { 

     return self.totalElements 

    } 
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { 

     let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ImageCollectionViewCell", for: indexPath) as? ImageCollectionViewCell 
     cell?.setInformation("image") 
     return cell! 

    } 


} 

コレクションビューは、次のようしている制約:

enter image description here

ステップ2:は、画像ビューが含まれている、(同様ImageCollectionViewCellとして)UICollectionViewCellを作成します。

import UIKit 

class ImageCollectionViewCell: UICollectionViewCell { 

    @IBOutlet weak var imageView: UIImageView! 

    override func awakeFromNib() { 
     super.awakeFromNib() 
    // Initialization code 
    } 

    func setInformation(_ imageName : String) { 

    self.imageView.image = UIImage.init(named: imageName) 

    } 

} 

enter image description here

手順3:お使いのコントローラに使用InstagramViewCell。

import UIKit 

class ViewController: UIViewController { 

    @IBOutlet weak var table: UITableView! 

    override func viewDidLoad() { 
     super.viewDidLoad() 

     let backButton = UIButton(type: .custom) 
     backButton.frame = CGRect(x:0,y:0,width: 45, height:45) 
     backButton.setImage(UIImage(named: "back-arrow-white"), for: .normal) 
     let backItem = UIBarButtonItem.init(customView: backButton) 
     self.navigationItem.leftBarButtonItem = backItem; 


     table.delegate = self 
     table.dataSource = self 
     table.estimatedRowHeight = 100.0 
     table.rowHeight = UITableViewAutomaticDimension 
     table.register(UINib.init(nibName: "InstagramViewCell", bundle: nil), forCellReuseIdentifier: "InstagramViewCell") 

    } 

    override func viewWillAppear(_ animated: Bool) { 
     super.viewWillAppear(animated) 


    } 

    override func didReceiveMemoryWarning() { 
     super.didReceiveMemoryWarning() 
    } 


} 

extension ViewController:UITableViewDelegate,UITableViewDataSource { 

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { 
     return 1 
    } 

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { 

     let cell = tableView.dequeueReusableCell(withIdentifier: "InstagramViewCell") as? InstagramViewCell 
     let information:NSDictionary = [:] 
     cell?.setInformation(10, information) 
     return cell! 
    } 

    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat { 
     return UITableViewAutomaticDimension; 
    } 

} 

enter image description here

関連する問題