ゆとりブログ

[Android] androidのデザインなんちゃら

ども。こすげっす!!

ついに始まりましたね!!!
いやーやっぱ面白いっす!!
確かに残念だったけども、面白かった!

え?なにがって??

コンフェデレーションズカップに決まってるじゃん!

ブラジル強すぎ。てかみんなウマすぎ。
トラップしかり、パスしかり。
日本とはそこの差が一番だったんじゃないですかねー。

まあ2日連続でサッカーネタ書くとサッカーバカみたいに思われちゃうので、
今回は今やってる

Androidアプリ

のお話。
※アンドロイドってなんとなくなんだけど、赤のイメージないっすか??
ちなみにiOSはシルバー的な...。俺だけ??



えー現在androidアプリを作成してます。
ちなみにUIとかもやってます。

こういうの気になり始めたら私止まらない性格でして...。
なれないデザインに手をつけはじめてます。

まあxmlでやるのにもだいぶ慣れまして、eclipseさんともだいぶお近づきになれたかなと...。

UIに関してはこちらのサイトを参考にしてます!!!

Android Application Design Acheve
http://dorodoro.info/aada/
アプリのUI集ですね。

こういうの眺めてるだけで幸せになれます...。
できればこういう書き方するんだよ的なアレも欲しかったですが、そこは我慢。。。

でですよ。
前に作ったサービスのアプリを開発しているのですが、デザインはサービスに準じたほうが
ユーザーも使いやすいと思うんですよねー。


で、一番色がでるのが、ボタンなのかなと。
あとはテキストね。


ってことで、デザイナーさんに主要の色を教わり、自分で作成しました!
カラーの参考にしたサイトは以下!!

Color Scheme Designer 3
http://colorschemedesigner.com/


ここに特定の色のカラーコードを入力すると
近しい色を教えてくれます!!

そうとう助かりました!
これやべーっすよ!



てな感じで最後にandroidのボタンのデザインの仕方でも...
※androidなんで赤系でねww


まずは res/values/直下に例にならってstyle.xmlを作成します!
そして下記コードを...


<style name="button_red" parent="@android:style/Widget.Button">
<item name="android:background">@drawable/button_red_style</item>
</style>

ここの

<item name="android:background">@drawable/button_red_style</item>


の部分に注目してください。

これなんぞやってまさに
res/drawable/button_red_style.xmlを指してます!
なんでそのファイルを作成してください!


# res/drawable/button_red_style.xml
<!--?xml version="1.0" encoding="utf-8"?-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@drawable/button_red_default" android:state_enabled="true" android:state_window_focused="false"></item>
  <item android:drawable="@drawable/button_red_enabled" android:state_enabled="false" android:state_window_focused="false"></item>
  <item android:drawable="@drawable/button_red_enabled" android:state_enabled="false"></item>
  <item android:drawable="@drawable/button_red_pressed" android:state_pressed="true"></item>
  <item android:drawable="@drawable/button_red_pressed" android:state_enabled="true" android:state_focused="true"></item>
  <item android:drawable="@drawable/button_red_default" android:state_enabled="true"></item>
  <item android:drawable="@drawable/button_red_focused" android:state_focused="true"></item>
  <item android:drawable="@drawable/button_red_default"></item>
</selector>

という感じです。

" android:state_* "ってやつが謎だと思いますが、調べてください。
大体読めばわかるはず!!

で、さらにココに出てくる
button_red_enabled やら button_red_pressed やら button_red_focused やら button_red_default がありますね。
勘のいい人はわかるかもですがこれも
res/drawable直下にxmlファイルを作ります!

一気に書いちゃいますね!

# res/drawable/button_red_default.xml
<!--?xml version="1.0" encoding="utf-8"?-->
<shape xmlns:android="http://schemas.android.com/apk/res/android">

<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />

<corners android:radius="0dp"></corners>

<gradient
android:angle="270"
android:startColor="#E51600"
android:endColor="#950E00"
android:type="linear" />

<stroke
android:width="1dp"
android:color="#950E00" />

</shape>


# res/drawable/button_red_enabled.xml
<!--?xml version="1.0" encoding="utf-8"?-->
<shape xmlns:android="http://schemas.android.com/apk/res/android">

<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />

<corners android:radius="0dp"></corners>

<gradient
android:angle="270"
android:startColor="#610900"
android:endColor="#3F0600"
android:type="linear" />

<stroke
android:width="1dp"
android:color="#3F0600" />

</shape>


#res/drawable/button_red_focused.xml
<!--?xml version="1.0" encoding="utf-8"?-->
<shape xmlns:android="http://schemas.android.com/apk/res/android">

<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />

<corners android:radius="0dp"></corners>

<gradient
android:angle="270"
android:startColor="#F24E3D"
android:endColor="#F27A6D"
android:type="linear" />

<stroke
android:width="1dp"
android:color="#950E00" />
</shape>


# res/drawable/button_red_pressed.xml
<!--?xml version="1.0" encoding="utf-8"?-->
<shape xmlns:android="http://schemas.android.com/apk/res/android">

<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />

<corners android:radius="0dp"></corners>

<gradient
android:angle="270"
android:startColor="#F24E3D"
android:endColor="#F27A6D"
android:type="linear" />

<stroke
android:width="1dp"
android:color="#950E00" />

</shape>


という感じです。
ファイル作成なら下から
(つまりbutton_red_*.xmlファイルから作成していったほうがeclipseさんも怒らず幸せに過ごせるかも...)

でこれをlayoutにてButtonのsytleに適用すればおk


<button
style="@style/button_blue"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />


完成はこんな感じです!

※ button_red_default


※ button_red_enabled


※ button_red_pressed と button_red_focusedはうまくとれなかったので、うまくやってください...。

そんな感じで頑張ってまーす!
ではまた!!