热门标签 | HotTags
当前位置:  开发笔记 > Android > 正文

Android自定义View实现分段选择按钮的实现代码

这篇文章主要介绍了Android自定义View实现分段选择按钮的实现代码,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

首先演示下效果,分段选择按钮,支持点击和滑动切换。

演示图

视图绘制过程中,要执行onMeasureonLayoutonDraw等方法,这也是自定义控件最常用到的几个方法。
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> 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) > 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 保存状态

当手机屏幕方向转换或者内存不足等情况下, 视图会重新加载,这样就会导致状态丢失。使用onSaveInstanceStateonRestoreInstanceState方法保存并恢复状态。

 @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分段选择按钮内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!


推荐阅读
  • 解决微信电脑版无法刷朋友圈问题:使用安卓远程投屏方案
    在工作期间想要浏览微信和朋友圈却不太方便?虽然微信电脑版目前不支持直接刷朋友圈,但通过远程投屏技术,可以轻松实现在电脑上操作安卓设备的功能。 ... [详细]
  • Vue 2 中解决页面刷新和按钮跳转导致导航栏样式失效的问题
    本文介绍了如何通过配置路由的 meta 字段,确保 Vue 2 项目中的导航栏在页面刷新或内部按钮跳转时,始终保持正确的 active 样式。具体实现方法包括设置路由的 meta 属性,并在 HTML 模板中动态绑定类名。 ... [详细]
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • 构建基于BERT的中文NL2SQL模型:一个简明的基准
    本文探讨了将自然语言转换为SQL语句(NL2SQL)的任务,这是人工智能领域中一项非常实用的研究方向。文章介绍了笔者在公司举办的首届中文NL2SQL挑战赛中的实践,该比赛提供了金融和通用领域的表格数据,并标注了对应的自然语言与SQL语句对,旨在训练准确的NL2SQL模型。 ... [详细]
  • 数据库内核开发入门 | 搭建研发环境的初步指南
    本课程将带你从零开始,逐步掌握数据库内核开发的基础知识和实践技能,重点介绍如何搭建OceanBase的开发环境。 ... [详细]
  • 本文介绍如何使用 Sortable.js 库实现元素的拖拽和位置交换功能。Sortable.js 是一个轻量级、无依赖的 JavaScript 库,支持拖拽排序、动画效果和多种插件扩展。通过简单的配置和事件处理,可以轻松实现复杂的功能。 ... [详细]
  • 探讨一个显示数字的故障计算器,它支持两种操作:将当前数字乘以2或减去1。本文将详细介绍如何用最少的操作次数将初始值X转换为目标值Y。 ... [详细]
  • Android LED 数字字体的应用与实现
    本文介绍了一种适用于 Android 应用的 LED 数字字体(digital font),并详细描述了其在 UI 设计中的应用场景及其实现方法。这种字体常用于视频、广告倒计时等场景,能够增强视觉效果。 ... [详细]
  • RecyclerView初步学习(一)
    RecyclerView初步学习(一)ReCyclerView提供了一种插件式的编程模式,除了提供ViewHolder缓存模式,还可以自定义动画,分割符,布局样式,相比于传统的ListVi ... [详细]
  • 扫描线三巨头 hdu1928hdu 1255  hdu 1542 [POJ 1151]
    学习链接:http:blog.csdn.netlwt36articledetails48908031学习扫描线主要学习的是一种扫描的思想,后期可以求解很 ... [详细]
  • 本文详细介绍了如何在 Spring Boot 应用中通过 @PropertySource 注解读取非默认配置文件,包括配置文件的创建、映射类的设计以及确保 Spring 容器能够正确加载这些配置的方法。 ... [详细]
  • This document outlines the recommended naming conventions for HTML attributes in Fast Components, focusing on readability and consistency with existing standards. ... [详细]
  • 在现代网络环境中,两台计算机之间的文件传输需求日益增长。传统的FTP和SSH方式虽然有效,但其配置复杂、步骤繁琐,难以满足快速且安全的传输需求。本文将介绍一种基于Go语言开发的新一代文件传输工具——Croc,它不仅简化了操作流程,还提供了强大的加密和跨平台支持。 ... [详细]
  • 从零开始构建完整手机站:Vue CLI 3 实战指南(第一部分)
    本系列教程将引导您使用 Vue CLI 3 构建一个功能齐全的移动应用。我们将深入探讨项目中涉及的每一个知识点,并确保这些内容与实际工作中的需求紧密结合。 ... [详细]
  • 本报告涵盖了个人博客账号和码云账号的注册过程,以及对网络工程专业学习的反思与展望。通过回顾初入大学时的专业选择,分析当前的专业知识和技能水平,并对未来的职业规划进行了详细讨论。 ... [详细]
author-avatar
qq2304944703
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有