web-dev-qa-db-ja.com

Androidカスタムスイッチ

私はこのようなカスタムスイッチを作ろうとしています：

switch picture

これらのプロパティで：

  1. 常に表示される両側のテキスト。
  2. オンとオフの異なる色。

スイッチが選択した側のテキストのみを表示するため、これらは2つの問題に直面しました。2つの異なる色を指定できる場所が見つからないようです。

Android studioの通常のスイッチを使用してこれを実現できますか、それともライブラリを使用する必要がありますか？

ありがとうございました。

androidandroid-switch
4
Outlandish

調査した後、私が必要とするものを正確に提供する方法を見つけました。

custom switch

それを行う方法を探している人の場合、これは方法です：

この投稿に基づいて answer 、これは私にとってうまくいきました。

これは私がやったことです、私は2つのドローアブルを作成しました。

switch_on.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_enabled="false" Android:state_checked="true" Android:drawable="@color/colorGray"/>
    <item Android:drawable="@color/colorPrimary" Android:state_checked="true" />
    <item Android:drawable="@color/colorPrimaryDark" Android:state_pressed="true" />
    <item Android:drawable="@color/transparent" />

</selector>

switch_off.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_enabled="false" Android:state_checked="true" Android:drawable="@color/colorGray"/>
    <item Android:drawable="@color/gray_light" Android:state_checked="true" />
    <item Android:drawable="@color/black_overlay" Android:state_pressed="true" />
    <item Android:drawable="@color/transparent" />
</selector>

次に、スイッチのアウトライン用のドローアブルを作成しました。 outline.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle">
    <corners Android:radius="2dp" />
    <solid Android:color="#80ffffff" />
    <stroke
        Android:width="1dp"
        Android:color="@color/gray_light" />
</shape>

私が追加したことの1つは、テキストの色のドローアブルです。これは、チェックされているかどうかによってテキストの色が変わるため、これは次のようになります。switch_text.xml

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

そして最後に、私のレイアウトにRadioGroupを次のように作成しました：

<RadioGroup
        Android:id="@+id/toggle"
        Android:layout_width="wrap_content"
        Android:layout_height="50dp"
        Android:background="@drawable/outline"
        Android:checkedButton="@+id/off"
        Android:orientation="horizontal">

        <RadioButton
            Android:id="@+id/off"
            Android:layout_width="wrap_content"
            Android:layout_height="match_parent"
            Android:layout_marginBottom="1dp"
            Android:layout_marginStart="1dp"
            Android:layout_marginTop="1dp"
            Android:layout_weight="1"
            Android:background="@drawable/switch_off"
            Android:button="@null"
            Android:gravity="center"
            Android:padding="@dimen/fab_margin"
            Android:text="@string/off"
            Android:textColor="@drawable/switch_text" />

        <RadioButton
            Android:id="@+id/on"
            Android:layout_width="wrap_content"
            Android:layout_height="match_parent"
            Android:layout_marginBottom="1dp"
            Android:layout_marginEnd="1dp"
            Android:layout_marginTop="1dp"
            Android:layout_weight="1"
            Android:background="@drawable/switch_on"
            Android:button="@null"
            Android:gravity="center"
            Android:padding="@dimen/fab_margin"
            Android:text="@string/on"
            Android:textColor="@drawable/switch_text" />
    </RadioGroup>

適切な場所での各ドローアブルの使用法に注意してください。

Android:background="@drawable/outline" RadioGroupの場合Android:background="@drawable/switch_off"最初のRadioButtonの場合Android:background="@drawable/switch_on" 2番目のRadioButtonの場合Android:textColor="@drawable/switch_text"両方のラジオボタン

そして、それだけです。

5
Outlandish

私は このライブラリ があなたを助けることができると思います

implementation 'com.github.angads25:toggle:1.0.0'

用途

  1. まず、XMLレイアウトに次のようにスイッチ（例：LabeledSwitch）を追加します。

    <com.github.angads25.toggle.LabeledSwitch
    Android:id="@+id/switch4"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_margin="16dp"
    Android:textSize="14sp"
    app:on="false"
    app:textOn="ON"
    app:textOff="OFF"
    app:colorOn="#00c4a6"
    app:colorBorder="#00c4a6"/>

  2. Activity/FragmentクラスのSwitchの参照に、以下のようにToggle Event Handlerを設定します。

    LabeledSwitch labeledSwitch = findViewById(R.id.switch);
labeledSwitch.setOnToggledListener(new OnToggledListener() {
    @Override
    public void onSwitched(LabeledSwitch labeledSwitch, boolean isOn) {
    // Implement your switching logic here
    }
});

それでおしまい。すべてのスイッチングコールバックはonSwitchedメソッドで処理されます。パラメーターisOnはスイッチの現在の状態を提供します。

使用可能なスイッチ

enter image description here

2
Milad Bahmanabadi

スイッチのONおよびOFFラベルを作成するには、スイッチ宣言で属性Android:textOnおよびAndroid:textOffを使用できます。テキストレベルが常に表示されるようにするには、特にAPIレベルの大きいAPI21の場合は、この属性Android:showText="true"も使用します。次に、スイッチは次のようになります。

<Switch
    Android:id="@+id/switcher"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:textOff="OFF"
    Android:textOn="ON"
    Android:showText="true"
/>


デフォルトの色を変更するには、そのように別のデザインを指定する必要があります：

1。ファイルvalues\styles.xmlで、次のようなスタイルを定義します。

<style name="CustomSwitchTheme" parent="Theme.AppCompat.Light">
    <item name="Android:colorControlActivated">#FF0000</item>
</style>

正しい親テーマも参照することが重要です。


2。新しいスイッチスタイルを定義したら、属性を使用してカスタムスタイルをスイッチにリンクできます。

Android:theme="@style/CustomSwitchTheme"

最後に、スイッチは次のようになります。

<Switch
    Android:id="@+id/switcher"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:textOff="OFF"
    Android:textOn="ON"
    Android:showText="true"
    Android:theme="@style/CustomSwitchTheme"
/>
0
Thomas Richter

ToggleButton（画像の比率に従って高さ/幅を変更）とセレクターを使用します。コードは次のとおりです

<ToggleButton
      Android:id="@+id/toggle_"
      Android:layout_width="60dp"
      Android:layout_height="30dp"
      Android:layout_alignParentStart="true"
      Android:background="@drawable/on_off"
      Android:textOff=""
      Android:textOn=""/>

<selector
   xmlns:Android="http://schemas.Android.com/apk/res/Android">
   <item Android:state_checked="true"
   Android:drawable="@drawable/ic_on"  />
   <item Android:state_checked="false"
   Android:drawable="@drawable/ic_off"  />
</selector>
0
Bhriguraj Salponia