这里只实现了逻辑，如果你需要可以自己把图片换了，设置一下图片的宽高，我这里只是用了两个点表示意思
一款用于选择的slidebar仿滴滴选择人数的效果,自己加了两个样式，可拖动和点击（还有一点文字居中的小问题，读者可以自行修改）
还是老规矩先看效果
1、
gif1.gif
2、
gif2.gif
3、
gif3.gif
4、特别说明要达到4这种效果，就要把代码中的那个两个todo的位置代码按todo处理一下
gif.gif
其实看过效果，第一感觉就是不难，无非就是监听手势滑动绘制view
相信看过之前我两篇自定义view的人都知道我自定义view的步骤了
1、分析需要的自定义属性
2、创建类这里继承view
3、创建attrs定义属性
4、完成自定义view所拥有的功能
这里我就不再一步一步创建了
先贴上自定义属性
<declare-styleable name="LSlideView">
<attr name="round_radius" format="integer"/>
<!--一下两个属性文章中没有用到，但是个人觉得必须要的，分别对应不同状态的颜色-->
<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"/>
<!--这两个属性是用来指定slidebar下面绘制的bitmap，文章中我是用的小圆点来指代的，但是像滴滴就是用车座位图标来显示，记得这四个属性是搭配的-->
<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"//这里记得加上，要不然不走onTeach，暂未明白为啥，知道的可以给我说一下
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中的代码了，直接贴代码，如果有需要我说的，可以留言
/**
* 注：使用该控件时记得在布局文件中添加android:clickable="true"
* 否则onTeach无效
* 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;//当前view的宽度
private int r;//圆的半径
private int line_width;//线的宽度
private int margin_round;//每个圆之间的间距
private int stopX;//当前结束绘制线的结束点的x坐标
private int postion;//当前选中的位置
private int normal_color;//默认的颜色，暂未使用，后期如果需要使用到可以自己添加
private int select_color;//选中的颜色
private int width_bitmap;// bitmap的宽
private int height_bitmap;
private int margin_top;//下面图标距上面圆的间距
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;
//分离整数和小数部分
int i2= (int) i;//整数
if (i2>=3){//防止滑动的太远，导致i2大于3，导致显示不正常，限定了最多到4
i2=3;
}
float i3=i-i2;//小数
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);
//绘制默认的线
line_paint.setColor(Color.GRAY);
canvas.drawLine(r,r,widthView-r,r, line_paint);
/*
*todo 1、将这里注释起来
//绘制选中后的蓝色线
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++) {
//绘制节点
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 {//默认的线和圆
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);
}
}
补充说明
将 setClickable(true);//令自己可点击，从而获取触摸事件
加到自定义view中即可获取事件监听，就可以不在xml中添加clickble
网友评论