Android 自定义：滑动切换按钮与图像

Question

我正在尝试在 Android 中构建一个自定义的滑动切换按钮，我希望像下面看到的图像看起来像单选按钮但用作切换按钮。 谁来帮帮我。 我能怎么做？

图 1

Answer 1

尝试使用SlidingToggleSwithView

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:switch="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    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="de.nitri.slidingtoggleswitchdemo.MainActivity$PlaceholderFragment" >

    <de.nitri.slidingtoggleswitch.SlidingToggleSwitchView
        android:id="@+id/sliding_toggle_switch"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="#ff000000"
        switch:leftButtonText="@string/left_button_text"
        switch:rightButtonText="@string/right_button_text" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>

主活动.java

public class MainActivity extends FragmentActivity implements OnToggleListener {
    //...

    @Override
    public void onToggle(int result) {
        if (result == SlidingToggleSwitchView.LEFT_SELECTED)
            //...
        else
            //...
    }

}

red_button_background.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_pressed="true">
    <shape>
        <gradient
            android:startColor="#ffcc1a03"
            android:endColor="#fffd280c"
            android:angle="270" />
        <corners
            android:radius="3dp" />
        <padding
            android:left="10dp"
            android:top="10dp"
            android:right="10dp"
            android:bottom="10dp" />
    </shape>
</item>

<item android:state_focused="true" >
    <shape>
        <gradient
            android:endColor="#ffcc1a03"
            android:startColor="#fffd280c"
            android:angle="270" />
        <corners
            android:radius="3dp" />
        <padding
            android:left="10dp"
            android:top="10dp"
            android:right="10dp"
            android:bottom="10dp" />
    </shape>
</item>

<item android:state_enabled="false" >
    <shape>
        <gradient
            android:endColor="#fa515151"
            android:startColor="#fa989898"
            android:angle="270" />
        <corners
            android:radius="3dp" />
        <padding
            android:left="10dp"
            android:top="10dp"
            android:right="10dp"
            android:bottom="10dp" />
    </shape>
</item>

<item>        
    <shape>
        <gradient
            android:endColor="#ffcc1a03"
            android:startColor="#fffd280c"
            android:angle="270" />
        <corners
            android:radius="3dp" />
        <padding
            android:left="10dp"
            android:top="10dp"
            android:right="10dp"
            android:bottom="10dp" />
    </shape>
</item>

</selector>

toggle_frame_blue.xml

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

    <stroke
        android:width="2dp"
        android:color="@android:color/darker_gray" />

    <gradient
        android:angle="90"
        android:endColor="#FF3A9CE3"
        android:startColor="#FF6CBCF4" />

    <corners android:radius="10px" />

    <padding
        android:bottom="0dp"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp" />

</shape>

输出