web-dev-qa-db-ja.com

スイッチボタンをカスタマイズする方法は？

私はカスタムSwitchボタンを探して次のようになります：

enter image description here

これを達成する方法は？

androidandroid-buttonandroid-stylesandroid-switch
38
Chulo

次のコードを使用して、colorおよびtextを変更できます。

<org.jraf.Android.backport.switchwidget.Switch
                        Android:id="@+id/th"
                        Android:layout_width="match_parent"
                        Android:layout_height="wrap_content"
                        app:thumb="@drawable/apptheme_switch_inner_holo_light"
                        app:track="@drawable/apptheme_switch_track_holo_light"
                        app:textOn="@string/switch_yes"
                        app:textOff="@string/switch_no"
                        Android:textColor="#000000"
                        />

Res/valuesフォルダーにcolors.xmlという名前のxmlを作成します。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="red">#ff0000</color>
    <color name="green">#00ff00</color>
</resources>

描画可能なフォルダーで、xmlファイルmy_btn_toggle.xmlを作成します。

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

トグルボタンを定義するxmlセクションに以下を追加します。

Android:background="@drawable/my_btn_toggle

textOnおよびtextOffuseの色を変更するには

Android:switchTextAppearance="@style/Switch"
22
said

しかし、これは最善の方法ではないかもしれませんが、スイッチ関連のすべての問題を解決するために別の方法を取りました。ここに私のコードがあります-

<RadioGroup
        Android:checkedButton="@+id/offer"
        Android:id="@+id/toggle"
        Android:layout_width="match_parent"
        Android:layout_height="30dp"
        Android:layout_marginBottom="@dimen/margin_medium"
        Android:layout_marginLeft="50dp"
        Android:layout_marginRight="50dp"
        Android:layout_marginTop="@dimen/margin_medium"
        Android:background="@drawable/pink_out_line"
        Android:orientation="horizontal">

        <RadioButton
            Android:layout_marginTop="1dp"
            Android:layout_marginBottom="1dp"
            Android:layout_marginLeft="1dp"
            Android:id="@+id/search"
            Android:background="@drawable/toggle_widget_background"
            Android:layout_width="0dp"
            Android:layout_height="match_parent"
            Android:layout_weight="1"
            Android:button="@null"
            Android:gravity="center"
            Android:text="Search"
            Android:textColor="@color/white" />

        <RadioButton
            Android:layout_marginRight="1dp"
            Android:layout_marginTop="1dp"
            Android:layout_marginBottom="1dp"
            Android:id="@+id/offer"
            Android:layout_width="0dp"
            Android:layout_height="match_parent"
            Android:layout_weight="1"
            Android:background="@drawable/toggle_widget_background"
            Android:button="@null"
            Android:gravity="center"
            Android:text="Offers"
            Android:textColor="@color/white" />
    </RadioGroup>

pink_out_line.xml

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle">
    <corners Android:radius="2dp" />
    <solid Android:color="#80000000" />
    <stroke
        Android:width="1dp"
        Android:color="@color/pink" />
</shape>

toggle_widget_background.xml

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:drawable="@color/pink" Android:state_checked="true" />
    <item Android:drawable="@color/dark_pink" Android:state_pressed="true" />
    <item Android:drawable="@color/transparent" />
</selector>

そして、ここに出力があります- enter image description here

120
Sanjeet A
<Switch Android:layout_width="wrap_content" 
                    Android:layout_height="wrap_content"
                    Android:thumb="@drawable/custom_switch_inner_holo_light"
                    Android:track="@drawable/custom_switch_track_holo_light"
                    Android:textOn="@string/yes"
                    Android:textOff="@string/no"/>

drawable/custom_switch_inner_holo_light.xml

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_enabled="false" Android:drawable="@drawable/custom_switch_thumb_disabled_holo_light" />
    <item Android:state_pressed="true"  Android:drawable="@drawable/custom_switch_thumb_pressed_holo_light" />
    <item Android:state_checked="true"  Android:drawable="@drawable/custom_switch_thumb_activated_holo_light" />
    <item                               Android:drawable="@drawable/custom_switch_thumb_holo_light" />
</selector>

drawable/custom_switch_track_holo_light.xml

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

次の画像はパス9。例として、xxhdpiを指定します（必要に応じてサイズを変更できます）。

drawable/custom_switch_thumb_disabled_holo_light

custom_switch_thumb_disabled_holo_light

drawable/custom_switch_thumb_pressed_holo_light

custom_switch_thumb_pressed_holo_light

drawable/custom_switch_thumb_activated_holo_light

custom_switch_thumb_activated_holo_light

drawable/custom_switch_thumb_holo_light

custom_switch_thumb_holo_light

drawable/custom_switch_bg_focused_holo_light

custom_switch_bg_focused_holo_light

drawable/custom_switch_bg_holo_light

enter image description here

19
SiavA

私はこれを達成しました

enter image description here

することにより：

1）カスタムセレクター：

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

2）v7 SwitchCompatを使用する

<Android.support.v7.widget.SwitchCompat
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:background="@null"
    Android:button="@drawable/checkbox_yura"
    Android:thumb="@null"
    app:track="@null"/>
9
YTerle

このアプローチを使用して、RadioGroupとRadioButton;を使用してカスタムスイッチを作成します。

プレビュー

enter image description here

カラーリソース

<color name="blue">#FF005a9c</color>
<color name="lightBlue">#ff6691c4</color>
<color name="lighterBlue">#ffcdd8ec</color>
<color name="controlBackground">#ffffffff</color>

control_switch_color_selector（res/colorフォルダー内）

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item
        Android:state_checked="true"
        Android:color="@color/controlBackground"
    />
    <item
        Android:state_pressed="true"
        Android:color="@color/controlBackground"
        />
    <item
        Android:color="@color/blue"
        />
</selector>

ドローアブル

control_switch_background_border.xml

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle">
    <corners Android:radius="5dp" />
    <solid Android:color="@Android:color/transparent" />
    <stroke
        Android:width="3dp"
        Android:color="@color/blue" />
</shape>

control_switch_background_selector.xml

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_checked="true">
        <shape>
            <solid Android:color="@color/blue"></solid>
        </shape>
    </item>
    <item Android:state_pressed="true">
        <shape>
            <solid Android:color="@color/lighterBlue"></solid>
        </shape>
    </item>
    <item>
        <shape>
            <solid Android:color="@Android:color/transparent"></solid>
        </shape>
    </item>
</selector>

control_switch_background_selector_middle.xml

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_checked="true">
        <shape>
            <solid Android:color="@color/blue"></solid>
        </shape>
    </item>
    <item Android:state_pressed="true">
        <shape>
            <solid Android:color="@color/lighterBlue"></solid>
        </shape>
    </item>
    <item>
        <layer-list>
            <item Android:top="-1dp" Android:bottom="-1dp" Android:left="-1dp">
                <shape>
                    <solid Android:color="@Android:color/transparent"></solid>
                    <stroke Android:width="1dp" Android:color="@color/blue"></stroke>
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

レイアウト

<RadioGroup
        Android:checkedButton="@+id/calm"
        Android:id="@+id/toggle"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:layout_marginLeft="24dp"
        Android:layout_marginRight="24dp"
        Android:layout_marginBottom="24dp"
        Android:layout_marginTop="24dp"
        Android:background="@drawable/control_switch_background_border"
        Android:orientation="horizontal">
        <RadioButton
            Android:layout_marginTop="3dp"
            Android:layout_marginBottom="3dp"
            Android:layout_marginLeft="3dp"
            Android:paddingTop="16dp"
            Android:paddingBottom="16dp"
            Android:id="@+id/calm"
            Android:background="@drawable/control_switch_background_selector_middle"
            Android:layout_width="0dp"
            Android:layout_height="match_parent"
            Android:layout_weight="1"
            Android:button="@null"
            Android:gravity="center"
            Android:text="Calm"
            Android:fontFamily="sans-serif-medium"
            Android:textColor="@color/control_switch_color_selector"/>
        <RadioButton
            Android:layout_marginTop="3dp"
            Android:layout_marginBottom="3dp"
            Android:paddingTop="16dp"
            Android:paddingBottom="16dp"
            Android:id="@+id/rumor"
            Android:background="@drawable/control_switch_background_selector_middle"
            Android:layout_width="0dp"
            Android:layout_height="match_parent"
            Android:layout_weight="1"
            Android:button="@null"
            Android:gravity="center"
            Android:text="Rumor"
            Android:fontFamily="sans-serif-medium"
            Android:textColor="@color/control_switch_color_selector"/>
        <RadioButton
            Android:layout_marginTop="3dp"
            Android:layout_marginBottom="3dp"
            Android:layout_marginRight="3dp"
            Android:paddingTop="16dp"
            Android:paddingBottom="16dp"
            Android:id="@+id/outbreak"
            Android:layout_width="0dp"
            Android:layout_height="match_parent"
            Android:layout_weight="1"
            Android:background="@drawable/control_switch_background_selector"
            Android:button="@null"
            Android:gravity="center"
            Android:text="Outbreak"
            Android:fontFamily="sans-serif-medium"
            Android:textColor="@color/control_switch_color_selector" />
</RadioGroup>
8
Tebo

通常のSwitchウィジェットを使用して、setTextOn()およびsetTextOff()を呼び出すか、Android:textOnおよびAndroid:textOff属性を使用できます。

5
Karakuri

カスタムToggleButtonを作成するには2つの方法があります

1）カスタム背景を定義する2）カスタムボタンを作成する

チェック http://www.zoftino.com/Android-toggle-button カスタムスタイル

カスタム背景のトグルボタン

以下のようなxmlリソースとしてdrawableを定義し、トグルボタンの背景として設定します。以下の例では、drawable toggle_colorは色セレクターです。これも定義する必要があります。

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:insetLeft="4dp"
    Android:insetTop="4dp"
    Android:insetRight="4dp"
    Android:insetBottom="4dp">
    <layer-list Android:paddingMode="stack">
        <item>
            <ripple Android:color="?attr/Android:colorControlHighlight">
                <item>
                    <shape Android:shape="rectangle"
                        Android:tint="?attr/Android:colorButtonNormal">
                        <corners Android:radius="8dp"/>
                        <solid Android:color="@Android:color/white" />
                        <padding Android:left="8dp"
                            Android:top="6dp"
                            Android:right="8dp"
                            Android:bottom="6dp" />
                    </shape>
                </item>
            </ripple>
        </item>
        <item Android:gravity="left|fill_vertical">
            <shape Android:shape="rectangle">
                <corners Android:radius="4dp"/>
                <size Android:width="8dp" />
                <solid Android:color="@color/toggle_color" />
            </shape>
        </item>
        <item Android:gravity="right|fill_vertical">
            <shape Android:shape="rectangle">
                <corners Android:radius="4dp"/>
                <size Android:width="8dp" />
                <solid Android:color="@color/toggle_color" />
            </shape>
        </item>
    </layer-list>
</inset>

カスタムボタン付きトグルボタン

2つの状態のトグルボタン用に独自の画像を作成し（画像がすべてのサイズの画面に存在することを確認します）、描画可能なフォルダーに配置し、セレクターを作成してボタンとして設定します。

   <selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_checked="true" Android:drawable="@drawable/toggle_on" />
    <item Android:drawable="@drawable/toggle_off" />
</selector>
1
Arnav Rao
 <Switch
        Android:thumb="@drawable/thumb"
        Android:track="@drawable/track"
        Android:layout_width="wrap_content"
        Android:layout_height="match_parent" />

enter image description here

enter image description here

0
Athira

このリンクの詳細： http://www.mokasocial.com/2011/07/sexily-styled-toggle-buttons-for-Android/

<ToggleButton 
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:background="@drawable/toggle_me"/>

そして、ドローアブルは次のようなものになります：

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_checked="true"
        Android:drawable="@drawable/toggle_me_on" /> <!-- checked -->
    <item Android:drawable="@drawable/toggle_me_off" /> <!-- default/unchecked -->
</selector>
0
Andriya