android 滚轮刻度尺的实现

遇到一个需求需要实现如下图的效果：

卷尺，通过左右滑动来选择不同的刻度值。这方面的东西以前没弄过，以目前你的能力，想了几种思路都死在了半路上。比如上面的刻度线如何弄，滑动的时候又该如何弄；下面的数字又如何弄；看起来像圆圈的效果该如何弄。时间紧迫，就俩晚上的时间。没有好的思路就参考别人的先吧，说来也巧，两天前刚看过一个日期选择控件，还有以前看的一个仿IPhone滚动控件，效果类似：

本想找作者傲慢的上校交流下，但是时间比较紧，源码都给了也不是很好意思。大致的浏览了下，可能涉及下面几个东西：

1、背景：这个用shape实现。之前有研究过，也用过，但是还没实现过要求的效果；

2、刻度和数字：这个就不要乱想了，直接draw。相对来说还是比较简单的，就是画直线和数字；

3、滚动：滚动的时候不停的重绘实现一个滚动的效果。弄过，但是不确定实现的是啥样的效果；

4、快速滚动：Scroller和VelocityTracker可能是需要用到的东西。几乎完全没弄过，骚年，学习吧（需求的要求中，这个优先级可以最低）；

5、需求：刻度的单位是可以变的，比如十格一个单位，或者两格一个单位，在或者可以是任意的（这个前期思路没想好，实现起来就困难了，最后只弄了两种）。

其实，到了这一步基本上就已经可以实现了，看个最终效果先：

下面就一步一步来。在这之前还有个地方要说的，就是控件的接口：对外提供一个方法实现控件初始化和接收控件选择的值：显示的单位，最大值，最小值，当前值，回调接口。有了这些，先从最难的入手。首先，实现刻度和数字，并可以滑动。这个地方很关键，每个人有每个人的思路，而且思路的好坏直接影响到后面对不同单位的实现。目前的思路是根据当前显示的数值mValue，从控件中间向两边画刻度线，滑动的时候同时改变显示的值mValue，不足最小刻度的四舍五入：

	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);

		drawScaleLine(canvas);
		// drawWheel(canvas);
		drawMiddleLine(canvas);
	}

	private void drawWheel(Canvas canvas) {
		Drawable wheel = getResources().getDrawable(R.drawable.bg_wheel);
		wheel.setBounds(0, 0, getWidth(), getHeight());
		wheel.draw(canvas);
	}

	/**
	 * 从中间往两边开始画刻度线
	 *
	 * @param canvas
	 */
	private void drawScaleLine(Canvas canvas) {
		canvas.save();

		Paint linePaint = new Paint();
		linePaint.setStrokeWidth(2);
		linePaint.setColor(Color.BLACK);

		TextPaint textPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
		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) {
					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 {
					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) {
					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 {
					canvas.drawLine(xPosition, getPaddingTop(), xPosition, mDensity * ITEM_MIN_HEIGHT, linePaint);
				}
			}

			drawCount += 2 * mLineDivider * mDensity;
		}

		canvas.restore();
	}

接着就是滑动的加速问题，这里用到两个类Scroller和VelocityTracker，关于这两个类之后有机会会详细介绍，这里简单提下：VelocityTracker的作用是在用户加速滑动时计算该滑动多远，拿到这个之后通过Scroller来执行滑动过程的计算，最后是真实的“移动”——根据mValue的值进行重绘：

	@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(event);
			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;
			}
		}
	}

最后就是圆圈背景的实现。这个用shape来做，可以使用setBackgroundDrawable()来做，也可以在draw中进行直接绘制，效果相同。其他的还有一些细节问题，比如滑动时刻度线超过边界，滑动距离大时候显示不完整等问题，这个只有做了才会发现。下面是shape背景的代码：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <!-- two set color way -->
    <gradient
        android:angle="0"
        android:centerColor="#66FFFFFF"
        android:endColor="#66AAAAAA"
        android:startColor="#66AAAAAA" />

    <corners android:radius="6dp" />

    <stroke
        android:width="6dp"
        android:color="#FF666666" />

</shape>

用代码可以这样写：

	private GradientDrawable createBackground() {
		float strokeWidth = 4 * mDensity; // 边框宽度
		float roundRadius = 6 * mDensity; // 圆角半径
		int strokeColor = Color.parseColor("#FF666666");// 边框颜色
		// int fillColor = Color.parseColor("#DFDFE0");// 内部填充颜色

		setPadding((int)strokeWidth, (int)strokeWidth, (int)strokeWidth, 0);

		int colors[] = { 0xFF999999, 0xFFFFFFFF, 0xFF999999 };// 分别为开始颜色，中间夜色，结束颜色
		GradientDrawable bgDrawable = new GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT, colors);// 创建drawable
		// bgDrawable.setColor(fillColor);
		bgDrawable.setCornerRadius(roundRadius);
		bgDrawable.setStroke((int)strokeWidth, strokeColor);
		// setBackgroundDrawable(gd);
		return bgDrawable;
	}

最后在来贴一下完整的代码：

package com.ttdevs.wheel.widget;

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.GradientDrawable;
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;

import com.ttdevs.wheel.R;

/**
 * 卷尺控件类。由于时间比较紧，只有下班后有时间，因此只实现了基本功能。<br>
 * 细节问题包括滑动过程中widget边缘的刻度显示问题等<br>
 *
 * 周末有时间会继续更新<br>
 *
 * @author ttdevs
 * @version create：2014年8月26日
 */
@SuppressLint("ClickableViewAccessibility")
public class TuneWheel 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 = 40;
	private static final int ITEM_ONE_DIVIDER = 10;

	private static final int ITEM_MAX_HEIGHT = 50;
	private static final int ITEM_MIN_HEIGHT = 20;

	private static final int TEXT_SIZE = 18;

	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 TuneWheel(Context context, AttributeSet attrs) {
		super(context, attrs);

		mScroller = new Scroller(getContext());
		mDensity = getContext().getResources().getDisplayMetrics().density;

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

		// setBackgroundResource(R.drawable.bg_wheel);
		setBackgroundDrawable(createBackground());
	}

	private GradientDrawable createBackground() {
		float strokeWidth = 4 * mDensity; // 边框宽度
		float roundRadius = 6 * mDensity; // 圆角半径
		int strokeColor = Color.parseColor("#FF666666");// 边框颜色
		// int fillColor = Color.parseColor("#DFDFE0");// 内部填充颜色

		setPadding((int)strokeWidth, (int)strokeWidth, (int)strokeWidth, 0);

		int colors[] = { 0xFF999999, 0xFFFFFFFF, 0xFF999999 };// 分别为开始颜色，中间夜色，结束颜色
		GradientDrawable bgDrawable = new GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT, colors);// 创建drawable
		// bgDrawable.setColor(fillColor);
		bgDrawable.setCornerRadius(roundRadius);
		bgDrawable.setStroke((int)strokeWidth, strokeColor);
		// setBackgroundDrawable(gd);
		return bgDrawable;
	}

	/**
	 *
	 * 考虑可扩展，但是时间紧迫，只可以支持两种类型效果图中两种类型
	 *
	 * @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;
	}

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

	private void drawWheel(Canvas canvas) {
		Drawable wheel = getResources().getDrawable(R.drawable.bg_wheel);
		wheel.setBounds(0, 0, getWidth(), getHeight());
		wheel.draw(canvas);
	}

	/**
	 * 从中间往两边开始画刻度线
	 *
	 * @param canvas
	 */
	private void drawScaleLine(Canvas canvas) {
		canvas.save();

		Paint linePaint = new Paint();
		linePaint.setStrokeWidth(2);
		linePaint.setColor(Color.BLACK);

		TextPaint textPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
		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) {
					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 {
					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) {
					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 {
					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 = 8, 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);

		Paint ovalPaint = new Paint();
		ovalPaint.setColor(Color.RED);
		ovalPaint.setStrokeWidth(indexTitleWidth);
		canvas.drawLine(mWidth / 2, 0, mWidth / 2, indexTitleHight, ovalPaint);
		canvas.drawLine(mWidth / 2, mHeight - indexTitleHight, mWidth / 2, mHeight, ovalPaint);

		// RectF ovalRectF = new RectF(mWidth / 2 - 10, 0, mWidth / 2 + 10, 4 *
		// mDensity); //TODO 椭圆
		// canvas.drawOval(ovalRectF, ovalPaint);
		// ovalRectF.set(mWidth / 2 - 10, mHeight - 8 * mDensity, mWidth / 2 +
		// 10, mHeight); //TODO

		Paint shadowPaint = new Paint();
		shadowPaint.setStrokeWidth(shadow);
		shadowPaint.setColor(Color.parseColor(color));
		canvas.drawLine(mWidth / 2 + gap, 0, mWidth / 2 + gap, mHeight, shadowPaint);

		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:
			mMove += (mLastX - xPosition);
			changeMoveAndValue();
			break;
		case MotionEvent.ACTION_UP:
		case MotionEvent.ACTION_CANCEL:
			countMoveEnd();
			countVelocityTracker(event);
			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;
			}
		}
	}
}
时间： 2024-10-15 04:11:42

android 滚轮刻度尺的实现的相关文章

Android滚轮选择器实现

思路: 1,布局,整个控件的布局,其实就是用代码取带xml来实现当前布局 2,可以滑动的(即滚轮),其实是一个ScrollView 3,判断滑动状态的,有protected void onScrollChanged(int x, int y, int oldx, int oldy) 方法,可以为我们获得当前y值(一开始y=0;随着滑动,y开始增大) 那么我们首先来完成第一个,为了思考方便,我先用xml搭建出了控件的样子,然后我们再用代码去实现,事实证明,这样的思路行云流水 下面,我们来看这个te

Android自定义View（二）

前言 魅族手机的闹钟应用中有个倒计时,这个控件还是蛮有趣的.左边是魅族闹钟,右边是我们最终实现的效果,虽然有些细节还需优化,不过基本上已经达到了想要的效果,我们先来就来看看如何实现吧. 分析 确定宽高 对一个Android自定义控件来说,一般都经过三个步骤 onLayout() onMeasure() onDraw() onLayout明确子控件在父控件中的位置(本控件不需要重写),onMeasure是确定控件的大小(宽.高),而onDraw是我们重点关注的方法,我们需要在这个方法中写入显示Vi

最新最全的 Android 开源项目合集

原文链接:https://github.com/opendigg/awesome-github-android-ui 在 Github 上做了一个很新的 Android 开发相关开源项目汇总,涉及到 Android 开发的方方面面,基本很全了.对 Android 开发感兴趣的欢迎 Star ,后续也会定期维护更新这个列表.当然,你也可以去 opendigg 上查看. -- 由欧戈分享 awesome-github-android-ui 是由OpenDigg整理并维护的安卓UI相关开源项目库集合.

Android UI相关开源项目库汇总

最近做了一个Android UI相关开源项目库汇总,里面集合了OpenDigg 上的优质的Android开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个star. 抽屉菜单 MaterialDrawer ★7337 - 安卓抽屉效果实现方案 Side-Menu.Android ★3865 - 创意边侧菜单 FlowingDrawer ★1744 - 向右滑动流动抽屉效果 SlidingRootNav ★1338 - 仿DrawerLayout的View

React Native常用第三方组件汇总--史上最全 之一

把我认为最好的知识,拿来与他人分享,是这一生快事之一! React Native 项目常用第三方组件汇总: react-native-animatable 动画 react-native-carousel 轮播 react-native-countdown 倒计时 react-native-device-info 设备信息 react-native-fileupload 文件上传 react-native-icons 图标 react-native-image-picker 图片选择器 reac

react native 常用组件汇总

react-native-uploader //文件上传https://github.com/aroth/react-native-uploader jpush-react-native //官方版本 https://github.com/jpush/jpush-react-native react-native-jpush 由 React Native 中文网开发维护. https://github.com/reactnativecn/react-native-jpush pouchdb-re

Android自己定义实现循环滚轮控件WheelView

首先呈上效果图 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" > 如今非常多地方都用到了滚轮布局WheelView,比方在选择生日的时候,风格类似系统提供的DatePickerDialog,开源的控件也有非常多,只是大部分都是依据当前项目的需求绘制的界面,因此我就自己写了一款比較符合自己项目的Whee

Android实现滑动刻度尺效果，选择身高体重和生日

刻度尺效果虽然看起来很美,我个人认为很不实用,即使再不实用,也有用的,鉴于群里成员对我的苦苦哀求,我就分享一个他用不到的,横屏滑动刻度尺,因为他需要竖屏的,哈哈…… 最近群里的开发人员咨询怎样实现刻度尺的滑动效果去选择身高体重等信息.我倒是做过这种效果,貌似群里要的那个开发者要竖着的刻度尺,那我就先分享个横着的刻度尺滑动选择效果.哈哈……我就是这么贱,贱贱的才惹人爱嘛!好了,不逗了,先给个横着的效果,自己试着去改编或者修改一下,看看通过自己的能力能不能做出竖着的效果来,过两天我再把竖着的那个滑动

Android自定义实现循环滚轮控件WheelView

首先呈上效果图 现在很多地方都用到了滚轮布局WheelView,比如在选择生日的时候,风格类似系统提供的DatePickerDialog,开源的控件也有很多,不过大部分都是根据当前项目的需求绘制的界面,因此我就自己写了一款比较符合自己项目的WheelView. 首先这个控件有以下的需求: 1.能够循环滚动,当向上或者向下滑动到临界值的时候,则循环开始滚动 2.中间的一块有一块半透明的选择区,滑动结束时,哪一块在这个选择区,就选择这快. 3.继承自View进行绘制 然后进行一些关键点的讲解: 1.