UICollectionViewsを使用して動的な複数の機能を作成する

Question

ユーザーがスクロールして表示できる複数の機能（ピクチャ、説明、コメント、カルーセルなど）を含むビューを作成することに興味があります。UICollectionViewは、このタイプのレイアウト。私は最初にUITableViewsが最善のアプローチだと思った。

私はいくつかのチュートリアルとGitHub reposを見てきましたが、それらの大半は標準グリッドレイアウトでUICollectionViewを使用しています。また、Instagramとそれにリンクされているチュートリアルで使用されているIGListKitを見てきました。誰かがこのための方向とアプローチ最高の面で私をアドバイスすることができれば

私が思っていた：

私はアプリはKitchenStoriesのような何かを得ることを目指しています。

Answer 1

UICollectionViewであっても、単一のビューで多すぎるようにしないでください。

表示された画面には、UITabBarControllerの最上位の配置が管理されています。現在選択されているタブ（「ホーム」）には、コンテンツを管理するUINavigationControllerがあります。

ナビゲーションスタックの上部には、おそらくコレクションビューまたはテーブルビューがあります。要素が画面幅の行としてスタックに視覚的にレイアウトされているため、どちらも使用できます。レイアウトを設定することを心配する必要がないため、テーブルビューは簡単です。

テーブルビューは、いくつかの可視行を有する各異なる：

• タイトル/画像行（「イージーシーフードパエリア」）
• 評価行
• エクスポート行（心臓/保存/株）
• コメント行
• クリエータ行（それはおそらく顔写真と名前だように見えるので、私は、仮定）

おそらく、より多くのユニークな行が表示されます。

ストーリーボードでは、テーブルビューコントローラーのシーンでこれらの行をプロトタイプ行として設計できます。また、静的コンテンツ行を使用してテーブルビューを設計することもできます。実行時に行の順序を変更したり、行を複製したりする必要がない場合は、より簡単です。

「ロブ」と言うと、「ストーリーボードのテーブルビューにすべての行を合わせることはできません！」Make the storyboard scene taller. UIKitは実行時にデバイス画面に合わせてサイズを変更します。

各行で、その行のデータに必要なサブビューをドラッグして配置します。たとえば、タイトル/イメージ行には、UIImageViewとUILabelが必要です。評価行にはラベルが必要です。おそらく星を表示および編集するカスタム表示、おそらくレイアウトのスタック表示が必要です。

各行について、UITableViewCellの別個のサブクラスと、その行のビューに対するアウトレットが必要です。表示のために、各セルにデータを渡すには、各セルはプロトコルに準拠します：あなたは、静的なコンテンツを使用している場合

​​

次に、あなたのテーブルビューコントローラでは、あなたはこのようにそれを設定します。

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { 
     let cell = super.tableView(tableView, cellForRowAt: indexPath) 
     if let user = cell as? RecipeUsing { 
      user.recipe = recipe 
     } 
     return cell 
    } 

には、UIImageViewとUILabelのアウトレットが必要です。このような何か：

class RecipeTitleImageCell: UITableViewCell, RecipeUsing { 

    @IBOutlet var label: UILabel! 

    // UITableViewCell has an imageView property that's not an outlet 
    @IBOutlet var myImageView: UIImageView! 

    var recipe: Recipe? { 
     didSet { 
      guard let recipe = recipe else { return } 
      label.text = recipe.title 
      myImageView.image = recipe.image 
     } 
    } 
} 

と評価行のために、あなたはこのような何かをお勧めします：それは私に私客観的にアプローチする方法の良いアイデアを与えているよう

class RecipeRatingsCell: UITableViewCell, RecipeUsing { 
    @IBOutlet var ratingControl: RatingControl! 
    @IBOutlet var label: UILabel! 

    var recipe: Recipe? { 
     didSet { 
      guard let recipe = recipe else { return } 
      ratingControl.rating = recipe.ratings.reduce(0, +)/recipe.Double(ratings.count) 

      if ratings.count < 5 { label.text = "Too few ratings" } 
      else { label.text = "\(ratings.count) ratings" } 
     } 
    } 
}