5

今日は Xcode を使用する最初の日であり、最初の単一ビュー アプリケーションの作成に成功しました。

以前は Objective-C のバックグラウンドはありませんでしたが、過去に HTML + CSS をたくさんやったことがありました。そのため、最初のビューをデザインするときは、最初に PSD で作成し、テキスト フィールドの背景、ボタン イメージなどのためにそれを 1 つずつ切り出しました。

しかし、今日見つけたものは非常に興味深いものです...

483 x 82 ピクセルの PNG 画像がありますが、それをテキスト フィールドの背景として使用すると、Size Inspector ウィンドウに 240 x 40 と表示されます。ピクセル。そして驚いたことに、PSD ファイルで見たのとまったく同じサイズです。

私の質問は、ピクセル単位で Xcode コンポーネントの幅と高さを同じにする方法ですか?

ありがとうございました...

PS：これが私のボタンとそのサイズのスクリーンショットです：

ここに画像の説明を入力

そして、これが私のXcodeにあるものです。右側のインスペクタータブで、幅と高さを483と82ピクセルではなく、240と40にする必要があることを確認してください。

ここに画像の説明を入力

実際のピクセル (483x82) をそのインスペクタ タブに配置すると、iPad の画面でボタンが非常に大きくなります。

4

1 に答える 1

7

まず、 iOSの非網膜画像と網膜画像に関する一般的な背景:

  • iPhone 3GS 以前、iPad 1、iPad 2、および iPad mini (いくつか例を挙げると) は非 Retinaイメージを使用します。つまり、指定した画像は同じ幅と高さ(ピクセル単位)で表示されます。

  • iPhone 4+ と「新しい iPad」 (iPad 3) はRetina イメージを使用します。つまり、提供する画像は、画面に表示したい幅と高さのピクセル単位で2 倍にする必要があります。

これは、iOS アプリのポイントの概念につながります。

1 ポイント=非 Retina デバイスでは1 ピクセル、Retina デバイスでは2 ピクセル。

Interface Builder (IB) でサイズを設定するときは常に、実際にはピクセルではなくポイントサイズを設定しています。

さらに、非Retina バージョンとRetinaバージョンの 2 つのイメージを常に提供する必要があります。非 Retina バージョンと同じ名前を付けてから @2x を追加することで、Retina バージョンを示します。

例えば

my_awesome_image.png    // non-retina image
my_awesome_image@2x.png  // retina image

これにより、オペレーティング システムは、Retina デバイスで適切な画像を自動的に選択します。

この概念について明確になったので、IB で実際に行っていることを次に示します。

画像ビューの幅と高さを 240 pt x 40 pt に設定しました。デフォルトでは、画像ビューのcontentModeプロパティは に設定されてUIViewContentModeScaleToFillいます (したがって、指定した画像のサイズを変更して、指定したサイズを満たすことができます...そのため、画像は Retina デバイスでは 480px x 80px で表示されますが、前述の 2 倍のピクセル密度により「同じサイズ」に表示され、非 Retina デバイスでは 240px x 40px として表示されることに注意してください)。

画像ビューを設定するときは、通常、次のことを行う必要があります。

  1. Retina 画像と非 Retina 画像の両方をプロジェクトに含める
  2. 画像ビューのポイント サイズを任意のサイズに設定します
  3. 画像ビューの contentMode を好きなように設定します (デフォルトのままにしたい場合とそうでない場合があります)。
于 2013-09-08T05:46:32.790 に答える