2016-04-18 4 views
5

、私は別の画面ではかなり異なるサイズを上取るコントロールを持っています。例えば、(IOSの点の座標)さまざまな画面サイズの画像をスケーリング/描画するにはどうすればよいでしょうか?私のiPhoneアプリで

  • 3.5インチデバイス(iPhone 4S):242x295
  • 4インチデバイス(iPhone 5シリーズ、SE):242x383
  • 4.7インチデバイス(iPhone 6シリーズ):297x482
  • 5.5インチデバイス(iPhone 6プラスシリーズ):336x551

あなたが見ることができるように、これらのコントロールのサイズは比例ではありません。

問題

この制御は、背景として画像を有しています。その特定のイメージは、ブランドアイデンティティと私の会社のデザイナーがやりたいカスタム外観にとって重要です。画像は素材の外観を与え、テクスチャを有する。また、それ自体の中に影があります。私は、異なる画面サイズのコントロール(Appleは、いつでも新しい画面サイズを考え出すこととして、私のコントロールのサイズは、利用可能なスペースに応じて実行時に決定されている)に上のこのイメージを適用したいと思います。

私の現在のソリューション

設計者は、各画面サイズのために私のために別のPNGファイルを作成し、私のコントロールに使用すると、私のハードコードにそれをのif-else画面サイズ用(手の前に数学的にサイズを決定した後) 。おそらくこれは堅牢性にとって恐ろしいアプローチです。私はまた、iPadに拡大し、より良いスケーリングシステムを持つことが確かに助けになることを探しています。

アイデア は、私は繰り返し、テクスチャの最小単位だと、最終的な画像を得るために全体でそれを繰り返しスケーリングオプションを使用して私のコントロールに適用画像を撮ります。 は、しかし、私はこの方法で私の影と丸いエッジを失います。 (私も最大の画像を使用して、単純にしようと、不均衡なスケーリングが恐ろしい丸いエッジなります)私は、このような画像に対処していないソリューションとほとんどのリソースを探してみました

を。私はこの画像の一部を失うことはありません。コントロール、シャドー、コーナーに完全に適用する必要があります。

いずれか、またはこのすべてが、ナイーブまたは私は正しい言葉を使って答えを見ていない場合であれば、私はお詫び申し上げます。これはStack Overflowで私が初めて投稿したものです。皆さんからのご意見をお待ちしております。

ありがとうございます!

P

編集:これは、カードの外観を与えるためにカスタムUIButtonベースの制御に適用される

enter image description here

編集2:ウェインは完璧な答えを示唆しているようです。私はそれを試み、皆に結果を知らせます。

+0

画像のいくつかの例を示します。 – Wain

+0

@Wain良いアイデア。元の投稿に画像を追加しましたが、まだ埋め込むことはできません。 (評判の点) –

答えて

1

私は説明したようにタイル張りを使用していましたが、ビューレイヤのコーナーの半径を変更してシャドウオフセットを適用することと組み合わせました。このようにして、画像の重要な部分を分離して再利用することができ、CALayerの機能を活用することができます。

レイヤーのshadowOffsetを設定するときは、shadowColor,shadowRadiusおよびshadowOpacityも見てください。

+0

私はこのアプローチが気に入っています。なぜなら、空間とメモリを節約し、より堅牢であるからです(イメージを描くには、より多くの処理を使用する必要があります。私はタイル貼りについての主要なlethologicaを持っていた - それもありがとう。 –

+1

はい、システムはこの機能を提供しています。タイルの読み込みが速く、UIバッファにコピーするのが簡単であるため、気付かないほど速く、実際には高速です。 – Wain

1

iosの画像管理にはAssets.xcassetsを使用できます。 1x、2x、3xのスケールで画像を作成できます。

たとえば、サイズが50x50ピクセル、1xが50x50のアイコンが必要な場合は、 2xは100x100、3xは150x150にする必要があります。 iosは自動的にこのセットから適切なイメージを取得します。これはiPhone 5、iPhone 6とiPhone 6Pの:)

+0

さて、私は2倍と3倍の画像を使用する考えを理解しています。しかし、iPhone 5で(理論的に)50x50画像を表示するUIImageViewがあるとします。今度はiPhone 6で、画像が画面上のメインコントロールであるため、60x60の画像を表示したいと思います。 *それをすることは可能ですか? –

+0

はい、これはさまざまな方法で行うことができます。画面サイズごとにフレームを変更することができます(私によると、他の場合は画面サイズを検出するために多くの人に必要なため、最悪の方法です)、別の方法は自動レイアウトです(最良の方法)。画面の大きさに応じて動的に高さを変更したい場合は、autolayoutを使うことができますが、その上に適切なコマンドが必要です。 – Lion

+0

ありがとう、@ライオン。私はスケーリングについてまだ心配しています。私はiPhone 6Pで、実際にはすべて* 3倍であることを理解していますが、50x50画像を使用すると150x150の結果しか生成されません。それを180x180に伸ばそうとすると(60x60に必要なように)、結果はぼやけるでしょう。私は、iPhone 6と5では、システムが3倍の画像をダウンスケールする可能性があるため、この問題は回避されていると想像することができます。 –

0

アスペクト比を助ける

希望はほぼ同じです。しかし、iPhone 4のアスペクト比は異なります。

ここにはあなたを助ける手順があります。あなたは242x383のためにイメージを持っている場合

  • は、だから、一つの画像はiPhone 5とその 2X @に適しており、かつ3倍画像とiPhone 4とその@の2倍の画像@画像、

    すなわちを必要としますiPhone 5の場合、画像は@ 2xと@ 3xの画像 が必要です。 iPhone 4サイズの と互換性のある画像が必要です。

  • UIImageView's contentModeをaspectFitと設定する必要があります。

だからアイデアはiPhone 5の画像とその@ 2X、@異なっ画像iPhone 4の画像3Xを作る、です。またはあなたはすべてのものをUIScrollViewに入れ、iPhone 4の場合、scrollViewのcontentSizeは568です。iPad用に別のイメージを作成します。

+0

これは私が今使っているアプローチと似ています。しかし、私がiPadに移行するとき、私は別のイメージを作り直さなければなりません(ただし、それらのすべてが同じ比率です)。 Appleが別の画面を表示するたびに別々のイメージを作成することを含まないより良いアプローチはありませんか? –

+0

また、iPhone 6と6Pには画面の不動産が多くあります。単純に小さいサイズを使用していると、使用可能なスペースをすべて利用できなくなります。あなたは、iOSが自動的に2倍と3倍の画像を使用して、より小さな画像をより大きなコントロールに完全に拡大すると言っていますか? –

+0

私は答えを更新しました。iPad用に別のイメージを作成しなければなりません。また、iPhone 6Pは@ 3xイメージを使用しています。コントロールのサイズを変更するには、自動サイズ調整または自動レイアウトを使用する必要があります。 –

関連する問題