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

效果图如下:只是我的一个简单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);
  }
 });
 }

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

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

Android自定义控件之刻度尺控件的更多相关文章

  1. html5 canvas合成海报所遇问题及解决方案总结

    这篇文章主要介绍了html5 canvas合成海报所遇问题及解决方案总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  2. html5借用repeating-linear-gradient实现一把刻度尺(ruler)

    这篇文章主要介绍了html5借用repeating-linear-gradient实现一把刻度尺,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  3. Html5 video标签视频的最佳实践

    这篇文章主要介绍了Html5 video标签视频的最佳实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  4. HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题

    HTML5在微信内置浏览器下,在右上角菜单的调整字体导致页面显示错乱的问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

  5. ios – containerURLForSecurityApplicationGroupIdentifier:在iPhone和Watch模拟器上给出不同的结果

    我使用默认的XCode模板创建了一个WatchKit应用程序.我向iOSTarget,WatchkitAppTarget和WatchkitAppExtensionTarget添加了应用程序组权利.(这是应用程序组名称:group.com.lombax.fiveminutes)然后,我尝试使用iOSApp和WatchKitExtension访问共享文件夹URL:延期:iOS应用:但是,测试NSURL

  6. Ionic – Splash Screen适用于iOS,但不适用于Android

    我有一个离子应用程序,其中使用CLI命令离子资源生成的启动画面和图标iOS版本与正在渲染的启动画面完美配合,但在Android版本中,只有在加载应用程序时才会显示白屏.我检查了config.xml文件,所有路径看起来都是正确的,生成的图像出现在相应的文件夹中.(我使用了splash.psd模板来生成它们.我错过了什么?这是config.xml文件供参考,我觉得我在这里做错了–解决方法在config.xml中添加以下键:它对我有用!

  7. ios – 无法启动iPhone模拟器

    /Library/Developer/CoreSimulator/Devices/530A44CB-5978-4926-9E91-E9DBD5BFB105/data/Containers/Bundle/Application/07612A5C-659D-4C04-ACD3-D211D2830E17/ProductName.app/ProductName然后,如果您在Xcode构建设置中选择标准体系结构并再次构建和运行,则会产生以下结果:dyld:lazysymbolbindingFailed:Symbol

  8. Xamarin iOS图像在Grid内部重叠

    heyo,所以在Xamarin我有一个使用并在其中包含一对,所有这些都包含在内.这在Xamarin.Android中看起来完全没问题,但是在Xamarin.iOS中,图像与标签重叠.我不确定它的区别是什么–为什么它在Xamarin.Android中看起来不错但在iOS中它的全部都不稳定?

  9. 在iOS上向后播放HTML5视频

    我试图在iPad上反向播放HTML5视频.HTML5元素包括一个名为playbackRate的属性,它允许以更快或更慢的速率或相反的方式播放视频.根据Apple’sdocumentation,iOS不支持此属性.通过每秒多次设置currentTime属性,可以反复播放,而无需使用playbackRate.这种方法适用于桌面Safari,但似乎在iOS设备上的搜索限制为每秒1次更新–在我的情况下太慢了.有没有办法在iOS设备上向后播放HTML5视频?解决方法iOS6Safari现在支持playbackRat

  10. 使用 Swift 语言编写 Android 应用入门

    Swift标准库可以编译安卓armv7的内核,这使得可以在安卓移动设备上执行Swift语句代码。做梦,虽然Swift编译器可以胜任在安卓设备上编译Swift代码并运行。这需要的不仅仅是用Swift标准库编写一个APP,更多的是你需要一些框架来搭建你的应用用户界面,以上这些Swift标准库不能提供。简单来说,构建在安卓设备上使用的Swiftstdlib需要libiconv和libicu。通过命令行执行以下命令:gitclonegit@github.com:SwiftAndroid/libiconv-libi

随机推荐

  1. Flutter 网络请求框架封装详解

    这篇文章主要介绍了Flutter 网络请求框架封装详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  2. Android单选按钮RadioButton的使用详解

    今天小编就为大家分享一篇关于Android单选按钮RadioButton的使用详解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧

  3. 解决android studio 打包发现generate signed apk 消失不见问题

    这篇文章主要介绍了解决android studio 打包发现generate signed apk 消失不见问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  4. Android 实现自定义圆形listview功能的实例代码

    这篇文章主要介绍了Android 实现自定义圆形listview功能的实例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  5. 详解Android studio 动态fragment的用法

    这篇文章主要介绍了Android studio 动态fragment的用法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. Android用RecyclerView实现图标拖拽排序以及增删管理

    这篇文章主要介绍了Android用RecyclerView实现图标拖拽排序以及增删管理的方法,帮助大家更好的理解和学习使用Android,感兴趣的朋友可以了解下

  7. Android notifyDataSetChanged() 动态更新ListView案例详解

    这篇文章主要介绍了Android notifyDataSetChanged() 动态更新ListView案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下

  8. Android自定义View实现弹幕效果

    这篇文章主要为大家详细介绍了Android自定义View实现弹幕效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  9. Android自定义View实现跟随手指移动

    这篇文章主要为大家详细介绍了Android自定义View实现跟随手指移动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. Android实现多点触摸操作

    这篇文章主要介绍了Android实现多点触摸操作,实现图片的放大、缩小和旋转等处理,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

返回
顶部