えんたつの記録

■作るもの
アプリのボタンデザインがデフォルトと同じでは寂しいので少し手を加えます。ここでは画像を使わずに、xmlでデザインする方法を考えます。目標は「ボタンに"押された感じ"を出すこと」です。

■完成イメージ
ここで書いた方法でこのアプリのボタンを作りました。実際に触ってみると分かりやすいと思います。
PCからAndroid Marketに行く
Android携帯からAndroid Marketに行く


○ボタンが押される前

○ボタンが押された時


■ボタンを「’押した」と感じるために
Androidのデフォルトのボタンは次のような挙動です。
・通常時、下が濃い色のグラデーション
・ボタンが押されると、グラデーションの濃淡が上下逆転する
これを参考にします。今回はこれに加え、
・ボタンが押されると、ボタンが一回り小さくなる
という挙動を追加します。


■XMLの実装
やったのは、グラデーションをつける、角を丸くする、縁取り、です。また「ボタンが押されると、ボタンが一回り小さくなる」という挙動は、縁取りを背景と同じ色にしておき、ボタンが押された時に縁取りを太くする事で対応しました。

・レイアウトしたいxml
設定したいButtonに

android:background="@drawable/my_button"

を記述。

・drawable/my_button.xml

<?xml version="1.0" encoding="utf-8"?>
<selector
  xmlns:android="http://schemas.android.com/apk/res/android">

<!-- ボタンが押されている -->
<!-- フォーカスされていない -->
<item android:state_pressed="true"
	android:state_focused="false">
<layer-list>
	<item>
	<shape 
		xmlns:android="http://schemas.android.com/apk/res/android"
		android:shape="rectangle">
		<gradient 
		android:angle="270"
		android:startColor="#294275" 
		android:endColor="#9499AA"
		android:type="linear" />
		<corners 
			android:radius="4dip" />
		<stroke 
			android:width="2dip" 
			android:color="#000000"/>
    </shape>
	</item>
</layer-list>
</item>

<!-- ボタンが押されていない -->
<!-- フォーカスされていない -->
<item android:state_pressed="false"
	android:state_focused="false">
<layer-list>
	<item>
	<shape 
		xmlns:android="http://schemas.android.com/apk/res/android"
		android:shape="rectangle">
		<gradient 
		android:angle="270"
		android:startColor="#9499AA" 
		android:endColor="#294275"
		android:type="linear" />
		<corners 
			android:radius="4dip" />
		<stroke 
			android:width="0.5dip" 
			android:color="#000000"/>
    </shape>
	</item>
</layer-list>
</item>

<!-- ボタンが押されている -->
<!-- フォーカスされた -->
<item android:state_pressed="true"
	android:state_focused="true">
<layer-list>
	<item>
	<shape 
		xmlns:android="http://schemas.android.com/apk/res/android"
		android:shape="rectangle">
		<gradient 
		android:angle="270"
		android:startColor="#294275" 
		android:endColor="#9499AA"
		android:type="linear" />
		<corners 
			android:radius="4dip" />
		<stroke 
			android:width="2dip" 
			android:color="#CC6600"/>
    </shape>
	</item>
</layer-list>
</item>

<!-- ボタンが押されていない -->
<!-- フォーカスされた -->
<item android:state_pressed="false"
	android:state_focused="true">
<layer-list>
	<item>
	<shape 
		xmlns:android="http://schemas.android.com/apk/res/android"
		android:shape="rectangle">
		<gradient 
		android:angle="270"
		android:startColor="#9499AA" 
		android:endColor="#294275"
		android:type="linear" />
		<corners 
			android:radius="4dip" />
		<stroke 
			android:width="0.5dip" 
			android:color="#FF6600"/>
    </shape>
	</item>
</layer-list>
</item>

</selector>

・android:state_pressed="true"
ボタンが押されている状態を定義

・android:state_focused="true"
フォーカスされている状態を定義

・android:shape="rectangle"
ボタンの形を定義

・<gradient
グラデーションの設定
android:angle="270"
3時の方向を基準に、グラデーションの方向を決める
android:startColor="#294275"
グラデーション開始色
android:endColor="#9499AA"
グラデーション終了色
android:type="linear" />
グラデーションの種類を定義

・<corners
android:radius="4dip" />
角を取る時の半径を設定

・<stroke
android:width="2dip"
android:color="#000000"/>
縁取りの設定。今回は背景と同じ色を設定している。ボタンが押された時にwidthの値を大きくすることで、ボタンが奥に移動するような効果が出た…のではないか。


■コメント
・このように、9-patch画像を作らなくても、そこそこ格好良いボタンが作成可能です。
・ソースはもっとシンプルにできそうです。

■このアプリは
流行キーワードを一気にチェックするアプリです。今話題の事を素早くキャッチできます。
・Googleトレンド、Yahoo!急上昇ワード、MSN週間急上昇ランキング、buzztter、Amazonなど流行キーワードを一覧で見る事がでます。
・気になる言葉はそのままGoogleのウェブ検索、ニュース検索、リアルタイム検索、画像検索、が可能です。
・キーワードを他のアプリと共有することができます。TwitterやFacebook、メール等と連携させて下さい。


■ダウンロード
○PCから
Androidマーケットでダウンロード

○Android携帯から
Androidマーケットのアプリでダウンロード



■スクリーンショット



■コメント
・初のAndroidアプリです。公開できました。
・iPhone版チェックトレンドとは少し違う機能になっています。Android版ではアプリ内ブラウザをやめ、代わりにキーワードを様々な検索方法で検索可能にしました。
・広告について。今回はアプリのデザイン上AdMobを採用しました。AdLantis等も検討したりハイブリッドにする事も考えたのですが、AdLantisの広告取得失敗時の処理を記述できなかった為、導入を見送りました。AdMobは広告の色も設定できるので、結果としてアプリに調和した広告が配信されており、とりあえずは満足しています。
・メニューはより見やすくなるように改善する必要がある。

■アプリについて
　このアプリはiPhoneを「下敷き風」の画面にするアプリです。画面上に任意の感覚で縦横に線を表示します。罫線の上に紙や物を乗せて役立ててください。

[注意] 決してiPhone等の上で、物を書く等の作業をしないで下さい。表面が傷ついたり汚れたりします。iPhone等の上で作業する場合は、本物の下敷きを間に挟む事を強く勧めます。

iTunesでダウンロード



■使い方
1.縦線と横線の間隔を選ぶ
2.右下のボタンを押す
3.完成
以上。


■イメージ
冗談みたいな画面ですが、これがこのアプリです。



■その他
・なお、このアプリはiPad2発売の時に、あれが下敷きにもなるという@mAayagiさんとの会話から思いついたものです。
・よくこのアプリで審査が通ったと思います。
・このアプリの広告はiAdとAdMobの両方（取得できた片方）が表示されるようになっています。国内でiAdが開始されたら思い出して見てください。