Android自定义:使用图片滑动切换按钮

时间:2016-05-02 10:58:27

标签: android android-layout togglebutton

我正在尝试在Android中构建自定义滑动切换按钮,我希望图像看到下方看起来像单选按钮但功能为切换按钮。谁来帮帮我。我该怎么办?

图片1

enter image description here

1 个答案:

答案 0 :(得分: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>

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

输出

enter image description here enter image description here