這篇文章將為大家詳細(xì)講解有關(guān)如何在Android中利用View實(shí)現(xiàn)一個等級滑動條功能,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個參考,希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。
只為您設(shè)計更接底氣、較有營銷力的好網(wǎng)站,將營銷策劃與網(wǎng)頁設(shè)計互相結(jié)合的專業(yè)機(jī)構(gòu),成都營銷網(wǎng)站建設(shè)公司中較早掌握H5高端網(wǎng)站建設(shè)技術(shù)的機(jī)構(gòu)。一個好的成都品牌網(wǎng)站建設(shè),不能只是一張名片,茫茫網(wǎng)海,想要快速吸引到您客戶的眼球,必須全方位的展現(xiàn)出企業(yè)突出的優(yōu)勢,以求達(dá)到主動營銷的效果,最終促成成交!
思路:
首先繪制直線,然后等分直線繪制點(diǎn);
繪制點(diǎn)的時候把X值存到集合中。
然后繪制背景圖片,以及圖片上的數(shù)字。
點(diǎn)擊事件down的時候,換小圖片為大圖片。move的時候跟隨手指移動。
up的時候根據(jù)此時的X計算最近的集合中的點(diǎn),然后自動吸附回去。
1,自定義屬性
<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="BeautySeekBarView"> <attr name="valueCountent" format="integer"/> <attr name="padding" format="dimension"/> <attr name="pointColor" format="color"/> <attr name="lineColor" format="color"/> <attr name="smallPic" format="reference"/> <attr name="bigPic" format="reference"/> </declare-styleable> </resources>
然后獲取屬性:
/** * 獲得我們所定義的自定義樣式屬性 */ TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.BeautySeekBarView, defStyleAttr, 0); //等級數(shù)量即點(diǎn)的個數(shù) valueCountent=a.getInteger(R.styleable.BeautySeekBarView_valueCountent, 5); //點(diǎn)的顏色 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); //控件的內(nèi)邊距 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<valueCountent;i++){ PointX=i*averageLength+getPaddingLeft(); canvas.drawPoint(PointX, PointY, pointPaint);//繪制點(diǎn) if(pointList!=null && pointList.size()<valueCountent){ pointList.add(PointX);//把每個點(diǎn)都放入集合中; } } sePoolTH.release(); canvas.drawBitmap(mBitmap, bitmapPointX-bitmapWidth/2, PointY-bitmapHeight/2, null);//繪制拖動的圖片 canvas.drawText(""+index, bitmapPointX, (getHeight() - fontMetrics.ascent - fontMetrics.descent) / 2, textPaint); //繪制文字 }
全部代碼如下
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);//信號量,解決并發(fā)問題 private int valueCountent;//等級點(diǎn)的數(shù)量 private int pointColor; private int lineColor; private Bitmap mBitmap; private int bitmapWidth; private int bitmapHeight; private float bitmapPointX; private ArrayList<Float> pointList;//儲存畫出的點(diǎn)的point值 private HashMap<Float, Float> mHashMap;////把差值和listX當(dāng)做鍵值對保存起來,便于后期找出 private int index=1;//索引 private float mListX;//移動后最小的點(diǎn) 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); //等級數(shù)量即點(diǎn)的個數(shù) valueCountent=a.getInteger(R.styleable.BeautySeekBarView_valueCountent, 5); //點(diǎn)的顏色 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); //控件的內(nèi)邊距 viewPadding=a.getDimensionPixelSize(R.styleable.BeautySeekBarView_padding, (int) TypedValue.applyDimension( TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics())); a.recycle(); initData();//初始化數(shù)據(jù) 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<Float>(); mHashMap=new HashMap<Float, Float>(); } 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<valueCountent;i++){ PointX=i*averageLength+getPaddingLeft(); canvas.drawPoint(PointX, PointY, pointPaint);//繪制點(diǎn) if(pointList!=null && pointList.size()<valueCountent){ pointList.add(PointX);//把每個點(diǎn)都放入集合中; } } sePoolTH.release(); canvas.drawBitmap(mBitmap, bitmapPointX-bitmapWidth/2, PointY-bitmapHeight/2, null);//繪制拖動的圖片 canvas.drawText(""+index, bitmapPointX, (getHeight() - fontMetrics.ascent - fontMetrics.descent) / 2, textPaint); //繪制文字 } long startTime = 0; @Override public boolean onTouchEvent(MotionEvent event) { //獲取手指的操作--》按下、移動、松開 int action = event.getAction(); switch (action) { case MotionEvent.ACTION_DOWN: startTime=System.currentTimeMillis(); mBitmap=BitmapFactory.decodeResource(getResources(), bigPic); bitmapWidth=mBitmap.getWidth(); bitmapHeight=mBitmap.getHeight(); textPaint.setTextSize(30); //invalidate(); break; case MotionEvent.ACTION_MOVE: long endTimeMove=System.currentTimeMillis(); if(endTimeMove-startTime>100){//如果按下,抬起時間過大才認(rèn)為是拖動,要執(zhí)行動畫。 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){//如果按下,抬起時間過大才認(rèn)為是拖動,要執(zhí)行動畫。 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當(dāng)做鍵值對保存起來,便于后期找出 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; } //當(dāng)手指抬起后更新Bitmap的位置 private void updateBitmapUI(float PointX2) { mListX=updateIndex(PointX2); //執(zhí)行動畫 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(); } //設(shè)置等級點(diǎn)的數(shù)量 public void pointValueCountent(int countent){ if(countent<2){ valueCountent=2; }else{ valueCountent=countent; } invalidate(); } //設(shè)置默認(rèn)位置 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(); } //提供接口回調(diào),獲取索引 private indexListener mListener=null; public interface indexListener{ void getIndex(int index); } public void setIndexListener(indexListener listener){ mListener=listener; } }
外部調(diào)用:
XML:
<com.example.hello.BeautySeekBarView android:id="@+id/myView" android:layout_centerVertical="true" android:layout_width="match_parent" android:layout_height="100dp" ws:padding="20dp" ws:valueCountent="6" ws:pointColor="#FFFFFF" ws:lineColor="#FFFFFF" ws:smallPic="@drawable/beauty_seekbar_point" ws:bigPic="@drawable/beauty_seekbar_point_big"/>
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); } }); }
關(guān)于如何在Android中利用View實(shí)現(xiàn)一個等級滑動條功能就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學(xué)到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
當(dāng)前文章:如何在Android中利用View實(shí)現(xiàn)一個等級滑動條功能
本文路徑:http://jinyejixie.com/article42/pspjec.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供商城網(wǎng)站、品牌網(wǎng)站制作、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、軟件開發(fā)、外貿(mào)建站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)