web-dev-qa-db-ja.com

Androidでの9パッチ画像の作成と使用

最近、9パッチの画像について聞いたことがあります。私はその9タイル張りと伸縮性を知っています。私はそれについてもっと知りたいです。

  • 9パッチイメージを作成するにはどうすればよいですか？

    ツールはありますか？ AndroidSDKまたはコードから作成できますか？

  • 通常のpngに対する9パッチの主な利点は？

    （画面に応じて動的/自動的に伸縮可能ですか？）

androidandroid-drawablenine-patch
46
Nizam

今日、9つのパッチイメージを発見しました。 （他の回答にリンクされている）公式ドキュメントは大丈夫だと思いますが、例には本当に欠けています。

この小さなチュートリアル 質問の2番目の部分に答えるいくつかの素晴らしい例があります。ボタンだけでなく、フレームのスケーリングの仕組みを説明し、完全なサンプルプロジェクトがあります。ダウンロードして遊ぶことができます。 PNGに対する最も重要な利点は、9つのパッチイメージがスケールする非連続領域を指定できることです。

質問の最初の部分に答えるために、SDK（および現在Android Studio）には、シンプルなエディターである "Draw 9-patch"（SDK toolsフォルダー内の "draw9patch"）が付属しています。 こちらがより良いものです これはオープンソースでもあります。シンプルだが賢いデフォルトの画像があります。

42
Nick Westgate

ほとんどの例では、9パッチイメージの作成について説明していますが、実装の詳細は通常、高レベルのままです。

上記のニックの投稿 - 良い9パッチチュートリアル で、プロジェクトのダウンロードファイルを提供し、その日を節約しました。

私のために働いた主な実装の詳細は次のとおりです（準備が整った9パッチのイメージがあれば）：

  1. 名前でドロアブルを参照しますが、.9.pngを含めないでください（Eclipseのオートコンプリートがこれを処理します）

  2. メインの/ drawableフォルダーの下に画像が1つしかないことを確認します（各dpiフォルダーのバージョンではありません）。

  3. 画像は：srcではなく：backgroundを使用して指定する必要があります（これによりしばらく動けなくなりました）

    Android:background="@drawable/splash_logo"

  4. 画像とそれを含むレイアウトが以下を使用していることを確認してください。

    Android:layout_width="fill_parent"
    Android:layout_height="fill_parent"

20
Gene Bo

9パッチイメージを作成するにはどうすればよいですか？ツールはありますか？ AndroidSDKまたはコードから作成できますか？

主要な検索エンジンでAndroid 9-patch toolを検索すると、最初のヒットは draw9patchツールのAndroid開発者ドキュメントページ =。

通常のpngに対する9パッチの主な利点は？ （画面に応じて動的/自動的に伸縮可能ですか？）

Android開発者ドキュメントには、 9パッチPNGファイルの説明 の他のページが含まれています。このドキュメントには次のような文章が含まれています。

NinePatchDrawableグラフィックは伸縮可能なビットマップ画像で、Androidは、背景として配置したビューのコンテンツに合わせて自動的にサイズ変更されます。 NinePatchの使用例は、標準のAndroidボタンで使用される背景です。ボタンは、さまざまな長さの文字列に対応するために伸縮する必要があります。

9
CommonsWare

9パッチ画像を使用すると、画像のどの部分を引き伸ばすかを選択できます。画像はpngで、名前は.9.png（something.9.png）で終わる必要があります

http://developer.Android.com/tools/help/draw9patch.html

すべての密度に対応したシンプルなツール：

http://Android-ui-utils.googlecode.com/hg/asset-studio/dist/nine-patches.html

6
Petr Krejčí

1.NinePatch画像とは？

NinePatch画像は、画像の伸縮可能な部分をマークするPNG画像です。 image_name.9.pngのような拡張子が付いています。

2。それらがAndroid project？に保存される場所

res/drawable/image_name.9.png

。Androidアプリ用のNinePatchイメージを作成する方法？

Android SDKには、Android SDK draw9patch.jar]フォルダー内にWYSIWIG /toolsツールが含まれています。

enter image description here

2
Prateek Joshi

通常のpngに対する9パッチの主な利点

実際には9パッチ画像は伸縮可能で、繰り返し可能な画像は最小サイズに縮小されます。画像は異なる画面サイズで伸縮せず、プロポーションを失います。もう1つの最大の利点はメモリです。

同じ小さなサイズのメモリは、異なる画面サイズのデバイスに再利用できます。適切に設計された9パッチイメージはエラーが少なく、再利用性が高くなっています。

https://developer.Android.com/studio/write/draw9patch.html

1
IntelliJ Amiya

これは良いツールです： ここをクリック

9パッチ画像は、伸縮可能で繰り返し可能な画像で、最小サイズに縮小されています。最も簡単な例は、丸みのあるdivを取得して、三目並べボードのように9つの正方形にスライスする場合です。 4つの角のサイズはまったく変更されませんが、静止している間は、他の5つの部分が引き伸ばされるか繰り返されて、画像全体が適切に拡大縮小されます。

その説明とCSS3の登場により、9つのパッチイメージを使用する理由はないと考えるかもしれませんが、「9パッチ」という名前は誤った呼び名です。画像をさらに細かく分割することができます。

9パッチ画像には、画像に1pxの境界線を追加することにより、どの部分が何であるかのインデックスが含まれています。境界線の色は、ピースが静的（拡大縮小しない）か、伸縮するか、繰り返すかを決定します。

Googleスライドショー： https://docs.google.com/present/view?id=dc7ghz8w_34f8338rcg

Android 9-patch画像に関する開発者情報： http://developer.Android.com/guide/topics/graphics/2d-graphics.html#nine-patch

1
Roga Men

ステップ1、まだ慣れていないので、最初に再生するxxxhdpi png大きな画像を準備します。

Step 2、9-patchは画像を「縮小」せず、画像を「拡大」するため、拡張可能なフィールドはできるだけ短くする必要があります（冗長/繰り返しカラー部分を削除する）。

私は個人的にImageMagickコマンドラインツールを使用して変換します、例えば：

convert -trim 'my_image.png' png32:my_image_trim.png #trim extra transparent surrounded image
rm lala*; convert my_image_trim.png -crop 310  +repage  +adjoin  png32:lala%02d.png #cut redundant/repeat center part
convert +append lala02.png lala05.png png32:out_right.png #append left/right images side by side
convert -resize 144x144\! out_right.png png32:my_image.png #resize to the desired dpi

変換時に1つの落とし穴があります：png32をプレフィックスとして追加する必要があります。そうしないと、黒の9パッチイメージが取得されます。 このスレッド を参照してください。

ステップ、画像をAndroid Studio drawableにコピーし、右クリックして[Create 9-Patch file ...]を選択します。] A .9.png新しい画像は同じ画像名で生成されます。元の画像を削除するだけです。XML画像IDも名前変更し、なぜ9パッチ画像がXMLはまだ9パッチ以外の画像を参照しているため、機能しています。

ステップ4、左と上の2本の黒い線は拡張可能な長方形領域を形成し、右と下の2本の黒い線はテキスト長方形領域を形成します。

画像サイズは、テキストが拡大するにつれて、宣言された拡張可能領域で拡大します。テキスト領域とは、その領域でのみ許可されるテキストを意味します。

Androidスタジオ：その行をドラッグできない場合は、「ズームイン」して大きくします。

垂直と水平の2本の黒い線の元の位置は、どちらも拡張可能な領域を宣言しています。

  • 左の垂直線の元の位置は、左上から左下の間です。
  • 上の水平線の元の位置は、左上から右上の間です。

垂直と水平の2本の黒い線の元の位置は、どちらもテキスト領域を宣言しています。

  • 右の垂直線の元の位置は、右上から右下の間にあります。
  • 下の水平線の元の位置は、左下から右下です。

上記は、ドラッグを開始して長さを絞り込み、その線の開始位置と終了位置を調整する前の黒い線の元の位置です。

拡張可能領域とテキスト領域は、ニーズに応じて異なる場合があります。しかし、通常拡張可能な領域は、ORテキスト領域よりも小さいである必要があります。古典的な例は、チャットバブル画像です：

enter image description here

上の画像の上下の黒線の幅は同じですが、右の黒線は左の線よりも大きいため、テキストは常に最小サイズまたは拡張サイズで下曲線の半分までとどまります。また、テキスト領域の本文でのみ展開します。

これで、9-Patchの2つの利点がわかります。下と右の行が一緒になって、完全にテキスト領域を形成しますテキストがイメージカーブの外側にオーバーフローしないようにします！また、拡大することなく曲線を維持しながら、テキストが拡大するにつれて画像を拡大するテキスト領域の部分を定義。

ラインにカーソルを合わせると、ピクセルのX、Y位置が表示されます。両方のラインの位置が等しいか、それよりも小さいかどうかを測定するのに役立ちます。

左側の線は右側にドラッグでき、右側の線は左側にドラッグできるため、ドラッグするときの行の位置を覚えておく必要があります。どの行が拡張可能な行で、どの行がテキスト行であるかが失われる可能性があります。

チェックする必要がある2つの重要なチェックボックスがあります。つまり、「パッチを表示」チェックボックスと「不良パッチを表示」チェックボックスです。

[不良パッチを表示する]チェックボックスで、拡張可能な領域を描画するが、直線ではなく画像の曲線を覆う場合、その領域を赤でマークして警告します。行を絞り込んで、その赤い警告を無視するか、無視することができます。赤い警告が誤解を招く可能性があることに留意してください。実際には反対側の行が原因である可能性があります。その場合、反対側の行を狭めてその赤色の警告を消す必要があります。

ステップ5、xmlでは、その画像を以下のようなTextView背景として参照できます。wrap_content展開可能にする：

<LinearLayout
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:background="@drawable/your_9_patch_image_name_excluded_.9"
    Android:orientation="vertical">
    <TextView
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        />
    <2nd TextView />
</LinearLayout>

初めてそれをいじるときは、textviewや派手な親レイアウトにパディングがないことを確認します。そうしないと、なぜ期待どおりに動作しないのか疑問に思うかもしれません。

ボタンの背景の例：

    <Button
        Android:id="@+id/btn2"
        Android:layout_width="wrap_content"
        Android:layout_height="40dp"
        Android:background="@drawable/your_9_patch_image_name_excluded_.9"
        Android:layout_gravity="center"
        />
1
林果皞