Androidスイッチのスタイルを設定するにはどうすればよいですか?


121

API 14で導入されたスイッチウィジェットは、デフォルトでホロテーマでスタイル設定されています。ブランディングの理由で、色や形を少し変えて少しスタイルを変えたいです。これをどうやってやるの?デフォルトのICSとサムスンのtouchwizテーマの違いを見たように、私はそれが可能でなければならないことを知っています

ここに画像の説明を入力してください

私はいくつかの状態のドローアブルが必要だと思います、そして私が後のように見えるいくつかのスタイルをhttp://developer.android.com/reference/android/R.styleable.htmlでSwitch_thumbとSwitch_trackで見ました。どうやって使うのか分からない。

それが違いを生むなら、私はActionbarSherlockを使用しています。もちろん、API v14以降を実行しているデバイスのみがスイッチを使用できます。

回答:


258

背景に使用するドローアブルと、次のようなスイッチャー部分を定義できます。

<Switch
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:thumb="@drawable/switch_thumb"
    android:track="@drawable/switch_bg" />

次に、スイッチャードローアブルのさまざまな状態を定義するセレクターを作成する必要があります。ここでは、Androidソースからのコピー:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:drawable="@drawable/switch_thumb_disabled_holo_light" />
    <item android:state_pressed="true"  android:drawable="@drawable/switch_thumb_pressed_holo_light" />
    <item android:state_checked="true"  android:drawable="@drawable/switch_thumb_activated_holo_light" />
    <item                               android:drawable="@drawable/switch_thumb_holo_light" />
</selector>

これは、サムドローアブル、つまり背景の上に移動されるイメージを定義します。スライダーに使用される4つのninepatchイメージがあります 。

非アクティブ化されたバージョン(Androidが使用しているxhdpiバージョン)非アクティブ化されたバージョン
押されたスライダー:押されたスライダー
アクティブ化されたスライダー(オン状態):アクティブ化されたスライダー
デフォルトバージョン(オフ状態):ここに画像の説明を入力してください

次のセレクターで定義されている背景には、3つの異なる状態があります。

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:drawable="@drawable/switch_bg_disabled_holo_dark" />
    <item android:state_focused="true"  android:drawable="@drawable/switch_bg_focused_holo_dark" />
    <item                               android:drawable="@drawable/switch_bg_holo_dark" />
</selector>

非アクティブ化されたバージョン:非アクティブ化されたバージョン
フォーカスされたバージョン:注目バージョン
デフォルトのバージョン:デフォルトのバージョン

スタイル付きスイッチを作成するには、この2つのセレクターを作成し、それらをスイッチビューに設定してから、7つの画像を目的のスタイルに変更します。


1
非常に詳細に感謝します。親指の一部がトラックから外れる9パッチスライダーの画像は、彼らがどのようにしているかを理解できなかったので、特に役に立ちました。(デフォルトのスライダーでは、先のとがったエッジビットがトラックの端を越えて移動し、片側が正方形の端になります)
Glenn.nz

2
<item android:state_checked = "true">の状態がもう1つあり、スイッチが「オン」の状態のときにトラックイメージを変更できます。したがって、トラックを「オン」/「オフ」で変更する場合は、この状態を使用します。
narangrajeev81 2013年

1
親指のテキストの色をどのようにスタイルできますか?私はそれをどこにも見つけることができません:(
pojomx

1
@ pojomx。テキストカラーの解決策、つまりオン/オフテキストカラーを見つけましたか?私は同じ問題に直面しており、同じ時点で立ち往生しています。
Smeet、2015

テキストの色を変更するには=> android:switchTextAppearance = "@ style / mySwitchTextSyle"
Andrew

50

Januszによるすばらしい詳細な返信です。しかし、答えを得るためにこのページにアクセスしている人々のために、より簡単な方法は、Android Asset Studioからリンクされたhttp://android-holo-colors.com/(デッドリンク)にあります

すべてのツールの良い説明はAndroidOnRocks.comにあります(現在オフラインのサイト)

ただし、理解をより明確にするため、Januszからの返信を読むことをお勧めします。ツールを使用して、実際にすばやく作業を行う


6
素晴らしい時間節約。9パッチ、状態リストのドローアブルなどがすべてワンクリックで!
Steve

この回答は非常に便利なので、「カスタムカラーでAndroidホロコントロールを簡単に作成するツール」の質問として投稿して、回答を受け入れてください。開発者はこれが必要です。
Rachael

きっと素晴らしいツールになると思います...すべてのリンクは悲しいことに死んでいます
Razvan_TK9692

3

さまざまな色のプロパティを設定することにより、マテリアルスタイルをカスタマイズできます。たとえば、カスタムアプリケーションのテーマ

<style name="CustomAppTheme" parent="Theme.AppCompat">
    <item name="android:textColorPrimaryDisableOnly">#00838f</item>
    <item name="colorAccent">#e91e63</item>
</style>

カスタムスイッチテーマ

<style name="MySwitch" parent="@style/Widget.AppCompat.CompoundButton.Switch">
    <item name="android:textColorPrimaryDisableOnly">#b71c1c</item>
    <item name="android:colorControlActivated">#1b5e20</item>
    <item name="android:colorForeground">#f57f17</item>
    <item name="android:textAppearance">@style/TextAppearance.AppCompat</item>
</style>

xmlドローアブルを定義することにより、以下の画像のようにトラックの切り替えと親指の切り替えカスタマイズできます。詳細については、http://www.zoftino.com/android-switch-button-and-custom-switch-examples

カスタムスイッチトラックとサム


1

別のはるかに簡単な方法は、9パッチの代わりに形状を使用することです。それはすでにここで説明されています:https//stackoverflow.com/a/24725831/512011


idshu、kishu27の回答で言及されているツールは、すべてのファイルを作成するので、色を変更するだけの方がはるかに高速でした。色だけでなく形状もカスタマイズしたいと思うのですが、おそらくもっと速いでしょう。
JStephen、2015年

率直に言って、このツールは本当に素晴らしいですが、何かの色を変更したいだけなら、たくさんの画像を生成する必要があるという考えは好きではありません。また、形状を使用している場合は、オフ/オンのスイッチ位置に異なる色を使用できます。
netpork 2015年

確かに、あなたが私のように優柔不断で、好きな色が見つかるまで色を変え続けるなら、これははるかに速く、私にとって幸運です。誰かが色を選ぶのを担当しています:)
JStephen
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.