web-dev-qa-db-ja.com

アプリのiPhoneX解像度または画面サイズをサポートするにはどうすればよいですか？

今日の2017年の基調講演とiPhoneXの発売後、私は新しいiphoneに興奮しているのと同じように心配しています。この質問は、技術的な問題というよりも、ユーザーインターフェイス、設計ガイドライン、またはインターフェイス設計へのアプローチに関するものです。

私の質問は、1125px×2436px（375pt×812pt @ 3x）の解像度をどのようにサポートするかです。

この画像にApple on its Human Interface Guidelines for iPhoneX ）で示されているように、ここでは3倍の画像拡張をサポートすると言われています。上部と同様に、iphone 7と解像度の414 * 736ポイントを考慮すると、幅が414-375 = 39ポイント少なくなります。

ここで解像度の比較を確認できます： https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions 。

この新しい設計解像度に合わせてアプリを設計するにはどうすればよいでしょうか。

いくつかの問題シナリオ：

サポートする方法：

  1. デバイスの全幅と固定の高さをスケーリングする水平方向のイメージビュー。
  2. 幅と高さ全体をスケーリングするImageViews（eコマースアプリの全ページの商品画像など）。
  3. ページに限られたコンテンツを表示すると、余分な185ポイントの高さがあり、多くの空白スペースが表示されます。たとえば、高さが400ピクセルで、幅全体をスケーリングするビューを設計するにはどうすればよいですか。上部を中央に揃えて垂直に揃える必要がありますか？

185ポイントは身長の割にはたくさんの不動産だと思います。多くのデザインやスクリーンを再考する必要があります。これらのシナリオをどのように設計して対処できますか？私の質問が十分に明確になったことを願っています。

私の個人的な意見：-それがどんなにタフでも厄介でも、この解決策に慣れると、エンドユーザーエクスペリエンスはより良くなり、より大きくなります。

素晴らしいテクニックとデザインプロセスを共有してください。乾杯!!!

iosiphoneuser-interfaceiphone-x
6
Ashish Pisey

さまざまなUIの問題の可能な解決策を調べた後、iOS11でAppleによって導入されたセーフエリアレイアウトガイドが大いに役立つことがわかりました。

注：-展開ターゲットがiOS 11未満の場合でも、セーフエリアレイアウトガイドを使用できます。

safeAreaLayoutGuideは、ビューとスーパービューの間に制約を作成する新しい方法として、topLayoutGuideとbottomLayoutGuideを置き換えます。

  1. 1125px×2436pxの解像度でiPhoneXの起動画像を追加します

  2. インターフェイスファイルに移動し、IDインスペクターを選択します。以下に示すように、セーフエリアを有効にします。 enter image description here

  3. ビューの上部にuiviewを固定している場合は、その上部の制約をスーパービューではなく安全な領域にリンクできます。

  4. 同様に、底面図の場合、スーパービューではなく安全領域に底面拘束を与えます。

enter image description here

プログラムによる制約を作成する方法を知っている場合は、レイアウトアンカーを使用して、上面ビューの上に安全な領域を含めることができます。したがって、プログラムでレイアウトを安全領域にリンクすることができます。

topView.topAnchor.constraint(
+  equalTo: view.safeAreaLayoutGuide.topAnchor
).isActive = true

更新：別のシナリオ-画面の上部にUIViewがあるとします。このビューをiPhoneXのノッチの下から開始する必要があります。次のように、すべてのiOS11デバイスおよびiOS11より下のデバイスのトップマージンを計算する必要があります。-

if (@available(iOS 11, *)) {
        UIWindow *window = UIApplication.sharedApplication.keyWindow;
        toppadding = 0.0;
        if (window.safeAreaInsets.top > 0)
        {
            toppadding = window.safeAreaInsets.top - 20;
        }
        //        CGFloat topPadding = window.safeAreaInsets.top;
        bottomPadding = window.safeAreaInsets.bottom;
        self.navigationViewTopConstraint.constant = toppadding;

    }
    else
    {
        bottomPadding = 0;
        self.navigationViewTopConstraint.constant = 0;
    }

さらに読む：- ここ

9
Ashish Pisey

IOS11のTopおよびBottomレイアウトガイドの置き換えiPhone Xの自動レイアウトを設計または更新する際に留意すべき_Safe Layout Guides_があります。

iPhone Xディスプレイに適応するための役立つリソース（Apple Dev。）：

Appleによれば、_Safe Layout Guide_を尊重することで、iPhone Xの自動レイアウトの問題のほとんどが解決されます。また、Appleの上記のビデオによると、横向きのレイアウトは通常、iPhone Xで問題を引き起こします。それでも、そうではないようです。 iPhoneXディスプレイに対応するのは難しい。

1
badhanganesh