Добавление пользовательских переключателей в android

Я пытаюсь получить эффект radiobutton для обычных кнопок в android



у меня есть простой android переключатель ниже



enter image description here



код для это ::



activity_main.xml



<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:paddingBottom="@dimen/activity_vertical_margin"

    android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    tools:context=".MainActivity" >



    <RadioGroup

        android:id="@+id/radioGroup1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerHorizontal="true"

        android:layout_centerVertical="true" >



        <RadioButton

            android:id="@+id/radio0"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:checked="true"

            android:text="RadioButton1" />



        <RadioButton

            android:id="@+id/radio1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="RadioButton2" />



        <RadioButton

            android:id="@+id/radio2"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="RadioButton3" />

    </RadioGroup>





</RelativeLayout>



Как настроить его, как показано ниже::



enter image description here



спасибо !



[EDIT] использование кода из одного из ответы



enter image description here



но имя кнопки затеняется опцией select как ее удалить ?




{EDIT} больше изменений



Finall изменения должны по крайней мере я должен знать, какую кнопку я выбрал из трех переключателей.... можно ли получить, как показано ниже ?



enter image description here

654   9  

9 ответов:

добавьте фоновый рисунок, который ссылается на изображение или селектор (как показано ниже), и сделайте кнопку прозрачной:

<RadioButton
    android:id="@+id/radio0"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/yourbuttonbackground"
    android:button="@android:color/transparent"
    android:checked="true"
    android:text="RadioButton1" />

если вы хотите, чтобы ваши переключатели имели другой ресурс при проверке, создайте фон селектора, который можно нарисовать:

res/drawable / yourbuttonbackground.xml

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

в селекторе выше мы ссылаемся на два чертежа,a и b, вот как мы создаем их:

res/drawable/a.xml -Избранные

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <corners
        android:radius="5dp" />
    <solid
        android:color="#fff" />
    <stroke
        android:width="2dp"
        android:color="#53aade" />
</shape>

res/drawable/b.xml -Обычном Состоянии

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <corners
        android:radius="5dp" />
    <solid
        android:color="#fff" />
    <stroke
        android:width="2dp"
        android:color="#555555" />
</shape>

подробнее о чертежах здесь:http://developer.android.com/guide/topics/resources/drawable-resource.html

188  
2013-10-03 20:40:10

используйте тот же формат XML-файла ответа от Эвана, но один файл мешочки все, что нужно для форматирования.

<RadioButton
    android:id="@+id/radio0"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/custom_button_background"
    android:button="@android:color/transparent"
    android:checked="true"
    android:text="RadioButton1" />

и ваш отдельный drawable файл:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:state_pressed="true" >
         <shape android:shape="rectangle" >
             <corners android:radius="3dip" />
             <stroke android:width="1dip" android:color="#333333" />
             <solid android:color="#cccccc" />            
         </shape>
    </item>

    <item android:state_checked="true">
         <shape android:shape="rectangle" >
             <corners android:radius="3dip" />
             <stroke android:width="1dip" android:color="#333333" />
             <solid android:color="#cccccc" /> 
         </shape>
    </item>  

    <item>
         <shape android:shape="rectangle"  >
             <corners android:radius="3dip" />
             <stroke android:width="1dip" android:color="#cccccc" />
             <solid android:color="#ffffff" />            
         </shape>
    </item>
</selector>
33  
2016-06-18 13:38:40

вы должны заполнить атрибут "Button" класса "CompoundButton" с помощью XML drawable path (my_checkbox). В XML drawable, вы должны иметь:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_checked="false" android:drawable="@drawable/checkbox_not_checked" />
     <item android:state_checked="true" android:drawable="@drawable/checkbox_checked" />
     <item android:drawable="@drawable/checkbox_not_checked" /> <!-- default -->
</selector>

Не забудьте заменить my_checkbox по имени файла флажка drawable,checkbox_not_checked по вашему PNG drawable, который является вашим флажком, когда он не установлен и checkbox_checked С вашим изображением, когда это проверено.

для размер, непосредственно обновить параметры макета.

8  
2013-10-03 19:11:49

чтобы скрыть переключатель по умолчанию, я бы предложил удалить кнопку вместо того, чтобы делать его прозрачным, как и вся визуальная обратная связь осуществляется выигрышного фона :

android:button="@null"

также было бы лучше использовать стили как есть несколько переключателей:

<RadioButton style="@style/RadioButtonStyle" ... />

<style name="RadioButtonStyle" parent="@android:style/Widget.CompoundButton">
    <item name="android:background">@drawable/customButtonBackground</item>
    <item name="android:button">@null</item>
</style>

вам понадобится Seslyn customButtonBackground drawable тоже.

4  
2017-05-23 13:31:22

лучший способ, чтобы добавить пользовательские холст это:

 <RadioButton
                                android:id="@+id/radiocar"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:background="@android:color/transparent"
                                android:button="@drawable/yourbuttonbackground"
                                android:checked="true"
                                android:drawableRight="@mipmap/car"
                                android:paddingLeft="5dp"
                                android:paddingRight="5dp"
                                android:text="yourtexthere"/>

наложение тени пользовательским drawable удаляется здесь.

4  
2016-10-10 07:32:54

простой способ попробовать это

  1. создайте новый макет в папке drawable и назовите его custom_radiobutton (вы также можете переименовать)

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

  2. используйте это в вашей деятельности макета

    <RadioButton
 android:id="@+id/radiobutton"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:button="@drawable/custom_radiobutton"/>
3  
2017-04-03 10:27:38

Ниже приведен пример пользовательского переключателя. выполните следующие действия..

  1. Xml-файл.

                        <FrameLayout
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="0.5">


                        <TextView
                            android:id="@+id/text_gender"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="left|center_vertical"
                            android:gravity="center"
                            android:text="@string/gender"
                            android:textColor="#263238"
                            android:textSize="15sp"
                            android:textStyle="normal"

                            />

                        <TextView
                            android:id="@+id/text_male"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:layout_marginLeft="10dp"
                            android:gravity="center"
                            android:text="@string/male"
                            android:textColor="#263238"
                            android:textSize="15sp"
                            android:textStyle="normal"/>

                        <RadioButton
                            android:id="@+id/radio_Male"
                            android:layout_width="28dp"
                            android:layout_height="28dp"
                            android:layout_gravity="right|center_vertical"
                            android:layout_marginRight="4dp"
                            android:button="@drawable/custom_radio_button"
                            android:checked="true"
                            android:text=""
                            android:onClick="onButtonClicked"
                            android:textSize="15sp"
                            android:textStyle="normal"

                            />
                    </FrameLayout>

                    <FrameLayout
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="0.6">

                        <RadioButton
                            android:id="@+id/radio_Female"
                            android:layout_width="28dp"
                            android:layout_height="28dp"
                            android:layout_gravity="right|center_vertical"
                            android:layout_marginLeft="10dp"
                            android:layout_marginRight="0dp"
                            android:button="@drawable/custom_female_button"
                            android:text=""
                            android:onClick="onButtonClicked"
                            android:textSize="15sp"
                            android:textStyle="normal"/>

                        <TextView
                            android:id="@+id/text_female"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="left|center_vertical"
                            android:gravity="center"
                            android:text="@string/female"
                            android:textColor="#263238"
                            android:textSize="15sp"
                            android:textStyle="normal"/>

                        <RadioButton
                            android:id="@+id/radio_Other"
                            android:layout_width="28dp"
                            android:layout_height="28dp"
                            android:layout_gravity="center_horizontal|bottom"
                            android:layout_marginRight="10dp"
                            android:button="@drawable/custom_other_button"
                            android:text=""
                            android:onClick="onButtonClicked"
                            android:textSize="15sp"
                            android:textStyle="normal"/>

                        <TextView
                            android:id="@+id/text_other"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="right|center_vertical"
                            android:layout_marginRight="34dp"
                            android:gravity="center"
                            android:text="@string/other"
                            android:textColor="#263238"
                            android:textSize="15sp"
                            android:textStyle="normal"/>
                    </FrameLayout>
                </LinearLayout>

    2.добавьте пользовательский xml для переключателей

    2.1.другие катры

    custom_other_button.xml

    <item android:state_checked="true" android:drawable="@drawable/select_radio_other" />
<item android:state_checked="false" android:drawable="@drawable/default_radio" />

    2.2.особь женского пола drawable

    custom_female_button.xml

    <item android:state_checked="true" android:drawable="@drawable/select_radio_female" />
<item android:state_checked="false" android:drawable="@drawable/default_radio" />

    2.3. мужской drawable

    custom_radio_button.xml

    <item android:state_checked="true" android:drawable="@drawable/select_radio_male" />
<item android:state_checked="false" android:drawable="@drawable/default_radio" />

    1. выход: это экран вывода
1  
2017-08-19 22:30:05

Я понимаю, что это запоздалый ответ, но просматривая developer.android.com, кажется, что кнопка переключения будет идеально подходит для вашей ситуации.

Toggle button imagehttp://developer.android.com/guide/topics/ui/controls/togglebutton.html

и, конечно, вы все еще можете использовать другие предложения для того, чтобы иметь фон drawable, чтобы получить пользовательский вид, который вы хотите.

<ToggleButton 
    android:id="@+id/togglebutton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/custom_button_background"
    android:textOn="On"
    android:textOff="Off"
    />

теперь, если вы хотите пойти с окончательным редактированием и иметь " ореол" эффект вокруг ваших кнопок, вы можете использовать другой пользовательский селектор, чтобы сделать именно это.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" > <!-- selected -->
        <shape>
            <solid
                android:color="@android:color/white" />
            <stroke
                android:width="3px"
                android:color="@android:color/holo_blue_bright" />
            <corners
                android:radius="5dp" />
        </shape>
    </item>
    <item> <!-- default -->
        <shape>
            <solid
                android:color="@android:color/white" />
            <stroke
                android:width="1px"
                android:color="@android:color/darker_gray" />
            <corners
                android:radius="5dp" />
        </shape>
    </item> 
</selector>
0  
2016-06-18 13:39:15

задание android:background и android:button из RadioButton, как принятый ответ, не работал для меня. Изображение холст отображается в качестве фона(несмотря на то, что android:button был установлен в прозрачный ) для текста переключателя как enter image description here

android:background="@drawable/radiobuttonstyle"
    android:button="@android:color/transparent"

так дал radiobutton в качестве пользовательского drawable radiobuttonstyle.xml

<RadioButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:checked="true"
    android:text="Maintenance"
    android:id="@+id/radioButton1"
    android:button="@drawable/radiobuttonstyle"
      />

и radiobuttonstyle.xml выглядит следующим образом 

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

и после этого radiobutton с пользовательской кнопкой стиль сработал.

enter image description here

0  
2018-09-28 08:47:45

Comments

    Ничего не найдено.
Click here to cancel reply.