web-dev-qa-db-ja.com

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

次のリンクを使用してSwitchCompatの色を変更しようとしました。

SwitchCompatの色を変更する方法

スイッチの低い制約に注意してください。

The SwitchCompat

ただし、関連するすべてのカラー値を変更した後、SwitchCompatのトラック（明るい灰色）は変わりません。色以外の外観を変更したくない。親指はピンク色で、トラックにコントラストをつけたいです。 styles.xmlで値を定義するのを忘れましたか？

私はこれらの値（ランダムな非白色）を試しました：

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/first</item>
    <item name="colorPrimaryDark">@color/second</item>
    <item name="colorAccent">@color/third</item>
   ...
    <item name="colorControlActivated">@color/first</item>
    <item name="colorControlHighlight">@color/first</item>
    <item name="colorControlNormal">@color/second</item>
    <item name="colorSwitchThumbNormal">@color/second</item>
    <item name="colorButtonNormal">@color/second</item>
...>
androidcolorsswitchcompat
44
Close Call

私は同じ問題を抱えて解決しました。

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

アプリの互換コードを読んで理解しました。

Android.support.v7.internal.widget.TintManager.Java

private ColorStateList getSwitchTrackColorStateList() {
    if (mSwitchTrackStateList == null) {
        final int[][] states = new int[3][];
        final int[] colors = new int[3];
        int i = 0;

        // Disabled state
        states[i] = new int[] { -Android.R.attr.state_enabled };
        colors[i] = getThemeAttrColor(Android.R.attr.colorForeground, 0.1f);
        i++;

        states[i] = new int[] { Android.R.attr.state_checked };
        colors[i] = getThemeAttrColor(R.attr.colorControlActivated, 0.3f);
        i++;

        // Default enabled state
        states[i] = new int[0];
        colors[i] = getThemeAttrColor(Android.R.attr.colorForeground, 0.3f);
        i++;

        mSwitchTrackStateList = new ColorStateList(states, colors);
    }
    return mSwitchTrackStateList;
}
141
Konifar

以下はAppCompatトラックとつまみの色の両方を変更する方法ですプログラムで、特定のSwitchCompatに対して。この例では、thumbColorを赤にハードコーディングしています。理想的には、2番目のメソッドパラメーターを使用して色を設定します。

スイッチをチェックすると、リップルが表示されることに注意してください。波紋の色は、以下のコードでは変更されません。

public static void setSwitchColor(SwitchCompat v) {
    // thumb color of your choice
    int thumbColor = Color.RED;

    // trackColor is the thumbColor with 30% transparency (77)
    int trackColor = Color.argb(77, Color.red(thumbColor), Color.green(thumbColor), Color.blue(thumbColor));

    // setting the thumb color
    DrawableCompat.setTintList(v.getThumbDrawable(), new ColorStateList(
            new int[][]{
                    new int[]{Android.R.attr.state_checked},
                    new int[]{}
            },
            new int[]{
                    thumbColor,
                    Color.WHITE
            }));

    // setting the track color
    DrawableCompat.setTintList(v.getTrackDrawable(), new ColorStateList(
            new int[][]{
                    new int[]{Android.R.attr.state_checked},
                    new int[]{}
            },
            new int[]{
                    trackColor,
                    Color.parseColor("#4D000000") // full black with 30% transparency (4D)
            }));
}
8
Ovidiu

track.youの色を最適化する場合は、このソリューションを使用できます。

selector.xmlを追跡する

 <?xml version="1.0" encoding="utf-8"?>
   <selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:color="@color/checked_color" Android:state_checked="true" />
    <item Android:color="@color/checked_color" Android:state_selected="true" />
    <item Android:color="@color/unchecked_color" Android:state_checked="false" />
    <item Android:color="@color/unchecked_color" Android:state_selected="false" />

checked_colorとunchecked_colorは選択した色です。

styles.xml

<style name="mySwitchStyle" parent="@style/Widget.AppCompat.CompoundButton.Switch">
       <!-- do here for additional costumization on thumb, track background,text appearance -->


    </style>


<style name="mySwitchTheme" parent="ThemeOverlay.AppCompat.Light">
        <item name="switchStyle">@style/mySwitchStyle</item>
        <item name="colorControlActivated">@color/red</item>
        <item name="colorControlNormal">@color/colorAccent</item>
        <item name="trackTint">@color/track_selector</item>
    </style>

レイアウトファイル

<Android.support.v7.widget.SwitchCompat
        Android:theme="@style/mySwitchTheme"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        />
5
onzool
 Here is Switch Layout
 -Adding theme to your switch to change the color of track.Check the style given below:-.

**Switch Compact**
  <Android.support.v7.widget.SwitchCompat
                Android:id="@+id/goOnlineBtn"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                app:theme="@style/Switch_style/>


**Switch_style**
   <style name="Switch_style" parent="Theme.AppCompat.Light">
        <!-- active thumb & track color (30% transparency) -->
        <item name="colorControlNormal">@Android:color/white</item>
        <item name="colorControlActivated">@Android:color/blue</item>
        <item name="colorSwitchThumbNormal">@Android:color/white</item>
        <item name="trackTint">@color/white</item>
   </style>

TrackTintがトラックの色を変更する場所

2
Raj

SwitchCompatは、マテリアルデザインウィジェットです。アクティビティが拡張されるとAppCompatActivityになり、Android：theme = "@ style/mySwitch"が機能します。

0
XiaoJian

1つのアクティビティで複数の色のスイッチを追加する場合は、このソリューションを使用できます（@Konifarのテーマに基づく）。

<style name="CustomSwitchTheme" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    <!-- Active thumb color & Active track color(30% transparency) -->
    <item name="colorControlActivated">@color/custom</item>
    <!-- Inactive thumb color -->
    <item name="colorSwitchThumbNormal">#E0E0E0</item>
    <!-- Inactive track color(30% transparency) -->
    <item name="Android:colorForeground">#757575</item>
</style>

ここで、@color/customは、スイッチがアクティブなときの親指の色です。

次に、このテーマをSwitchCompatに次のように適用します。

<Android.support.v7.widget.SwitchCompat
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:theme="@style/CustomSwitchTheme" />
0
Lukas Novak

開発者がSwitchCompatのトラック描画可能オブジェクトを変更する方法は次のとおりです。
最初に、ルートレイアウトにxmlns:SwitchCompat="http://schemas.Android.com/apk/res-auto"
その後：

    <Android.support.v7.widget.SwitchCompat
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_marginTop="30dp"
        Android:thumb="@drawable/your_switch_thumb"
        SwitchCompat:track="@drawable/your_switch_track_selector" 
        />

your_switch_track_selectorは次のとおりです。

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:drawable="@drawable/switch_ios_track_on" Android:state_checked="true" />
    <item Android:drawable="@drawable/switch_ios_track_off" Android:state_checked="false" />
</selector>

1.switch_ios_track_on:
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle"
    >
    <solid Android:color="#4EDA62" />
    <corners Android:radius="20dp" />
</shape>

2.switch_ios_track_off:
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle"
    >
    <solid Android:color="#E3E3E3" />
    <corners Android:radius="20dp" />
</shape>

シンプルで簡単。

0
KnIfER

colorControlActivatedを使用して、SwitchCompatのトラックとつまみの色を設定します。

設定されていない場合、デフォルトのcolorControlActivatedカラーはcolorAccentを使用します。 （経験から、まだソースコードのどこにあるかはわかりません）。

ソースコードが変更され、@ Ovidiuが言ったようにはまだ変更されていません。しかし、ソースコードから答えを見つけてくれたことを知らせてくれてありがとう。

mThumbDrawable = a.getDrawable(R.styleable.SwitchCompat_Android_thumb);

最終的に次のメソッドを呼び出します。

/frameworks/support/v7/appcompat/src/Android/support/v7/widget/AppCompatDrawableManager.Java

private ColorStateList createSwitchTrackColorStateList(Context context) {
    final int[][] states = new int[3][];
    final int[] colors = new int[3];
    int i = 0;

    // Disabled state
    states[i] = ThemeUtils.DISABLED_STATE_SET;
    colors[i] = getThemeAttrColor(context, Android.R.attr.colorForeground, 0.1f);
    i++;

    states[i] = ThemeUtils.CHECKED_STATE_SET;
    colors[i] = getThemeAttrColor(context, R.attr.colorControlActivated, 0.3f);
    i++;

    // Default enabled state
    states[i] = ThemeUtils.EMPTY_STATE_SET;
    colors[i] = getThemeAttrColor(context, Android.R.attr.colorForeground, 0.3f);
    i++;

    return new ColorStateList(states, colors);
}

private ColorStateList createSwitchThumbColorStateList(Context context) {
    final int[][] states = new int[3][];
    final int[] colors = new int[3];
    int i = 0;

    final ColorStateList thumbColor = getThemeAttrColorStateList(context,
            R.attr.colorSwitchThumbNormal);

    if (thumbColor != null && thumbColor.isStateful()) {
        // If colorSwitchThumbNormal is a valid ColorStateList, extract the default and
        // disabled colors from it

        // Disabled state
        states[i] = ThemeUtils.DISABLED_STATE_SET;
        colors[i] = thumbColor.getColorForState(states[i], 0);
        i++;

        states[i] = ThemeUtils.CHECKED_STATE_SET;
        colors[i] = getThemeAttrColor(context, R.attr.colorControlActivated);
        i++;

        // Default enabled state
        states[i] = ThemeUtils.EMPTY_STATE_SET;
        colors[i] = thumbColor.getDefaultColor();
        i++;
    } else {
        // Else we'll use an approximation using the default disabled alpha

        // Disabled state
        states[i] = ThemeUtils.DISABLED_STATE_SET;
        colors[i] = getDisabledThemeAttrColor(context, R.attr.colorSwitchThumbNormal);
        i++;

        states[i] = ThemeUtils.CHECKED_STATE_SET;
        colors[i] = getThemeAttrColor(context, R.attr.colorControlActivated);
        i++;

        // Default enabled state
        states[i] = ThemeUtils.EMPTY_STATE_SET;
        colors[i] = getThemeAttrColor(context, R.attr.colorSwitchThumbNormal);
        i++;
    }

    return new ColorStateList(states, colors);
}
0
Francis Bacon

私は同じ問題を抱えていました。最後に、このKotlinコードを使用してプログラムで解決しました

fun tintSwitchButton(sw: SwitchCompat, resolvedColor: Int) {
    val states = arrayOf(
            intArrayOf(-Android.R.attr.state_pressed),
            intArrayOf(Android.R.attr.state_pressed)
    )

    DrawableCompat.setTintList(sw?.trackDrawable, ColorStateList(
            states,
            intArrayOf(resolvedColor, resolvedColor)
    ))

    DrawableCompat.setTintList(sw?.thumbDrawable, ColorStateList(
            states,
            intArrayOf(Color.WHITE, Color.WHITE)
    ))
}

そして、関数呼び出しは

tintSwitchButton(switchCompat, Color.rgb(214, 0, 0))

拡張機能を作成することもできます：

fun SwitchCompat.tint(resolvedColor: Int) {
    val states = arrayOf(
        intArrayOf(-Android.R.attr.state_pressed),
        intArrayOf(Android.R.attr.state_pressed)
    )

    DrawableCompat.setTintList(trackDrawable, ColorStateList(
        states,
        intArrayOf(resolvedColor, resolvedColor)
    ))

    DrawableCompat.setTintList(thumbDrawable, ColorStateList(
        states,
        intArrayOf(Color.WHITE, Color.WHITE)
    ))
}

だから、呼び出しが簡単になります

switchCompat.tint(Color.rgb(214,0,0))
0
voghDev