web-dev-qa-db-ja.com

異なるデバイスで画像とフォントスケールを修正しますか？

テキストと画像のシンプルなビューがあります。このアプリをiPhone6PlusとiPhone5で実行しました。次に、両方のスクリーンショットを作成し、iPhone6Plusのスクリーンショットのサイズと一致するようにiPhone5のスクリーンショットを拡大しました。結果は次のとおりです。

enter image description here

テキストのサイズを指定できるので、画像のサイズと位置は同じではありませんが、異なるサイズの画面で同じに見えるはずです。

以下は、さまざまな画面で実行されている 天気アプリ の例です。

enter image description here

ご覧のとおり、テキストと画像のサイズと位置は同じです。

画像はアセットカタログから読み込まれます。

imageView.image = UIImage(named: "shower3")
self.view.addSubView(imageView)
imageView.center = self.view.center

128x128の画像のみを作成し、アセットカタログの@ 1xバージョンに入れました。

これを言い換えましょう。 iPhone 5でウェザーアプリを実行してスクリーンショットを作成し、iPhone6でスクリーンショットを作成します。次に、両方のスクリーンショットを同じサイズに変更します。次に、フォントサイズと画像の寸法の両方が両方のスクリーンショットでまったく同じであることがわかります。これは、デバイスごとにフォントと画像の寸法が異なる必要があることを意味します。どうやってやるの？

異なる画面サイズでテキストと画像の比率を同じにするにはどうすればよいですか？ Weather App はどうするのですか？

iosobjective-ciphoneswiftautolayout
23
user4788711

画像

私は Swift Weatherアプリ の作成者であり、開発者の1人です。アプリは3つのバージョンの画像を使用していません。私がそれらの画像を作成しなかったためであり、それは別の開発者からのプルリクエストでした。 Originの画像がありません。

@ Daniil Korotin が述べたように、iOSはpointsを使用して画像とフォントサイズを計算します。 iOSはlet screenScale = UIScreen.mainScreen().scaleを使用して画面スケールを取得し、画像の適切なサイズ（1x、2x、または3x）を取得します。たとえば、SwiftWeatherアプリで画像の適切なサイズを指定しない場合、画像のバージョンは1倍しかなく（下のスクリーンショットのように）、iOSはRetinaデバイスでレンダリングするために画像を拡大します。 iPhone 6 Plusでは、実際には3xアセットのダウンサンプリングを行います。 iPhone 6 Screens Demystified をご覧ください。場合によっては、2xまたは3x画像を提供しないと、Retinaデバイスでは、1xから拡大された画像がぼやけて見えることがあります。可能であれば、常に1倍、2倍、3倍の画像を提供する必要があります。 enter image description here

フォント

iOSは、指定されたpointsに従ってフォントをレンダリングします。 （上記のように）デバイスの画面スケールに基づいてポイントを特定のピクセルに自動的に変換します。 enter image description here

テキストと画像が異なる画面サイズで同じ比率になるようにするにはどうすればよいですか？ Weatherアプリはそれをどのように行うのですか？答えは自動レイアウトです

以下のように、画像ビュー（天候アイコンに使用）に制約を設定したことがわかります。 enter image description here 幅と高さは常に150 pointsです。これはpointsでもpixelsでもないことに注意してください。異なるデバイスに対して同じサイズ（正確にはピクセルではなく、ルックアンドフィール）をレンダリングします。最初の画像（iPhone 6 PlusとiPhone 5）では、シミュレーターのスケールが異なるため、見た目が異なります。自動レイアウト要素が画面にどのように配置されるかを確認するより良い方法は、Interface Builderでプレビューを使用することです。

enter image description here

メインストーリーボードを開き、アシスタントエディターをクリックします。右側で、（左上にある）[プレビュー]を選択します。左下のプラス記号をクリックして、別のデバイスを追加します。異なる画面サイズでも同じ比率であることがわかります。

ご不明な点がございましたら、お気軽にお問い合わせください。

トピックから外れている可能性があります

画像/アセットをデザインする場合、Sketchなどのベクターベースツールを使用してアセットをデザインし、3つの異なるサイズにエクスポートします。私の別のプロジェクト iOSAnimationSample をご覧ください。設計用のスケッチファイルがあります。

Sketch design スケッチデザイン

Export assets to different sizes アセットをさまざまなサイズにエクスポートする

その場合、iOSはさまざまなデバイスに適切なアセットを取得できます。

12
Jake Lin

お問い合わせのアプリは、複数の画面サイズを正しくサポートしていません。インターフェースは6および6プラスで実行するようにスケールアップされているため、すべてが同じサイズで表示されます。

アプリのスクリーンショットを見てください。ステータスバーは6プラスの方がずっと小さくなっています。これは想定であるため、画面の占有スペースが少なくなります。すべてのデバイスで20ポイントの高さです。

天気アプリのスクリーンショットを見てください。ステータスバーは同じサイズです。天気予報アプリは複数の画面サイズをサポートしていないため、iOSはより小さなインターフェイスを取り、それを画面いっぱいに拡大します。

同じ効果を達成したい場合（すべきではありません）、LaunchScreen.xibファイルを削除し、代わりに起動イメージを使用します。しかし、人々は同じコンテンツを持ちたいが大きいので、大きな電話画面を購入しません。それは、単に電話を自分の顔に近づけることで、より安価に実現できます。

より多くのコンテンツを画面に一度に表示できるようにすることで、より大きなディスプレイを活用することになります。表のデータ行が増え、本のテキストが増え、写真ライブラリの画像が増えます。

天気アプリの場合、追加のスペースは、天気の種類を表すかなり役に立たないアイコンのより大きなバージョンだけでなく、時間別予報または何かのより多くの行を表示するために使用する必要があります。

大きな画面を適切にサポートすることは、App Storeへの送信の要件ではないことを意味するのは、ゲームのサポートだけだと思います。 4インチ画面のサポートはすぐに必須になりました。6と6プラスにも同様のルールが導入されると予想されます。

特定の要素が常に画面の幅の50％を占めるようにする場合、またはラベルを常に画像と同じサイズにする場合は、自動レイアウト制約をmultipliersで使用します。自動レイアウト制約は基本的な構造です。

attribute of A = (attribute of B * multiplier) + constant

ほとんどの場合、乗数は1のままになっているので、これはその左20ポイント、または何であれと言っているだけですが、乗数も使用でき、AはBの幅であると言うことができます。 2または0.5または好きなものを掛けます。

11
jrturton

iOSはpointsを使用して画像とフォントサイズを計算します。網膜以外の画面では、1ポイントは1ピクセル、網膜画面では2ピクセル、iPhone 6 Plusでは3ピクセルに相当します（ただし、一部のダウンスケーリングが適用されます）。画面の実際のpixelサイズに基づいて画像とフォントを拡大縮小したい場合は、次のようにポイントあたりのピクセル数を取得できます。

CGFloat screenScale = [[UIScreen mainScreen] scale];

IPhone 5、6、6 Plusの画面のアスペクト比は同じですが、解像度は異なります。単純に縦横比を維持したい場合は、「ベース」画面の幅または高さ（たとえば、iPhone 5の画面幅、つまり320.0ポイント）を選択し、実際のデバイスの画面幅（たとえば、 iPhone 6 Plusの画面の幅（414.0ポイント）は、その「基本」幅（414.0/320.0 = 1.29375）です。次のような画面サイズを取得できます。

CGRect screenBounds = [[UIScreen mainScreen] bounds];

screenBoundsの幅をベース幅で割ると、比率が得られます。次に、すべてのサイズとマージンをその比率で乗算します（iPhone 6 Plusの場合は1.29375）。あなたがアイデアを得ることを願っています。

追伸解決策の良いガイドは here です。

P.P.S.そして、あなたの場合、skorolkovが以下で言及するように、アプリはすべての画面を大きくするだけです（スプラッシュ画面を追加/削除して、このアップスケーリングを有効/無効にします）。

UPD：わかりました、今私はあなたを混乱させるものを見ます。 Appleが最初にリリースされたiPhone 6および6 Plusの場合、多くのアプリは大きな画面と大きな解像度をサポートしていませんでした。そのため、アプリにスプラッシュ画面がない場合具体的にはこれらの電話用に作成されているため、iPhone 5解像度を使用する必要があります。

そのため、スクリーンショットのサイズを手動で変更した後もまったく同じ画像が表示されます。システムでも同じことが行われます。それは単にiPhone 5の「写真」を撮り、より大きな画面に合うように伸ばします。欠点は明らかです（そして特にiPhone 6 Plusで表示されます）：フォントと画像がぼやけて拡大されています（ステータスバーなどのシステムインターフェイス要素も拡大されます）。したがって、基本的には、すべての大きな画面のデバイスでiPhone 5の画像を取得します（iPhone 5でスクリーンショットを撮ることで確認できます。 iPhone 6/6 Plusの解像度に合わせて、実際のiPhone 6/6 Plusスクリーンショットと比較します）。

明確に言うと、これは現在の動作ですが、良くはありません。デバイスのネイティブ解像度を使用してすべてを適切にスケーリングするには、上記で説明した方法（手動乗算）またはequal height/widthをインターフェイス要素に必要な比率に設定した自動レイアウトを使用します。

8
Daniil Korotin

Weather Appは、iPhone 6+で実行するために高級モードを使用しています。 6/6以降の起動画面を削除することで有効にできます。

アセットカタログに移動し、起動画像を選択して、属性インスペクターの[iOS 8以降]チェックボックスをオフにします。

スクリーンショット-アプリにこのセットがあります

WeatherAppからのスクリーンショット

4
skorolkov

プログラム的に（XとY）、定数の値を事前に定義します。

#define XScale [[UIScreen mainScreen] bounds].size.width / 320.0f
#define YScale [[UIScreen mainScreen] bounds].size.height / 568.0f

次に、プログラム的にUIImageViewを作成します

var imageView : UIImageView
imageView  = UIImageView(frame:CGRectMake(XScale *someValue, YScale * someValue, XScale *someValue, YScale *someValue));
imageView.image = UIImage(named:"image.jpg")
self.view.addSubview(imageView)

画面サイズに基づいて、定数値を設定する必要があります。 iPhone5と4s画面に使用しています。

4
Shanmugasundharam

autoResizingfunctionalityを表示から削除しようとしましたか？内側の矢印をクリックして、スーパービューごとにautoResizeビューを削除します

enter image description here

enter image description here

2
Sujay

画面のアスペクト比が同じである場合、すべての画面サイズで同じ場所とサイズを表示するには、すべてのビューにレイアウト制約を設定する必要があります。

2
M Abdul Sami