150

アプリケーションに異なる色のスイッチ コントロールがいくつかあり、それらの色を変更するために、複数のカスタム ドローアブル セレクターを使用しました。

AppCompat v21 ライブラリのリリースで、新しい android.support.v7.widget.SwitchCompat コントロールが導入されました。

顧客の描画可能なセレクターを使用せずに、プログラムで SwitchCompat の色を変更することは可能ですが、XML またはコードを使用することはできますか?

4

9 に答える 9

351

AppCompat 着色属性:

まず、そこにある appCompat lib の記事と、設定できるさまざまな属性を確認する必要があります。

colorPrimary : アプリの主要なブランディング カラー。デフォルトでは、これはアクション バーの背景に適用される色です。

colorPrimaryDark : プライマリ ブランド カラーのダーク バリアント。デフォルトでは、これはステータス バー (statusBarColor 経由) とナビゲーション バー (navigationBarColor 経由) に適用される色です。

colorAccent : 主要なブランディング カラーを明るく補います。デフォルトでは、これはフレームワーク コントロールに適用される色です (colorControlActivated を介して)。

colorControlNormal : 通常の状態でフレームワーク コントロールに適用される色。

colorControlActivated : フレームワーク コントロールがアクティブ化された (チェックされている、スイッチがオンになっている) 状態で適用される色。

colorControlHighlight : フレームワーク コントロールのハイライト (リップル、リスト セレクターなど) に適用される色。

colorButtonNormal : 通常の状態でフレームワーク ボタンに適用される色。

colorSwitchThumbNormal : 通常の状態でフレームワーク スイッチ サムに適用される色。（スイッチオフ）

1 つのアクティビティですべてのカスタム スイッチが同じ場合:

以前の属性を使用して、アクティビティごとに独自のテーマを定義できます。

<style name="Theme.MyActivityTheme" parent="Theme.AppCompat.Light">
    <!-- colorPrimary is used for the default action bar background -->
    <item name="colorPrimary">@color/my_awesome_color</item>

    <!-- colorPrimaryDark is used for the status bar -->
    <item name="colorPrimaryDark">@color/my_awesome_darker_color</item>

    <!-- colorAccent is used as the default value for colorControlActivated,
         which is used to tint widgets -->
    <item name="colorAccent">@color/accent</item>

    <!-- You can also set colorControlNormal, colorControlActivated
         colorControlHighlight, and colorSwitchThumbNormal. -->

</style>

と ：

<manifest>
...
    <activity
        android:name=".MainActivity" 
        android:theme="@style/Theme.MyActivityTheme">
    </activity>
...
</manifest>

単一のアクティビティで異なるカスタム スイッチを使用する場合:

appcompat でのウィジェットの色付けは、レイアウトのインフレーションをインターセプトし、特別な色付け対応バージョンのウィジェットをその場所に挿入することで機能するため (Chris Banesの投稿を参照してください)、レイアウト xml ファイルの各スイッチにカスタム スタイルを適用することはできません。適切な色で切り替えを行うカスタム コンテキストを設定する必要があります。

--

5.0 より前のバージョンでこれを行うには、カスタム属性でグローバル テーマをオーバーレイする Context を作成し、プログラムでスイッチを作成する必要があります。

ContextThemeWrapper ctw = ContextThemeWrapper(getActivity(), R.style.Color1SwitchStyle); 
SwitchCompat sc = new SwitchCompat(ctw)

AppCompat の時点でv22.1、次XMLを使用してテーマをスイッチ ウィジェットに適用できます。

<RelativeLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    ...>

    <android.support.v7.widget.SwitchCompat
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:theme="@style/Color1SwitchStyle"/>

カスタム スイッチ テーマ:

<style name="Color1SwitchStyle">
    <item name="colorControlActivated">@color/my_awesome_color</item>
</style>

--

Android 5.0では、新しいビュー属性が有効になったように見えます: android:theme(マニフェストでのアクティビティ宣言の使用と同じ)。別の Chris Banesの投稿に基づいて、後者を使用すると、レイアウト xml からビューにカスタム テーマを直接定義できるはずです。

<android.support.v7.widget.SwitchCompat
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:theme="@style/Color1SwitchStyle"/>

SwitchCompat のトラックの色を変更するには

vine'th のおかげで、Switch が Off のときにトラックの前景を指定する方法を説明する SO answer へのリンクで回答を完成させました。

于 2014-11-03T13:09:14.197 に答える
76

申し訳ありませんが、これらの回答のほとんどは不完全であるか、小さなバグがあります。@ austyn-mahoney からの非常に完全な回答は正しく、この回答のソースですが、複雑で、おそらくスイッチのスタイルを設定したいだけです。Android の異なるバージョン間でコントロールを「スタイリング」することは、お尻の大きな苦痛です。非常に厳しいデザイン制約のあるプロジェクトで何日も頭を悩ませた後、最終的に分解してテストアプリを作成し、スイッチとチェックボックスをスタイリングするためにそこにあるさまざまなソリューションを実際に掘り下げてテストしました。それはしばしば他のものを持っています。これが私が見つけたものです...

まず、実際にどちらにもスタイルを設定することはできませんが、テーマをすべてに適用することも、1 つだけに適用することもできます。

2 番目:すべて XML から実行でき、2 番目の値 v21/styles.xml は必要ありません。

3 番目:スイッチに関しては、古いバージョンの Android をサポートしたい場合、基本的な選択肢が 2 つあります (あなたもきっとそうだと思います)...

  1. を使用するSwitchCompatと、プラットフォーム間で同じように見せることができます。
  2. を使用してSwitch、テーマの残りの部分、またはその特定のスイッチだけでテーマを設定できます。Android の古いバージョンでは、スタイルのない古い正方形のスイッチが表示されます。

さて、簡単な参照コードです。単純な Hello World! を作成する場合も同様です。このコードをドロップして、心ゆくまでプレイできます。ここではすべて定型文なので、アクティビティとスタイルの XML を含めるだけにします...

activity_main.xml...

<?xml version="1.0" encoding="utf-8"?>


<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.kunai.switchtest.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="'Styled' SwitchCompat" />

    <android.support.v7.widget.SwitchCompat
        android:id="@+id/switch_item"
        android:layout_width="wrap_content"
        android:layout_height="46dp"
        android:layout_alignParentEnd="true"
        android:layout_marginEnd="16dp"
        android:checked="true"
        android:longClickable="false"
        android:textOff="OFF"
        android:textOn="ON"
        app:switchTextAppearance="@style/BrandedSwitch.text"
        app:theme="@style/BrandedSwitch.control"
        app:showText="true" />

</RelativeLayout>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.kunai.switchtest.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Themed SwitchCompat" />

    <android.support.v7.widget.SwitchCompat
        android:id="@+id/switch_item2"
        android:layout_width="wrap_content"
        android:layout_height="46dp"
        android:layout_alignParentEnd="true"
        android:layout_marginEnd="16dp"
        android:checked="true"
        android:longClickable="false" />

</RelativeLayout>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.kunai.switchtest.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Themed Switch" />

    <Switch
        android:id="@+id/switch_item3"
        android:layout_width="wrap_content"
        android:layout_height="46dp"
        android:layout_alignParentEnd="true"
        android:layout_marginEnd="16dp"
        android:checked="true"
        android:longClickable="false"
        android:textOff="OFF"
        android:textOn="ON"/>

</RelativeLayout>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.kunai.switchtest.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="'Styled' Switch" />

    <Switch
        android:id="@+id/switch_item4"
        android:layout_width="wrap_content"
        android:layout_height="46dp"
        android:layout_alignParentEnd="true"
        android:layout_marginEnd="16dp"
        android:checked="true"
        android:longClickable="false"
        android:textOff="OFF"
        android:textOn="ON"
        android:theme="@style/BrandedSwitch"/>

</RelativeLayout>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.kunai.switchtest.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="'Styled' CheckBox" />

    <CheckBox
        android:id="@+id/checkbox"
        android:layout_width="wrap_content"
        android:layout_height="46dp"
        android:layout_alignParentEnd="true"
        android:layout_marginEnd="16dp"
        android:checked="true"
        android:longClickable="false"
        android:theme="@style/BrandedCheckBox"/>

</RelativeLayout>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.kunai.switchtest.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Themed CheckBox" />

    <CheckBox
        android:id="@+id/checkbox2"
        android:layout_width="wrap_content"
        android:layout_height="46dp"
        android:layout_alignParentEnd="true"
        android:layout_marginEnd="16dp"
        android:checked="true"
        android:longClickable="false"/>

</RelativeLayout>

スタイル.xml...

<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">#3F51B5</item>
    <item name="colorPrimaryDark">#303F9F</item>
    <item name="colorAccent">#FF4081</item>
</style>

<style name="BrandedSwitch.control" parent="Theme.AppCompat.Light">
    <!-- active thumb & track color (30% transparency) -->
    <item name="colorControlActivated">#e6e600</item>
    <item name="colorSwitchThumbNormal">#cc0000</item>
</style>

<style name="BrandedSwitch.text" parent="Theme.AppCompat.Light">
    <item name="android:textColor">#ffa000</item>
    <item name="android:textSize">9dp</item>
</style>

<style name="BrandedCheckBox" parent="AppTheme">
    <item name="colorAccent">#aaf000</item>
    <item name="colorControlNormal">#ff0000</item>
</style>

<style name="BrandedSwitch" parent="AppTheme">
    <item name="colorAccent">#39ac39</item>
</style>

私は知っています、私は知っています、あなたはこれを構築するのが面倒です.コードを書いてチェックインしたいだけです.Android互換性の悪夢のバグでこの痛みを閉じて、チームのデザイナーが最終的に満足できるようにすることができます. . わかった。実行するとこんな感じ・・・

API_21:

API 21

API_18:

API18

于 2016-07-20T00:47:51.000 に答える
18

以下のリンクの答えがより良いと思います

SwitchCompat のトラックの色を変更する方法

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
   ...
   <!-- Active thumb color & Active track color(30% transparency) -->
   <item name="colorControlActivated">@color/theme</item>
   <!-- Inactive thumb color -->
   <item name="colorSwitchThumbNormal">@color/grey300</item>
   <!-- Inactive track color(30% transparency) -->
   <item name="android:colorForeground">@color/grey600</item>
   ...
</style>
于 2015-11-04T18:06:42.647 に答える
11

そのため、脳細胞が不足している日があります。

<android.support.v7.widget.SwitchCompat
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/CustomSwitchStyle"/>

スタイルが正しくないため、テーマは適用されません。app:theme :P を使用することになっていた

<android.support.v7.widget.SwitchCompat
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:theme="@style/CustomSwitchStyle"/>

おっと。この投稿は、私の過ちについての洞察を与えてくれました...うまくいけば、誰かがこれに出くわした場合、それが私のように彼らを助けるでしょう. Gaëtan Maisse さん、ご回答ありがとうございます。

于 2015-06-26T13:13:42.380 に答える
2

SwitchCompat の既知のバグに注意してください

これは、AppCompat https://code.google.com/p/android/issues/detail?id=78262の drawable-hdpi の破損したファイルのバグです 。

それを修正するには、この 2 つのファイルでオーバーライドするだけです https://github.com/lopespm/quick-fix-switchcompat-resources ディレクトリ drawable-hdpi に追加します

XML

<android.support.v7.widget.SwitchCompat
android:id="@+id/dev_switch_show_dev_only"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>

Javaでは何も必要ありませんでした

于 2015-01-06T16:49:45.217 に答える
0 
<android.support.v7.widget.SwitchCompat
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/adamSwitch"
    android:textColor="@color/top_color"
    android:textAppearance="@color/top_color"
    android:gravity="center"
    app:showText="true"
    app:theme="@style/Custom.Widget.SwitchCompat"
    app:switchPadding="5dp"
    />

style.xml で

<style name="Custom.Widget.SwitchCompat" parent="Widget.AppCompat.CompoundButton.Switch" >
            <item name="android:textColorPrimary">@color/blue</item>  <!--textColor on activated state -->
      </style>
于 2015-11-11T10:02:35.057 に答える