自定义滑动按钮为例图文剖析Android自定义View绘制

自定义view一直是横在android开发者面前的一道坎。

一、view和viewgroup的关系

从view和viewgroup的关系来看，viewgroup继承view。

view的子类，多是功能型的控件，提供绘制的样式，比如imageview，textview等，而viewgroup的子类，多用于管理控件的大小，位置，如linearlayout，relativelayout等，从下图可以看出

从实际应用中看，他们又是组合关系，我们在布局中，常常是一个viewgroup嵌套多个viewgroup或view，而被嵌套的viewgroup又会嵌套多个viewgroup或view

如下

二、view的绘制流程

从view源码来看，主要关系三个方法：

1、measure（）：测量
     一个final方法，控制控件的大小
2、layout（）：布局
         用来控制自己的布局位置
          有相对性，只相对于自己的父类布局，不关心祖宗布局
3、draw（）：绘制
          用来控制控件的显示样式

流程：  流程 measure --> layout --> draw

对应于我们要实现的方法是

onmeasure()

onlayout()

ondraw()

实际绘制中，我们的思考顺序一般是这样的：

是否需要控制控件的大小-->是-->onmeasure()
(1)如果这个自定义view不是viewgroup，onmeasure()方法调用setmeasuredeminsion(width,height):用来设置自己的大小
(2)如果是viewgroup，onmeasure()方法调用 ，child.measure()测量孩子的大小，给出孩子的期望大小值，之后-->setmeasuredeminsion(width,height):用来设置自己的大小

是否需要控制控件的摆放位置-->是 -->onlayout ()

是否需要控制控件的样子-->是 -->ondraw ()-->canvas的绘制

下面是我绘制的流程图：

下面以自定义滑动按钮为例，说明自定义view的绘制流程

我们期待实现这样的效果：

拖动或点击按钮，开关向右滑动，变成

其中开关能随着手指的触摸滑动到相应位置，直到最后才固定在开关位置上

新建一个类继承自view，实现其两个构造方法

public class switchbuttonview extends view { 
 
   
  public switchbuttonview(context context) { 
    this(context, null); 
  } 
 
  public switchbuttonview(context context, attributeset attrs) { 
    super(context, attrs); 
  } 

drawable资源中添加这两张图片

借此，我们可以用onmeasure（）确定这个控件的大小

@override 
  protected void onmeasure(int widthmeasurespec, int heightmeasurespec) { 
 
    mswitchbutton = bitmapfactory.decoderesource(getresources(), r.drawable.switch_background); 
    mslidebutton = bitmapfactory.decoderesource(getresources(), r.drawable.slide_button_background); 
    setmeasureddimension(mswitchbutton.getwidth(), mswitchbutton.getheight()); 
  } 

这个控件并不需要控制其摆放位置，略过onlayout（）；

接下来ondraw（）确定其形状。

但我们需要根据我们点击控件的不同行为来确定形状，这需要重写ontouchevent（）

其中的逻辑是：

当按下时，触发事件motionevent.action_down，若此时状态为关：

（1）若手指触摸点（通过event.getx（）得到）在按钮的 中线右侧，按钮向右滑动一段距离（event.getx（）与开关控件一半宽度之差，具体看下文源码）

（2）若手指触摸点在按钮中线左侧，按钮依旧处于最左（即“关”的状态）。

若此时状态为开：

（1）若手指触摸点在按钮中线左侧，按钮向左滑动一段距离

（2）若手指触摸点在按钮中线右侧，按钮依旧处于最右（即“开”的状态）

当滑动时，触发时间motionevent.action_move，逻辑与按下时一致

注意，ontouchevent（）需要设置返回值 为 return true，否则无法响应滑动事件

当手指收起时，若开关中线位于整个控件中线左侧，设置状态为关，反之，设置为开。

具体源码如下所示：（还对外提供了一个暴露此时开关状态的接口）

自定义view部分

package com.lian.switchtogglebutton; 
 
import android.content.context; 
import android.graphics.bitmap; 
import android.graphics.bitmapfactory; 
import android.graphics.canvas; 
import android.graphics.paint; 
import android.util.attributeset; 
import android.util.log; 
import android.view.motionevent; 
import android.view.view; 
 
/** 
 * created by lian on 2016/3/20. 
 */ 
public class switchbuttonview extends view { 
 
  private static final int state_null = 0;//默认状态 
  private static final int state_down = 1; 
  private static final int state_move = 2; 
  private static final int state_up = 3; 
 
  private bitmap mslidebutton; 
  private bitmap mswitchbutton; 
  private paint mpaint = new paint(); 
  private int buttonstate = state_null; 
  private float mdistance; 
  private boolean isopened = false; 
  private onswitchlistener mlistener; 
 
  public switchbuttonview(context context) { 
    this(context, null); 
  } 
 
  public switchbuttonview(context context, attributeset attrs) { 
    super(context, attrs); 
  } 
 
  @override 
  protected void onmeasure(int widthmeasurespec, int heightmeasurespec) { 
 
    mswitchbutton = bitmapfactory.decoderesource(getresources(), r.drawable.switch_background); 
    mslidebutton = bitmapfactory.decoderesource(getresources(), r.drawable.slide_button_background); 
    setmeasureddimension(mswitchbutton.getwidth(), mswitchbutton.getheight()); 
  } 
 
  @override 
  protected void ondraw(canvas canvas) { 
    super.ondraw(canvas); 
    if (mswitchbutton!= null){ 
      canvas.drawbitmap(mswitchbutton, 0, 0, mpaint); 
    } 
    //buttonstate的值在ontouchevent（）中确定 
    switch (buttonstate){ 
      case state_down: 
      case state_move: 
        if (!isopened){ 
          float middle = mslidebutton.getwidth() / 2f; 
          if (mdistance > middle) { 
            float max = mswitchbutton.getwidth() - mslidebutton.getwidth(); 
            float left = mdistance - middle; 
            if (left >= max) { 
              left = max; 
            } 
            canvas.drawbitmap(mslidebutton,left,0,mpaint); 
          } 
 
          else { 
 
            canvas.drawbitmap(mslidebutton,0,0,mpaint); 
          } 
        }else{ 
          float middle = mswitchbutton.getwidth() - mslidebutton.getwidth() / 2f; 
          if (mdistance < middle){ 
            float left = mdistance-mslidebutton.getwidth()/2f; 
            float min = 0; 
            if (left < 0){ 
              left = min; 
            } 
            canvas.drawbitmap(mslidebutton,left,0,mpaint); 
          }else{ 
            canvas.drawbitmap(mslidebutton,mswitchbutton.getwidth()-mslidebutton.getwidth(),0,mpaint); 
          } 
        } 
 
 
 
        break; 
 
      case state_null: 
      case state_up: 
        if (isopened){ 
          log.d("开关","开着的"); 
          canvas.drawbitmap(mslidebutton,mswitchbutton.getwidth()-mslidebutton.getwidth(),0,mpaint); 
        }else{ 
          log.d("开关","关着的"); 
          canvas.drawbitmap(mslidebutton,0,0,mpaint); 
        } 
        break; 
 
      default: 
        break; 
    } 
 
  } 
 
  @override 
  public boolean ontouchevent(motionevent event) { 
 
    switch (event.getaction()){ 
      case motionevent.action_down: 
        mdistance = event.getx(); 
        log.d("down","按下"); 
        buttonstate = state_down; 
        invalidate(); 
        break; 
 
      case motionevent.action_move: 
        buttonstate = state_move; 
        mdistance = event.getx(); 
        log.d("move","移动"); 
        invalidate(); 
        break; 
 
      case motionevent.action_up: 
        mdistance = event.getx(); 
        buttonstate = state_up; 
        log.d("up","起开"); 
        if (mdistance >= mswitchbutton.getwidth() / 2f){ 
          isopened = true; 
        }else { 
          isopened = false; 
        } 
        if (mlistener != null){ 
          mlistener.onswitchchanged(isopened); 
        } 
        invalidate(); 
        break; 
      default: 
        break; 
    } 
 
    return true; 
  } 
 
  public void setonswitchlistener(onswitchlistener listener){ 
    this.mlistener = listener; 
  } 
 
  public interface onswitchlistener{ 
    void onswitchchanged(boolean isopened); 
  } 
} 

demoactivity：

package com.lian.switchtogglebutton; 
 
import android.os.bundle; 
import android.support.v7.app.appcompatactivity; 
import android.widget.toast; 
 
public class mainactivity extends appcompatactivity { 
 
  @override 
  protected void oncreate(bundle savedinstancestate) { 
    super.oncreate(savedinstancestate); 
    setcontentview(r.layout.activity_main); 
 
    switchbuttonview switchbuttonview = (switchbuttonview) findviewbyid(r.id.switchbutton); 
    switchbuttonview.setonswitchlistener(new switchbuttonview.onswitchlistener() { 
      @override 
      public void onswitchchanged(boolean isopened) { 
        if (isopened) { 
          toast.maketext(mainactivity.this, "打开", toast.length_short).show(); 
        }else { 
          toast.maketext(mainactivity.this, "关闭", toast.length_short).show(); 
        } 
      } 
    }); 
  } 
} 

布局：

<?xml version="1.0" encoding="utf-8"?> 
<relativelayout 
  xmlns:android="http://schemas.android.com/apk/res/android" 
  xmlns:tools="http://schemas.android.com/tools" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent" 
  android:paddingbottom="@dimen/activity_vertical_margin" 
  android:paddingleft="@dimen/activity_horizontal_margin" 
  android:paddingright="@dimen/activity_horizontal_margin" 
  android:paddingtop="@dimen/activity_vertical_margin" 
  tools:context="com.lian.switchtogglebutton.mainactivity"> 
 
  <com.lian.switchtogglebutton.switchbuttonview 
    android:id="@+id/switchbutton" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    /> 
</relativelayout> 

以上就是本文的全部内容，希望对大家的学习有所帮助。