9patchの画像をdraw9patch以外で作成する方法
Androidのデザインで伸びて欲しい部分を指定できる便利な9patchという方法があります。 そしてこれはAndroidSDKの中に入っているdraw9patchで作るのですが、これがあまり使いやすいとは言えない。 そして今日 デザイナーがコードから読み解く、 Androidアプリのデザインの幅を広げるコツとTips【第1回】 に参加してきました。 その中で、発表者がdraw9patch以外では9patch画像をうまく作れないといっていたので、 ちょっと試してみました。 使った画像はこれです。 ちょっと前までプロジェクトの新規作成で自動生成されていたやつですね。 9patchは、画像の周囲1pixelの部分に黒点を描画することで、その部分が伸びるように認識させる事ができます。 なので72x72のものを74x74に拡大し、こんなふうに黒点を描画してみます。 上と左の黒点の交わった部分が伸び
デザイナーがコードから読み解く、 Androidアプリのデザインの幅を広げるコツとTips 〜がんばって作ったデザインが、実装後に残念な結果にならないために〜 アプリをデザインしているみなさん、エンジニアまかせになっているXMLレイアウトによって、デザインの制約を感じていませんか？ 華美で奇をてらったものが必ずしもいいというわけではありませんが、シンプルな中にちょっと工夫して考えたあしらいも「このデザインは無理です」といってエンジニアから返却されると、モチベーションだだ下がりです。 このシリーズでは、デザイナーが実際にXMLを触ってみて知り得たことを共有します。 デザイナーももっとアプリデザインに対してこだわりを持ち、それをエンジニアといっしょに実現できますようにという願いをこめて。 XMLをがっつり見ていくことが目的ではなく、実際にはどんなデザインが可能で、がんばったらここまでできるんだ
このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。 web帳 Android 端末は様々なディスプレイサイズ、解像度があり、そのままだとボタンなどが拡大されたりして画像が汚くなったりします。 これを避けるためボタンなどが拡大されても汚くならないよう画像素材を引き伸ばし可能な状態にする必要があります。 それを可能するのが「NINE Patch 画像」とよばれるものです。 NINE Patchイメージというとはくがついて格好いいでしょう。 このNINE PatchイメージはAndroid OS 用に画像の引き伸ばしとなります。 では実際のところ、どこにあって、どー使うの？って話ですよね。 手順としては 1.Android SDKのtoolsの中のdraw9patch.batを起動 2.伸縮させたいpngファイルを開く 3.上と左の余白
デザイナーの大西です。 Android ユーザーの皆さん、Sleipnir Mobile for Android はお使いいただけていますか？まだの方はぜひお試しくださいね。 Sleipnir Mobile – ウェブブラウザ – Android マーケット 本題ですが、Android 端末は様々な解像度があるので、ボタンなどが拡大されても汚くならないよう、画像素材を引き伸ばし可能な形にする必要があります。 Android OS 用に画像の引き伸ばしを指定したものが NINE Patch 画像です。 NINE Patch 画像の基本的な構造と作り方、応用編を紹介します。 NINE Patch 画像の作成には、Android の SDK で draw9patch というツールが提供されているのでそれを使います。 draw9patch は <Android SDK フォルダ>/tools 内に
Android SDKにはNinePatchを簡単につくるツール「draw9patch」が付属しています。9patchはビットマップイメージを高品位に拡大するためのフォーマットです。縮小には対応していませんが、1つの画像でいくつものサイズに対応できるため、効率的にアプリケーションサイズを圧縮できます。 右の画像ではTextViewの背景画像に9patchを適応したpngイメージを指定しています。2つのTextViewは改行の都合でアスペクト比が異なっていますが、9patchを使うことで背景画像のゆがみを抑制できています。 9patchまとめ リソースを節約しつつ高品位な背景が作れる 命名規則は画像のフォーマットに併せて最後尾に.9を付与(.9.pngなど） 画像の左と上の端1pxは拡大範囲を表す 画像の右と下の端1pxはコンテンツの範囲を表す(オプション) 以下は9patchの適用例(画像
何ができるのか？ draw9patchでpng画像から、Nine-patch (9 patch)画像を作成すると、ボタンの背景のように、伸縮してもきたなくならない画像を作成できる。 Nine-patch 画像とは、Androidで使える伸縮可能な画像のことで、画像を伸縮不可能なエリア(角)と伸縮可能なエリア(全部で９つ)にわけたもの。HTML/CSSで背景と角丸画像でボタン作ったりするのを一つの画像に納めたという感じ。 画像としては、黒い線のあるpngなので、画像エディタで黒い線を引けば同等のことができるはず。 手順。 もととなるpng画像を用意する SDK/tools以下のdraw9patch.batを起動 png画像をD&Dするか、ファイルメニューから開く エリアを分ける 画像の一番上の横一列と、左の縦一列が、エリアを分ける目印となる。 黒い線がある部分が伸縮可能領域。該当するピクセル
物凄く最近はPhotoShopとかしか仕事で触っておらず、大変にストレスフルな毎日を送っております。なので、若干無理矢理ですが、jsを書いてみました。 現在、主にはネイティブのAndroidのパーツを作ってみたりする仕事しているのですが、ご存知の方はご存知のように、Androidは9patchという画像の作り方が使えます。 簡単に説明しますと、小さい画像ファイルも引き伸ばして使用できるぜ！という技術だったりします。25px角のボタンでも150*200pxとかに伸ばせるという感じです。 詳しくは9patchを覚えよう！ - 明日の鍵をご覧下さい。俺もこちらのエントリで9patchを知りました。 で、本題なんですが。この9patch作る時には、Android SDKでdrow 9patchっていうツールがあるんでこれを使ってました。 9patchは画像の周りに1pxずつ余白入れる→指定範囲を#
角丸が綺麗に表示されない！ ボタンを作りました！ 角丸のボタンです。 早速ボタンの背景に設定しました。 なんてこったい 設定するボタンが大きすぎて背景画像が引き伸ばされてしまいます。 9patchを使おう！ そこで9patchの出番です。 9patchは、画像よりモノが大きかった場合（今回は画像よりボタンが大きかった） 引き伸ばす部分を指定することで、画像の崩れを無くす事ができるのです！ Fireworksでいう所の9スライスという機能に似ています。 先ほどのボタン画像に9patchの処理を施してみます。 できました！ 上側と左側に黒い1ピクセルが見えますでしょうか？ ちょっと拡大します。 拡大したのでボケてますが、これなら分かりますね。 9patchは上下左右に、アルファ無しの黒(#000000)の印を付けることで伸ばす部分を指定します。 上下左右それぞれ意味があります。 上と左の印は必
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
