效果：

ezgif.com-gif-maker (1).gif

实现：

my_switch.xml:

   <?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="wrap_content"
   android:background="@drawable/selector_switch_caclutor_track"
   android:layout_height="@dimen/y28">



   <android.support.v7.widget.SwitchCompat
       app:layout_constraintTop_toTopOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintBottom_toBottomOf="parent"
       android:layout_marginStart="@dimen/x2"
       android:layout_marginEnd="@dimen/x2"
       android:thumb="@drawable/selector_switch_caclutor"
       app:track="@drawable/switch_tablayout_track"
       android:id="@+id/switch"
       style="@style/switchStyle"
       android:layout_width="@dimen/x120"
       android:textColor="#FFFFFF"
       android:layout_height="@dimen/y24"/>

   <TextView
       android:layout_width="wrap_content"
       android:textSize="14sp"
       android:textColor="#FFFFFF"
       android:gravity="center"
       android:id="@+id/switch_tv_on"
       android:text="全款"
       app:layout_constraintStart_toStartOf="@+id/switch"
       app:layout_constraintTop_toTopOf="@+id/switch"
       app:layout_constraintBottom_toBottomOf="@id/switch"
       android:layout_marginStart="18dp"
       android:layout_height="match_parent"/>

   <TextView
       android:layout_width="wrap_content"
       android:textSize="14sp"
       android:textColor="#FFFFFF"
       android:gravity="center"
       android:id="@+id/switch_tv_off"
       android:text="贷款"
       app:layout_constraintEnd_toEndOf="@+id/switch"
       app:layout_constraintTop_toTopOf="@+id/switch"
       app:layout_constraintBottom_toBottomOf="@id/switch"
       android:layout_marginEnd="18dp"
       android:layout_height="match_parent"/>

</android.support.constraint.ConstraintLayout>
   

selector_switch_caclutor_track.xml:

    <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="@dimen/y14"/>
<solid android:color="#23232c"/>
</shape>

selector_switch_caclutor.xml：

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

carmodel_switch_tablayout_on.xml:

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

<corners android:radius="@dimen/y12"/>

<solid android:color="#4a4b59"/>

<size
   android:width="@dimen/x60"
   android:height="@dimen/y24"
   />

</shape>
 

carmodel_switch_tablayout_on.xml:

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

<corners android:radius="@dimen/y12"/>

<solid android:color="#4a4b59"/>

<size
   android:width="@dimen/x60"
   android:height="@dimen/y24"
   />

</shape>

  

styles.xml:

<style name="carmodel_switchStyle" parent="Theme.AppCompat.Light">

   <item name="colorControlActivated">#00000000</item>

   <item name="colorSwitchThumbNormal">#00000000</item>

   <item name="android:colorForeground">#00000000</item>

</style>
  

自定义SwitchCompat，MySwitchTabLayout.java：

import android.content.Context;
import android.support.constraint.ConstraintLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.widget.SwitchCompat;
import android.util.AttributeSet;
import android.view.View;

import com.bitauto.carmodel.R;

import java.lang.reflect.Method;



public class MySwitchTabLayout extends ConstraintLayout {
    private SwitchCompat mySwitch;

    public MySwitchTabLayout(Context context) {
        super(context);
        init(context);
    }

    public MySwitchTabLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);

    }

    public MySwitchTabLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }


    private void init(Context context) {
        View inflate = inflate(context, R.layout.my_switch, this);
        mySwitch = inflate.findViewById(R.id.switch);
    }


    public void setUpWithViewPager(final ViewPager viewPager) {
        if (viewPager != null) {
            viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {

                @Override
                public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                    float newPos = constrain(positionOffset, 0, 1);
                    try {
                        if (newPos != 0.0f && newPos != 1f) {
                            //通过反射修改Switch的UI
                            Class<SwitchCompat> switchClass = SwitchCompat.class;
                            Method setThumbPosition = switchClass.getDeclaredMethod("setThumbPosition", float.class);
                            setThumbPosition.setAccessible(true);
                            setThumbPosition.invoke(mySwitch, newPos);
                        }
                        MySwitchTabLayout.this.invalidate();

                    } catch (Exception e) {
                        e.printStackTrace();
                    }
                }
                @Override
                public void onPageSelected(int position) {
                }
                @Override
                public void onPageScrollStateChanged(int state) {
                }
            });
            mySwitch.setOnCheckedChangeListener((buttonView, isChecked) -> viewPager.setCurrentItem(isChecked ? 1 : 0));
        } else {
            throw new NullPointerException("viewPager不能为空");
        }

    }


    private float constrain(float amount, float low, float high) {
        return amount < low ? low : (amount > high ? high : amount);
    }
}