源码搜藏网
网站首页
网站源码
加入VIP，免费下载全站VIP素材开通VIP
PHP源码 ASP源码 .NET源码 其他VIP源码 手机VIP源码
CMS模板
加入VIP，免费下载全站VIP素材开通VIP
织梦模板 帝国cms模板 商城源码 discuz模板 wordpress模板 其他源码 app源码 pbootcms
安卓源码
加入VIP，免费下载全站VIP素材开通VIP
VIP源码 控件分类 功能分类 技术博客
免费源码
php源码 asp源码 .NET源码 java源码 其他源码
会员特权
广告合作
●●●
加入VIP，免费下载全站素材开通VIP
设计素材 网页特效 网页设计作业 开发教程
全部作品
全部作品
终身源码
vip源码
安卓源码
视频教程
开发教程
热门搜索： 　
源码
　
小程序
　
商城
　
手机
　
游戏
　
视频
　
淘宝客
　
淘宝客
当前位置：首页 > 安卓源码 > 技术博客 >

Android开发自定义View之StepView(流程/步骤View)

时间：2019-02-23 19:48 来源：互联网 作者：源码搜藏 浏览： 次 收藏 挑错 推荐 打印

写在前面的话 其实写这个自定义view是有一点故事的，是因为他，我决定写这个view的，由于他的帮助和鼓励，我最终完成了这个view，在此，向他致敬！ ps:故事总是有剧情和结局的，这里不便多讲，送自己句话：且行且珍惜吧！ 1.效果图 好了，扯了上面的这些闲话

写在前面的话

其实写这个自定义view是有一点故事的，是因为他，我决定写这个view的，由于他的帮助和鼓励，我最终完成了这个view，在此，向他致敬！
ps:故事总是有剧情和结局的，这里不便多讲，送自己句话：且行且珍惜吧！

1.效果图

好了，扯了上面的这些闲话，直接来看效果图吧。

Android开发自定义View之StepView(流程/步骤View)

2.实现思路

  • 首先是画各步骤点之间的线条

  • 接着是画未选中步骤点的图标

  • 第三步是画选中步骤点的图标

  • 最后画出各步骤点对应的说明文字

3.实现细节

3.1概述

StepView继承自View，通过构造方法初始化一些必要参数，然后在onSizeChanged方法中获取View的宽高以及其他额外计算的数据信息，最后通过onDraw方法绘制出View。

3.2首先通过res/values/attrs定义一些细节参数
<declare-styleable name="StepView">
        <!--步骤点个数-->
        <attr name="count" format="integer" />
        <!--链接步骤点之间的线条颜色以及线宽-->
        <attr name="normal_line_color" format="color" />
        <attr name="passed_line_color" format="color" />
        <attr name="line_stroke_width" format="dimension" />
        <!--文字说明信息-->
        <attr name="text_color" format="color" />
        <attr name="text_size" format="dimension" />
        <attr name="text_to_line_margin" format="dimension" />
        <!--边距-->
        <attr name="margin" format="dimension" />
        <!--默认文字在线条下面，线条距顶部距离、文字距底部距离-->
        <attr name="line_to_top_margin" format="dimension" />
        <attr name="text_to_bottom_margin" format="dimension" />
        <!--设置步骤点在哪儿-->
        <attr name="step" format="enum">
            <enum name="one" value="0" />
            <enum name="two" value="1" />
            <enum name="three" value="2" />
            <enum name="four" value="3" />
            <enum name="five" value="4" />
        </attr>
        <!--线条长度是否可变,默认是-->
        <attr name="line_length" format="enum">
            <enum name="variable_length" value="0" />
            <enum name="fixed_length" value="1" />
        </attr>
        <!--根据最大步骤点数量，计算出线条长度不变时线条长度，线条长度可变时，该数据无效-->
        <attr name="max_dot_count" format="integer" />
        <!--文字是否在线条下面，默认是-->
        <attr name="text_location" format="enum">
            <enum name="down" value="0" />
            <enum name="up" value="1" />
        </attr>
        <!--此view是否可点击-->
        <attr name="is_view_clickable" format="boolean" />
    </declare-styleable>
3.3通过构造方法初始化
public StepView(Context context) {
        this(context, null);
    }

    public StepView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public StepView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs, defStyleAttr);
    }
private void init(Context context, AttributeSet attrs, int defStyleAttr) {
        defaultNormalLineColor = Color.parseColor("#545454");
        defaultPassLineColor = Color.WHITE;
        defaultTextColor = Color.WHITE;
        defaultLineStikeWidth = dp2px(context, 1);
        defaultTextSize = sp2px(context, 80);
        defaultText2DotMargin = dp2px(context, 15);
        defalutMargin = dp2px(context, 100);
        defaultLine2TopMargin = dp2px(context, 30);
        defaultText2BottomMargin = dp2px(context, 20);

        normal_pic = BitmapFactory.decodeResource(getResources(), R.drawable.ic_normal);
        target_pic = BitmapFactory.decodeResource(getResources(), R.drawable.ic_target);
        passed_pic = BitmapFactory.decodeResource(getResources(), R.drawable.ic_passed);

        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.StepView, defStyleAttr, 0);
        dotCount = a.getInt(R.styleable.StepView_count, defaultDotCount);
        if (dotCount < 2) {
            throw new IllegalArgumentException("Steps can't be less than 2");
        }
        stepNum = a.getInt(R.styleable.StepView_step, defaultStepNum);
        lineLength = a.getInt(R.styleable.StepView_line_length, defaultLineLength);
        maxDotCount = a.getInt(R.styleable.StepView_max_dot_count, defaultMaxDotCount);
        if (maxDotCount < dotCount) {//当最多点小于设置点数量时，设置线条长度可变
            lineLength = defaultLineLength;
        }
        textLocation = a.getInt(R.styleable.StepView_text_location, defaultTextLocation);
        isTextBelowLine = textLocation == defaultTextLocation;

        normalLineColor = a.getColor(R.styleable.StepView_normal_line_color, defaultNormalLineColor);
        passLineColor = a.getColor(R.styleable.StepView_passed_line_color, defaultPassLineColor);
        lineStikeWidth = a.getDimension(R.styleable.StepView_line_stroke_width, defaultLineStikeWidth);
        textColor = a.getColor(R.styleable.StepView_text_color, defaultTextColor);
        textSize = a.getDimension(R.styleable.StepView_text_size, defaultTextSize);
        text2LineMargin = a.getDimension(R.styleable.StepView_text_to_line_margin, defaultText2DotMargin);
        margin = (int) a.getDimension(R.styleable.StepView_margin, defalutMargin);
        line2TopMargin = a.getDimension(R.styleable.StepView_line_to_top_margin, defaultLine2TopMargin);
        text2BottomMargin = a.getDimension(R.styleable.StepView_text_to_bottom_margin, defaultText2BottomMargin);
        clickable = a.getBoolean(R.styleable.StepView_is_view_clickable, defaultViewClickable);
        a.recycle();
        //当文字在线条上面时，参数倒置
        if (!isTextBelowLine) {
            line2BottomMargin = line2TopMargin;
            text2TopMargin = text2BottomMargin;
        }
        //线条画笔
        linePaint = new Paint();
        linePaint.setAntiAlias(true);
        linePaint.setStrokeWidth(lineStikeWidth);
        //文字画笔
        textPaint = new Paint();
        textPaint.setAntiAlias(true);
        textPaint.setColor(textColor);
        textPaint.setTextSize(textSize);
        //存放说明文字的矩形
        bounds = new Rect();
    }

由这段代码可知，通过init方法，不但初始化了上面的细节参数，还额外初始化了bitmap、paint、bounds等参数。由于调用了dp/sp2px方法，所以先贴一下该方法。

private int dp2px(Context context, int value) {
        float density = context.getResources().getDisplayMetrics().density;
        return (int) (density * value + 0.5f);
    }

    private int sp2px(Context context, int value) {
        float scaledDensity = context.getResources().getDisplayMetrics().scaledDensity;
        return (int) (value / scaledDensity + 0.5f);
    }
3.4在onSizeChanged方法中，完成宽高等数据计算。
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        width = w - margin * 2;
        height = h;
        //线条长度是否可变
        if (lineLength == defaultLineLength) {//可变
            perLineLength = width / (dotCount - 1);
        } else {//固定
            perLineLength = width / (maxDotCount - 1);
        }
        passWH = calculateWidthAndHeight(passed_pic);
        normalWH = calculateWidthAndHeight(normal_pic);
        targetWH = calculateWidthAndHeight(target_pic);
    }

此处说明一下，计算bitma宽高的方法，然后把宽高信息存于二维数组中

    /*计算bitmap宽高*/
    private int[] calculateWidthAndHeight(Bitmap bitmap) {
        int[] wh = new int[2];
        int width = bitmap.getWidth();
        int height = bitmap.getHeight();
        wh[0] = width;
        wh[1] = height;
        return wh;
    }
3.5通过onDraw方法绘制View
3.5.1画步骤点之间连线
    /*绘制链接步骤点之间的线条*/
    private void drawConnectLine(Canvas canvas, int stepNum) {
        float startX = 0;
        float stopX = 0;
        for (int i = 0; i < dotCount - 1; i++) {
            /*设置线条起点X轴坐标*/
            if (i == stepNum) {
                startX = margin + perLineLength * i + targetWH[0] / 2;
            } else if (i > stepNum) {
                startX = margin + perLineLength * i + normalWH[0] / 2;
            } else {
                startX = margin + perLineLength * i + passWH[0] / 2;
            }
            /*设置线条终点X轴坐标*/
            if (i + 1 == stepNum) {
                stopX = margin + perLineLength * (i + 1) - targetWH[0] / 2;
            } else if (i + 1 < stepNum) {
                stopX = margin + perLineLength * (i + 1) - passWH[0] / 2;
            } else {
                stopX = margin + perLineLength * (i + 1) - normalWH[0] / 2;
            }
            /*当目标步骤超过i时，线条设置为已过颜色，不超过时，设置为普通颜色*/
            if (stepNum > i) {
                linePaint.setColor(passLineColor);
            } else {
                linePaint.setColor(normalLineColor);
            }
            if (isTextBelowLine) {
                /*当文字在线条下方时，设置线条y轴的位置并绘制*/
                canvas.drawLine(startX, line2TopMargin, stopX, line2TopMargin, linePaint);
            } else {
                canvas.drawLine(startX, height - line2BottomMargin, stopX, height - line2BottomMargin, linePaint);
            }
        }
    }
3.5.2画普通步骤点
    /*绘制一般情况下的步骤点图片*/
    private void drawNormalSquar(Canvas canvas, int stepNum) {
        for (int i = 0; i < dotCount; i++) {
            /*在目标点状态时，普通图片不绘制，跳过，继续下一次循环*/
            if (stepNum == i) {
                continue;
            }
            if (stepNum > i) {
                float left = margin + perLineLength * i - passWH[0] / 2;
                float top = 0;
                if (isTextBelowLine) {
                    top = line2TopMargin - passWH[1] / 2;
                } else {
                    top = height - line2BottomMargin - passWH[1] / 2;
                }
                canvas.drawBitmap(passed_pic, left, top, null);
            } else {
                float left = margin + perLineLength * i - normalWH[0] / 2;
                float top = 0;
                if (isTextBelowLine) {
                    top = line2TopMargin - normalWH[1] / 2;
                } else {
                    top = height - line2BottomMargin - normalWH[1] / 2;
                }
                canvas.drawBitmap(normal_pic, left, top, null);
            }
        }
    }
3.5.3画目标步骤点
    /*绘制目标步骤图片*/
    private void drawTargetSquar(Canvas canvas, int i) {
        float left = margin + perLineLength * i - targetWH[0] / 2;
        float top = 0;
        if (isTextBelowLine) {
            top = line2TopMargin - targetWH[1] / 2;
        } else {
            top = height - line2BottomMargin - targetWH[1] / 2;
        }
        canvas.drawBitmap(target_pic, left, top, null);
    }
3.5.4画步骤点说明文字
    /*绘制各步骤说明文字*/
    private void drawDescText(Canvas canvas) {
        for (int i = 0; i < dotCount; i++) {
            String text = texts[i];
            textPaint.getTextBounds(text, 0, text.length(), bounds);
            int textWidth = bounds.width();
            int textHeight = bounds.height();
            float x = margin + perLineLength * i - textWidth / 2;
            float y;
            if (isTextBelowLine) {
                y = height - text2BottomMargin;
            } else {
                y = text2TopMargin + textHeight;
            }
            canvas.drawText(text, x, y, textPaint);
        }
    }

通过上面这几个步骤就完成StepView的绘制了。

3.6根据用户设置的是否可点击，给StepView添加点击监听

这里先说明一下思路：当用户点击时，View通过touch事件监听用户点击的x/y值，然后转换为point，再通过判断point是否在几个步骤点区域范围内，返回对应的步骤点值，然后重新绘制View。

3.6.1下面看onTouchEvent方法：
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (clickable) {
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    Point point = new Point();
                    point.x = (int) event.getX();
                    point.y = (int) event.getY();
                    int stepInDots = getStepInDots(point);
                    if (stepInDots != -1) {
                        stepNum = stepInDots;
                        invalidate();
                    }
                    break;
                default:
                    break;
            }
        }
        return super.onTouchEvent(event);
    }
3.6.2获取用户点击点在某个步骤点值：
    /*获取手指触摸点为第几个步骤点，异常时返回-1*/
    private int getStepInDots(Point point) {
        for (int i = 0; i < dotCount; i++) {
            Rect rect = getSetpSquarRects()[i];
            int x = point.x;
            int y = point.y;
            if (rect.contains(x, y)) {
                return i;
            }
        }
        return -1;
    }
3.6.3获取各步骤点矩阵所在区域：
    /*获取所有步骤点的矩阵区域*/
    private Rect[] getSetpSquarRects() {
        Rect[] rects = new Rect[dotCount];
        int left, top, right, bottom;
        for (int i = 0; i < dotCount; i++) {
            /*此处默认所有点的区域范围为被选中图片的区域范围*/
            Rect rect = new Rect();
            left = margin + perLineLength * i - targetWH[0] / 2;
            right = margin + perLineLength * i + targetWH[0] / 2;
            if (isTextBelowLine) {
                top = (int) (line2TopMargin - targetWH[1] / 2);
                bottom = (int) (line2TopMargin + targetWH[1] / 2);
            } else {
                top = (int) (height - line2BottomMargin - targetWH[1] / 2);
                bottom = (int) (height - line2BottomMargin + targetWH[1] / 2);
            }
            rect.set(left, top, right, bottom);
            rects[i] = rect;
        }
        return rects;
    }

至此，StepView的点击事件也完成了。

3.7设置外部调用接口
     /*给外部调用接口，设置步骤总数*/
    public void setDotCount(int count) {
        if (count < 2) {
            throw new IllegalArgumentException("dot count can't be less than 2.");
        }
        dotCount = count;
    }

    /*给外部调用接口，设置说明文字信息*/
    public void setDescription(String[] descs) {
        if (descs == null || descs.length < dotCount) {
            throw new IllegalArgumentException("Descriptions can't be null or its length must maore than dot count");
        }
        texts = descs;
    }

    /*给外部调用接口，设置该view是否可点击*/
    public void setClickable(boolean clickable) {
        this.clickable = clickable;
    }

    /*给外部调用接口，设置步骤*/
    public void setStep(Step step) {
        switch (step) {
            case ONE:
                stepNum = 0;
                break;
            case TWO:
                stepNum = 1;
                break;
            case THREE:
                stepNum = 2;
                break;
            case FOUR:
                stepNum = 3;
                break;
            case FIVE:
                stepNum = 4;
                break;
            default:
                break;
        }
        invalidate();
    }
    /*此处默认最多为5个步骤*/
    public enum Step {
        ONE, TWO, THREE, FOUR, FIVE
    }

通过设置这几个接口，可以很方便的动态设置StepView。

4.部分细节详解

  • 详解1
    画线条时，由于目标步骤点比普通的大，因此在计算线条长度时应计算目标步骤点两端线条长度，避免线条长度画错，影响美观。

            /*设置线条起点X轴坐标*/
            if (i == stepNum) {
                startX = margin + perLineLength * i + targetWH[0] / 2;
            } else if (i > stepNum) {
                startX = margin + perLineLength * i + normalWH[0] / 2;
            } else {
                startX = margin + perLineLength * i + passWH[0] / 2;
            }
            /*设置线条终点X轴坐标*/
            if (i + 1 == stepNum) {
                stopX = margin + perLineLength * (i + 1) - targetWH[0] / 2;
            } else if (i + 1 < stepNum) {
                stopX = margin + perLineLength * (i + 1) - passWH[0] / 2;
            } else {
                stopX = margin + perLineLength * (i + 1) - normalWH[0] / 2;
            }

  • 详解2
    线条长度是否可变（见git view1/view2/view3/view4/view5），当设置线条长度固定时，线条的长度由view_width/(max_dot-1)决定；当设置线条长度不固定时（view6），由图可知，view6的长度与view5完整的长度一致。

  • 详解3
    文字是否在线条下面，默认是。当文字在线条上面的时候，这里采取数据倒置设置，即把设置给view之前的线条距顶部、文字距底部的距离分别设置给了线条距底部、文字距顶部的距离。见如下代码：

        //当文字在线条上面时，参数倒置
        if (!isTextBelowLine) {
            line2BottomMargin = line2TopMargin;
            text2TopMargin = text2BottomMargin;
        }

  • 详解4
    获取各步骤点的矩形区域，首先是分别对各步骤点区域的左上右下进行计算，然后设置给各步骤点矩形。

    /*获取所有步骤点的矩阵区域*/
    private Rect[] getSetpSquarRects() {
        Rect[] rects = new Rect[dotCount];
        int left, top, right, bottom;
        for (int i = 0; i < dotCount; i++) {
            /*此处默认所有点的区域范围为被选中图片的区域范围*/
            Rect rect = new Rect();
            left = margin + perLineLength * i - targetWH[0] / 2;
            right = margin + perLineLength * i + targetWH[0] / 2;
            if (isTextBelowLine) {
                top = (int) (line2TopMargin - targetWH[1] / 2);
                bottom = (int) (line2TopMargin + targetWH[1] / 2);
            } else {
                top = (int) (height - line2BottomMargin - targetWH[1] / 2);
                bottom = (int) (height - line2BottomMargin + targetWH[1] / 2);
            }
            rect.set(left, top, right, bottom);
            rects[i] = rect;
        }
        return rects;
    }

5.调用

  • xml调用

<com.qb.code.yidian.StepView
      android:id="@+id/step1"
      android:layout_width="match_parent"
      android:layout_height="50dp"
      android:background="#21201D"
      app:count="2"
      app:line_length="fixed_length"
      app:line_stroke_width="1dp"
      app:line_to_top_margin="18dp"
      app:margin="90dp"
      app:max_dot_count="5"
      app:step="one"
      app:text_size="12sp"
      app:text_to_bottom_margin="8dp" />

  • 代码调用

    private StepView step1, step2, step3, step4, step5, step6;
    private CheckBox click1, click2, click3, click4, click5, click6;
    private String[] texts = {"确认身份信息", "确认入住信息", "选择房型", "支付押金", "完成入住"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        step1 = (StepView) findViewById(R.id.step1);
        step2 = (StepView) findViewById(R.id.step2);
        step3 = (StepView) findViewById(R.id.step3);
        step4 = (StepView) findViewById(R.id.step4);
        step5 = (StepView) findViewById(R.id.step5);
        step6 = (StepView) findViewById(R.id.step6);

        click1 = (CheckBox) findViewById(R.id.click1);
        click2 = (CheckBox) findViewById(R.id.click2);
        click3 = (CheckBox) findViewById(R.id.click3);
        click4 = (CheckBox) findViewById(R.id.click4);
        click5 = (CheckBox) findViewById(R.id.click5);
        click6 = (CheckBox) findViewById(R.id.click6);


        step1.setDescription(texts);
        step2.setDescription(texts);
        step3.setDescription(texts);
        step4.setDescription(texts);
        step5.setDescription(texts);
        step6.setDescription(texts);

        step1.setStep(StepView.Step.ONE);
        step2.setStep(StepView.Step.TWO);
        step3.setStep(StepView.Step.THREE);
        step4.setStep(StepView.Step.FOUR);
        step5.setStep(StepView.Step.FIVE);
        step6.setStep(StepView.Step.FOUR);

        checkChaged(click1, step1);
        checkChaged(click2, step2);
        checkChaged(click3, step3);
        checkChaged(click4, step4);
        checkChaged(click5, step5);
        checkChaged(click6, step6);
    }

    private void checkChaged(CheckBox check, final StepView step) {
        check.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                step.setClickable(isChecked);
            }
        });
    }
Android开发自定义View之StepView(流程/步骤View) 转载https://www.codesocang.com/appboke/39559.html
标签：源码网站源码
上一篇：Android开发下拉刷新、上拉加载SmartRefreshLayout的使用
下一篇：Android开发之仿微博详情页滑动固定顶部栏效果

最完整的Android开发工具集合整理

使用C ++ 11线程支持库创建带有事件循环，

快速集成MQTT协议到Android客户端,只需要简

淘宝返利app哪个最好，返利APP怎么返利？

thinkPHP独立版社区团购带直播源码详细安装

群控系统能做到同时控制上百台手机吗？教你

面向初学者的JavaScript中的对象分解

android自定义尺子收集demo

android日历收集demo

不使用create-react-app：如何设置自己的re

错误运行app: This version of Android Stu

将ONNX图像分类模型转换为Core ML

技术博客阅读排行

最新文章

热门源码

  • 网站模版
  • web源码
  • yuanma
  • 帝国网站管理系统
  • ppvod
  • 企业网页设计模板
  • 安卓源码
  • 商城源码
  • 源代码下载
  • 建站代码
  • 原代码
  • 免费网站模板
  • 登录界面代码
  • 网站后台管理模板
  • 第三方支付源码
  • 编程电子书
  • 素材解析平台
  • 网页模板免费下载
  • 企业网站模板下载
  • 手机源码
  • 导航菜单代码
  • asp文件
  • 企业模板
  • 网站后台模板
  • 电脑登录界面
  • 网站源码出售
  • 在线客服源码
  • 网站源代码下载
  • 网页模版
  • jquery api
  • 网页框架
  • asp技术
  • 个人网页模板
  • 网站源代码
  • 网页游戏源码
  • 模板下载
  • html源代码
  • 网站模板
  • oa系统下载
  • 电子书籍
  • 免费个人网站模板
  • 精品源码
  • 源码之家
  • 商城系统源码
  • 论坛源代码
  • 免费模块
  • 飞天侠淘宝客
  • 免费下载
  • 源码社区
  • php代码
  • 企业网站源码
  • 后台管理
  • html5网站
  • 模板之家
  • 整站源码
  • asp
  • asp源代码
  • 源码超市
  • asp.net 源码
  • .net源码
  • discuz下载
  • 企业网站模版
  • 个人网页制作模板
  • 登录界面素材
  • 蜘蛛bt
  • asp网站
  • 小区物业管理系统
  • 苹果cms10模板
  • 个人主页源码
  • 办公管理系统
  • php cms
  • app模版
  • 源代码 在线
  • 个人网站设计模板
  • php论坛
  • 网站首页模板
  • 网络编程技术
  • 学生个人网页制作
  • html代码
  • 即时通讯

    • 服务咨询

    QQ-xxxxxxxx

    （周一至周六 9:00——18:00） 在线客服

    整站源码

    织梦模板 帝国cms模板 商城源码 discuz模板 wordpress模板 其他源码 app源码

    网站模板

    PHP源码 ASP源码 .NET源码 其他VIP源码 手机VIP源码

    免费源码

    协同办公 留言日记 社区论坛 上传下载 电子商务 广告排行 投票调查

    关于我们

    网站公告 关于我们 免责声明 注册协议 联系我们
    Copyright © 版权所有 本站资源均来自互联网或会员发布，如果侵犯了您的权益请与我们联系，我们将在24小时内删除！谢谢！