Android-переключатели пользовательских левых-правых чертежей
Я пытаюсь создать настраиваемый переключатель следующим образом:
![custom gender switch]()
То, что мне кажется, мне нужно, это что-то вроде левого/правого рисования каждого в зеленом/белом состоянии или, альтернативно, зеленый контур с возможностью выбора, когда нужно выбрать выбор.
То, что я не понимаю в сообщениях, таких как
<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>
тогда все, что я получаю, является тонкой линией. Итак, я не уверен, что попробовать дальше.
Ответы
Ответ 1
Это не может быть только стиль, для этого требуется реализация пользовательского представления. Thats много кода, поэтому мое предложение для вас было бы использовать сторонние библиотеки, такие как
https://github.com/hoang8f/android-segmented-control
Эта библиотека проверена и протестирована, поэтому ее можно использовать, вместо того чтобы переписывать ее.
Ответ 2
Я создал пример приложения, в котором вы можете найти здесь, который должен решить вашу проблему. Вы можете посмотреть эту библиотеку, которая имеет правильную реализацию управления сегментом.
В основном я создал настраиваемый элемент управления, который расширяет LinearLayout
по умолчанию weightSum
из 2. Два Buttons
добавляются с weight
из 1, и для переключения между ними применяется некоторая логика. При переключении пользовательского события запускается, построенный на этом интерфейсе.
public interface SwitchToggleListener {
void onSwitchToggle(SwitchToggleState switchToggleState);
}
Я использовал ресурсы drawable
для стилизации кнопок.
Окончательный результат выглядел так:
![enter image description here]()
Ответ 3
вы можете использовать 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 (справа bg).xml - backgorund левой и правой стороны.
Ответ 4
Вместо того, чтобы использовать любую внешнюю библиотеку libaray или поддержки, это можно сделать легко, используя 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>
Ответ 5
Обновить ответ
Чтобы сделать это, вы должны создать список слоев в папке с рисунком
Рез/вытяжка/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=""/>
сделать то же самое с другим состоянием