web-dev-qa-db-ja.com

Androidスイッチコンポーネントでカスタムスタイル（テーマ）を定義する

私はAndroid開発に不慣れで、Androidテーマ/カスタマイズも幅広いテーマのようです...

Switchコンポーネントに特別なルックアンドフィールを与えようとしていますが、インターネットで多くのリソースを調べた後、私が望むものを達成することができません。

これは私を夢中にさせています!!
ご協力いただきありがとうございます、Androidマスター！

コンテキスト

私は既存のAndroidアプリケーション（v1）で、minSdkVersion = "8"でした。

このため、アプリケーションはサードパーティのライブラリを使用してアクションバー（ ActionBar Sherlock ）とスイッチ（ SwitchCompatLibrary ）を取得しました。

今日は、minSdkVersion = "14"のv2バージョンを作成しています。

また、お客様から、デフォルトのスイッチのルックアンドフィールを変更するように求められました。

目標は、これらのスイッチを持つことです：
enter image description hereenter image description here

これは実際には最新のマテリアルデザインスイッチのように見えますが、 ここ のように「緑-青」の色ではなくオレンジ色になっています。

制約

現在minSdk14であるため、2つのライブラリ「ActionBarSherlock」と「SwitchCompatLibrary」を削除できますが、これはオプションではありません。確かにそのための時間がありません...

実際、私はプロジェクトのgradleファイルに依存関係を追加しようとしましたappcompat-v7、内部にマテリアルテーマを持つネイティブスイッチコンポーネントを使用してみました（ ここを参照 ）しかし、上記の2つのライブラリで属性定義が重複しているため、エラーが発生します。だから私はそれを使うことができません、そしてこれがうまくいくかどうかわかりません...

dependencies {
(...)

compile project(':actionbarsherlock')
compile project(':switchCompatLibrary')
compile files('libs/Android-support-v4.jar')

// incompatible avec actionbarsherlock and SwitchCompatLibrary...
// compile "com.Android.support:appcompat-v7:22.0.+" 

(...)
}

既存のコード

これがアクチュエルのコードです。

私のlayout.xmlファイルでは、SwitchCompatLibraryスイッチを使用しています。

        <de.ankri.views.Switch
            Android:id="@+id/switchButtonNotification"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_alignParentRight="true" />

私のthemes.xmlファイル：

<style name="Theme.Orange" parent="@style/Theme.Sherlock">
    ...
    <!-- Theme switch with SwitchCompatLibrary -->
    <item name="switchStyle">@style/switch_light</item>
    <item name="textAppearance">@style/TextAppearance</item>
</style>

このようにSwitchCompatLibrary自体で定義されたスタイリング情報を使用します

styles.xml：

<resources xmlns:Android="http://schemas.Android.com/apk/res/Android">

    <style name="switch_light">
        <item name="track">@drawable/switch_track_holo_light</item>
        <item name="thumb">@drawable/switch_inner_holo_light</item>
        <item name="textOn">@string/textOn</item>
        <item name="textOff">@string/textOff</item>
        <item name="thumbTextPadding">12dip</item>
        <item name="switchMinWidth">96dip</item>
        <item name="switchPadding">16dip</item>
        <item name="switchTextAppearance">@style/TextAppearance</item>
    </style>    

    <style name="TextAppearance">
        <item name="textColor">?android:attr/textColorPrimary</item>
        <item name="textColorHighlight">?android:attr/textColorHighlight</item>
        <item name="textColorHint">?android:attr/textColorHint</item>
        <item name="textColorLink">?android:attr/textColorLink</item>
        <item name="textSize">16sp</item>
    </style>
</resources>

switch_inner_holo_light.xml

<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>

switch_track_holo_light.xml

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_focused="true"  Android:drawable="@drawable/switch_bg_focused_holo_light" />
    <item                               Android:drawable="@drawable/switch_bg_holo_light" />
</selector>

そして結果はこれです：
enter image description hereenter image description here

私が試したもの

ネイティブスイッチを使用する

現在はAPI 14以降なので、最初に、layout.xmlで「de.ankri.views.Switch」を「Android.widget.Switch」に置き換えようとしましたが、スタイルが適用されなくなりました（代わりに青いアクティブ化されたスイッチ）またはオレンジ）.。
enter image description hereenter image description here

ただし、各スイッチでテーマ（ ここで説明 ）を直接定義すると、オレンジ色のスイッチが戻ってくるので、うまく機能するようです。

    <Switch
        Android:id="@+id/switchButtonNotification"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        tools:checked="true"
        Android:thumb="@drawable/switch_inner_holo_light"
        Android:track="@drawable/switch_track_holo_light"
        Android:layout_alignParentRight="true" />

奇妙なことです。理由はわかりません。そのため、「de.ankri.views.Switch」コンポーネントはそのままにしておきます。

SwitchCompatLibraryスイッチを使用して、独自のスタイル設定を行う

次に、「de.ankri.views.Switch」コンポーネントを保持し、SwitchCompatLibraryと同じことを試みましたが、「@ style/switch_light」スタイルを独自のスタイルでオーバーライドし、トラックとサムに新しいドローアブルを使用しました。

themes.xml：

<style name="Theme.Orange" parent="@style/Theme.Sherlock">
    ...
    <!-- Theme switch with SwitchCompatLibrary -->
    <item name="switchStyle">@style/Switch.Orange</item>
    <item name="textAppearance">@style/TextAppearance</item>
</style>

styles.xml：

<style name="Switch.Orange" parent="@style/switch_light">
    <item name="track">@drawable/switch_track_orange</item>
    <item name="thumb">@drawable/switch_thumb_orange</item>
    <item name="textOn">@string/textOn</item>
    <item name="textOff">@string/textOff</item>
    <item name="thumbTextPadding">12dip</item>
    <item name="switchMinWidth">96dip</item>
    <item name="switchPadding">16dip</item>
    <item name="switchTextAppearance">@style/TextAppearance</item>
</style>

switch_thumb_orange.xml

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_enabled="false" Android:drawable="@drawable/switch_thumb_normal_orange" />
    <item Android:state_pressed="true"  Android:drawable="@drawable/switch_thumb_activated_orange" />
    <item Android:state_checked="true"  Android:drawable="@drawable/switch_thumb_activated_orange" />
    <item                               Android:drawable="@drawable/switch_thumb_normal_orange" />
</selector>

switch_thumb_activated_orange.9.png enter image description here

switch_thumb_normal_orange.9.png enter image description here

switch_track_orange.xml

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_enabled="false" Android:drawable="@drawable/switch_track_normal_orange" />
    <item Android:state_checked="true" Android:drawable="@drawable/switch_track_activated_orange" />
    <item Android:state_focused="true"  Android:drawable="@drawable/switch_track_activated_orange" />
    <item                               Android:drawable="@drawable/switch_track_normal_orange" />
</selector>

switch_track_activated_orange.9.png enter image description here

switch_track_normal_orange.9.png enter image description here

結果 ：

そして結果はただひどいです!! ：
enter image description hereenter image description here

私はどこが間違っていますか？ styles.xmlの「thumbTextPadding」、「switchMinWidth」、「switchPadding」を変更しようとしましたが、良い結果が得られませんでした。

おそらく私の9パッチファイルは間違っていますか？

androidxmlandroid-layoutandroid-themenine-patch
13
TooLiPHoNe.NeT

この投稿では、必要なものについて説明します： http://www.materialdoc.com/switch/

カラーリングが機能しない場合（API <21）、 このスタックオーバーフローの投稿を見てください。

これがお役に立てば幸いです。

5
Hibbem