android - Android トグル ボタン - マテリアル デザイン

Question

こちらのマテリアル デザイン ガイドラインで指定されているトグル ボタンを実装するにはどうすればよいですか?

Android Design Support Library からすぐに利用できますか、それとも利用可能なサードパーティ ライブラリはありますか?

Answer 1

私もToggleButtonBarかなり長い間、のようなものを探しています。

材料のガイドライン:

私はRadioButtonsを悪用してそれを達成することができました:

この単一選択ボタン バーを実現するToggleButtonために、ラジオ ボタンのスタイルを作成し、RadioGroup を作成しました。

これを res/values/ styles.xmlに追加します:

<style name="ToggleButton" parent="@android:style/Widget.CompoundButton.RadioButton">
    <item name="android:foreground">?android:attr/selectableItemBackground</item>
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">32dp</item>
    <item name="android:background">@drawable/toggle_background</item>
    <item name="android:button">@null</item>
    <item name="android:paddingLeft">8dp</item>
    <item name="android:textAllCaps">true</item>
    <item name="android:paddingRight">8dp</item>
</style>

背景の ColorStateList については、 res/drawable/ toogle_background.xml を作成します。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:state_window_focused="false">
        <color android:color="@color/toggle_hover" />
    </item>
    <item android:state_checked="false" android:state_window_focused="false">
        <color android:color="@color/toggle_normal" />
    </item>
    <item android:state_checked="true" android:state_pressed="true">
        <color android:color="@color/toggle_active" />
    </item>
    <item android:state_checked="false" android:state_pressed="true">
        <color android:color="@color/toggle_active" />
    </item>
    <item android:state_checked="true" android:state_focused="true">
        <color android:color="@color/toggle_hover" />
    </item>
    <item android:state_checked="false" android:state_focused="true">
        <color android:color="@color/toggle_normal_off" />
    </item>
    <item android:state_checked="false">
        <color android:color="@color/toggle_normal" />
    </item>
    <item android:state_checked="true">
        <color android:color="@color/toggle_hover" />
    </item>
</selector>

次の方法で res/values/ colors.xmlを追加します。

<color name="toggle_hover">@color/gray</color>
<color name="toggle_normal">@color/gainsboro</color>
<color name="toggle_active">@color/silver</color>
<color name="toggle_normal_off">@color/darkgray</color>

<color name="gainsboro">#DCdCdC</color>
<color name="silver">#C0C0C0</color>
<color name="darkgray">#a9a9a9</color>
<color name="gray">#808080</color>

レイアウト ファイルでこのコード スニペットを使用して、マテリアル トグル ボタン グループを作成します。私の場合、それはactivity_main.xml です

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <android.support.v7.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:cardCornerRadius="2dp"
        app:cardElevation="2dp">

        <RadioGroup
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <RadioButton
                style="@style/ToggleButton"
                android:text="First" />

            <RadioButton
                style="@style/ToggleButton"
                android:text="Second" />

            <RadioButton
                style="@style/ToggleButton"
                android:text="Third" />

        </RadioGroup>

    </android.support.v7.widget.CardView>
</LinearLayout>

角を丸くするために、CardView をグループのラッパーとして使用しました。残念ながら、Lollipop より低いバージョンの Android では、角が丸くなっているため、CardView のパディングが発生します。ここでは、テキストの代わりに他の色やアイコン、またはその両方を使用して、独自のスタイルを確実に適用できます。そのような場合には、独自の StateList を作成するだけです。

トグル ボタンの要件:

• グループ内に少なくとも 3 つのトグル ボタンがある
• テキスト、アイコン、またはその両方でボタンにラベルを付ける

次の組み合わせが推奨されます。

• 複数で未選択
• 排他的で未選択
• 独占のみ

注: CardView を使用するには、その依存関係をアプリの build.gradle ファイルに追加する必要があります。

compile 'com.android.support:cardview-v7:25.0.1'

Answer 2

更新: 公式サポートが開始されました! リンク/使用法については、以下の他の回答を参照してください。

元の投稿:

現在のライブラリ サポート: いいえ。

サポート ライブラリ v23.2 の時点で、現在のToggleButton実装は、参照されているマテリアル デザイン ガイドラインで概説されているように動作せず、スタイルも設定されていません。

材料のガイドライン:

現在のサポート ライブラリのスタイル:

ボタンは丸い境界線で囲まれたグループにまとめられず、アイコンの代わりにテキストが使用され、「オン」ステータスを示す暗い背景の代わりにアクセント カラーが下線として使用されることに注意してください。

外部ライブラリはありますか: まだありません。

Material ToggleButton を実装するための事実上の標準ライブラリを認識していませんが、おそらく、ほとんどテストされていない小さなライブラリがいくつかあると思います。残念ながら、Stackoverflow は、外部のサードパーティ ライブラリへのリンクにすぎない Answers を推奨していません。したがって、現在のマテリアル デザイン ガイドラインを実装するには、自分で検索するか、自分でカスタム ビューを作成する必要があります。

Answer 3

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

http://takeoffandroid.com/android-views/material-toggle-switch-using-appcompat-v7/

輸入：

import android.support.v7.widget.SwitchCompat;
import android.widget.CompoundButton;

swt = (SwitchCompat)findViewById(R.id.Switch);
swt.setOnCheckedChangeListener (this);
swt.setChecked (true);

リスナー：

@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
    switch (buttonView.getId()) {

        case R.id.Switch:

            if(!isChecked){

                Toast.makeText (SwitchActivity.this,"Err Switch is off!!",Toast.LENGTH_SHORT).show ();
            }else{
                Toast.makeText (SwitchActivity.this,"Yes Switch is on!!",Toast.LENGTH_SHORT).show ();

            }
            break;

        default:
            break;
    }
}

xml:

<android.support.v7.widget.SwitchCompat
    android:id="@+id/Switch"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textOff=""
    android:text="Toggle Switch"
    android:background="@android:color/transparent"
    android:textColor="@color/secondary_text"
    android:textOn=""
    android:button="@null"
    android:padding="20dp"/>

Answer 4

アクティビティに下位互換性がある場合は、 SwitchCompatを使用できます。以下の例を参照してください。

<android.support.v7.widget.SwitchCompat
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"/>

ハッピーコーディング:D