Android自定義view仿IOS開關效果

這篇文章主要爲大家詳細介紹了Android自定義view仿IOS開關效果，具有一定的參考價值，感興趣的小夥伴們可以參考一下

本文主要講解如何在 Android 下實現高仿 iOS 的開關按鈕，並非是在 Android 自帶的 ToggleButton 上修改，而是使用 API 提供的 onDraw、onMeasure、Canvas 方法，純手工繪製。基本原理就是在 Canvas 上疊着放兩張圖片，上面的圖片根據手指觸摸情況，不斷移動，實現開關效果。

廢話不說,上效果圖,看看怎麼樣

樣式如下: 

 

網上也有實現這種效果的，但是大都滑動沒中間消失的動畫，或者是很複雜，今天用簡單的繪圖方式實現，重點就在onDraw裏繪圖。

功能點：

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

自定義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:[email protected]
 * 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);

好了,自定義工作全部完成!!

那麼300行左右的代碼 完成了我們的仿iOS SwitchButton 的控件 SwitchView

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持神馬文庫。