webentwicklung-frage-antwort-db.com.de

Android-Kippschalter - Materialdesign

Wie implementiere ich die Toggle Buttons wie in den Material Design Richtlinien hier spezifiziert

Ist es direkt aus der Android Design Support Library erhältlich oder gibt es eine Bibliothek von Drittanbietern?

13
jaibatrik

Aktueller Bibliotheks-Support: Nein.

Ab der Support Library v23.2 verhält sich die aktuelle ToggleButton-Implementierung not nicht und ist nicht wie in den referenzierten Material Design Guidelines beschrieben gestaltet. 

Materialrichtlinien:

 sample Material toggle button

Derzeitiges Design der Support-Bibliothek:

 current support library ToggleButton

Beachten Sie, dass sich die Schaltflächen nicht in Gruppen befinden, die von abgerundeten Rahmen umgeben sind. Text wird anstelle von Symbolen verwendet. Die Akzentfarbe wird als Unterstrich anstelle eines dunklen Hintergrunds verwendet, um den Status "Ein" anzuzeigen.

Gibt es eine externe Bibliothek: Noch nicht.

Ich kenne keine defacto-Standardbibliothek, um einen Material ToggleButton zu implementieren, aber es gibt wahrscheinlich ein paar kleine, kaum getestete, hoffentlich? Leider hebt Stackoverflow Antworten ab, die nur Links zu externen Bibliotheken von Drittanbietern sind. Sie müssen also entweder selbst suchen oder selbst eine benutzerdefinierte Ansicht erstellen, um die aktuellen Richtlinien für das Materialdesign zu implementieren. 

4
Jon Adams

Ich suche auch schon seit geraumer Zeit nach etwas wie einem ToggleButtonBar.

Materialrichtlinien:  sample Material toggle button

Ich habe es geschafft, RadioButtons zu missbrauchen:

 enter image description here

Um diese ButtonBar mit einer einzigen Auswahl zu erreichen, habe ich für die Optionsfelder einen ToggleButton-Stil und eine Radiogruppe erstellt.

Fügen Sie dies zu res/values ​​/ styles.xml hinzu:

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

Für die Hintergrund-ColorStateList erstellen Sie eine 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>

Fügen Sie Ihre res/values ​​/ colors.xml durch:

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

Verwenden Sie in Ihrer Layoutdatei dieses Code-Snippet, um eine Schaltflächengruppe für Materialumschaltflächen zu erstellen. In meinem Fall ist es die 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>

Ich habe ein CardView als Wrapper für die Gruppe verwendet, um die abgerundeten Ecken zu erreichen. Bei Android-Versionen unterhalb von Lollipop führen die abgerundeten Ecken leider zu einem Auffüllen des CardView. Sie können hier Ihren eigenen Stil mit anderen Farben oder Symbolen anstelle von Text oder beidem verwenden. Erstellen Sie einfach Ihre eigenen StateLists für diese Fälle.

Toggle-Button-Anforderungen:

  • Verfügen Sie über mindestens drei Umschaltflächen in einer Gruppe 
  • Beschriften Sie Schaltflächen mit Text, Symbol oder beidem

Die folgenden Kombinationen werden empfohlen:

  • Mehrfach und nicht ausgewählt
  • Exklusiv und nicht ausgewählt
  • Nur exklusiv

HINWEIS: Um CardView verwenden zu können, müssen Sie die Abhängigkeit zu Ihrer build.gradle-Datei Ihrer Apps hinzufügen:

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

Ich habe eine ToggleButton-Bibliothek erstellt, die den Material Design-Richtlinien entspricht:

https://github.com/rcketscientist/ToggleButtons

compile 'com.anthonymandra:ToggleButtons:2.0.0'

 enter image description here

5
Anthony

Ich hoffe das kann dir helfen!

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

einführen:

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

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

Hörer:

@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

Sie können SwitchCompat verwenden, wenn Ihre Aktivität abwärtskompatibel ist. Siehe Beispiel.

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

Glückliche Kodierung: D

0
Piyush Kumar