安卓仿支付宝开关

先看一下,支付宝开关的样式

 

 

 

话不多说,我们开始分析,并且实现这一效果,先上图:

一:画出未选中时的布局

item_lout_select_button

效果:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/select_bg"
android:layout_width="100dp"
android:layout_height="30dp"
android:background="@drawable/shape_selected_bg_corner">

<View
    android:id="@+id/select_button"
    android:layout_width="45dp"
    android:layout_height="30dp"
    android:background="@drawable/shape_selected_corner" />
</LinearLayout>

shape_selected_bg_corner 外部边框线宽2dp,边角半径2dp,背景为灰色,作为整个控件的背景颜色

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

    <solid android:color="##88C3C3C3</" />
    <corners android:radius="2dp"/>
    <stroke
        android:width="2px"
        android:color="#88C3C3C3</"/>
</shape>

shape_selected_corner 镂空部分为白色,边角半径2dp,背景为白色

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

    <solid android:color="#FFFFFF" />
    <corners android:radius="2dp"/>
    <stroke
        android:width="2px"
        android:color=">#88C3C3C3"/>
</shape>

 

二:自定义控件SelectButton

这里面是动画的起始点,背景颜色的变换,并对外提供监听.

/**
 * Created by Administrator on 2018-1-16.
 */

public class SelectButton extends LinearLayout {
    Context context;
    private View select_button;
    private LinearLayout select_bg;
    boolean isOffline = false;//绿色为不选中状态

    public SelectButton(Context context) {
        super(context);
    }

    public SelectButton(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
        View view = View.inflate(context, R.layout.item_lout_select_button, this);
        select_button = view.findViewById(R.id.select_button);
        select_bg = (LinearLayout) view.findViewById(R.id.select_bg);
    }

    private void initData() {
        //1.根据选中状态,初始化按钮
        initView();
        //按钮的点击事件
        select_bg.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                isOffline = !isOffline;
                onButtonClickListener.onClick(isOffline);
                //2.根据点击事件,加载动画
                initAnimotion(isOffline);
            }
        });
    }

    private void initView() {
        //如果选中切换颜色,不选中用处理
        if (isOffline == true) {
            //1.处理颜色
            GradientDrawable background = (GradientDrawable) select_bg.getBackground();
            background.setColor(context.getResources().getColor(R.color.title_bg));
            background.setStroke(DensityUtils.dp2px(context, 2), context.getResources().getColor(R.color.title_bg));

            GradientDrawable butontDrawable = (GradientDrawable) select_button.getBackground();
            butontDrawable.setStroke(DensityUtils.dp2px(context, 2), context.getResources().getColor(R.color.title_bg));
            //2.处理位置
            AnimatorSet animatorSet = new AnimatorSet();
            ObjectAnimator translation = ObjectAnimator.ofFloat(select_button, "translationX", 0f, DensityUtils.dp2px(context, 55));
            animatorSet.playTogether(translation);//动画同时执行
            animatorSet.setDuration(0);
            animatorSet.start();
        }
    }

    /**
     * 处理动画
     */
    private void initAnimotion(Boolean click) {
        //选中
        if (click == true) {
            //1.由灰色变为蓝色
            GradientDrawable background = (GradientDrawable) select_bg.getBackground();
            background.setColor(context.getResources().getColor(R.color.title_bg));
            background.setStroke(DensityUtils.dp2px(context, 2), context.getResources().getColor(R.color.title_bg));

            GradientDrawable butontDrawable = (GradientDrawable) select_button.getBackground();
            butontDrawable.setStroke(DensityUtils.dp2px(context, 2), context.getResources().getColor(R.color.title_bg));
            //2.动画按钮由左边移动到右边

        } else {
            //1.由蓝色变为灰色
            GradientDrawable background = (GradientDrawable) select_bg.getBackground();
            background.setColor(context.getResources().getColor(R.color.gray));
            background.setStroke(DensityUtils.dp2px(context, 2), context.getResources().getColor(R.color.gray));

            GradientDrawable butontDrawable = (GradientDrawable) select_button.getBackground();
            butontDrawable.setStroke(DensityUtils.dp2px(context, 2), context.getResources().getColor(R.color.gray));
            //2.动画按钮由右边移动到左边
        }
        createTranslateAnimation(click);
    }


    //这里做一个接口回调
    OnButtonClickListener onButtonClickListener;

    public interface OnButtonClickListener {
        public void onClick(boolean click);
    }

    public void setOnButtonClickListener(OnButtonClickListener onButtonClickListener) {
        this.onButtonClickListener = onButtonClickListener;
    }

    /**
     * 创建位移动画
     */
    private void createTranslateAnimation(boolean click) {
        //(int fromXType, float fromXValue, int toXType, float toXValue,int fromYType, float fromYValue, int toYType, float toYValue)
        //由灰色变为绿色,由左边滑到右边
        if (click == true) {
            AnimatorSet animatorSet = new AnimatorSet();
            ObjectAnimator translation = ObjectAnimator.ofFloat(select_button, "translationX", 0f, DensityUtils.dp2px(context, 55));
            animatorSet.playTogether(translation);//动画同时执行
            animatorSet.setDuration(300);
            animatorSet.start();
        } else {
            AnimatorSet animatorSet = new AnimatorSet();
            ObjectAnimator translation = ObjectAnimator.ofFloat(select_button, "translationX", DensityUtils.dp2px(context, 55), 0);
            animatorSet.playTogether(translation);//动画同时执行
            animatorSet.setDuration(300);
            animatorSet.start();
        }
    }

    public void setOffline(boolean offline) {
        isOffline = offline;
        initData();
    }

}

三:调用

    <com.mobileAmi.view.SelectButton
            android:id="@+id/selectButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="10dp"/>

SelectButton button = (SelectButton) findViewById(R.id.selectButton);
 //必须设置初始值,false未选中,true选中
        button.setOffline(false);
//点击的事件监听
        button.setOnButtonClickListener(new SelectButton.OnButtonClickListener() {
            @Override
            public void onClick(boolean click) {
              //回调事件,做相应的逻辑处理
            }
        });

贴出一个DensityUtils 中dp2px方法,dp转换为px

	/**
	 * dp转px
	 *
	 * @param context
	 * @return
	 */
	public static int dp2px(Context context, float dpVal)
	{
		return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
				dpVal, context.getResources().getDisplayMetrics());
	}