Android переключает пользовательские левые и правые чертежи

Я пытаюсь создать собственный переключатель следующим образом:

настраиваемый переключатель пола

Мне кажется, что мне нужно что-то вроде левого/правого рисунка, каждый из которых находится в зеленом/белом состоянии, или, альтернативно, зеленый контур с возможностью рисования, когда выбор должен быть выбран.

Что я не понимаю в таких сообщениях, как это, так это то, как все образцы рисунков имеют наклон вправо, а кнопка «вкл» наклонена влево.

Я пытаюсь использовать следующий «большой палец».

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

но, похоже, он отрезает концы от рисунков. Если я также установлю трек примерно так:

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

тогда все, что я получаю, это тонкая линия. Итак, я не уверен, что попробовать дальше.


person Mike T    schedule 05.06.2015    source источник


Ответы (5)


Этого не может быть только с помощью стилей, для этого требуется реализация пользовательского представления. Это много кода, поэтому я предлагаю вам использовать сторонние библиотеки, такие как https://github.com/hoang8f/android-segmented-control Эта библиотека опробована и протестирована, поэтому ее безопасно использовать, а не переписывать.

person Rajesh Batth    schedule 13.06.2015
comment
Итак, возможно, ответ заключается в том, что это не особенно ориентированный на Android дизайн и что дизайн должен измениться, чтобы больше соответствовать элементам пользовательского интерфейса Android. - person Mike T; 20.06.2015
comment
Этот дизайн взят из iOS, но новый виджет SwitchCompat выглядит так же хорошо и просто, как этот виджет, так что попробуйте его. - person Rajesh Batth; 20.06.2015

Я создал пример приложения, которое вы можете найти здесь. проблема. Вы можете взглянуть на эту библиотеку, в которой реализована правильная реализация управления сегментами.

По сути, я создал пользовательский элемент управления, который расширяет LinearLayout с weightSum по умолчанию, равным 2. Два Buttons добавляются с weight, равным 1, и для переключения между ними применяется некоторая логика. При переключении запускается пользовательское событие, построенное на этом интерфейсе.

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

Я использовал drawable ресурсов для оформления кнопок.

Окончательный результат выглядел так

введите здесь описание изображения

person the-ginger-geek    schedule 18.06.2015

вы можете использовать RadioGroup с двумя 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>

где selector_radio_btn_text.xml — селектор цвета текста:

<?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"/>

и selector_radio_btn_left_bg(right bg).xml является фоном левой и правой стороны

person Dmitry Ognyov    schedule 18.06.2015

Вместо того, чтобы использовать какую-либо внешнюю библиотеку или библиотеку поддержки, это можно легко сделать с помощью RadioGroup и переключателей. Как упомянул в своем ответе «Дмитрий», я тоже использовал то же самое для достижения. Вот копия моего ответа на вопрос Как настроить кнопку переключения?

  <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>
person Sanjeet A    schedule 22.10.2015

Обновить ответ

для этого вы должны создать список слоев в папке с возможностью рисования

res/drawable/toggle_layerlist.xml

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

добавить список слоев в ваш селектор

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

    </selector>

используйте этот селектор в качестве фона, но убедитесь, что текст пуст во включенном/выключенном состоянии

по набору 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=""/>

сделать то же самое в другом состоянии

person Mina Fawzy    schedule 13.06.2015