Style

Posted by muchag | Android |
初回投稿:2011-04-06 (水) 20:01:12 | 最終更新:2011-04-17 (日) 0:03:45

Android における CSS
各 View の見てくれを含めた書式・属性のことは Style (スタイル) といい
この style を Activity あるいは Application 単位でまとめたものを
Theme (テーマ) という。(Theme

Android Developers:Applying Styles and Themes

各 View の書式は、スクリプト・XML のいずれにせよ、個々に設定することができる。
まぁ、これは当然のこととして、そうなると変更があったときに一々変更しなければいけないので
CSS のようなものがあれば便利。

Flex では、CSS ファイルを作成することができたのだが、
Android でそれを実現しようとすると、XML ファイルに頼ることになるみたい。

つまり、スクリプト上ではスタイルを定義することはもちろん
設定することもできない・・・みたい。

でもまぁ、これをしないと後々大変面倒なので
XML ファイルにて実現する方法をメモ。

あ、まだ全く試していない覚書なので、万が一この記事を目にされた方はご注意ください。
 

ファイルの作成
プロジェクト名/res/values

styles.xml

を作成。(XML ファイルの追加
※通例このネーミングなだけで、ファイル名は任意
 

定義
styles.xml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <resources>
  3.     <style name="CodeFont" parent="@android:style/TextAppearance.Medium">
  4.         <item name="android:layout_width">fill_parent</item>
  5.         <item name="android:layout_height">wrap_content</item>
  6.         <item name="android:textColor">#00FF00</item>
  7.         <item name="android:typeface">monospace</item>
  8.     </style>
  9. </resources>

resources タグをルートとし、その中に style タグを並べて定義していく。
style タグの中には item タグを並べて、各属性について列挙する。
 

ネーミング

style タグの属性 name には、その style 固有の名前を付けるわけだが、
クラスと同様に 単語の頭文字を大文字 とする。
 

継承

style タグの属性 parent を設定することで、
既存のオブジェクト(自作を含む)のスタイルを継承できる。
 

Android SDK のオブジェクトを継承する場合

さて、ところで、「android:style/Widget.Button」ってどこから出てきたか。
どっこにも無かったので色々試して見つけました!
とりあえず手っ取り早いのは、layout.xml系の中のViewの属性で「style=”@android:style/」とやって、
ctrl+spaceで候補出す。

引用元:visible true 【Android】 既存のViewのスタイルを拡張する

 

ネスト(入れ子)

自分で定義したスタイルであれば、parent 属性を用いなくても継承できる。

name 属性の値を . (ドット連結子) にてオブジェクト形式でネーミングすることで
親子関係を作れる。

但し、子や孫には parent 属性を指定してはならない
 

  1. <style name="CodeFont" parent="@android:style/TextAppearance.Medium">
  2.     <item name="android:layout_width">fill_parent</item>
  3.     <item name="android:layout_height">wrap_content</item>
  4.     <item name="android:textColor">#00FF00</item>
  5.     <item name="android:typeface">monospace</item>
  6. </style>

 

  1. <style name="CodeFont.Red">
  2.     <item name="android:textColor">#FF0000</item>
  3. </style>

 

  1. <style name="CodeFont.Red.Big">
  2.     <item name="android:textSize">30sp</item>
  3. </style>

これは素敵! 😎
 

変数

この手法は実は CSS よりも便利で、スタイル定義に変数を利用できる。

  1. <style name="CustomTheme" parent="android:Theme.Light">
  2.     <item name="android:windowBackground">#b0b0ff</item>
  3.     <item name="android:colorBackground">#b0b0ff</item>
  4. </style>

このようにスタイルの中で同じ値を複数回使用するとき

  1. <color name="custom_theme_color">#b0b0ff</color>
  2. <style name="CustomTheme" parent="android:Theme.Light">
  3.     <item name="android:windowBackground">@color/custom_theme_color</item>
  4.     <item name="android:colorBackground">@color/custom_theme_color</item>
  5. </style>

このように変数を作成し、設定する際に変数で設定できる。
ネーミングも自由っぽい。
しかも、color タグが style タグの外にあるということは
同一スタイルのみでなく、スタイルをまたいで変数を利用できる。

変数指定できるのは、以下の8点っぽい。

  • string
  • color
  • dimen
  • drawable
  • style
  • item
  • string-array
  • integer-array

列挙してみて思ったけど
変数指定っていうのはちょっと違いそう。
でもまぁ、イメージってことで!
 

設定
直接指定

各 View のタグに直接指定する場合は

hoge.xml
  1. <EditText android:inputType="number" />

 

スタイル利用

となるが、スタイルを利用する場合は

styles.xml
  1. <style name="Numbers">
  2.   <item name="android:inputType">number</item>
  3. </style>
hoge.xml
  1. <EditText style="@style/Numbers" />

このようになる。

これにより、同じタイプの View のスタイルを一斉に設定・変更できるわけだ。

ちなみに、自作スタイルなので

  1. <EditText android:style="@style/Numbers" />

とはしない。

と、あれこれ書いたが、現時点ではまだどれも試していない・・・。
時間があるときに! サッ |ミ

Posted by muchag | Android |
初回投稿:2011-04-06 (水) 20:01:12 | 最終更新:2011-04-17 (日) 0:03:45

コメントはまだありません »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment