这篇文章将为大家详细讲解有关如何在Android中利用View实现一个等级滑动条功能,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
只为您设计更接底气、较有营销力的好网站,将营销策划与网页设计互相结合的专业机构,成都营销网站建设公司中较早掌握H5高端网站建设技术的机构。一个好的成都品牌网站建设,不能只是一张名片,茫茫网海,想要快速吸引到您客户的眼球,必须全方位的展现出企业突出的优势,以求达到主动营销的效果,最终促成成交!
思路:
首先绘制直线,然后等分直线绘制点;
绘制点的时候把X值存到集合中。
然后绘制背景图片,以及图片上的数字。
点击事件down的时候,换小图片为大图片。move的时候跟随手指移动。
up的时候根据此时的X计算最近的集合中的点,然后自动吸附回去。
1,自定义属性
<?xml version="1.0" encoding="utf-8"?>
然后获取属性:
/** * 获得我们所定义的自定义样式属性 */ TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.BeautySeekBarView, defStyleAttr, 0); //等级数量即点的个数 valueCountent=a.getInteger(R.styleable.BeautySeekBarView_valueCountent, 5); //点的颜色 pointColor = a.getColor(R.styleable.BeautySeekBarView_pointColor, Color.WHITE); //线的颜色 lineColor = a.getColor(R.styleable.BeautySeekBarView_lineColor, Color.WHITE); //小图片 smallPic=a.getResourceId(R.styleable.BeautySeekBarView_smallPic, R.drawable.ic_launcher); //滑动过程中的大图片 bigPic=a.getResourceId(R.styleable.BeautySeekBarView_bigPic, R.drawable.ic_launcher); //控件的内边距 viewPadding=a.getDimensionPixelSize(R.styleable.BeautySeekBarView_padding, (int) TypedValue.applyDimension( TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics())); a.recycle();
2.绘制
@Override protected void onDraw(Canvas canvas) { // TODO Auto-generated method stub super.onDraw(canvas); float PointX = 0; float PointY=getHeight()/2; canvas.drawLine(0+getPaddingLeft(),PointY, getWidth()-getPaddingRight(), PointY, linePaint); //绘制直线 int averageLength =(getWidth()-getPaddingLeft()-getPaddingRight())/(valueCountent-1); for(int i=0;i
全部代码如下
import java.util.ArrayList; import java.util.HashMap; import java.util.concurrent.Semaphore; import android.R.integer; import android.animation.ValueAnimator; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Paint.FontMetricsInt; import android.util.AttributeSet; import android.util.Log; import android.util.TypedValue; import android.view.MotionEvent; import android.view.View; public class BeautySeekBarView extends View { private Semaphore sePoolTH=new Semaphore(0);//信号量,解决并发问题 private int valueCountent;//等级点的数量 private int pointColor; private int lineColor; private Bitmap mBitmap; private int bitmapWidth; private int bitmapHeight; private float bitmapPointX; private ArrayListpointList;//储存画出的点的point值 private HashMap mHashMap;////把差值和listX当做键值对保存起来,便于后期找出 private int index=1;//索引 private float mListX;//移动后最小的点 private int smallPic; private int bigPic; private int viewPadding; private Paint pointPaint; private Paint linePaint; private Paint textPaint; private FontMetricsInt fontMetrics; public BeautySeekBarView(Context context) { this(context,null); } public BeautySeekBarView(Context context, AttributeSet attrs) { this(context, attrs,0); } public BeautySeekBarView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); /** * 获得我们所定义的自定义样式属性 */ TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.BeautySeekBarView, defStyleAttr, 0); //等级数量即点的个数 valueCountent=a.getInteger(R.styleable.BeautySeekBarView_valueCountent, 5); //点的颜色 pointColor = a.getColor(R.styleable.BeautySeekBarView_pointColor, Color.WHITE); //线的颜色 lineColor = a.getColor(R.styleable.BeautySeekBarView_lineColor, Color.WHITE); //小图片 smallPic=a.getResourceId(R.styleable.BeautySeekBarView_smallPic, R.drawable.ic_launcher); //滑动过程中的大图片 bigPic=a.getResourceId(R.styleable.BeautySeekBarView_bigPic, R.drawable.ic_launcher); //控件的内边距 viewPadding=a.getDimensionPixelSize(R.styleable.BeautySeekBarView_padding, (int) TypedValue.applyDimension( TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics())); a.recycle(); initData();//初始化数据 initPaint();//初始化画笔 } public void initData() { // valueCountent=7; // pointColor=Color.WHITE; // lineColor=Color.WHITE; // setBackgroundColor(Color.BLACK); setPadding(viewPadding, viewPadding, viewPadding, viewPadding); bitmapPointX=getPaddingLeft(); mBitmap=BitmapFactory.decodeResource(getResources(), smallPic); bitmapWidth=mBitmap.getWidth(); bitmapHeight=mBitmap.getHeight(); pointList=new ArrayList (); mHashMap=new HashMap (); } public void initPaint() { pointPaint=new Paint(); pointPaint.setColor(pointColor); pointPaint.setStyle(Paint.Style.FILL); pointPaint.setStrokeWidth(10); pointPaint.setStrokeJoin(Paint.Join.ROUND); pointPaint.setStrokeCap(Paint.Cap.ROUND); pointPaint.setAntiAlias(true); linePaint=new Paint(); linePaint.setColor(lineColor); linePaint.setStyle(Paint.Style.STROKE); linePaint.setStrokeWidth(4); linePaint.setAntiAlias(true); textPaint=new Paint(); textPaint.setStrokeWidth(3); textPaint.setTextSize(24); textPaint.setColor(Color.WHITE); textPaint.setTextAlign(Paint.Align.CENTER); fontMetrics = textPaint.getFontMetricsInt(); textPaint.setAntiAlias(true); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { // TODO Auto-generated method stub super.onMeasure(widthMeasureSpec, heightMeasureSpec); } @Override protected void onDraw(Canvas canvas) { // TODO Auto-generated method stub super.onDraw(canvas); float PointX = 0; float PointY=getHeight()/2; canvas.drawLine(0+getPaddingLeft(),PointY, getWidth()-getPaddingRight(), PointY, linePaint); //绘制直线 int averageLength =(getWidth()-getPaddingLeft()-getPaddingRight())/(valueCountent-1); for(int i=0;i 100){//如果按下,抬起时间过大才认为是拖动,要执行动画。 bitmapPointX=event.getX(); updateIndex(bitmapPointX); invalidate(); } break; case MotionEvent.ACTION_UP: long endTime=System.currentTimeMillis(); bitmapPointX=event.getX(); mBitmap=BitmapFactory.decodeResource(getResources(),smallPic); bitmapWidth=mBitmap.getWidth(); bitmapHeight=mBitmap.getHeight(); textPaint.setTextSize(24); if(endTime-startTime>200){//如果按下,抬起时间过大才认为是拖动,要执行动画。 updateBitmapUI(bitmapPointX); }else{ bitmapPointX=updateIndex(bitmapPointX); invalidate(); } startTime = 0; break; } return true; } //更新索引 public float updateIndex(float pointX){ float lastValue=100000; float currentValue=0; float minValue=0; for(float listX:pointList){ currentValue= Math.abs(pointX-listX); mHashMap.put(currentValue, listX);//把差值和listX当做键值对保存起来,便于后期找出 minValue=Math.min(lastValue,currentValue); lastValue=minValue; } if(mHashMap.containsKey(minValue)){ mListX=mHashMap.get(minValue); }else{ Log.e("BeautySeekBarView", "updateBitmapUI--->mHashMap.containsKey(minValue) is null"); return -1; } if(pointList.contains(mListX)){ index=pointList.indexOf(mListX)+1; if(mListener!=null){ mListener.getIndex(index); } }else{ Log.e("BeautySeekBarView", "updateBitmapUI--->pointList.contains(mListX) is null"); return -1; } return mListX; } //当手指抬起后更新Bitmap的位置 private void updateBitmapUI(float PointX2) { mListX=updateIndex(PointX2); //执行动画 ValueAnimator anim = ValueAnimator.ofFloat(PointX2, mListX); anim.setDuration(50); anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { bitmapPointX =(Float) animation.getAnimatedValue(); invalidate(); } }); anim.start(); } //设置等级点的数量 public void pointValueCountent(int countent){ if(countent<2){ valueCountent=2; }else{ valueCountent=countent; } invalidate(); } //设置默认位置 public void setPointLocation(final int location){ new Thread(new Runnable() { @Override public void run() { try { sePoolTH.acquire(); } catch (InterruptedException e) { // TODO Auto-generated catch block e.printStackTrace(); } if(location>0&&pointList!=null&& !pointList.isEmpty()){ bitmapPointX=pointList.get(location-1); postInvalidate(); } } }).start(); } //提供接口回调,获取索引 private indexListener mListener=null; public interface indexListener{ void getIndex(int index); } public void setIndexListener(indexListener listener){ mListener=listener; } }
外部调用:
XML:
Java:
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); beautySeekBarView.setPointLocation(2) ; // } private void initView() { mTextView=(TextView) findViewById(R.id.tv); beautySeekBarView=(BeautySeekBarView) findViewById(R.id.myView); beautySeekBarView.setIndexListener(new indexListener() { @Override public void getIndex(int index) { mTextView.setText("index="+index); } }); }
关于如何在Android中利用View实现一个等级滑动条功能就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。