這里只實(shí)現(xiàn)了邏輯掖蛤，如果你需要可以自己把圖片換了杀捻，設(shè)置一下圖片的寬高，我這里只是用了兩個(gè)點(diǎn)表示意思
一款用于選擇的slidebar仿滴滴選擇人數(shù)的效果,自己加了兩個(gè)樣式蚓庭，可拖動(dòng)和點(diǎn)擊（還有一點(diǎn)文字居中的小問(wèn)題致讥，讀者可以自行修改）
還是老規(guī)矩先看效果
1、
gif1.gif
2器赞、
gif2.gif
3垢袱、
gif3.gif
4、特別說(shuō)明要達(dá)到4這種效果港柜，就要把代碼中的那個(gè)兩個(gè)todo的位置代碼按todo處理一下
gif.gif
其實(shí)看過(guò)效果请契，第一感覺就是不難，無(wú)非就是監(jiān)聽手勢(shì)滑動(dòng)繪制view
相信看過(guò)之前我兩篇自定義view的人都知道我自定義view的步驟了
1潘懊、分析需要的自定義屬性
2姚糊、創(chuàng)建類這里繼承view
3、創(chuàng)建attrs定義屬性
4授舟、完成自定義view所擁有的功能
這里我就不再一步一步創(chuàng)建了
先貼上自定義屬性
<declare-styleable name="LSlideView">
<attr name="round_radius" format="integer"/>
<!--一下兩個(gè)屬性文章中沒有用到救恨，但是個(gè)人覺得必須要的，分別對(duì)應(yīng)不同狀態(tài)的顏色-->
<attr name="select_color" format="color"/>
<attr name="normal_color" format="color"/>
<attr name="line_width" format="integer"/>
<!--<attr name="text_width" format="integer"/>-->
<attr name="margin_top" format="integer"/>
<!--這兩個(gè)屬性是用來(lái)指定slidebar下面繪制的bitmap释树，文章中我是用的小圓點(diǎn)來(lái)指代的肠槽，但是像滴滴就是用車座位圖標(biāo)來(lái)顯示，記得這四個(gè)屬性是搭配的-->
<attr name="normal_bitmap" format="reference"/>
<attr name="select_bitmap" format="reference"/>
<attr name="bitmap_width" format="integer"/>
<attr name="bitmap_height" format="integer"/>
<attr name="stytle_drag_view" format="enum">
<enum name="FILL" value="1"/>
<enum name="EMPTY" value="2"/>
</attr>
<attr name="is_draw_down_bitmap" format="boolean"/>
</declare-styleable>
布局文件
<com.example.laer.myapplication.LSlideView
android:id="@+id/dv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="100px"
android:clickable="true"http://這里記得加上奢啥，要不然不走onTeach秸仙，暫未明白為啥，知道的可以給我說(shuō)一下
app:normal_bitmap="@drawable/normal"
app:select_bitmap="@drawable/select"
app:round_radius="60"
app:line_width="20"
app:margin_top="50"
app:stytle_drag_view="EMPTY"
app:is_draw_down_bitmap="false"/>
activity中獲取選中為位置的方法
LSlideView dv = (LSlideView) findViewById(R.id.dv);
dv.setCallBack(new LSlideView.CallBack() {
@Override
public void onCallBack(int postion) {
Toast.makeText(MainActivity.this,postion+"",Toast.LENGTH_SHORT).show();
}
});
下面我就不再具體講view中的代碼了桩盲，直接貼代碼寂纪，如果有需要我說(shuō)的，可以留言
/**
* 注：使用該控件時(shí)記得在布局文件中添加android:clickable="true"
* 否則onTeach無(wú)效
* Created by laer on 2016/10/31.
*/
public class LSlideView extends View {
private Paint roundPaint;
private Paint textPaint;
private Paint line_paint;
private Bitmap normal_bt;
private Bitmap select_bt;
private int widthView;//當(dāng)前view的寬度
private int r;//圓的半徑
private int line_width;//線的寬度
private int margin_round;//每個(gè)圓之間的間距
private int stopX;//當(dāng)前結(jié)束繪制線的結(jié)束點(diǎn)的x坐標(biāo)
private int postion;//當(dāng)前選中的位置
private int normal_color;//默認(rèn)的顏色赌结，暫未使用捞蛋，后期如果需要使用到可以自己添加
private int select_color;//選中的顏色
private int width_bitmap;// bitmap的寬
private int height_bitmap;
private int margin_top;//下面圖標(biāo)距上面圓的間距
private int style;//樣式
private boolean is_draw_down_bitmap;//是否繪制下面的圖片
private CallBack callBack;
public void setCallBack(CallBack callBack) {
this.callBack = callBack;
}
public LSlideView(Context context) {
super(context);
}
public LSlideView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context,attrs);
}
private void init(Context context, AttributeSet attrs) {
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.LSlideView);
line_width = array.getInt(R.styleable.LSlideView_line_width, 20);
r = array.getInt(R.styleable.LSlideView_round_radius, 50);
normal_color=array.getColor(R.styleable.LSlideView_normal_color,Color.GRAY);
select_color=array.getColor(R.styleable.LSlideView_select_color,Color.BLUE);
height_bitmap=array.getInt(R.styleable.LSlideView_bitmap_height,40);
width_bitmap=array.getInt(R.styleable.LSlideView_bitmap_width,60);
margin_top=array.getInt(R.styleable.LSlideView_margin_top,80);
style=array.getInt(R.styleable.LSlideView_stytle_drag_view,2);
is_draw_down_bitmap = array.getBoolean(R.styleable.LSlideView_is_draw_down_bitmap, true);
BitmapDrawable normal = (BitmapDrawable) array.getDrawable(R.styleable.LSlideView_normal_bitmap);
BitmapDrawable select_draw = (BitmapDrawable) array.getDrawable(R.styleable.LSlideView_select_bitmap);
roundPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
roundPaint.setStyle(Paint.Style.FILL);
line_paint = new Paint(Paint.ANTI_ALIAS_FLAG);
line_paint.setStrokeWidth(line_width);
textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
textPaint.setFakeBoldText(true);
textPaint.setTextSize(r);
normal_bt = Bitmap.createScaledBitmap(normal.getBitmap(), width_bitmap, height_bitmap, true);
Bitmap select = select_draw.getBitmap();
select_bt = Bitmap.createScaledBitmap(select,width_bitmap, height_bitmap, true);
if (height_bitmap==0||width_bitmap==0){
width_bitmap=2*r;
height_bitmap=width_bitmap*select.getHeight()/select.getWidth();
}
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
widthView = MeasureSpec.getSize(widthMeasureSpec);
margin_round=(widthView-2*r)/4;
setMeasuredDimension(widthView,r*2+margin_top+height_bitmap);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
break;
case MotionEvent.ACTION_MOVE:
stopX= (int) event.getX();
postion = (int) ((event.getX() -r)/ margin_round);
postInvalidate();
return true;
case MotionEvent.ACTION_UP:
float i = (event.getX() -r)/ margin_round;
//分離整數(shù)和小數(shù)部分
int i2= (int) i;//整數(shù)
if (i2>=3){//防止滑動(dòng)的太遠(yuǎn)，導(dǎo)致i2大于3柬姚，導(dǎo)致顯示不正常拟杉，限定了最多到4
i2=3;
}
float i3=i-i2;//小數(shù)
if (i3 >0.5){//大于一半，則加1
postion=i2+1;
stopX=r+margin_round*(i2+1);
}else{
stopX=r+margin_round*i2;
postion=i2;
}
callBack.onCallBack(postion);
postInvalidate();
return true;
}
return super.onTouchEvent(event);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//繪制默認(rèn)的線
line_paint.setColor(Color.GRAY);
canvas.drawLine(r,r,widthView-r,r, line_paint);
/*
*todo 1量承、將這里注釋起來(lái)
//繪制選中后的藍(lán)色線
if (postion!=0&&style==1){
line_paint.setColor(Color.BLUE);
canvas.drawLine(r,r,stopX,r, line_paint);
}*/
roundPaint.setStyle(Paint.Style.FILL_AND_STROKE);
for (int i = 0; i < 5; i++) {
//繪制節(jié)點(diǎn)
float v = textPaint.measureText(i+"");
int cx = r + margin_round * i;
if (i==postion&&style==2){//繪制選中后的
roundPaint.setColor(Color.BLUE);
canvas.drawCircle(cx,r,r, roundPaint);
textPaint.setColor(Color.WHITE);
canvas.drawText(i+"",cx-v/2,r+r/2, textPaint);
if (is_draw_down_bitmap)
canvas.drawBitmap(select_bt,cx-width_bitmap/2,2*r+margin_top,line_paint);
}else if (i==postion&&style==1){//todo 2搬设、將這里的">="改成"=="
roundPaint.setColor(Color.BLUE);
canvas.drawCircle(cx,r,r, roundPaint);
textPaint.setColor(Color.WHITE);
canvas.drawText(i+"",cx-v/2,r+r/2, textPaint);
if (is_draw_down_bitmap)
canvas.drawBitmap(select_bt,cx-width_bitmap/2,2*r+margin_top,line_paint);
}else {//默認(rèn)的線和圓
roundPaint.setColor(Color.GRAY);
canvas.drawCircle(cx,r,r, roundPaint);
textPaint.setColor(Color.BLACK);
canvas.drawText(i+"",cx-v/2,r+r/2, textPaint);
if (is_draw_down_bitmap&&style!=2)
canvas.drawBitmap(normal_bt,cx-width_bitmap/2,2*r+margin_top,line_paint);
}
}
}
public interface CallBack{
void onCallBack(int postion);
}
}
補(bǔ)充說(shuō)明
將 setClickable(true);//令自己可點(diǎn)擊穴店，從而獲取觸摸事件
加到自定義view中即可獲取事件監(jiān)聽，就可以不在xml中添加clickble
