Android如何自定義view仿IOS開關效果

小編給大家分享一下Android如何自定義view仿IOS開關效果，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

功能點：

不滑出邊界，超過一半自動切換（邊界判斷）  可滑動，也可點擊（事件共存）  提供狀態改變監聽（設置回調）  通過屬性設置初始狀態、背景圖片、滑動按鈕（自定義屬性）

自定義View的概述

Android 在繪制 View 時，其實就像蒙上眼睛在畫板上畫畫，它并不知道應該把 View 畫多大，畫哪兒，怎么畫。所以我們必須實現 View 的三個重要方法，以告訴它這些信息。即：onMeasure（畫多大）,onLayout（畫哪兒）,onDraw（怎么畫）。

View的生命周期

在動手寫之前，必須先了解以下幾個概念:

1.View 的默認不支持 WRAP_CONTENT，必須重寫 onMeasure 方法，通過 setMeasuredDimension() 設置尺寸2.基本的事件分發機制：onClickListener 一定是在 onTouchEvent 之后執行

自定義View的流程

開始動手

1.導入開關的樣式文件

<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> <!--高仿IOS7開關 - 樣式--> <declare-styleable name="SwitchButton"> <attr name="buttonColor" format="color" /> </declare-styleable></resources>

2.開始自定義view,重點在onDraw()

/** * Author:AND * Time:2018/3/20. * Email:2911743255@qq.com * Description: * Detail:仿IOS開關 */public class SwitchButton extends View { //畫筆 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; //此處命名不規范，目的和Android自帶的switch有相同的用法 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 高度是是寬度的0.55倍 */ @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); //繪制圓角矩形 canvas.drawRoundRect(rectf, mHeight / 2, mHeight / 2, mPaint); //以下save和restore很重要，確保動畫在中間一層 ，如果大家不明白，可以去搜下用法 canvas.save(); mPaint.setColor(Color.parseColor("#E6E6E6")); mAnimate = mAnimate - 0.1f > 0 ? mAnimate - 0.1f : 0; // 動畫標示 ，重繪10次，借鑒被人的動畫 mScale = (!checked ? 1 - mAnimate : mAnimate); canvas.scale(mScale, mScale, getWidth() - getHeight() / 2, rect.centerY()); //繪制縮放的灰色圓角矩形 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); //繪制縮放的白色圓角矩形，和上邊的重疊實現灰色邊框效果 canvas.drawRoundRect(rect_f_inner, (mHeight - 8) / 2, (mHeight - 8) / 2, mPaint); canvas.restore(); //中間圓形平移 int sWidth = getWidth(); int bTranslateX = sWidth - getHeight(); final float translate = bTranslateX * (!checked ? mAnimate : 1 - mAnimate); canvas.translate(translate, 0); //以下兩個圓帶灰色邊框 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(); } } /** * 事件分發 * * @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); } /** * 狀態構造函數 * * @return */ public boolean isChecked() { return checked; } public void setChecked(boolean checked) { this.checked = checked; } /** * 構造函數 * * @return */ public OnCheckedChangeListener getmOnCheckedChangeListener() { return mOnCheckedChangeListener; } /** * 調用方法 * * @param mOnCheckedChangeListener */ public void setmOnCheckedChangeListener(OnCheckedChangeListener mOnCheckedChangeListener) { this.mOnCheckedChangeListener = mOnCheckedChangeListener; } /** * 滑動接口 */ public interface OnCheckedChangeListener { void OnCheckedChanged(boolean isChecked); }}

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();  } }); }

當然,也可以上來就給開關定義狀態值

mBtnSwitch.setChecked(boolean);

看完了這篇文章，相信你對“Android如何自定義view仿IOS開關效果”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！