#7 simulatorのサイズを6S以外にするとレイアウトが崩れるバグの調査、対応

[naoto77]

• 作業内容

  • 上記バグの対応
  • 原因はautolayoutの設定に問題があることだと思われる

• 前提チケット

• 懸念事項

• 完了条件

  • 全てのサイズで正常に画面が表示される

[naoto77]

サポートするiPhoneとそれぞれのサイズでのバグ状況

• iPhone 5
  • Portrait
  • Home画面のUpdatedのラベルが画面をはみ出している
  • studySet画面のstudyラベルが潰れている
  • Flashcard画面のレイアウトが崩れている
    • 余分なconstraintsが設定されていることが原因かも
  • Landscape
  • Flashcard画面のレイアウトが崩れている
• iPhone 5s
  • Portrait
  • Home画面のUpdatedのラベルが画面をはみ出している
  • studySet画面のstudyラベルが潰れている
  • Flashcard画面のレイアウトが崩れている
  • Landscape Flashcard画面のレイアウトが崩れている
• iPhone 6
  • Portrait
  • PortraitからLandscapeに切り替えた際、Flashcard画面のポジションが若干ずれる
    • 画面をタップすると正常のポジションに戻る
  • Landscape
• iPhone 6 Plus
  • Portrait
  • Flashcard画面のレイアウトが崩れている
  • Landscape
  • Flashcard画面のレイアウトが崩れている
• iPhone 6s
  • Portrait
  • PortraitからLandscapeに切り替えた際、Flashcard画面のポジションが若干ずれる
    • 画面をタップすると正常のポジションに戻る
  • Landscape
• iPhone 6s Plus
  • Portrait
  • Flashcard画面のレイアウトが崩れている
  • Landscape
  • Flashcard画面のレイアウトが崩れている
• iPhone 7
  • Portrait
  • PortraitからLandscapeに切り替えた際、Flashcard画面のポジションが若干ずれる
    • 画面をタップすると正常のポジションに戻る
  • Landscape
• iPhone 7 Plus
  • Portrait
  • Flashcard画面のレイアウトが崩れている
  • Landscape
  • Flashcard画面のレイアウトが崩れている
• iPhone SE
  • Portrait
  • Home画面のUpdatedのラベルが画面をはみ出している
  • studySet画面のstudyラベルが潰れている
  • Flashcard画面のレイアウトが崩れている
  • Landscape
  • Flashcard画面のレイアウトが崩れている

サポートするiPad

• iPad Air
• iPad Air2
• iPad Pro (9.7 inch)
• iPad Pro (12.9 inch)

レイアウトの問題の傾向を確認、対処する

• サイズクラスと各デバイス、縦横の向きのマトリックスと傾向を付き合わせて原因を確認する

[naoto77]

デバイスごとのレイアウト崩れ分析

Group1

• iPhone 5
  • Portrait
  • Home画面のUpdatedのラベルが画面をはみ出している
  • studySet画面のstudyラベルが潰れている
  • Flashcard画面のレイアウトが崩れている
    • 余分なconstraintsが設定されていることが原因かも
  • Landscape
  • Flashcard画面のレイアウトが崩れている
• iPhone 5s
  • Portrait
  • Home画面のUpdatedのラベルが画面をはみ出している
  • studySet画面のstudyラベルが潰れている
  • Flashcard画面のレイアウトが崩れている
  • Landscape Flashcard画面のレイアウトが崩れている
• iPhone SE
  • Portrait
  • Home画面のUpdatedのラベルが画面をはみ出している
  • studySet画面のstudyラベルが潰れている
  • Flashcard画面のレイアウトが崩れている
  • Landscape
  • Flashcard画面のレイアウトが崩れている

Group2 (このGroupはレイアウトにほとんど問題がないため、現状このサイズクラスを基準にConstraintsが設定されていると思われる)

• iPhone 6
  • Portrait
  • PortraitからLandscapeに切り替えた際、Flashcard画面のポジションが若干ずれる
    • 画面をタップすると正常のポジションに戻る
  • Landscape
• iPhone 6s
  • Portrait
  • PortraitからLandscapeに切り替えた際、Flashcard画面のポジションが若干ずれる
    • 画面をタップすると正常のポジションに戻る
  • Landscape
• iPhone 7
  • Portrait
  • PortraitからLandscapeに切り替えた際、Flashcard画面のポジションが若干ずれる
    • 画面をタップすると正常のポジションに戻る
  • Landscape

Group3

• iPhone 6 Plus
  • Portrait
  • Flashcard画面のレイアウトが崩れている
  • Landscape
  • Flashcard画面のレイアウトが崩れている
• iPhone 7 Plus
  • Portrait
  • Flashcard画面のレイアウトが崩れている
  • Landscape
  • Flashcard画面のレイアウトが崩れている

[naoto77]

Group3の画面崩れの修正

Portrait

• 内部に3つのviewを抱える各Container viewのwidth, heightに対して、iPhone 7 Plusサイズクラスに合わせ、Vary for Traitsで個別のconstraintsを設定することで画面の表示崩れを解消
• 表示崩れを解消した画面
  • Create set画面
  • StudySet画面
  • Flashcard画面

Landscape

• 内部に3つのviewを抱える各Container viewのwidth, heightに対してiPhone 7 Plusのサイズクラスに合わせ、Vary for Traitsで個別のconstraintsを設定することで画面の表示崩れを解消
• 表示崩れを解消した画面
  • Create set画面
  • Flashcard画面

表示崩れが解消できたデバイス

• iPhone 6 Plus
• iPhone 6s Plus
• iPhone 7 Plus

[naoto77]

Group1の画面崩れの修正

Portrait

• 内部に3つのviewを抱える各Container viewのwidth, heightに対して、iPhone SEサイズクラスに合わせ、Vary for Traitsで個別のconstraintsを設定することで画面の表示崩れを解消
• 表示崩れを解消した画面
  • Create set画面
  • Flashcard画面

Landscape

• 内部に3つのviewを抱える各Container viewのwidth, heightに対して、iPhone SEサイズクラスに合わせ、Vary for Traitsで個別のconstraintsを設定することで画面の表示崩れを解消
• 表示崩れを解消した画面
  • Create set画面
  • Flashcard画面

表示崩れが解消できたデバイス

• iPhone 5
• iPhone 5s
• iPhone SE

[naoto77]

Group1のHome画面のUpdatedのラベルが画面をはみ出しの修正

• iPhone SEサイズクラスに対して、個別でHome画面のUpdatedのラベルのConstraintsを修正し、解消