android自定义标尺,Android自定义标尺滑动选择值效果

曾经终败给现在 2022-10-16 05:00 238阅读 0赞

Android自定义标尺滑动选择值效果

发布时间：2020-10-16 07:40:15

来源：脚本之家

阅读：130

作者：676598624

本文实例为大家分享了Android实现滑动标尺选择值，效果图

![6ea7e9acd8dcb489006645a1557316c3.png][]

1.自定义属性attrs.xml

2.自定义RulerView

import android.content.Context;

import android.content.res.TypedArray;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.util.AttributeSet;

import android.view.MotionEvent;

import android.view.VelocityTracker;

import android.view.View;

import android.view.ViewConfiguration;

import android.widget.Scroller;

public class RulerView extends View \{

private int mMinVelocity;

private Scroller mScroller; //Scroller是一个专门用于处理滚动效果的工具类 用mScroller记录/计算View滚动的位置，再重写View的computeScroll()，完成实际的滚动

private VelocityTracker mVelocityTracker; //主要用跟踪触摸屏事件(flinging事件和其他gestures手势事件)的速率。

private int mWidth;

private int mHeight;

private float mSelectorValue = 50.0f; // 未选择时 默认的值 滑动后表示当前中间指针正在指着的值

private float mMaxValue = 200; // 最大数值

private float mMinValue = 100.0f; //最小的数值

private float mPerValue = 1; //最小单位 如 1:表示 每2条刻度差为1. 0.1:表示 每2条刻度差为0.1

// 在demo中 身高mPerValue为1 体重mPerValue 为0.1

private float mLineSpaceWidth = 5; // 尺子刻度2条线之间的距离

private float mLineWidth = 4; // 尺子刻度的宽度

private float mLineMaxHeight = 420; // 尺子刻度分为3中不同的高度。 mLineMaxHeight表示最长的那根(也就是 10的倍数时的高度)

private float mLineMidHeight = 30; // mLineMidHeight 表示中间的高度(也就是 5 15 25 等时的高度)

private float mLineMinHeight = 17; // mLineMinHeight 表示最短的那个高度(也就是 1 2 3 4 等时的高度)

private float mTextMarginTop = 10; //o

private float mTextSize = 30; //尺子刻度下方数字 textsize

private boolean mAlphaEnable = false; // 尺子 最左边 最后边是否需要透明 (透明效果更好点)

private float mTextHeight; //尺子刻度下方数字 的高度

private Paint mTextPaint; // 尺子刻度下方数字( 也就是每隔10个出现的数值) paint

private Paint mLinePaint; // 尺子刻度 paint

private int mTotalLine; //共有多少条 刻度

private int mMaxOffset; //所有刻度 共有多长

private float mOffset; // 默认状态下，mSelectorValue所在的位置 位于尺子总刻度的位置

private int mLastX, mMove;

private OnValueChangeListener mListener; // 滑动后数值回调

private int mLineColor = Color.GRAY; //刻度的颜色

private int mTextColor = Color.BLACK; //文字的颜色

public RulerView(Context context) \{

this(context, null);

public RulerView(Context context, AttributeSet attrs) \{

this(context, attrs, 0);

public RulerView(Context context, AttributeSet attrs, int defStyleAttr) \{

super(context, attrs, defStyleAttr);

init(context, attrs);

protected void init(Context context, AttributeSet attrs) \{

mScroller = new Scroller(context);

this.mLineSpaceWidth = myfloat(25.0F);

this.mLineWidth = myfloat(2.0F);

this.mLineMaxHeight = myfloat(100.0F);

this.mLineMidHeight = myfloat(60.0F);

this.mLineMinHeight = myfloat(40.0F);

this.mTextHeight = myfloat(40.0F);

final TypedArray typedArray = context.obtainStyledAttributes(attrs,

R.styleable.RulerView);

mAlphaEnable = typedArray.getBoolean(R.styleable.RulerView\_alphaEnable, mAlphaEnable);

mLineSpaceWidth = typedArray.getDimension(R.styleable.RulerView\_lineSpaceWidth, mLineSpaceWidth);

mLineWidth = typedArray.getDimension(R.styleable.RulerView\_lineWidth, mLineWidth);

mLineMaxHeight = typedArray.getDimension(R.styleable.RulerView\_lineMaxHeight, mLineMaxHeight);

mLineMidHeight = typedArray.getDimension(R.styleable.RulerView\_lineMidHeight, mLineMidHeight);

mLineMinHeight = typedArray.getDimension(R.styleable.RulerView\_lineMinHeight, mLineMinHeight);

mLineColor = typedArray.getColor(R.styleable.RulerView\_lineColor, mLineColor);

mTextSize = typedArray.getDimension(R.styleable.RulerView\_textSize, mTextSize);

mTextColor = typedArray.getColor(R.styleable.RulerView\_textColor, mTextColor);

mTextMarginTop = typedArray.getDimension(R.styleable.RulerView\_textMarginTop, mTextMarginTop);

mSelectorValue = typedArray.getFloat(R.styleable.RulerView\_selectorValue, 0.0f);

mMinValue = typedArray.getFloat(R.styleable.RulerView\_minValue, 0.0f);

mMaxValue = typedArray.getFloat(R.styleable.RulerView\_maxValue, 100.0f);

mPerValue = typedArray.getFloat(R.styleable.RulerView\_perValue, 0.1f);

mMinVelocity = ViewConfiguration.get(getContext()).getScaledMinimumFlingVelocity();

mTextPaint = new Paint(Paint.ANTI\_ALIAS\_FLAG);

mTextPaint.setTextSize(mTextSize);

mTextPaint.setColor(mTextColor);

mTextHeight = getFontHeight(mTextPaint);

mLinePaint = new Paint(Paint.ANTI\_ALIAS\_FLAG);

mLinePaint.setStrokeWidth(mLineWidth);

mLinePaint.setColor(mLineColor);

// setValue(1990, 1940, 2016, 1);

public static int myfloat(float paramFloat) \{

return (int) (0.5F + paramFloat \* 1.0f);

private float getFontHeight(Paint paint) \{

Paint.FontMetrics fm = paint.getFontMetrics();

return fm.descent - fm.ascent;

/\*\*

\* @param selectorValue 未选择时 默认的值 滑动后表示当前中间指针正在指着的值

\* @param minValue 最大数值

\* @param maxValue 最小的数值

\* @param per 最小单位 如 1:表示 每2条刻度差为1. 0.1:表示 每2条刻度差为0.1 在demo中 身高mPerValue为1 体重mPerValue 为0.1

\*/

public void setValue(float selectorValue, float minValue, float maxValue, float per) \{

this.mSelectorValue = selectorValue;

this.mMaxValue = maxValue;

this.mMinValue = minValue;

this.mPerValue = (int) (per \* 10.0f);

this.mTotalLine = ((int) ((mMaxValue \* 10 - mMinValue \* 10) / mPerValue)) + 1;

mMaxOffset = (int) (-(mTotalLine - 1) \* mLineSpaceWidth);

mOffset = (mMinValue - mSelectorValue) / mPerValue \* mLineSpaceWidth \* 10;

invalidate();

setVisibility(VISIBLE);

public void setOnValueChangeListener(OnValueChangeListener listener) \{

mListener = listener;

@Override

protected void onSizeChanged(int w, int h, int oldw, int oldh) \{

super.onSizeChanged(w, h, oldw, oldh);

if (w > 0 && h > 0) \{

mWidth = w;

mHeight = h;

@Override

protected void onDraw(Canvas canvas) \{

super.onDraw(canvas);

float left, height;

String value;

int alpha = 0;

float scale;

int srcPointX = mWidth / 2;

for (int i = 0; i < mTotalLine; i++) \{

left = srcPointX + mOffset + i \* mLineSpaceWidth;

if (left < 0 || left > mWidth) \{

continue; // 先画默认值在正中间，左右各一半的view。 多余部分暂时不画(也就是从默认值在中间，画旁边左右的刻度线)

/\*文字\*/

if (i % 10 == 0) \{

value = String.valueOf((int) (mMinValue + i \* mPerValue / 10));

if (mAlphaEnable) \{

mTextPaint.setAlpha(alpha);

canvas.drawText(value, left - mTextPaint.measureText(value) / 2,

mTextHeight, mTextPaint); // 在为整数时,画 数值

/\*线条\*/

if (i % 10 == 0) \{

height = mLineMinHeight;

\} else if (i % 5 == 0) \{

height = mLineMidHeight;

\} else \{

height = mLineMaxHeight;

if (mAlphaEnable) \{

scale = 1 - Math.abs(left - srcPointX) / srcPointX;

alpha = (int) (255 \* scale \* scale);

mLinePaint.setAlpha(alpha);

canvas.drawLine(left, mLineMaxHeight + mTextMarginTop + mTextHeight, left, height, mLinePaint);

@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:

mMove = (mLastX - xPosition);

changeMoveAndValue();

break;

case MotionEvent.ACTION\_UP:

case MotionEvent.ACTION\_CANCEL:

countMoveEnd();

countVelocityTracker();

return false;

default:

break;

mLastX = xPosition;

return true;

private void countVelocityTracker() \{

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);

/\*\*

\* 滑动结束后，若是指针在2条刻度之间时，改变mOffset 让指针正好在刻度上。

\*/

private void countMoveEnd() \{

mOffset -= mMove;

if (mOffset <= mMaxOffset) \{

mOffset = mMaxOffset;

\} else if (mOffset >= 0) \{

mOffset = 0;

mLastX = 0;

mMove = 0;

mSelectorValue = mMinValue + Math.round(Math.abs(mOffset) \* 1.0f / mLineSpaceWidth) \* mPerValue / 10.0f;

mOffset = (mMinValue - mSelectorValue) \* 10.0f / mPerValue \* mLineSpaceWidth;

notifyValueChange();

postInvalidate();

/\*\*

\* 滑动后的操作

\*/

private void changeMoveAndValue() \{

mOffset -= mMove;

if (mOffset <= mMaxOffset) \{

mOffset = mMaxOffset;

mMove = 0;

mScroller.forceFinished(true);

\} else if (mOffset >= 0) \{

mOffset = 0;

mMove = 0;

mScroller.forceFinished(true);

mSelectorValue = mMinValue + Math.round(Math.abs(mOffset) \* 1.0f / mLineSpaceWidth) \* mPerValue / 10.0f;

notifyValueChange();

postInvalidate();

private void notifyValueChange() \{

if (null != mListener) \{

mListener.onValueChange(mSelectorValue);

/\*\*

\* 滑动后的回调

\*/

public interface OnValueChangeListener \{

void onValueChange(float value);

@Override

public void computeScroll() \{

super.computeScroll();

if (mScroller.computeScrollOffset()) \{ //mScroller.computeScrollOffset()返回 true表示滑动还没有结束

if (mScroller.getCurrX() == mScroller.getFinalX()) \{

countMoveEnd();

\} else \{

int xPosition = mScroller.getCurrX();

mMove = (mLastX - xPosition);

changeMoveAndValue();

mLastX = xPosition;

3.xml中使用activity\_main.xml

xmlns:app="http://schemas.android.com/apk/res-auto"

android:layout\_width="match\_parent"

android:layout\_height="match\_parent"

android:orientation="vertical">

android:layout\_width="fill\_parent"

android:layout\_height="fill\_parent"

android:gravity="center\_horizontal"

android:orientation="vertical"

android:visibility="visible">

android:layout\_width="wrap\_content"

android:layout\_height="wrap\_content"

android:includeFontPadding="false"

android:maxHeight="17.0sp"

android:text="身高(cm)"

android:textColor="\#cc222222"

android:textSize="15.0sp" />

android:id="@+id/tv\_info\_height\_value"

android:layout\_width="wrap\_content"

android:layout\_height="wrap\_content"

android:layout\_marginTop="11.0dip"

android:includeFontPadding="false"

android:maxHeight="24.0sp"

android:textColor="\#cc222222"

android:textSize="24.0sp" />

android:layout\_width="fill\_parent"

android:layout\_height="wrap\_content">

android:id="@+id/ruler\_height"

android:layout\_width="fill\_parent"

android:layout\_height="68.0dip"

android:layout\_marginTop="24.0dip"

app:alphaEnable="true"

app:lineColor="@color/gray"

app:lineMaxHeight="40dp"

app:lineMidHeight="30dp"

app:lineMinHeight="20dp"

app:lineSpaceWidth="10dp"

app:lineWidth="2dip"

app:maxValue="250.0"

app:minValue="80.0"

app:perValue="1"

app:textColor="@color/black" />

android:layout\_width="14.0dip"

android:layout\_height="46.0dip"

android:layout\_centerHorizontal="true"

android:layout\_marginTop="40.0dip"

android:scaleType="fitXY"

android:src="@drawable/info\_ruler" />

android:id="@+id/click"

android:layout\_width="match\_parent"

android:layout\_height="wrap\_content"

android:layout\_marginTop="10dp"

android:text="点击改变" />

4.Activity中使用MainActivity

public class MainActivity extends AppCompatActivity \{

private int maxValue = 250;

private int minValue = 80;

private RulerView rulerHeight;

private TextView tvHeightValue;

@Override

protected void onCreate(Bundle savedInstanceState) \{

super.onCreate(savedInstanceState);

setContentView(R.layout.activity\_main);

rulerHeight = (RulerView) findViewById(R.id.ruler\_height);

tvHeightValue = (TextView) findViewById(R.id.tv\_info\_height\_value);

showNumInt();

findViewById(R.id.click).setOnClickListener(new View.OnClickListener() \{

@Override

public void onClick(View view) \{

showNumInt();

\});

rulerHeight.setOnValueChangeListener(new RulerView.OnValueChangeListener() \{

@Override

public void onValueChange(float value) \{

tvHeightValue.setText(String.valueOf(value));

\});

private void showNumInt() \{

Random rand = new Random();

int value = rand.nextInt(maxValue - minValue + 1) + minValue;

rulerHeight.setValue(value, minValue, maxValue, 1);

tvHeightValue.setText(String.valueOf(Integer.valueOf(value)));

PS:可自行根据需要绘制线条和文字，上下选择文字位置。

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

[6ea7e9acd8dcb489006645a1557316c3.png]: /images/20221014/c7dd8cc5e7b34c2da022d39404d4ec47.png

android自定义标尺,Android自定义标尺滑动选择值效果

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Android 滑动效果高级篇（八）—— 自定义控件

相关小程序实现标尺滑动

相关 adapter android自定义,Android:自定义ListAdapter

相关 android状态栏自定义,[Android开发]Android 自定义状态栏通知

相关 android自定义标尺,Android自定义标尺滑动选择值效果

相关 android自定义view圆,Android自定义View实现圆形环绕效果

相关 android自定义权限,Android 自定义权限详解

相关 Android 自定义ViewPager的滑动速度

相关 Android自定义的FloatingActionButton效果

相关 Qt编写自定义控件2-进度条标尺