Shulou(Shulou.com)06/03 Report--

Editor to share with you how to customize Android view imitation IOS switch effect, I hope you will gain something after reading this article, let's discuss it together!

Function points:

Do not slide out of the boundary, more than half of the automatic switching (boundary judgment) can be slid, or you can click (event coexistence) to provide state change monitoring (set callback) set initial state, background picture, slide button (custom attribute) through properties.

Overview of Custom View

When Android draws View, it is like drawing on a drawing board blindfolded. It doesn't know how big, where and how to draw View. So we have to implement three important methods of View to tell it this information. Namely: onMeasure (how big to draw), onLayout (where to draw), onDraw (how to draw).

Life cycle of View

Before you start writing, you must understand the following concepts:

1.View does not support WRAP_CONTENT by default. You must override the onMeasure method and set the size 2. 0 through setMeasuredDimension (). Basic event distribution mechanism: onClickListener must be executed after onTouchEvent

Customize the process of View

Start to do it.

1. Import the style file for the switch

@ color/colorPrimary @ color/colorPrimaryDark @ color/colorAccent

two。 Start customizing view, focusing on onDraw ()

/ * * Author:AND * Time:2018/3/20. * Email:2911743255@qq.com * Description: * Detail: imitation IOS switch * / public class SwitchButton extends View {/ / Brush private final Paint mPaint = new Paint (); private static final double MBTNHEIGHT = 0.55; private static final int OFFSET = 3; private int mHeight; private float mAnimate = 0L; / / the name here is not standard, and the purpose has the same use as the switch that comes with Android private boolean checked = false; private float mScale; private int mSelectColor; private OnCheckedChangeListener mOnCheckedChangeListener Public SwitchButton (Context context) {this (context, null);} public SwitchButton (Context context, AttributeSet attrs) {super (context, attrs); TypedArray typedArray = context.obtainStyledAttributes (attrs, R.styleable.SwitchButton); mSelectColor = typedArray.getColor (R.styleable.SwitchButton_buttonColor, Color.parseColor ("# 2eaa57")); typedArray.recycle () } / * * @ param widthMeasureSpec * @ param heightMeasureSpec height is 0.55 times the width * / @ Override protected void onMeasure (int widthMeasureSpec, int heightMeasureSpec) {int width = MeasureSpec.getSize (widthMeasureSpec); mHeight = (int) (MBTNHEIGHT * width); setMeasuredDimension (width, mHeight);} @ Override protected void onDraw (Canvas canvas) {super.onDraw (canvas); mPaint.setStyle (Paint.Style.FILL); mPaint.setAntiAlias (true); mPaint.setColor (mSelectColor) Rect rect = new Rect (0,0, getWidth (), getHeight ()); RectF rectf = new RectF (rect); / / draw rounded rectangle canvas.drawRoundRect (rectf, mHeight / 2, mHeight / 2, mPaint); / / the following save and restore are important to ensure that the animation is in the middle layer, if you don't understand, you can search the usage canvas.save (); mPaint.setColor ("# E6E6E6"); mAnimate = mAnimate-0.1f > 0? MAnimate-0.1f: 0; / / Animation mark, redraw 10 times, learn from the animated mScale = (! checked? 1-mAnimate: mAnimate); canvas.scale (mScale, mScale, getWidth ()-getHeight () / 2, rect.centerY ()); / / draw a scaled gray rounded rectangle canvas.drawRoundRect (rectf, mHeight / 2, mHeight / 2, mPaint); mPaint.setColor (Color.WHITE) Rect rect_inner = new Rect (OFFSET, OFFSET, getWidth ()-OFFSET, getHeight ()-OFFSET); RectF rect_f_inner = new RectF (rect_inner); / / draw a scaled white rounded rectangle, which overlaps with the top to achieve the gray border effect canvas.drawRoundRect (rect_f_inner, (mHeight-8) / 2, (mHeight-8) / 2, mPaint); canvas.restore (); / / Middle circle translation int sWidth = getWidth () Int bTranslateX = sWidth-getHeight (); final float translate = bTranslateX * (! checked? MAnimate: 1-mAnimate); canvas.translate (translate, 0); / / two circles with gray borders mPaint.setColor (Color.parseColor ("# E6E6E6")); canvas.drawCircle (getHeight () / 2, getHeight () / 2, getHeight () / 2-OFFSET / 2, mPaint); mPaint.setColor (Color.WHITE); canvas.drawCircle (getHeight () / 2, getHeight () / 2, getHeight () / 2-OFFSET, mPaint); if (mScale > 0) {mPaint.reset () Invalidate ();} / * event distribution * * @ param event * @ return * / @ Override public boolean onTouchEvent (MotionEvent event) {switch (event.getAction ()) {case MotionEvent.ACTION_DOWN: return true; case MotionEvent.ACTION_MOVE: break; case MotionEvent.ACTION_UP: mAnimate = 1; checked =! checked; if (mOnCheckedChangeListener! = null) {mOnCheckedChangeListener.OnCheckedChanged (checked);} invalidate (); break;} return super.onTouchEvent (event) } / * State constructor * * @ return * / public boolean isChecked () {return checked;} public void setChecked (boolean checked) {this.checked = checked;} / * Constructor * * @ return * / public OnCheckedChangeListener getmOnCheckedChangeListener () {return mOnCheckedChangeListener;} / * call method * * @ param mOnCheckedChangeListener * / public void setmOnCheckedChangeListener (OnCheckedChangeListener mOnCheckedChangeListener) {this.mOnCheckedChangeListener = mOnCheckedChangeListener } / * sliding interface * / public interface OnCheckedChangeListener {void OnCheckedChanged (boolean isChecked);}}

Used in 3.Activity

@ Override protected void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); mBtnSwitch = (SwitchButton) findViewById (R.id.switch_btn); mBtnSwitch.setmOnCheckedChangeListener (new SwitchButton.OnCheckedChangeListener () {@ Override public void OnCheckedChanged (boolean isChecked) {Toast.makeText (MainActivity.this, "" + isChecked, Toast.LENGTH_SHORT). Show ();}});}

Of course, you can also define the state value for the switch as soon as you come up

MBtnSwitch.setChecked (boolean)

After reading this article, I believe you have a certain understanding of "Android how to customize view imitation IOS switch effect". If you want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.