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

Android自定义控件之刻度尺控件

这篇文章主要介绍了Android自定义控件之刻度尺控件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

今天我做的是一个自定义刻度尺控件,由于项目需求需要使用刻度尺那样滑动选择,由于对自定义控件的认识还不够深入,于是花了一周多时间才把这个控件给整出来,也是呕心沥血的经历啊,也让我对自定义控件有了自己的认识,废话不多说,先上一个简单的效果图,大家可以看看,如有需求可以直接拿去使用

效果图如下:只是我的一个简单Demo,效果有点丑陋了点,希望海涵!

效果已经出来接下来就是代码部分了,一看就只是一般的控件很难实现,于是就开始了我的自定义View之旅,每次自定义完后总是会收获很多东西,如下是我的代码:

package android.tst.com.myapplication;
 
import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.text.Layout;
import android.text.TextPaint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.VelocityTracker;
import android.view.View;
import android.view.ViewConfiguration;
import android.widget.Scroller;
 
/**
 * 卷尺控件类。由于时间比较紧,只有下班后有时间,因此只实现了基本功能。
* 细节问题包括滑动过程中widget边缘的刻度显示问题等
* @version create:2014年8月26日 */ @SuppressLint("ClickableViewAccessibility") public class RulerView extends View { public interface OnValueChangeListener { public void onValueChange(float value); } public static final int MOD_TYPE_HALF = 2; public static final int MOD_TYPE_OnE= 10; private static final int ITEM_HALF_DIVIDER = 10; private static final int ITEM_ONE_DIVIDER = 10; private static final int ITEM_MAX_HEIGHT = 20; private static final int ITEM_MIN_HEIGHT = 10; private static final int TEXT_SIZE = 7; private float mDensity; private int mValue = 50, mMaxValue = 100, mModType = MOD_TYPE_HALF, mLineDivider = ITEM_HALF_DIVIDER; // private int mValue = 50, mMaxValue = 500, mModType = MOD_TYPE_ONE, // mLineDivider = ITEM_ONE_DIVIDER; private int mLastX, mMove; private int mWidth, mHeight; private int mMinVelocity; private Scroller mScroller; private VelocityTracker mVelocityTracker; private OnValueChangeListener mListener; @SuppressWarnings("deprecation") public RulerView(Context context, AttributeSet attrs) { super(context, attrs); mScroller = new Scroller(getContext()); mDensity = getContext().getResources().getDisplayMetrics().density; mMinVelocity = ViewConfiguration.get(getContext()) .getScaledMinimumFlingVelocity(); } /** * * 考虑可扩展,但是时间紧迫,只可以支持两种类型效果图中两种类型 * * @param value * 初始值 * @param maxValue * 最大值 * @param model * 刻度盘精度:
* {@link MOD_TYPE_HALF}
* {@link MOD_TYPE_ONE}
*/ public void initViewParam(int defaultValue, int maxValue, int model) { switch (model) { case MOD_TYPE_HALF: mModType = MOD_TYPE_HALF; mLineDivider = ITEM_HALF_DIVIDER; mValue = defaultValue * 2; mMaxValue = maxValue * 2; break; case MOD_TYPE_ONE: mModType = MOD_TYPE_ONE; mLineDivider = ITEM_ONE_DIVIDER; mValue = defaultValue; mMaxValue = maxValue; break; default: break; } invalidate(); mLastX = 0; mMove = 0; notifyValueChange(); } /** * 设置用于接收结果的监听器 * * @param listener */ public void setValueChangeListener(OnValueChangeListener listener) { mListener = listener; } /** * 获取当前刻度值 * * @return */ public float getValue() { return mValue; } public void setValue(int value){ mValue = value; notifyValueChange(); postInvalidate(); } public void setValueToChange(int what) { mValue += what; notifyValueChange(); postInvalidate(); } @Override protected void onLayout(boolean changed, int left, int top, int right, int bottom) { mWidth = getWidth(); mHeight = getHeight(); super.onLayout(changed, left, top, right, bottom); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); drawScaleLine(canvas); // drawWheel(canvas); drawMiddleLine(canvas); } /** * 从中间往两边开始画刻度线 * * @param canvas */ private void drawScaleLine(Canvas canvas) { canvas.save(); Paint linePaint = new Paint(); linePaint.setStrokeWidth(2); linePaint.setColor(Color.rgb(141, 189, 225)); TextPaint textPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG); textPaint.setColor(Color.rgb(68, 135, 188)); textPaint.setTextSize(TEXT_SIZE * mDensity); int width = mWidth, drawCount = 0; float xPosition = 0, textWidth = Layout.getDesiredWidth("0", textPaint); for (int i = 0; drawCount <= 4 * width; i++) { int numSize = String.valueOf(mValue + i).length(); // 前 xPosition = (width / 2 - mMove) + i * mLineDivider * mDensity; if (xPosition + getPaddingRight() getPaddingLeft()) { if ((mValue - i) % mModType == 0) { linePaint.setColor(Color.rgb(68, 135, 188)); canvas.drawLine(xPosition, getPaddingTop(), xPosition, mDensity * ITEM_MAX_HEIGHT, linePaint); if (mValue - i >= 0) { switch (mModType) { case MOD_TYPE_HALF: canvas.drawText( String.valueOf((mValue - i) / 2), countLeftStart(mValue - i, xPosition, textWidth), getHeight() - textWidth, textPaint); break; case MOD_TYPE_ONE: canvas.drawText(String.valueOf(mValue - i), xPosition - (textWidth * numSize / 2), getHeight() - textWidth, textPaint); break; default: break; } } } else { linePaint.setColor(Color.rgb(141, 189, 225)); canvas.drawLine(xPosition, getPaddingTop(), xPosition, mDensity * ITEM_MIN_HEIGHT, linePaint); } } drawCount += 2 * mLineDivider * mDensity; } canvas.restore(); } /** * 计算没有数字显示位置的辅助方法 * * @param value * @param xPosition * @param textWidth * @return */ private float countLeftStart(int value, float xPosition, float textWidth) { float xp = 0f; if (value <20) { xp = xPosition - (textWidth * 1 / 2); } else { xp = xPosition - (textWidth * 2 / 2); } return xp; } /** * 画中间的红色指示线、阴影等。指示线两端简单的用了两个矩形代替 * * @param canvas */ private void drawMiddleLine(Canvas canvas) { // TOOD 常量太多,暂时放这,最终会放在类的开始,放远了怕很快忘记 int gap = 12, indexWidth = 2, indexTitleWidth = 24, indexTitleHight = 10, shadow = 6; String color = "#66999999"; canvas.save(); Paint redPaint = new Paint(); redPaint.setStrokeWidth(indexWidth); redPaint.setColor(Color.RED); canvas.drawLine(mWidth / 2, 0, mWidth / 2, mHeight, redPaint); canvas.restore(); } @Override public boolean onTouchEvent(MotionEvent event) { int action = event.getAction(); int xPosition = (int) event.getX(); if (mVelocityTracker == null) { mVelocityTracker = VelocityTracker.obtain(); } mVelocityTracker.addMovement(event); switch (action) { case MotionEvent.ACTION_DOWN: mScroller.forceFinished(true); mLastX = xPosition; mMove = 0; break; case MotionEvent.ACTION_MOVE: getParent().requestDisallowInterceptTouchEvent(true); mMove += (mLastX - xPosition); changeMoveAndValue(); break; case MotionEvent.ACTION_UP: case MotionEvent.ACTION_CANCEL: countMoveEnd(); countVelocityTracker(event); getParent().requestDisallowInterceptTouchEvent(false); return false; // break; default: break; } mLastX = xPosition; return true; } private void countVelocityTracker(MotionEvent event) { mVelocityTracker.computeCurrentVelocity(1000); float xVelocity = mVelocityTracker.getXVelocity(); if (Math.abs(xVelocity) > mMinVelocity) { mScroller.fling(0, 0, (int) xVelocity, 0, Integer.MIN_VALUE, Integer.MAX_VALUE, 0, 0); } } private void changeMoveAndValue() { int tValue = (int) (mMove / (mLineDivider * mDensity)); if (Math.abs(tValue) > 0) { mValue += tValue; mMove -= tValue * mLineDivider * mDensity; if (mValue <= 0 || mValue > mMaxValue) { mValue = mValue <= 0 &#63; 0 : mMaxValue; mMove = 0; mScroller.forceFinished(true); } notifyValueChange(); } postInvalidate(); } private void countMoveEnd() { int roundMove = Math.round(mMove / (mLineDivider * mDensity)); mValue = mValue + roundMove; mValue = mValue <= 0 &#63; 0 : mValue; mValue = mValue > mMaxValue &#63; mMaxValue : mValue; mLastX = 0; mMove = 0; notifyValueChange(); postInvalidate(); } private void notifyValueChange() { if (null != mListener) { if (mModType == MOD_TYPE_ONE) { mListener.onValueChange(mValue); } if (mModType == MOD_TYPE_HALF) { mListener.onValueChange(mValue / 2f); } } } @Override public void computeScroll() { super.computeScroll(); if (mScroller.computeScrollOffset()) { if (mScroller.getCurrX() == mScroller.getFinalX()) { // over countMoveEnd(); } else { int xPosition = mScroller.getCurrX(); mMove += (mLastX - xPosition); changeMoveAndValue(); mLastX = xPosition; } } } @Override public boolean dispatchTouchEvent(MotionEvent event) { getParent().requestDisallowInterceptTouchEvent(true); return super.dispatchTouchEvent(event); } }

这是我的自定义View部分的代码,下面就是在布局中的使用了


 
 

 
 

如上根据效果图,我需要一个TextView进行显示,还有就是我的自定义刻度尺控件了,接下来就是两个Button控件加减。

接下来就是在Activity中的使用了

首先需要一个Handler进行更新TextView中的值

Handler handler = new Handler() {
 @Override
 public void handleMessage(Message msg) {
  tv_values.setText(rv_view.getValue() + "Kg");
 };
 };

其次就是初始化相关的操作了

private void deployRulerView(){
 rv_view= (RulerView) findViewById(R.id.rv_view);
 btn_jia= (Button) findViewById(R.id.btn_jia);
 btn_jian= (Button) findViewById(R.id.btn_jian);
 tv_values= (TextView) findViewById(R.id.tv_values);
 //设置RulerView的初始值
 rv_view.setValue(60);
 //初始化刻度尺范围
 rv_view.initViewParam(60, 200, RulerView.MOD_TYPE_ONE);
 rv_view.setValueChangeListener(new RulerView.OnValueChangeListener() {
  @Override
  public void onValueChange(float value) {
  handler.sendMessage(new Message());
  }
 });
 tv_values.setText(60+"KG");
 //给两个控件添加监听事件
 btn_jia.setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View v) {
  rv_view.setValueToChange(1);
  }
 });
 btn_jian.setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View v) {
  rv_view.setValueToChange(-1);
  }
 });
 }

到这里整个过程已经完成了,如果不好的地方尽情吐槽,整个过程,最复杂的莫过于自定义中的绘制过程,但是一切的问题当你静下心好好去实现时,那一切的问题都就不存在了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


推荐阅读
  • 本文介绍了如何使用PHP向系统日历中添加事件的方法,通过使用PHP技术可以实现自动添加事件的功能,从而实现全局通知系统和迅速记录工具的自动化。同时还提到了系统exchange自带的日历具有同步感的特点,以及使用web技术实现自动添加事件的优势。 ... [详细]
  • Monkey《大话移动——Android与iOS应用测试指南》的预购信息发布啦!
    Monkey《大话移动——Android与iOS应用测试指南》的预购信息已经发布,可以在京东和当当网进行预购。感谢几位大牛给出的书评,并呼吁大家的支持。明天京东的链接也将发布。 ... [详细]
  • Android中高级面试必知必会,积累总结
    本文介绍了Android中高级面试的必知必会内容,并总结了相关经验。文章指出,如今的Android市场对开发人员的要求更高,需要更专业的人才。同时,文章还给出了针对Android岗位的职责和要求,并提供了简历突出的建议。 ... [详细]
  • android listview OnItemClickListener失效原因
    最近在做listview时发现OnItemClickListener失效的问题,经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效,还会导致单击后listview每个item的背景改变,使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况,并提供了解决方法。 ... [详细]
  • 本文讨论了Alink回归预测的不完善问题,指出目前主要针对Python做案例,对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法,以及Maven的相关知识。最后,对Alink回归预测的未来发展提出了期待。 ... [详细]
  • 本文讨论了如何优化解决hdu 1003 java题目的动态规划方法,通过分析加法规则和最大和的性质,提出了一种优化的思路。具体方法是,当从1加到n为负时,即sum(1,n)sum(n,s),可以继续加法计算。同时,还考虑了两种特殊情况:都是负数的情况和有0的情况。最后,通过使用Scanner类来获取输入数据。 ... [详细]
  • 本文讲述了如何通过代码在Android中更改Recycler视图项的背景颜色。通过在onBindViewHolder方法中设置条件判断,可以实现根据条件改变背景颜色的效果。同时,还介绍了如何修改底部边框颜色以及提供了RecyclerView Fragment layout.xml和项目布局文件的示例代码。 ... [详细]
  • 本文介绍了C#中数据集DataSet对象的使用及相关方法详解,包括DataSet对象的概述、与数据关系对象的互联、Rows集合和Columns集合的组成,以及DataSet对象常用的方法之一——Merge方法的使用。通过本文的阅读,读者可以了解到DataSet对象在C#中的重要性和使用方法。 ... [详细]
  • 本文介绍了OC学习笔记中的@property和@synthesize,包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
  • Mac OS 升级到11.2.2 Eclipse打不开了,报错Failed to create the Java Virtual Machine
    本文介绍了在Mac OS升级到11.2.2版本后,使用Eclipse打开时出现报错Failed to create the Java Virtual Machine的问题,并提供了解决方法。 ... [详细]
  • 在说Hibernate映射前,我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象,以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]
  • baresip android编译、运行教程1语音通话
    本文介绍了如何在安卓平台上编译和运行baresip android,包括下载相关的sdk和ndk,修改ndk路径和输出目录,以及创建一个c++的安卓工程并将目录考到cpp下。详细步骤可参考给出的链接和文档。 ... [详细]
  • 【Windows】实现微信双开或多开的方法及步骤详解
    本文介绍了在Windows系统下实现微信双开或多开的方法,通过安装微信电脑版、复制微信程序启动路径、修改文本文件为bat文件等步骤,实现同时登录两个或多个微信的效果。相比于使用虚拟机的方法,本方法更简单易行,适用于任何电脑,并且不会消耗过多系统资源。详细步骤和原理解释请参考本文内容。 ... [详细]
  • Android Studio Bumblebee | 2021.1.1(大黄蜂版本使用介绍)
    本文介绍了Android Studio Bumblebee | 2021.1.1(大黄蜂版本)的使用方法和相关知识,包括Gradle的介绍、设备管理器的配置、无线调试、新版本问题等内容。同时还提供了更新版本的下载地址和启动页面截图。 ... [详细]
  • 本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤,包括在application.properties配置文件中添加thymeleaf的配置信息,引入thymeleaf的jar包,以及创建PageController并添加index方法。 ... [详细]
author-avatar
qiaoyan1984_868
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有