Hatena::Groupandroid

Droidくん「JavaとXMLの魔境、Androidフレームワークの世界へようこそ!」

 | 

2010-06-30AndroidのGUIウィジェットをXMLで記述してカスタマイズする事例

SeekBarのツマミ(thumb)をカスタマイズする方法メモ

19:16 | はてなブックマーク - SeekBarのツマミ(thumb)をカスタマイズする方法メモ - Droidくん「JavaとXMLの魔境、Androidフレームワークの世界へようこそ!」

SeekBarというのはいわゆるスライダー(Slider)とも呼ばれている、横長のバーをぐりぐり動かして値を調整するようなUI

AndroidのデフォルトのSeekBarのツマミが小さすぎて操作しずらいと感じたため、カスタマイズしようとしたらものすごく面倒だった。

ググっていろいろと探したがMLや英語の質問サイトどころか公式ドキュメントにもろくな情報がない。

最終的に中国語のよくわからないブログなどを参考にしてなんとかカスタマイズできた。


res/layout/main.xml

<SeekBar android:id="@+id/HogeSeekbar"
	 style="@style/CustomSeekBar"
	 />

res/values/styles.xml

<style name="CustomSeekBar" parent="android:Widget.SeekBar">
	<item name="android:gravity">center_vertical</item>
	<item name="android:layout_width">300px</item>
	<item name="android:layout_height">wrap_content</item>
	<item name="android:paddingLeft">30px</item>
	<item name="android:paddingRight">10px</item>
	<item name="android:thumb">@drawable/thumb</item> <!-- ツマミに利用するdrawableを指定 -->
	<item name="android:max">5</item> <!-- 最大値。SeekBar全体がこの値で等分される -->
	<item name="android:progress">2</item> <!-- ツマミの初期位置 -->
</style>

SeekBarで値を調節するためのツマミのようなGUIパーツは、ユーザーからの入力によって複数の状態になるためそれぞれ指定する必要がある。

android:state_なんちゃらについては、XML内の順番とか複数のstateの組み合わせによっても挙動が変わるようで公式ドキュメントをいくら眺めてもなんの手がかりもない。。

Buttonウィジェットやリストウィジェットについてはそこそこ事例が多少あるのだがSeekBarのツマミの事例はほとんどなかった。

res/drawable/thumb.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
		
	<item
		android:state_focused="true"
		android:state_pressed="true"
		android:drawable="@drawable/thumb_focused"
		/>
		 
	<!-- ツマミにフォーカスの当たっていない標準の状態 -->
	<item
		android:state_focused="false"
		android:state_pressed="false"
		android:drawable="@drawable/thumb_shape"
		/>
		
	<item
		android:state_focused="true"
		android:state_pressed="false"
		android:drawable="@drawable/thumb_focused"
		/>
		 
	<item
		android:state_focused="true"
		android:drawable="@drawable/thumb_focused"
		/>
</selector>

実際にツマミとして表示されるdrawableのサンプル。

状態ごとに画像をたくさん用意しているチュートリアルはよくあるがここではshapeをxmlで指定する。

shapeについては画面全体やボタンなどのビューの背景をxmlで記述したshapeに指定するチュートリアルもよくあるが、サイズが変わる他の要素の背景ではなくそれ自体サイズをもつshapeを定義する必要がある。

<size android:width="30px" android:height="30px" />を記述しないと、サイズのある画像として認識されず、ビュー上で消えてしまうので注意が必要(背景に指定するときは勝手に引き伸ばしてくれるのでsize子要素はいらないのだが)。

thumb用xmlファイルはこれひとつではダメで実際はツマミの各状態にあわせて色を変えたりしてthumb_pressed.xml, thumb_focused.xml, ...etcをつくって指定する必要がある

res/drawable/thumb_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
	<size android:width="30px" android:height="30px" />
	<solid android:color="#ffdcdcdc" />
    <corners android:radius="5px" />
    <padding android:left="10px" android:right="10px" android:top="10px" android:bottom="10px" />
</shape>

AddyAddy2012/02/15 05:05Boom shakalaka boom boom, problem soelvd.

twhrwztwhrwz2012/02/15 17:39xvOg3K <a href="http://swmgvbwbpiyx.com/">swmgvbwbpiyx</a>

pbhhznpbhhzn2012/02/17 21:25iUnWbv <a href="http://maofsnogcxhv.com/">maofsnogcxhv</a>

JulianaJuliana2013/11/22 18:21Such an imrsipseve answer! You've beaten us all with that!

NelsonNelson2013/11/24 08:53Fidinng this post solves a problem for me. Thanks! http://ztmsjg.com [url=http://yhcxlfmx.com]yhcxlfmx[/url] [link=http://cjmuttefd.com]cjmuttefd[/link]

HanifHanif2013/11/25 10:23I really wish there were more <a href="http://kjhzglzeiph.com">artilces</a> like this on the web.

JohnJohn2013/11/25 16:18That's an inventive answer to an inenitstreg question http://puffhr.com [url=http://kujxpe.com]kujxpe[/url] [link=http://oragnrdre.com]oragnrdre[/link]

トラックバック - http://android.g.hatena.ne.jp/yuiseki/20100630
 |