自定義view之仿滴滴選擇人數的SlideTab拖動選擇器

這里只實現了邏輯，如果你需要可以自己把圖片換了，設置一下圖片的寬高，我這里只是用了兩個點表示意思

一款用于選擇的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"http://這里記得加上，要不然不走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

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,269評論 25贊 708
  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,229評論 4贊 61
  • 大家好， 我是漢家松鼠cg，漢家松鼠工作室創始人/CEO，《金庸群俠傳X》、《江湖X》制作人。 上一篇寫了我們團隊...
    漢家松鼠閱讀 1,139評論 1贊 2
  • 九重山后是什么？一片祥和，一份安穩，還是一份荊棘？不知如何下筆，不懂該如何讓文字穩重，拙筆之下確實難表達出心虛的萬...
    十二柒柒閱讀 313評論 0贊 0
  • 時間過得飛快，《通往財富自由之路》第二季都要開始了！ 還記得一年前那會，訂閱這個專欄時的情景。當時讀了幾篇笑來老師...
    一切才剛剛開始閱讀 195評論 1贊 1