项目介绍

在审核某些问题的时候会出现加载进度展示的view。给用户一个感官上的效果，增强了APP与用户之间的交互体验。自定义审核过渡页纯粹就只是一个自定义view，支持展示文字以及展示图片和进度加载的更换。也方便了大家的使用吧。

效果展示：

result.gif

功能实现

1.自定义属性

  <declare-styleable name="SmartLoadingView">
        <!-- 是否开启抗锯齿 -->
        <attr name="antiAlias" format="boolean" />
        <!--整个view背景-->
        <attr name="allBack" format="reference|color" />
        <!--分割线上面部分进度条以及提示字-->
        <!--进度条中间的图片-->
        <attr name="circleBitmap" format="reference" />
        <!--展示icon的宽度-->
        <attr name="circleBitmapWidth" format="dimension" />
        <!--展示icon的高度-->
        <attr name="circleBitmapHeight" format="dimension" />
        <!--是否展示中间的图片-->
        <attr name="isShowIcon" format="boolean" />
        <!--进度条和图片之间的距离-->
        <attr name="circlePadding" format="dimension" />
        <!--进度条的宽度-->
        <attr name="circleWidth" format="dimension" />
        <!--进度条距离外部周围的距离-->
        <attr name="circleMargin" format="dimension" />
        <!--进度条的背景颜色-->
        <attr name="circleBgColor" format="color|reference" />
        <!--进度条的循环颜色-->
        <attr name="circleColor" format="color|reference" />
        <!--进度条走完一圈需要时间-->
        <attr name="circleShowTime" format="integer" />
        <!--进度条终止展示角度-->
        <attr name="circleEndAngle" format="float" />
        <!--进度条循环起始角度-->
        <attr name="circleStartAngle" format="float" />
        <!--引导页提示内容-->
        <attr name="hint" format="string" />
        <!--引导提示字颜色-->
        <attr name="hintColor" format="color|reference" />
        <!--引导提示字大小-->
        <attr name="hintSize" format="dimension" />
        <!--引导提示字是否展示-->
        <attr name="hintIsShow" format="boolean" />
        <!--分割线-->
        <!--分割线高度-->
        <attr name="lineHeight" format="dimension" />
        <!--分割线的颜色-->
        <attr name="lineColor" format="color|reference" />
        <!--分割线上下的间距-->
        <attr name="lineMargin" format="dimension" />
        <!--底部内容-->
        <!--未选中icon-->
        <attr name="bottomUnSelectIcon" format="reference" />
        <!--选中的的icon-->
        <attr name="bottomSelectIcon" format="reference" />
        <!--内容icon的宽度-->
        <attr name="bottomIconWidth" format="dimension" />
        <!--内容icon的高度-->
        <attr name="bottomIconHeight" format="dimension" />
        <!--默认内容展示颜色-->
        <attr name="defaultColor" format="color" />
        <!--选中内容展示颜色-->
        <attr name="chooseColor" format="color" />
        <!--内容标题字体颜色-->
        <attr name="titleColor" format="color" />
        <!--展示标题集合-->
        <attr name="titles" format="reference" />
        <!--默认展示内容集合-->
        <attr name="contentUnSelect" format="reference" />
        <!--选中展示内容集合-->
        <attr name="contentSelect" format="reference" />
        <!--标题字体大小-->
        <attr name="titleSize" format="dimension" />
        <!--内容字体大小-->
        <attr name="contentSize" format="dimension" />
        <!--连接线宽度-->
       <attr name="connectLineWidth" format="dimension"/>
    </declare-styleable>

2.在view中绘制对应view

• 绘制进度条

 private void drawProgress(Canvas canvas) {
        if (isShowIcon) {
            //创建指定大小的bitmap对象
            Bitmap bitmap = BitmapFactory.decodeResource(getResources(), circleBitmap);
            canvas.drawBitmap(bitmap, null, new RectF(width / 2 - circleBitmapWidth / 2,
                    (int) (circlePadding + circleMargin), (int) width / 2 + circleBitmapWidth / 2,
                    (int) (circlePadding + circleMargin) + circleBitmapHeight), bitmapPaint);
            bitmap.recycle();
            bitmap = null;
        }
        //创建指定大小的circle元
        canvas.drawCircle(width / 2, circlePadding + circleBitmapHeight / 2 + circleMargin, circleBitmapHeight / 2 + circlePadding, circleBgPaint);
        canvas.drawArc(width / 2 - circleBitmapWidth / 2 - circlePadding,
                circleMargin,
                width / 2 + circleBitmapWidth / 2 + circlePadding
                , circleBitmapHeight + circlePadding + circlePadding + circleMargin,
                circleStartAngle,
                circleEndAngle, false, circlePaint);
    }

    private int hintHeight = 0;

    private void drawHint(Canvas canvas) {
        String hints = TextUtils.isEmpty(hint) ? "正在努力评估中，请耐心等待..." : hint;
        float textWidth = hintPaint.measureText(hints);
        // 文本baseline在y轴方向的位置
        float baseLineY = Math.abs(hintPaint.ascent() + hintPaint.descent()) / 2;
        if (hintIsShow) {
            canvas.drawText(hints, width / 2 - textWidth / 2, (circlePadding + circleMargin) * 2 + circleBitmapHeight + baseLineY, hintPaint);
            hintHeight = (int) (hintPaint.density - hintPaint.ascent());
        } else {
            hintHeight = 0;
        }
    }

• 绘制下方文字

   private void drawBottom(Canvas cavas) {
        //剩下的距离，根据titles的标致均分
        remainingHeight = (int) (height - (circleMargin + circlePadding + lineMargin) * 2 - circleBitmapHeight - hintHeight - lineHeight);
        int y = (int) ((circleMargin + circlePadding + lineMargin) * 2 + circleBitmapHeight + hintHeight + lineHeight);
        int everyItem = remainingHeight / titles.size();
        //配置当前的一些常见属性

        //去左上角的点
        Point iconPoint = new Point(dp2px(mContext, 40), y + everyItem * 3 / 11);
        Point titlePoint = new Point(iconPoint.x+dp2px(mContext, 40), iconPoint.y);
        Point contentPoint = new Point(iconPoint.x+dp2px(mContext, 41), iconPoint.y + dp2px(mContext, 30));
        bottomBitmap(cavas, iconPoint, step);
        titleCenter(titles, titlePaint, cavas, titlePoint, Paint.Align.CENTER, step);
        contentCenter(contentSelect, contentUnSelect, contentPaint, cavas, contentPoint, Paint.Align.CENTER, step);
        ;
    }

    private void bottomBitmap(Canvas canvas, Point point, int step) {
        Bitmap bitmapUnSelect = BitmapFactory.decodeResource(getResources(), bottomUnSelectIcon);
        Bitmap bitmapSelect = BitmapFactory.decodeResource(getResources(), bottomSelectIcon);

        for (int i = 0; i < titles.size(); i++) {
            float yAxis = remainingHeight / titles.size();
            if (i <= step) {
                canvas.drawBitmap(bitmapSelect, null, new Rect(point.x,
                                point.y + (int) yAxis * i,
                                point.x + (int) bottomIconWidth,
                                point.y + (int) bottomIconHeight + (int) yAxis * i)
                        , bitmapPaint);
            } else {
                canvas.drawBitmap(bitmapUnSelect, null, new RectF(point.x,
                                point.y + (int) yAxis * i,
                                point.x + bottomIconWidth,
                                point.y + bottomIconHeight + (int) yAxis * i)
                        , bitmapPaint);
            }

        }
        for (int i = 1; i < titles.size(); i++) {
            if (i <= step) {
                connectLinePaint.setColor(chooseColor);
            } else {
                connectLinePaint.setColor(defaultColor);
            }
            float yAxis = remainingHeight / titles.size();
            canvas.drawLine(point.x + bottomIconWidth / 2, bottomIconHeight + point.y + yAxis * (i - 1)
                    , point.x + bottomIconWidth / 2, point.y + yAxis * i, connectLinePaint);
        }
        bitmapSelect.recycle();
        bitmapSelect = null;
        bitmapUnSelect.recycle();
        bitmapUnSelect = null;

    }

    //绘制标题
    private void titleCenter(List<String> strings, Paint paint, Canvas canvas, Point point, Paint.Align aligin, int step) {
        Paint.FontMetrics fontMetrics = paint.getFontMetrics();
        float ascent = fontMetrics.ascent;
        float descent = fontMetrics.descent;
        float stringHeight = descent - ascent;
        int length = strings.size();
        for (int i = 0; i < length; i++) {
            if (i <= step) {
                titlePaint.setColor(chooseColor);
            } else {
                titlePaint.setColor(defaultColor);
            }
            float yAxis = remainingHeight / length;
            canvas.drawText(strings.get(i) + "", point.x, point.y + yAxis * i + stringHeight, paint);
        }
    }

    //绘制内容
    private void contentCenter(List<String> select, List<String> unselect, Paint paint, Canvas canvas, Point point, Paint.Align aligin, int step) {
        Paint.FontMetrics fontMetrics = paint.getFontMetrics();
        float ascent = fontMetrics.ascent;
        float descent = fontMetrics.descent;
        float stringHeight = descent - ascent;
        for (int i = 0; i < titles.size(); i++) {
            float yAxis = remainingHeight / titles.size();
            if (i <= step) {
                contentPaint.setColor(chooseColor);
                canvas.drawText(select.get(i) + "", point.x, point.y + yAxis * i + stringHeight, paint);
            } else {
                contentPaint.setColor(defaultColor);
                canvas.drawText(unselect.get(i) + "", point.x, point.y + yAxis * i + stringHeight, paint);
            }
        }
    }

• 设置回调方法

    public interface onViewCompleteFinshListener {
        void complete();
    }

    public void setCompleteFinshListener(onViewCompleteFinshListener completeFinshListener) {
        this.completeFinshListener = completeFinshListener;
    }

public class MainActivity extends AppCompatActivity implements SmartLoadingView.onViewCompleteFinshListener {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        SmartLoadingView loadingView = findViewById(R.id.smartView);
        loadingView.setCompleteFinshListener(this);
    }

    @Override
    public void complete() {
        Toast.makeText(this, "进度已经加载完毕，该执行对应的跳转方法了", Toast.LENGTH_LONG).show();
        startActivity(new Intent(this, NextActivity.class));
        this.finish();
    }


}

3.在xml文件中调用

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <combudou.smartloadingview.view.SmartLoadingView
        android:id="@+id/smartView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:contentSelect="@array/verify_content"
        app:contentUnSelect="@array/default_content"
        app:titles="@array/titles" />


</RelativeLayout>

实现思路

功能很简单，都是一些基本的canvas方法调用，实现这个算是对基础知识的一个回顾吧。

点击查看源码