Android przełącznik lewo-prawo na zlecenie kanału alfa

Question

Próbuję utworzyć przycisk niestandardowy takiego:

Co czuję, że potrzebne jest coś w lewo/prawo odkształcalne każdy w zielony/stan biały lub, alternatywnie, zielony kontur z rysunkiem do wyboru, kiedy ma być wybrany.

To, czego nie rozumiem w postach takich jak this, polega na tym, że wszystkie przykładowe rysunki są pochylone w prawo, a przycisk "włączony" przesuwa się w lewo.

Próbuję z poniższym rysunkiem kciuka.

<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item android:state_checked="true" android:drawable="@drawable/choice_right"/> 
    <item        android:drawable="@drawable/choice_left"/> 
</selector> 

ale wydaje się, że odcina końce z rysunków. Jeśli ustawię ścieżkę na coś podobnego:

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
     android:shape="rectangle" > 

     <stroke 
      android:width="1dp" 
      android:color="@color/text_input"/> 

     <corners 
      android:radius="1dp" 
      android:bottomLeftRadius="4.5dp" 
      android:bottomRightRadius="4.5dp" 
      android:topLeftRadius="4.5dp" 
      android:topRightRadius="4.5dp" > 
    </corners> 
</shape> 

to wszystko, co dostaję, to cienka linia. Więc nie jestem pewien, co dalej.

Answer 1

Nie może to dotyczyć samej stylizacji, wymaga to niestandardowej implementacji widoku. To jest dużo kodu, więc moją propozycją byłoby korzystanie z bibliotek innych firm, takich jak https://github.com/hoang8f/android-segmented-control Ta biblioteka jest wypróbowana i przetestowana, więc można jej bezpiecznie używać zamiast przepisywania jej.

Answer 2

Aktualizacja odpowiedź

to zrobić należy utworzyć Layer-listy w rozciągliwej folderze

RES/rozciągliwej/toggle_layerlist.xml lista warstwa

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" > 
    <item android:drawable="@drawable/choice_right"> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle" > 

    <stroke 
     android:width="1dp" 
     android:color="@color/text_input"/> 

    <corners 
     android:radius="1dp" 
     android:bottomLeftRadius="4.5dp" 
     android:bottomRightRadius="4.5dp" 
     android:topLeftRadius="4.5dp" 
     android:topRightRadius="4.5dp" > 
    </corners> 
</shape> 
    </item> 

    </layer-list> 

dodać do selektora

<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
     <item android:drawable="@drawable/toggle_layerlist" android:state_checked="true" /> 

    </selector> 

użycie tego selektor jako tło, ale upewnij się, że pusty tekst on/off stanie

przez ustawiony android:textOff="" android:textOn=""

<ToggleButton 
      android:id="@+id/chkState" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="@drawable/toggle_selector" 
      android:textOff="" 
      android:textOn=""/> 

zrobić to samo z innym stanie

Answer 3

można stosować radiogroup z dwoma RadioButton :

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

      <RadioButton 
        android:id="@+id/male_radio_button" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:textColor="@drawable/selector_radio_btn_text" 
        android:background="@drawable/selector_radio_btn_left_bg" 
        android:gravity="center" 
        android:button="@null" 
        android:text="@string/male_radio_text" 
        /> 

      <RadioButton 
        android:id="@+id/female_radio_button" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:textColor="@drawable/selector_radio_btn_text" 
        android:background="@drawable/selector_radio_btn_right_bg" 
        android:gravity="center" 
        android:button="@null" 
        android:text="@string/female_radio_text"/> 
     </RadioGroup> 

gdzie selector_radio_btn_text.xml jest selektor kolor tekstu:

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
<item android:state_checked="true" android:color="@color/checkbox_text_color_checked"/> 
<item android:state_checked="false" android:color="@color/checkbox_text_color"/> 

i selector_radio_btn_left_bg (prawy bg) .xml jest backgorund z lewej i prawej strony

Answer 4

ja stworzyliśmy przykładową aplikację, które można znaleźć here który powinien rozwiązać problem. Możesz zajrzeć do biblioteki this, która ma odpowiednią implementację kontroli segmentu.

Zasadniczo stworzyłem niestandardowego formantu, który rozciąga LinearLayout z domyślnie weightSum od 2. Dwa Buttons dodaje z weight 1, a niektóre logika jest stosowana, aby przełączać się między nimi. Włączone jest uruchamiane niestandardowe zdarzenie zbudowane na tym interfejsie.

public interface SwitchToggleListener { 
    void onSwitchToggle(SwitchToggleState switchToggleState); 
} 

Użyłem zasobów drawable do nadania stylu przyciskom.

Efekt końcowy wygląda tak

Answer 5

Zamiast jego użyciem dowolnego zewnętrznego libaray lub wsparcia biblioteki można to łatwo zrobić za pomocą radiogroup i radiowych przyciski. Jak wspomniał w swojej odpowiedzi "Dimitry", ja też użyłem tego samego. Oto pasta kopię mojej odpowiedzi udzielonej na pytanie How to custom switch button?

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