自定义滑动按钮为例图文剖析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>

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

时间： 2024-09-11 10:00:07

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

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

自定义View一直是横在Android开发者面前的一道坎. 一.View和ViewGroup的关系 从View和ViewGroup的关系来看,ViewGroup继承View. View的子类,多是功能型的控件,提供绘制的样式,比如imageView,TextView等,而ViewGroup的子类,多用于管理控件的大小,位置,如LinearLayout,RelativeLayout等,从下图可以看出 从实际应用中看,他们又是组合关系,我们在布局中,常常是一个ViewGroup嵌套多个ViewGro

android之View绘制

Android系统的视图结构的设计也采用了组合模式,即View作为所有图形的基类,Viewgroup对View继承扩展为视图容器类,由此就得到了视图部分的基本结构--树形结构 View定义了绘图的基本操作 基本操作由三个函数完成:measure().layout().draw(),其内部又分别包含了onMeasure().onLayout().onDraw()三个子方法.具体操作如下: 1.measure操作      measure操作主要用于计算视图的大小,即视图的宽度和长度.在view中定

Android自定义View实现拖动选择按钮_Android

本文为大家分享了Android实现拖动选择按钮的具体代码,供大家参考,具体内容如下 效果图 View代码 第一步:自定义属性 <declare-styleable name="DragView"> <attr name="icon_drag" format="reference"/> <attr name="color_circle" format="color"/> &

Android自定义View之实现理财类APP七日年化收益折线图效果

这段时间的自定义View学习,学会了绘制柱状图.绘制折线图.绘制进度控件,那我们今天就来聊聊另外一种自定义的View,这就是我们常见的七日年化收益折线图效果.先看看长什么样. 这就是效果图了,元素相对而言还是比较多的,这里有线.柱状图.文字.折线.点等等.看起来好像很复杂,但是呢,只要一步一步的实现,那还是可以达到这种效果的,之前我们说过的, 自定义View,就像是在photo shop里面画图,想要什么就画什么,我们可以有很多的画笔工具,也可以有很多的图层. 先看看我们这一次用到哪些变量. P

Android开发自定义View之滑动按钮与自定义属性

写博客辛苦了,转载的朋友请标明出处哦,finddreams:(http://blog.csdn.net/finddreams/article/details/40392975)        话不多说,先运行效果图:                  谈到自定义View,我们都知道Android系统原生内置不少的View控件,常用的有:        文本控件TextView和EditText,图片控件ImageView,按钮控件 Button和 ImageButton,进度条ProgressB

Android自定义GridView显示一行并且可以左右滑动

最近做一个类似滑动菜单栏的title,绑定数据源用的是GrildView,想要实现 横着滑动并且GrildView只显示一行.最终采用代码形式在Activity中动态的添加 布局实现. ViewGroup.LayoutParams params = dishtype.getLayoutParams(); // dishtype,welist为ArrayList int dishtypes = welist.size(); params.width = 115 * dishtypes; Log.d

Android 自定义 HorizontalScrollView 打造再多图片（控件）也不怕 OOM 的横向滑动效果

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38140505 自从Gallery被谷歌废弃以后,Google推荐使用ViewPager和HorizontalScrollView来实现Gallery的效果.的确HorizontalScrollView可以实现Gallery的效果,但是HorizontalScrollView存在一个很大的问题,如果你仅是用来展示少量的图片,应该是没问题的,但是如果我希望HorizontalScr

事件-Android 要做一个滑动按钮 如图

问题描述 Android 要做一个滑动按钮 如图 要求:向上推或向下拉会触发Action move事件,松手按钮弹回,提供点思路卡了好久了,请高人支招. 解决方案 onTouch监听,view跟着手势在y轴移动,设一个阈值,移动距离超过该值就认为是滑到位了,没达到,Action.up时就让他回到原位,设置回去时的速度快一点就有弹回的效果了. 解决方案二: 没悬赏,没有动力的说 解决方案三: 自定义view 根据手势计算位置 up的时候计算是往上还是往下

Android自定义View实现左右滑动选择出生年份_Android

自定义view的第三篇,模仿的是微博运动界面的个人出生日期设置view,先看看我的效果图: 支持设置初始年份,左右滑动选择出生年份,对应的TextView的值也会改变.这个动画效果弄了好久,感觉还是比较生硬,与微博那个还是有点区别.大家有改进的方案,欢迎一起交流. 自定义View四部曲,这里依旧是这个套路,看看怎么实现的. 1.自定义view的属性: 在res/values/ 下建立一个attrs.xml , 在里面定义我们的属性以及声明我们的整个样式. <?xml version="1.