android 三档开关做法

项目中要实现一个如下的开关按钮，

可以滑动到左，中，右的三档开关，然后如果滑动到超过25%，则自动滑到第二个档位，如果滑动到超过75%，则自动滑到第三个档位。
符合这种需求的，我想到了用android的seekbar来实现效果。但是，用这个控件时遇到了种种的坑，苦不堪言。首先是背景图显示不全，后来只能用FrameLayout,把seekbar的背景图放到底层，左右thumb显示不全，只能控制扩大seekbar的宽度，设置seekbar的progressDrawable为一张透明的背景图，thumb到左右两边时的progress值。把progress等于5的时候当成第一个档的开关的位置，progress等于95的时候当成第三个档的开关的位置。这样就调整了thumb的位置。代码如下：

package test.my.com.hellochina.widget;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.SeekBar;

/**
 * 三挡开关
 * Created by linbin on 2017/11/6.
 */

public class ThridSwitchSeekBar extends SeekBar implements SeekBar.OnSeekBarChangeListener {


    private SeekTouchListener touchListener;


    /**
     * 新的Progress值,初始值是5 为了解决左右显示不全问题
     */
    private int newProgress = 5;


    public ThridSwitchSeekBar(Context context) {
        super(context);
        setOnSeekBarChangeListener(this);
        setProgress(5);//三挡开关,为了解决thumb显示不全，所以设为5
    }

    public ThridSwitchSeekBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        setOnSeekBarChangeListener(this);
        setProgress(5);
    }

    public ThridSwitchSeekBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        setOnSeekBarChangeListener(this);
        setProgress(5);
    }

    /**
     * 进度值改变时,滑动的时候设置进度值
     *
     * @param seekBar
     * @param progress
     * @param fromUser
     */
    @Override
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
        newProgress = progress;

    }

    /**
     * 进度值开始滑动时
     *
     * @param seekBar
     */
    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {

    }

    /**
     * 进度值停止滑动时
     *
     * @param seekBar
     */
    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {

        if (newProgress < 30) {//如果progress<25,因为左右缩进了5%,所以加了5%,为30%则滑到第一档
            newProgress = 5;
            setProgress(5);
            if (touchListener != null) {
                touchListener.touchTop(seekBar);
            }

        } else if (newProgress >=70) {//如果progress>75,因为左右缩进了5%,所以减了5%,为70%则滑到第三档
            newProgress = 95;
            setProgress(95);
            if (touchListener != null) {
                touchListener.touchEnd(seekBar);
            }

        } else {//到中档
            newProgress = 50;
            setProgress(50);
            if (touchListener != null) {
                touchListener.touchMiddle(seekBar);
            }
        }


    }

    /**
     * 滑动监听
     */
    public interface SeekTouchListener {
        void touchTop(SeekBar seekBar);//滑到第一档

        void touchMiddle(SeekBar seekBar);//滑到中档

        void touchEnd(SeekBar seekBar);//滑到第三档

    }


    public void setSeekTouchListenr(SeekTouchListener touchListenr) {
        this.touchListener = touchListenr;

    }


}

package test.my.com.hellochina.view;

import android.app.Activity;
import android.os.Bundle;
import android.widget.SeekBar;

import test.my.com.hellochina.R;
import test.my.com.hellochina.widget.ThridSwitchSeekBar;


/**
 * 三挡开关
 */
public class ThirdSwitchActivity extends Activity implements ThridSwitchSeekBar.SeekTouchListener {


    ThridSwitchSeekBar seekBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_third_switch);
        seekBar = (ThridSwitchSeekBar) findViewById(R.id.third_switch_seekBar);
        seekBar.setSeekTouchListenr(this);
        seekBar.setThumb(getResources().getDrawable(R.mipmap.ic_protect_normal));
    }

    /**
     * 滑到第一档
     * @param seekBar
     */
    @Override
    public void touchTop(SeekBar seekBar) {
        seekBar.setThumb(getResources().getDrawable(R.mipmap.ic_protect_normal));

    }
    /**
     * 滑到第二档
     * @param seekBar
     */
    @Override
    public void touchMiddle(SeekBar seekBar) {
        seekBar.setThumb(getResources().getDrawable(R.mipmap.ic_no_protect_normal));

    }
    /**
     * 滑到第三档
     * @param seekBar
     */
    @Override
    public void touchEnd(SeekBar seekBar) {
        seekBar.setThumb(getResources().getDrawable(R.mipmap.ic_protect_normal));

    }


}

activity_third_switch.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <FrameLayout
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal">


        <ImageView
            android:layout_width="250dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal|center_vertical"
            android:src="@mipmap/bg_hd_defaule" />

        <test.my.com.hellochina.widget.ThridSwitchSeekBar
            android:id="@+id/third_switch_seekBar"
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:max="100"
            android:maxHeight="50dp"
            android:minHeight="50dp"
            android:progressDrawable="@drawable/seekbar_style" />

    </FrameLayout>

    <LinearLayout
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:orientation="horizontal">


        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="第一档" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_horizontal"
            android:text="第二档" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="right"
            android:text="第三档" />
    </LinearLayout>
</LinearLayout>

seekbar_style.xml

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 背景图 -->
    <item
        android:id="@android:id/background"
        android:drawable="@color/transparent" />
    <!--第二 进度条 -->
    <item
        android:id="@android:id/secondaryProgress"
        android:drawable="@color/transparent"/>
    <!-- 进度条 -->
    <item
        android:id="@android:id/progress"
        android:drawable="@color/transparent">

    </item>
</layer-list>

颜色值

 <color name="transparent">#00000000</color>

250dp是背景图片的宽度