web-dev-qa-db-ja.com

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

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

Android Design Support Libraryからすぐに利用できますか、それともサードパーティのライブラリを利用できますか？

androidbuttonmaterial-designandroid-togglebutton
16
jaibatrik

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

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

材料ガイドライン：

sample Material toggle button

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

current support library ToggleButton

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

外部ライブラリはありますか：まだです。

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

4
Jon Adams

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

材料ガイドライン： sample Material toggle button

RadioButtonを悪用してそれを達成することができました。

enter image description here

この単一選択ButtonBarを実現するために、ラジオボタンの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を使用しました。残念ながら、AndroidバージョンがLollipopよりも低いバージョンでは、角が丸いため、CardViewのパディングが発生します。ここでは、テキストではなく他の色やアイコンを使用して独自のスタイルを適用できます。作成するだけです。それらのケースのためのあなた自身のStateLists。

トグルボタンの要件：

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

次の組み合わせをお勧めします。

  • 複数および未選択
  • 排他的で未選択
  • 独占限定

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

compile 'com.Android.support:cardview-v7:25.0.1'
12
Forke

Googleがついに追いついて、マテリアルライブラリに公式のトグルグループができました。

https://material.io/develop/Android/components/material-button-toggle-group/

以前の投稿：

マテリアルデザインガイドラインに準拠したトグルボタンライブラリを作成しました。

https://github.com/rcketscientist/ToggleButtons

compile 'com.anthonymandra:ToggleButtons:2.0.0'

enter image description here

7
Anthony

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

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"/>
4
Alejandro Liébana

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

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

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

1
Piyush Kumar