Android自定义View实现分段选择按钮的实现代码
首先演示下效果,分段选择按钮,支持点击和滑动切换。
视图绘制过程中,要执行onMeasure
、onLayout
、onDraw
等方法,这也是自定义控件最常用到的几个方法。
onMeasure
:测量视图的大小,可以根据MeasureSpec的Mode确定父视图和子视图的大小。
onLayout
:确定视图的位置
onDraw
:绘制视图
这里就不做过多的介绍,主要介绍本控件涉及的到的部分。
1.1 获取item大小、起始位置
@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); if(isItemZero() || getMeasuredWidth() == 0) return; mHeight = getMeasuredHeight(); int width = getMeasuredWidth(); mItemWidth = (width - 2 * itemHorizontalMargin)/getCount(); mStart = itemHorizontalMargin + mItemWidth * selectedItem; mEnd = width - itemHorizontalMargin - mItemWidth; }
1.2 绘制
绘制背景,所有的Item,以及选中项
@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if(isItemZero()) return; drawBackgroundRect(canvas); drawUnselectedItemsText(canvas); drawSelectedItem(canvas); drawSelectedItemsText(canvas); }
* 绘制背景区域
背景区域就是个带圆角的长方形
/** * 画背景区域 * @param canvas */ private void drawBackgroundRect(Canvas canvas) { float r = cornersMode == Round?cornersRadius: mHeight >> 1; mPaint.setXfermode(null); mPaint.setColor(backgroundColor); mRectF.set(0, 0, getWidth(), getHeight()); canvas.drawRoundRect(mRectF, r, r, mPaint); }
* 绘制所有未选中Item的文字
轮流绘制所有Item的文字
/** * 画所有未选中Item的文字 * @param canvas */ private void drawUnselectedItemsText(Canvas canvas) { mTextPaint.setColor(textColor); mTextPaint.setXfermode(null); for (int i = 0; i< getCount(); i++){ int start = itemHorizontalMargin + i * mItemWidth; float x = start + (mItemWidth >> 1) - mTextPaint.measureText(getName(i))/2; float y = (getHeight() >> 1) - (mTextPaint.ascent() + mTextPaint.descent())/2; canvas.drawText(getName(i), x, y, mTextPaint); } }
* 绘制选中项
/** * 画选中项 * @param canvas */ private void drawSelectedItem(Canvas canvas) { float r = cornersMode == Round?cornersRadius: (mHeight >> 1) - itemVerticalMargin; mPaint.setColor(selectedItemBackgroundColor); mRectF.set(mStart, itemVerticalMargin, mStart + mItemWidth, getHeight() - itemVerticalMargin); canvas.drawRoundRect(mRectF, r, r, mPaint); }
* 绘制选中Item的文字
当选中项移动时,刚移动到下一个Item时,颜色应该是选中的颜色。这里在原来文字之上再画选中Item的文字颜色,就有了被选中的效果。
/** * 画选中Item的文字 * @param canvas */ private void drawSelectedItemsText(Canvas canvas) { canvas.saveLayer(mStart, 0, mStart + mItemWidth, getHeight(), null, Canvas.ALL_SAVE_FLAG); mTextPaint.setColor(selectedItemTextColor); mTextPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT)); int begin = mStart/mItemWidth; int end = (begin + 2) < getCount()?begin+2:getCount(); for (int i = begin; i< end; i++){ int start = itemHorizontalMargin + i * mItemWidth; float x = start + (mItemWidth >> 1) - mTextPaint.measureText(getName(i))/2; float y = (getHeight() >> 1) - (mTextPaint.ascent() + mTextPaint.descent())/2; canvas.drawText(getName(i), x, y, mTextPaint); } canvas.restore(); }
1.3 添加手势事件
手势分为三种,ACTION_DOWN、ACTION_MOVE、ACTION_UP,对应动作就是按下,滑动,按起。
当按下时确定按下位置,是在当前Item,则不做处理,当按下位置为其它Item位置,就滑动到其它Item位置。
当手势滑动时,计算相对滑动值,通过改变mStart
,改变选中项的位置。
当手势按起时,根据按下位置、速度和方向,判断是否可用移动到下一个Item。
@Override public boolean onTouchEvent(MotionEvent event) { if(!isEnabled() || !isInTouchMode() || getCount() == 0) return false; if (mVelocityTracker == null) { mVelocityTracker = VelocityTracker.obtain(); } mVelocityTracker.addMovement(event); int action = event.getActionMasked(); if(action == MotionEvent.ACTION_DOWN){ x = event.getX(); onClickDownPosition = -1; final float y = event.getY(); if(isItemInside(x, y)){ return scrollSelectEnabled; }else if(isItemOutside(x, y)){ if(!mScroller.isFinished()){ mScroller.abortAnimation(); } onClickDownPosition = (int) ((x - itemHorizontalMargin)/ mItemWidth); startScroll(positionStart(x)); return true; } return false; }else if(action == MotionEvent.ACTION_MOVE){ if(!mScroller.isFinished() || !scrollSelectEnabled){ return true; } float dx = event.getX() - x; if(Math.abs(dx) > MIN_MOVE_X){ mStart = (int) (mStart + dx); mStart = Math.min(Math.max(mStart, itemHorizontalMargin), mEnd); postInvalidate(); x = event.getX(); } return true; }else if(action == MotionEvent.ACTION_UP){ int newSelectedItem; float offset = (mStart - itemHorizontalMargin)%mItemWidth; float itemStartPosition = (mStart - itemHorizontalMargin) * 1.0f/ mItemWidth; if(!mScroller.isFinished() && onClickDownPosition != -1){ newSelectedItem = onClickDownPosition; }else{ if(offset == 0f){ newSelectedItem = (int)itemStartPosition; }else { VelocityTracker velocityTracker = mVelocityTracker; velocityTracker.computeCurrentVelocity(VELOCITY_UNITS, mMaximumFlingVelocity); int initialVelocity = (int) velocityTracker.getXVelocity(); float itemRate = offset/mItemWidth; if (isXVelocityCanMoveNextItem(initialVelocity, itemRate)){ newSelectedItem = initialVelocity > 0?(int)itemStartPosition+1:(int)itemStartPosition; }else { newSelectedItem = Math.round(itemStartPosition); } newSelectedItem = Math.max(Math.min(newSelectedItem, getCount() - 1), 0); startScroll(getXByPosition(newSelectedItem)); } } onStateChange(newSelectedItem); mVelocityTracker = null; onClickDownPosition = -1; return true; } return super.onTouchEvent(event); }
1.4 保存状态
当手机屏幕方向转换或者内存不足等情况下, 视图会重新加载,这样就会导致状态丢失。使用onSaveInstanceState
和onRestoreInstanceState
方法保存并恢复状态。
@Override public Parcelable onSaveInstanceState() { Parcelable parcelable = super.onSaveInstanceState(); SelectedItemState pullToLoadState = new SelectedItemState(parcelable); pullToLoadState.setSelectedItem(selectedItem); return pullToLoadState; } @Override public void onRestoreInstanceState(Parcelable state) { if(!(state instanceof SelectedItemState)) return; SelectedItemState pullToLoadState = ((SelectedItemState)state); super.onRestoreInstanceState(pullToLoadState.getSuperState()); selectedItem = pullToLoadState.getSelectedItem(); invalidate(); }
想要学习的同学,建议还是直接看项目源码。项目源码地址:https://github.com/danledian/SegmentedControl
到此这篇关于Android自定义View实现分段选择按钮的文章就介绍到这了,更多相关Android自定义View分段选择按钮内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 下面我们来看一篇关于Android子控件超出父控件的范围显示出来方法,希望这篇文章能够帮助到各位朋友,有碰到此问题的朋友可以进来看看哦。 <RelativeLayout xmlns:an...2016-10-02
Android开发中findViewById()函数用法与简化
findViewById方法在android开发中是获取页面控件的值了,有没有发现我们一个页面控件多了会反复研究写findViewById呢,下面我们一起来看它的简化方法。 Android中Fin...2016-09-20- 如果我们的项目需要做来电及短信的功能,那么我们就得在Android模拟器开发这些功能,本来就来告诉我们如何在Android模拟器上模拟来电及来短信的功能。 在Android模拟...2016-09-20
- 夜神android模拟器如何设置代理呢?对于这个问题其实操作起来是非常的简单,下面小编来为各位详细介绍夜神android模拟器设置代理的方法,希望例子能够帮助到各位。 app...2016-09-20
- 为了增强android应用的用户体验,我们可以在一些Button按钮上自定义动态的设置一些样式,比如交互时改变字体、颜色、背景图等。 今天来看一个通过重写Button来动态实...2016-09-20
- 如果我们要在Android应用APP中加载html5页面,我们可以使用WebView,本文我们分享两个WebView加载html5页面实例应用。 实例一:WebView加载html5实现炫酷引导页面大多...2016-09-20
- 深入理解Android中View和ViewGroup从组成架构上看,似乎ViewGroup在View之上,View需要继承ViewGroup,但实际上不是这样的。View是基类,ViewGroup是它的子类。本教程我们深...2016-09-20
- 下面我们来看一篇关于Android自定义WebView网络视频播放控件开发例子,这个文章写得非常的不错下面给各位共享一下吧。 因为业务需要,以下代码均以Youtube网站在线视...2016-10-02
- java开发的Android应用,性能一直是一个大问题,,或许是Java语言本身比较消耗内存。本文我们来谈谈Android 性能优化之MemoryFile文件读写。 Android匿名共享内存对外A...2016-09-20
- TextView默认是横着显示了,今天我们一起来看看Android设置TextView竖着显示如何来实现吧,今天我们就一起来看看操作细节,具体的如下所示。 在开发Android程序的时候,...2016-10-02
android.os.BinderProxy cannot be cast to com解决办法
本文章来给大家介绍关于android.os.BinderProxy cannot be cast to com解决办法,希望此文章对各位有帮助呀。 Android在绑定服务的时候出现java.lang.ClassCastExc...2016-09-20- 这篇文章主要介绍了Android 实现钉钉自动打卡功能的步骤,帮助大家更好的理解和学习使用Android,感兴趣的朋友可以了解下...2021-03-15
- 下面我们来看一篇关于Android 开发之布局细节对比:RTL模式 ,希望这篇文章对各位同学会带来帮助,具体的细节如下介绍。 前言 讲真,好久没写博客了,2016都过了一半了,赶紧...2016-10-02
- 首先如果要在程序中使用sdcard进行存储,我们必须要在AndroidManifset.xml文件进行下面的权限设置: 在AndroidManifest.xml中加入访问SDCard的权限如下: <!--...2016-09-20
- 下面来给各位简单的介绍一下关于Android开发之PhoneGap打包及错误解决办法,希望碰到此类问题的同学可进入参考一下哦。 在我安装、配置好PhoneGap项目的所有依赖...2016-09-20
用Intel HAXM给Android模拟器Emulator加速
Android 模拟器 Emulator 速度真心不给力,, 现在我们来介绍使用 Intel HAXM 技术为 Android 模拟器加速,使模拟器运行度与真机比肩。 周末试玩了一下在Eclipse中使...2016-09-20- 在安卓开发时我碰到一个问题就是需要实现全屏,但又需要我们来判断出用户是使用了全屏或非全屏了,下面我分别找了两段代码,大家可参考。 先来看一个android屏幕全屏实...2016-09-20
Android开发中布局中的onClick简单完成多控件时的监听的利与弊
本文章来为各位介绍一篇关于Android开发中布局中的onClick简单完成多控件时的监听的利与弊的例子,希望这个例子能够帮助到各位朋友. 首先在一个控件加上这么一句:and...2016-09-20Ubuntu 系统下安装Android开发环境 Android Studio 1.0 步骤
Android Studio 是一个Android开发环境,基于IntelliJ IDEA. 类似 Eclipse ADT,Android Studio 提供了集成的 Android 开发工具用于开发和调试,可以在Linux,Mac OS X,Window...2016-09-20- 这篇文章主要为大家详细介绍了Android实现简单用户注册案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-05-26