Android自定义View实现圆形加载进度条

本文实例为大家分享了Android自定义View实现圆形加载进度条的具体代码,供大家参考,具体内容如下

效果图

话不多说,咱们直接看代码

首先第一种:

1、创建自定义View类

public class MyRelative extends View {
  
    public MyRelative(Context context) {
        this(context, null); //手动改成this...
    }
 
    public MyRelative(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);//手动改成this...
    }
 
    @SuppressLint("ResourceAsColor")
    public MyRelative(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
      
    }
}

2、自定义属性,(在values文件夹下创建一个XML,取名为atts_circle_view.xml)

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="MyRelative"> //这个name最好和你创建的自定义View类名一样
        <!--外圆颜色-->
        <attr name="outer_color" format="color" />
        <!--内圆颜色-->
        <attr name="inner_color" format="color" />
        <!--圆形宽度-->
        <attr name="border_width" format="dimension" />
        <!--字体颜色-->
        <attr name="step_text_color" format="color" />
        <!--字体大小-->
        <attr name="step_text_size" format="dimension" />
        <!--步数最大值-->
        <attr name="max_step" format="integer"/>
        <!--当前步数-->
        <attr name="curren_step" format="integer"/>
    </declare-styleable>
</resources>

3、在第三个构造方法中得到自定义属性

@SuppressLint("ResourceAsColor")
    public MyRelative(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.MyRelative);
        //圆弧宽度
        mBorderWidth = (int) typedArray.getDimension(R.styleable.MyRelative_border_width, 10);
        //外圆弧颜色
        mOuterColor = typedArray.getColor(R.styleable.MyRelative_outer_color, mOuterColor);
        //内圆弧颜色
        mInnerColor = typedArray.getInteger(R.styleable.MyRelative_inner_color, mInnerColor);
        //字体颜色
        mTextColor = typedArray.getColor(R.styleable.MyRelative_step_text_color, mTextColor);
        //字体大小
        mTextSize = (int) typedArray.getDimensionPixelSize(R.styleable.MyRelative_step_text_size, mTextSize);
        //最大步数
        mMaxStep = typedArray.getInteger(R.styleable.MyRelative_max_step, 10000);
        //当前步数
        mCurrentStep = typedArray.getInteger(R.styleable.MyRelative_curren_step, 8000);
        typedArray.recycle();
}

4、重写onMeasure方法(测量view大小)

 @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //测量宽高
        int width = MeasureSpec.getSize(widthMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);
        //将控件截成正方形
        //三目运算符取长度短的一边作为宽高
        setMeasuredDimension(width > height ? height : width, width > height ? height : width);
    }

5、重写onDraw方法(绘制)

 @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //绘制内圆弧
        int center = getWidth() / 2;
        int r = (getWidth() - mBorderWidth) / 2;
        RectF rectF = new RectF(mBorderWidth / 2, mBorderWidth / 2, center + r, center + r);
        canvas.drawArc(rectF, 135, 270, false, mInnerPaint);
        //绘制外圆弧
        if (mMaxStep == 0) {
            return;
        }
        float radio = (float) mCurrentStep / mMaxStep;
        canvas.drawArc(rectF, 135, 270 * radio, false, mOuterPaint);
        //文字
        String mText = mCurrentStep + "";
        Rect rect = new Rect();
        mTextPaint.getTextBounds(mText, 0, mText.length(), rect);
        int dx = getWidth() / 2 - rect.width() / 2;
        Paint.FontMetricsInt fontMetricsInt = mTextPaint.getFontMetricsInt();
        int dy = fontMetricsInt.bottom - fontMetricsInt.top;
        int baseLine = getHeight() / 2 + dy / 2;
        canvas.drawText(mText, dx, getHeight() / 2 + rect.height() / 2, mTextPaint);
    }

6、要想效果炫酷怎么能少了动画

写一个方法可以直接在activity中调用

public void setAnimator(int mMaxStep, int mCurrentStep, int duration) {
        this.mMaxStep = mMaxStep;
        ValueAnimator animator = ObjectAnimator.ofFloat(0, mCurrentStep);
        animator.setInterpolator(new DecelerateInterpolator());
        animator.setDuration(duration);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                float value = (float) animator.getAnimatedValue();
                setmCurrentStep((int) value);
            }
        });
        animator.start();
    }

下面附上全部代码

package com.example.customviewdome;
 
import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.annotation.SuppressLint;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.DecelerateInterpolator;
 
import androidx.annotation.Nullable;
 
public class MyRelative extends View {
    //圆弧宽度
    private int mBorderWidth;
    //外圆弧默认颜色
    private int mOuterColor = R.color.salmon;
    //内圆弧默认颜色
    private int mInnerColor = R.color.sandybrown;
    //字体默认颜色
    private int mTextColor = R.color.salmon;
    //字体默认大小
    private int mTextSize = 40;
    //步数
    private int mCurrentStep;
    //创建内圆画笔
    private Paint mInnerPaint;
    //创建外圆画笔
    private Paint mOuterPaint;
    //创建文字画笔
    private Paint mTextPaint;
    //最大步数值
    private int mMaxStep;
 
    public void setmCurrentStep(int mCurrentStep) {
        this.mCurrentStep = mCurrentStep;
        invalidate();
    }
 
    public void setmMaxStep(int mMaxStep) {
        this.mMaxStep = mMaxStep;
    }
 
    public MyRelative(Context context) {
        this(context, null);
    }
 
    public MyRelative(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }
 
    //1、分析需求
    //2、自定义属性
    //3、获得自定义属性
    //4、重写onMeasure
    //5、绘制
    //6、其他(动画等等)
    @SuppressLint("ResourceAsColor")
    public MyRelative(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.MyRelative);
        //圆弧宽度
        mBorderWidth = (int) typedArray.getDimension(R.styleable.MyRelative_border_width, 10);
        //外圆弧颜色
        mOuterColor = typedArray.getColor(R.styleable.MyRelative_outer_color, mOuterColor);
        //内圆弧颜色
        mInnerColor = typedArray.getInteger(R.styleable.MyRelative_inner_color, mInnerColor);
        //字体颜色
        mTextColor = typedArray.getColor(R.styleable.MyRelative_step_text_color, mTextColor);
        //字体大小
        mTextSize = (int) typedArray.getDimensionPixelSize(R.styleable.MyRelative_step_text_size, mTextSize);
        //最大步数
        mMaxStep = typedArray.getInteger(R.styleable.MyRelative_max_step, 10000);
        //当前步数
        mCurrentStep = typedArray.getInteger(R.styleable.MyRelative_curren_step, 8000);
        typedArray.recycle();
        //创建画笔
        mInnerPaint = new Paint();
        mInnerPaint.setStyle(Paint.Style.STROKE);
        mInnerPaint.setAntiAlias(true);
        mInnerPaint.setColor(mInnerColor);
        mInnerPaint.setStrokeWidth(mBorderWidth);
        mInnerPaint.setStrokeCap(Paint.Cap.ROUND);
        //创建画笔
        mOuterPaint = new Paint();
        mOuterPaint.setStyle(Paint.Style.STROKE);
        mOuterPaint.setAntiAlias(true);
        mOuterPaint.setColor(mOuterColor);
        mOuterPaint.setStrokeWidth(mBorderWidth);
        mOuterPaint.setStrokeCap(Paint.Cap.ROUND);
        //创建文字画笔
        mTextPaint = new Paint();
        mTextPaint.setAntiAlias(true);
        mTextPaint.setColor(mTextColor);
        mTextPaint.setTextSize(mTextSize);
    }
 
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //测量宽高
        int width = MeasureSpec.getSize(widthMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);
        //将控件截成正方形
        //三目运算符取长度短的一边作为宽高
        setMeasuredDimension(width > height ? height : width, width > height ? height : width);
    }
 
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //绘制内圆弧
        int center = getWidth() / 2;
        int r = (getWidth() - mBorderWidth) / 2;
        RectF rectF = new RectF(mBorderWidth / 2, mBorderWidth / 2, center + r, center + r);
        canvas.drawArc(rectF, 135, 270, false, mInnerPaint);
        //绘制外圆弧
        if (mMaxStep == 0) {
            return;
        }
        float radio = (float) mCurrentStep / mMaxStep;
        canvas.drawArc(rectF, 135, 270 * radio, false, mOuterPaint);
        //文字
        String mText = mCurrentStep + "";
        Rect rect = new Rect();
        mTextPaint.getTextBounds(mText, 0, mText.length(), rect);
        int dx = getWidth() / 2 - rect.width() / 2;
        Paint.FontMetricsInt fontMetricsInt = mTextPaint.getFontMetricsInt();
        int dy = fontMetricsInt.bottom - fontMetricsInt.top;
        int baseLine = getHeight() / 2 + dy / 2;
        canvas.drawText(mText, dx, getHeight() / 2 + rect.height() / 2, mTextPaint);
    }
 
    public void setAnimator(int mMaxStep, int mCurrentStep, int duration) {
        this.mMaxStep = mMaxStep;
        ValueAnimator animator = ObjectAnimator.ofFloat(0, mCurrentStep);
        animator.setInterpolator(new DecelerateInterpolator());
        animator.setDuration(duration);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                float value = (float) animator.getAnimatedValue();
                setmCurrentStep((int) value);
            }
        });
        animator.start();
    }
}

第二种圆形进度条

步骤和以上差不多,下面直接贴出源码

自定义属性

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CircleLoadingView">
        <!--内圆颜色-->
        <attr name="in_color" format="color" />
        <!--外圆颜色-->
        <attr name="out_color" format="color" />
        <!--字体颜色-->
        <attr name="text_color" format="color" />
        <!--字体大小-->
        <attr name="text_size" format="dimension" />
        <!--圆圈颜色-->
        <attr name="dot_color" format="color" />
    </declare-styleable>
</resources>

源码

package com.example.customviewdome;
 
import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.annotation.SuppressLint;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.DecelerateInterpolator;
 
import androidx.annotation.Nullable;
 
public class CircleLoadingView extends View {
    private Context mContext;
    //内圆颜色
    private int mInnerColor;
    //外圆颜色
    private int mOuterColor;
    //圆点颜色
    private int mDotColor;
    //字体颜色
    private int mTextColor;
    //字体大小
    private int mTextSize;
    //创建内圆画笔
    private Paint mInnerPaint;
    //view的宽度
    private int mWidth;
    //view的高度
    private int mHeight;
    //当前进度
    private int mProgress = 0;
    //创建文字画笔
    private Paint mTextPaint;
    //创建小圆圈画笔
    private Paint mDotPaint;
    //小圆圈起点位置
    private int mDotProgress;
 
    //仿华为圆形加载框
    public CircleLoadingView(Context context) {
        this(context, null);
    }
 
    public CircleLoadingView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }
 
    //1、自定义属性
    //2、测量控件大小
    //3、绘制内圆
    //4、绘制外圆
    @SuppressLint("ResourceAsColor")
    public CircleLoadingView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mContext = getContext();
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CircleLoadingView);
        mInnerColor = typedArray.getColor(R.styleable.CircleLoadingView_in_color, R.color.antiquewhite);
        mOuterColor = typedArray.getColor(R.styleable.CircleLoadingView_out_color, R.color.aqua);
        mTextColor = typedArray.getColor(R.styleable.CircleLoadingView_text_color, R.color.aqua);
        mDotColor = typedArray.getColor(R.styleable.CircleLoadingView_dot_color, R.color.blueviolet);
        mTextSize = typedArray.getDimensionPixelSize(R.styleable.CircleLoadingView_text_size, 20);
        typedArray.recycle();
        //创建画笔
        mInnerPaint = new Paint();
        mInnerPaint.setAntiAlias(true);
        mInnerPaint.setColor(mInnerColor);
        mInnerPaint.setStrokeWidth(DensityUtil.dip2px(mContext, 3));
        mInnerPaint.setStrokeCap(Paint.Cap.ROUND);
        mInnerPaint.setStyle(Paint.Style.STROKE);
        //创建文字画笔
        mTextPaint = new Paint();
        mTextPaint.setAntiAlias(true);
        mTextPaint.setTextSize(mTextSize);
        mTextPaint.setColor(mTextColor);
        mTextPaint.setStyle(Paint.Style.STROKE);
        //创建小圆圈画笔
        mDotPaint = new Paint();
        mDotPaint.setAntiAlias(true);
        mDotPaint.setStrokeWidth(DensityUtil.dip2px(mContext, 10));
        mDotPaint.setStyle(Paint.Style.FILL);
        mDotPaint.setColor(mDotColor);
    }
 
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        //获取宽度
        if (widthMode == MeasureSpec.EXACTLY) {
            //当宽度为精准值或match_parent时直接使用
            mWidth = widthSize;
        } else {
            //当宽度为wrap_content设置控件大小为120dp
            mWidth = DensityUtil.dip2px(mContext, 220);
        }
        //获取高度
        if (heightMode == MeasureSpec.EXACTLY) {
            mHeight = heightSize;
        } else {
            mHeight = DensityUtil.dip2px(mContext, 220);
        }
        setMeasuredDimension(mWidth > mHeight ? mHeight : mWidth, mWidth > mHeight ? mHeight : mWidth);
    }
 
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //绘制圆形
        canvas.save();
        for (int i = 0; i < 100; i++) {
            if (mProgress > i) {
                mInnerPaint.setColor(mInnerColor);
            } else {
                mInnerPaint.setColor(mOuterColor);
            }
            canvas.drawLine(mWidth / 2, 0, mWidth / 2, DensityUtil.dip2px(mContext, 10), mInnerPaint);
            canvas.rotate(3.6f, mWidth / 2, mHeight / 2);
        }
        canvas.restore();
        //绘制文字
        String progreStr = mProgress + "";
        Rect rect = new Rect();
        mTextPaint.getTextBounds(progreStr, 0, progreStr.length(), rect);
        int dx = getWidth() / 2 - rect.width() / 2;
        canvas.drawText(progreStr, dx, getHeight() / 2 + rect.height() / 2, mTextPaint);
        //绘制小圆圈
        canvas.save();
        canvas.rotate(mDotProgress * 3.6f, mWidth / 2, mHeight / 2);
        canvas.drawCircle(mWidth / 2 - (mInnerPaint.getStrokeWidth() * 2), DensityUtil.dip2px(mContext, 10) + DensityUtil.dip2px(mContext, 8), DensityUtil.dip2px(mContext, 3), mDotPaint);
        canvas.restore();
    }
 
    public void setProgress(int progress) {
        mProgress = progress;
        mDotProgress = progress;
        invalidate();
    }
 
    public void setAnimation(int progress, int time) {
        ValueAnimator valueAnimator = ObjectAnimator.ofFloat(0, progress);
        valueAnimator.setDuration(time);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                float value = (float) valueAnimator.getAnimatedValue();
                setProgress((int) value);
            }
        });
        valueAnimator.start();
    }
 
}

在xml文件中引用

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:background="@color/black"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">
 
    <com.example.customviewdome.MyRelative
        android:id="@+id/my_view"
        android:layout_width="500dp"
        android:layout_height="200dp"
        app:border_width="10dp"
        app:inner_color="@color/gray"
        app:outer_color="@color/indianred"
        app:step_text_color="@color/indianred"
        app:step_text_size="30dp" />
 
    <com.example.customviewdome.CircleLoadingView
        android:id="@+id/circleloading"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginTop="15dp"
        app:text_size="30dp"
        app:dot_color="@color/red"
        app:text_color="@color/indianred"
        app:in_color="@color/indianred"
        app:out_color="@color/gray" />
 
 
</LinearLayout>

在activity中实例化

package com.example.customviewdome;
 
import androidx.appcompat.app.AppCompatActivity;
 
import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.DecelerateInterpolator;
 
public class MainActivity extends AppCompatActivity {
 
    private MyRelative my_view;
    private CircleLoadingView circleloading;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        circleloading = findViewById(R.id.circleloading);
        circleloading.setAnimation(80, 5000);
        my_view = findViewById(R.id.my_view);
        my_view.setAnimator(100,80,5000);
    }
}

本文中使用到的DensityUtil类是为了将dp转换为px来使用,以便适配不同的屏幕显示效果

public class DensityUtil {
    public static int dip2px(Context context, float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }
}

以上就是两个效果的源码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android自定义View实现加载进度条效果

    上一篇文章总结了下自定义View的几个步骤,如果还有不清楚的同学可以先去看看Android自定义View(一),这篇文章和大家分享一下自定义加载进度条,效果如下 下面就以水平的进度条为列进行讲解: 1.首先还是在attrs.xml文件中自定义我们需要的属性: <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="GradientP

  • Android自定义带加载动画效果的环状进度条

    最近闲来无事,自定义了一个环状进度条,话不多说直接上代码 : public class CircleProgressView extends View{ private Paint mCirPaint; private Paint mArcPaint; private Paint mTextPaint; private float radius=200; private int textsize=60; private int progress=68; private int stokeWidt

  • Android开发之ProgressBar字体随着进度条的加载而滚动

    在网上翻阅了很多关于ProgressBar滚动效果,但是始终没有找到适合项目中的这种效果,故自己写这篇文章,记录一下写作过程,给大家做一个参考.先看下最终效果效果图 我这里用的是LICEcap软件录制的gif图,效果有点掉帧,哪位仁兄有比较好的录制gif的软件烦请相告,小弟在此先行谢过. 首先看下xml代码,只有两个系统控件,一个TextView和一个ProgressBar,Button只是为了方便触发进度条的效果,实际项目中可以根据需求来做.首先看下xml中的代码: <?xml version

  • Android自定义View基础开发之图片加载进度条

    学会了Paint,Canvas的基本用法之后,我们就可以动手开始实践了,先写个简单的图片加载进度条看看. 按照惯例,先看效果图,再决定要不要往下看: 既然看到这里了,应该是想了解这个图片加载进度条了,我们先看具体用法,再看自定义View的实现: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:custom="http://schemas.android.co

  • Android自定义带进度条WebView仿微信加载过程

    在正常开发中,我们客户端需要用webView加载网页,再遇到网络慢或者访问的服务器响应时,页面是空白的,所以为了用户更好的体验,我们可以提供一个正在加载的进度条,提示用户正在加载. 本文结构: 1.自定义webView 2.在应用中的使用 3.效果展示 一.自定义webView 1.首先定义一个类,继承webView,并首先构造方法 public class ProgressBarWebView extends WebView{} 自定义控件,先实现构造方法, 第一中是程序内部实例化采用,传入c

  • Android中WebView加载网页设置进度条

    本文实例为大家分享了Android中WebView加载网页设置进度条的具体代码,供大家参考,具体内容如下 效果: xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" a

  • Android自定义View仿华为圆形加载进度条

    View仿华为圆形加载进度条效果图 实现思路 可以看出该View可分为三个部分来实现 最外围的圆,该部分需要区分进度圆和底部的刻度圆,进度部分的刻度需要和底色刻度区分开来 中间显示的文字进度,需要让文字在View中居中显示 旋转的小圆点,小圆点需要模拟小球下落运动时的加速度效果,开始下落的时候慢,到最底部时最快,上来时速度再逐渐减慢 具体实现 先具体细分讲解,博客最后面给出全部源码 (1)首先为View创建自定义的xml属性 在工程的values目录下新建attrs.xml文件 <resourc

  • Android 进度条 ProgressBar的实现代码(隐藏、出现、加载进度)

    初识进度条ProgressBar 软件:Android Studio 实现: 1.点击按钮,进度条隐藏:再次点击,进度条出现.循环 2.点击按钮,水平进度条进度呈现并+10,此处进度条max为100.循环 1.圆形进度条 练习 <ProgressBar android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/progress_b

  • Android Webview添加网页加载进度条实例详解

    推荐阅读:Android WebView线性进度条实例详解 最近在android项目中使用webview嵌套了一个抽奖活动网页,活动上线,运行良好(改了N次需求和突发bug),还好这种模式的活动,只需要修改网页,不需要重新打包发布市场,这也是这种模式开发的优势之一.后来据产品哥反馈说加载网页无进度提示,好吧,这个当时真没考虑这么多,这个要加加..想当然以为轻松搞定之....其实还是比轻松要复杂点... 1.首先自定义一个WebView控件 /** * 带进度条的Webivew * @author

  • Android自定义View实现圆形加载进度条

    本文实例为大家分享了Android自定义View实现圆形加载进度条的具体代码,供大家参考,具体内容如下 效果图 话不多说,咱们直接看代码 首先第一种: 1.创建自定义View类 public class MyRelative extends View {        public MyRelative(Context context) {         this(context, null); //手动改成this...     }       public MyRelative(Conte

  • Android自定义View实现带数字的进度条实例代码

    第一步.效果展示 图1.蓝色的进度条 图2.红色的进度条 图3.多条颜色不同的进度条 图4.多条颜色不同的进度条 第二步.自定义ProgressBar实现带数字的进度条 0.项目结构 如上图所示:library项目为自定义的带数字的进度条NumberProgressBar的具体实现,demo项目为示例项目以工程依赖的方式引用library项目,然后使用自定义的带数字的进度条NumberProgressBar来做展示 如上图所示:自定义的带数字的进度条的library项目的结构图 如上图所示:de

  • JavaScript canvas绘制圆形加载进度条

    本文实例为大家分享了JavaScript canvas绘制圆形加载进度条的具体代码,供大家参考,具体内容如下 1.需求:通过canvas绘制一个圆形的进度条 2.实现思路: 2.1 绘制灰色底框 2.2 创建变量保存结束角度值和加载进度值 2.3 创建定时绘制进度条 2.3.1 修改结束角度2.3.2 开始新路径绘制2.3.3 绘制加载圆环 3.实现过程如下: css样式设置 body {             text-align: center;         }         can

  • Android自定义控件之水平圆点加载进度条

    本文实例为大家分享了Android实现水平圆点加载进度条的具体代码,供大家参考,具体内容如下 先来看看要实现的效果 实现思路非常简单:当前变化的圆点先从最小半径变大到最大最大半径再变回最小半径的圆,然后再切换到下个圆点,同时颜色会先变浅在变会原来的颜色(可以理解为透明度变化),而且当前圆点的上上一个圆点颜色会不断变浅.大概就这样(可能我实现的效果和图片的有些出入) 先看下实现效果: 直接上代码: package com.kincai.testcustomview_pointprogress; i

  • Android 自定义标题栏 显示网页加载进度的方法实例

    这阵子在做Lephone的适配,测试组提交一个bug:标题栏的文字较长时没有显示完全,其实这并不能算个bug,并且这个问题在以前其他机器也没有出现,只是说在Lephone的这个平台上显示得不怎么美观,因为联想将原生的标题栏UI进行了修改.修改的过程中遇到了一个难题,系统自带的那个标题栏进度总能够到达100%后渐退,但是我每次最后到100%那一段显示不全,尝试了用线程程序死了卡主了不说,还是一样的效果,后来同事一句话提醒了我用动画.确实是这样我猜系统的也是这样实现的,等进度到达100%后,用动画改

  • Android自定义View实现圆形进度条

    本文实例为大家分享了Android自定义View实现圆形进度条的具体代码,供大家参考,具体内容如下 效果如下: 主要代码 CircularProgressView.java public class CircularProgressView extends View { private Paint mBackPaint, mProgPaint; // 绘制画笔 private RectF mRectF; // 绘制区域 private int[] mColorArray; // 圆环渐变色 pr

  • Android实现简单的加载进度条

    本文实例为大家分享了Android实现简单的加载进度条的具体代码,供大家参考,具体内容如下 1.效果图 2.自定义progressBar package com.example.myapplication7; import android.animation.ValueAnimator; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; im

随机推荐