0

私は、縦向きと横向きを処理する iPad アプリに取り組んでいます。複雑な (?) レイアウトのセルを表示するテーブルビューがあり、高さが異なる場合があります。

これは、縦向きでどのように見えるかのスクリーンショットです (= 幅 768 ポイント、高さ 435 ポイントになるはずです)。 ポートレートシミュレーション

これは、横向きでどのように見えるかのスクリーンショットです (= 幅 1024 ポイント、高さ 526 ポイントになります)。 景観シミュレーション

レイアウトを少し単純化するために、最初の画像のみを保持します。

レイアウト

デバイスの回転時に拡大/縮小しながら比率を維持する必要がある画像が1つあります。縦=幅256 *高さ342横=幅341,333 *高さ456 そして、黄色のビュー(8ポイントのマージンがあるはずです)タイトル (青色) と潜在的な複数行テキスト コンテンツ (ピンク色) を含む、各方向に 16 ポイントのパディング)。注: - ピンクのラベルは完全に空である可能性があります。- 黄色のビューはテクスチャ化されるため、これが必要になります。これは、何かを回避するための単なる追加のビューではありません。

コンテンツ ビュー (UITableViewCell の子) の制約

V:|-(0)-[UIImageView]   (Names: '|':UITableViewCellContentView)>",   // Top margin (0 pts) of the image
H:|-(0)-[UIImageView]   (Names: '|':UITableViewCellContentView)>",   // Left margin (0 pts) of the image
V:[UIImageView]-(8)-[UIView]>",     // Vertical space (8 pts) between the image and the yellow view (i.e. top margin of the yellow view)
H:|-(8)-[UIView]   (Names: '|':UITableViewCellContentView)>",   // Left margin (8 pts) of the yellow view
H:[UIView]-(8)-|   (Names: '|':UITableViewCellContentView)>",   // Right margin (8 pts) of the yellow view
V:[UIView]-(8)-|   (Names: '|':UITableViewCellContentView)>",   // Bottom margin (8 pts) of the yellow view

黄色のビュー制約

V:|-(16)-[UILabel:Blue]   (Names: '|':Yellow View )>",   // Top margin (16 pts) of the blue label (i.e. top padding of the yellow view)
H:|-(16)-[UILabel:Blue]   (Names: '|':Yellow View )>",   // Left margin (16 pts) of the blue label
V:[UILabel:Blue]-(>=16)-|   (Names: '|':Yellow View )>",   // Bottom margin (>= 16 pts) of the blue label
H:[UILabel:Blue]-(NSSpace(8))-[UILabel:Pink]>",   // Horizontal space between blue and pink labels
V:[UILabel:Pink]-(16)-|   (Names: '|':Yellow View )>",   // Top margin (16 pts) of the pink label
H:[UILabel:Pink]-(16)-|   (Names: '|':Yellow View )>",   // Right margin (16 pts) of the pink label
V:|-(16)-[UILabel:Pink]   (Names: '|':Yellow View )>",   // Bottom margin (16 pts) of the pink label

制約に関する注意事項

  • Interface Builder で、画像に幅 256 * 高さ 342 のプレース ホルダー固有サイズを設定しました (デバイスの向きに応じて動的にコードに実際のサイズの制約を設定することについては後で説明します)。
  • 青いラベルの水平方向のコンテンツ圧縮優先度は 751 です。
  • 画像の縦抱き優先度は 1 です
  • 黄色のビューとピンクのラベルは縦抱き優先度 1000

インターフェイス ビルダーのテスト

セルの高さを上げると、画像が変形し、高さが上がりますが、黄色のビューは変形されずに下にくっつきます。これですべて問題ありません (IB で比例制約を設定して、画像の維持率の成長を模倣することができないため)。

コード

GitHub で入手可能

結果

アプリを縦向きで起動すると、セルは完璧です。ピンクのラベルは 2 行で表示され、それぞれのサイズと間隔は完全に尊重/計算されています! 次に、横向きに回転すると、画像は拡大せず、代わりに黄色のビューとピンクのラベルが拡大しています...スクリーンショットは次のとおりです。 縦向きから回転させたときの横向きバージョン

アプリをランドスケープで起動すると、セルも完璧です。画像のサイズは適切です (351 pts 幅 (丸められた値) * 456 pts 高さ) など...次に縦向きに回転すると、アプリがクラッシュします...次の出力:

Unable to simultaneously satisfy constraints.
     Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) 
(
    "<NSLayoutConstraint:0xa3d9dd0 V:|-(0)-[UIImageView]   (Names: '|':UITableViewCellContentView )>",
    "<NSLayoutConstraint:0xa3d9e00 V:[UIView]-(8)-|   (Names: '|':UITableViewCellContentView )>",
    "<NSLayoutConstraint:0xa3d9e60 V:[UIImageView]-(8)-[UIView]>",
    "<NSLayoutConstraint:0xa3dd9b0 V:[UIImageView(456)]>",
    "<NSAutoresizingMaskLayoutConstraint:0xa3de670 h=--& v=--& V:[UITableViewCellContentView(431)]>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0xa3dd9b0 V:[UIImageView(456)]>

注: UIView は黄色のビューです

あなたの助けに感謝します（または少なくとも読んでください;-）

PS: 昨日、開発フォーラムに同じ質問を投稿しました。進捗状況はここに投稿します。 DevForum ディスカッション リンク

4

1 に答える 1