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;

/**
 * 卷尺控件类。由于时间比较紧,只有下班后有时间,因此只实现了基本功能。<br>
 * 细节问题包括滑动过程中widget边缘的刻度显示问题等<br>
 * @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
 *   刻度盘精度:<br>
 *   {@link MOD_TYPE_HALF}<br>
 *   {@link MOD_TYPE_ONE}<br>
 */
 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() < mWidth) {
 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 <= mMaxValue) {
  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));
  // linePaint.setColor(Color.rgb(68, 135, 188));
  canvas.drawLine(xPosition, getPaddingTop(), xPosition,
  mDensity * ITEM_MIN_HEIGHT, linePaint);
 }
 }
 // 后
 xPosition = (width / 2 - mMove) - i * mLineDivider * mDensity;
 if (xPosition > 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 ? 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 ? 0 : mValue;
 mValue = mValue > mMaxValue ? 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
  android:id="@+id/tv_values"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:padding="10dp"
  android:gravity="center"
  android:textColor="@android:color/holo_red_dark"/>
 <android.tst.com.myapplication.RulerView
  android:id="@+id/rv_view"
  android:layout_width="match_parent"
  android:layout_height="60dp"/>

<LinearLayout
 android:layout_width="match_parent"
 android:orientation="horizontal"
 android:layout_height="wrap_content">

 <Button
  android:id="@+id/btn_jia"
  android:layout_width="0dp"
  android:layout_height="wrap_content"
  android:text="+"
  android:textSize="25sp"
  android:gravity="center"
  android:layout_marginRight="15dp"
  android:layout_weight="1"/>
 <Button
  android:id="@+id/btn_jian"
  android:layout_width="0dp"
  android:layout_height="wrap_content"
  android:text="-"
  android:layout_marginLeft="15dp"
  android:textSize="25sp"
  android:gravity="center"
  android:layout_weight="1"/>
</LinearLayout>

如上根据效果图,我需要一个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);
   }
  });
 }

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

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

时间: 2020-06-18

Android实现滑动刻度尺效果

最近群里的开发人员咨询怎样实现刻度尺的滑动效果去选择身高体重等信息.给个横着的效果,自己试着去改编或者修改一下,看看通过自己的能力能不能做出竖着的效果来,过两天我再把竖着的那个滑动选择效果分享出来.废话不多说了,上代码. 效果图如下: 第一步:activity_mian.xml布局: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://s

Android实现滚动刻度尺效果

缘起 最近在帮人做一个计步器,其中涉及到身高.体重等信息的采集:我参考了众多app的实现,觉得"乐动力"中滑动刻度的方式比较优雅.于是乎,反编译了该app,结果发现它是采用图片的方式实现的,即ScrollView内嵌了一张带刻度的图片. 个人觉得该方式太不灵活,且对美工的依赖较大,于是便想自定义一个刻度尺控件. 需求分析 绘制刻度,区分整值刻度和普通刻度 红色指针始终在刻度尺的中间,表示当前的刻度 刻度的最大值和最小值可动态设置 刻度尺的高度或宽度可设置,设置后中间刻度不变 可滑动,滑

Android实现自定义滑动刻度尺方法示例

一 基础: 自定义View实现跟随手指滚动的刻度尺,实现了类似SeekBar的滑动选中效果.项目地址,欢迎star! UI图: 功能: 通过设置最小值跟最大值的范围,以及offset值.View将根据这些数据去计算出需要几个小刻度和几个长刻度,和每个长刻度上面显示的数值. 指针可以随意的定制. 当滑动停止后,刻度尺会根据四舍五入将距离指针最近的长刻度滑动到指针的位置. 支持范围越界回弹. 支持设置默认值. 二 实现: 先扯一下,再看别人写的控件的时候总有一种一脸懵逼的感觉,好多凌乱的变量和一大堆

Android编程自定义Dialog的方法分析

本文实例讲述了Android编程自定义Dialog的方法.分享给大家供大家参考,具体如下: 功能: android 提供给我们的只有2种Dialog 即 AlertDialog & ProgressDialog 但是 Dialog 有其自身的特点:1. 不是 Activity 2. 开销比 Activity 小得多 鉴于以上的优点 我们就有定制自己Dialog 的需求 原理: 1. android 系统提供了一个class: Dialog. 而且你可以把自己的工作放在"protected

Android EditText自定义样式的方法

本文实例讲述了Android EditText自定义样式的方法.分享给大家供大家参考,具体如下: 1.去掉边框 EditText的background属性设置为@null就搞定了:android:background="@null" style属性倒是可加可不加 附原文: @SlumberMachine, that's a great observation! But, it seems that there is more to making a TextView editable

Android编程自定义菜单实现方法详解

本文实例讲述了Android编程自定义菜单实现方法.分享给大家供大家参考,具体如下: 在android开发的过程中系统自带的菜单往往满足不了开发中的一些需求,比如说一排最多只能放置三个菜单,坐多只能放置6个,再多的话就会折叠起来,如果我们想再一排显示4个或5个菜单那么就要自己想办法处理. 这里我用布局的隐藏并加上动画来模拟菜单的效果. 要点: 1.隐藏和显示菜单,我使用了一个线性布局把菜单封装起来. <?xml version="1.0" encoding="utf-8

Android使用自定义字体的方法

本文实例讲述了Android使用自定义字体的方法.分享给大家供大家参考,具体如下: 一.问题: 作为android初学者,在做一个游戏,游戏的标题我用的是TextView,android只提供斜体粗体,但把字体设置成楷体游戏的界面会更好,怎么才能实现. 二.解决方法: 使用自定义字体 android Typeface使用TTF字体文件设置字体 我们可以在程序中放入ttf字体文件,在程序中使用Typeface设置字体. 第一步,在assets目录下新建fonts目录,把ttf字体文件放到这. 第二

Android webview转PDF的方法示例

1.网上找了好多没有显示出来效果不错,后来看到调用手机打印预览,看了效果还不错,就打算使用系统打印服务预览下载 2.'webView.createPrintDocumentAdapter()'得到打印的PrintDocumentAdapter有了该类就可以使用onWrite方法写入制定的文件,但是这个方法需要传入回调这个悲剧的是这个回调方法是hiden的我们没办法调用 3,字怎么解决呢,有连个方法 3.1 使用此开源库替换自己的sdk 中的android.jar文件,就可以使用了 https:/

Android编程自定义扁平化对话框示例

本文实例讲述了Android编程自定义扁平化对话框.分享给大家供大家参考,具体如下: 平时我们开发的大多数的Android.iOS的APP,它们的风格都是拟物化设计.如Android 4.X.iOS 7.WP8采用的是扁平化设计,可以看出扁平化设计是未来UI设计的趋势.其实扁平化设计要比拟物化设计要简单一点,扁平化设计更加的简约,给人视觉上更加舒服. Shamoo想到在Android平台上弄一个扁平化的对话框.参考过一篇帖子,然后改了一下. 这个Demo比较简单,首先是一个dialog的布局文件

Android编程自定义title bar(标题栏)示例

本文实例讲述了Android编程自定义title bar(标题栏)的方法.分享给大家供大家参考,具体如下: package com.test; import android.app.Activity; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.drawable.Drawable; import andr

Android编程实现自定义控件的方法示例

本文实例讲述了Android编程实现自定义控件的方法.分享给大家供大家参考,具体如下: 很多时候Android常用的控件不能满足我们的需求,那么我们就需要自定义一个控件了.今天做了一个自定义控件的实例,来分享下. 首先定义一个layout实现按钮内部布局: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.c

ANDROID中自定义对话框AlertDialog使用示例

在Android开发中,我们经常会需要在Android界面上弹出一些对话框,比如询问用户或者让用户选择.这些功能我们叫它Android Dialog对话框,AlertDialog实现方法为建造者模式.AlertDialog中定义的一些对话框往往无法满足我们关于对话框的需求,这时我们就需要通过自定义对话框VIEW来实现需求,这里我自定义一个登陆的提示对话框,效果图显示如下: Layout(alertdialog自定义登陆按钮)界面代码: <?xml version="1.0" en