Android 自定义view实现进度条加载效果实例代码

这个其实很简单,思路是这样的,就是拿view的宽度,除以点的点的宽度+二个点 之间的间距,就可以算出大概能画出几个点出来,然后就通过canvas画出点,再然后就是每隔多少时间把上面移动的点不断的去改变它的坐标就可以,

效果如下:

分析图:

代码如下:

package com.example.dotloadview;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.os.Handler;
import android.util.AttributeSet;
import android.view.View;
/**
 * Created by zhouguizhi on 6/18/15.
 */
public class DotLoadProgressView extends View {
  private boolean isStart = false;
  private int dotIndex =0;//点下面的角标
  private int dotNumber = 0;
  private Paint mPaint;
  private int paddingTop = 50;
  private int paddingBottom = 50;
  private int paddingLeft = 30;
  private int paddingRight = 30;
  private Handler mHandler = new Handler();
  private long DELAY_TIME = 300;
  private Bitmap bitmap;
  private int itemDotSpace = 10;//二个点之间的距离
  private Bitmap moveBitmap ;
  private Runnable mRunnable = new Runnable() {
    @Override
    public void run() {
      if (dotNumber != 0){
        dotIndex = (dotIndex + 1) % dotNumber;
      }
      invalidate();
      mHandler.postDelayed(mRunnable, DELAY_TIME);
    }
  };
  public DotLoadProgressView(Context context, AttributeSet attrs) {
    super(context, attrs);
    moveBitmap = BitmapFactory.decodeResource(getResources(),R.drawable.active_dot);
    init();
  }
  private void init() {
    mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mPaint.setStyle(Paint.Style.FILL);
    mPaint.setDither(true);
    mPaint.setAntiAlias(true);
  }
  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    for(int i=0;i<dotNumber;i++){
      canvas.drawBitmap(bitmap,paddingLeft+i*itemDotSpace+bitmap.getWidth()*i,paddingTop,mPaint);
    }
    if(isStart){
      canvas.drawBitmap(moveBitmap,paddingLeft+dotIndex*itemDotSpace+moveBitmap.getWidth()*dotIndex,paddingTop,mPaint);
    }
  }
  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int parentWidth = MeasureSpec.getSize(widthMeasureSpec);
    bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.inactive_dot);
    setMeasuredDimension(parentWidth,bitmap.getHeight()+paddingTop+paddingBottom);
    int widthWithoutPadding = parentWidth - paddingLeft - paddingRight;
    dotNumber = calculateDotsNumber(widthWithoutPadding);
  }
  private int calculateDotsNumber(int width) {
    int number = (width / (itemDotSpace + bitmap.getWidth()));
    return number;
  }
  public void startProgress() {
    isStart = true;
    dotIndex = -1;
    mHandler.removeCallbacks(mRunnable);
    mHandler.post(mRunnable);
  }
  public void stopProgress() {
    isStart = false;
    mHandler.removeCallbacks(mRunnable);
    invalidate();
  }
  @Override
  protected void onAttachedToWindow() {
    super.onAttachedToWindow();
    startProgress();
  }
  @Override
  protected void onDetachedFromWindow() {
    super.onDetachedFromWindow();
    stopProgress();
  }
}

布局代码:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="wrap_content">
  <com.example.dotloadview.DotLoadProgressView
    android:id="@+id/progress1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    />
</RelativeLayout>

二个点其实是图片,在网上别人项目中拿出来用的,如果感觉那个点图片大了的话,有二个办法,第一叫你们美工切小点,第二就是通过drawable.setBound()去限制他大小了,我在这其实是偷懒,没有那么做,当然这点你也可以通过shade去做,而不用图片的话
最终的效果图还是这样的:

总结

以上所述是小编给大家介绍的Android 自定义view实现进度条加载效果实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • Android编程实现对话框形式进度条功能示例

    本文实例讲述了Android编程实现对话框形式进度条功能.分享给大家供大家参考,具体如下: MainActivity代码如下: package com.example.myapplication; import android.app.ProgressDialog; import android.content.DialogInterface; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; i

  • Android自定义View实现环形进度条的思路与实例

    前言 前段时间看到了豆瓣FM的音乐播放界面,有一个环形的进度条,非常的好看,于是想了想,为什么不自己做一个呢,于是就开始了自定义的过程 豆瓣FM的播放界面如下图: 功能分析 虽然功能比较简单,但是仍然需要仔细分析 1.图标外还有一圈圆圈,可以设置宽度 2.圆形进度条和进度条底部,可以设置宽度,颜色等 3.内部有一个圆形图片,可旋转 实现思路分析 1.可以设置宽度的圆圈 这个比较容易,直接在onDraw方法中使用canvas绘制即可,当然,在间距和半径的处理上需要仔细,控件本体其实还是一个长方形,

  • Android实现文件解压带进度条功能

    解压的工具类 package com.example.videodemo.zip; public class ZipProgressUtil { /*** * 解压通用方法 * * @param zipFileString * 文件路径 * @param outPathString * 解压路径 * @param listener * 加压监听 */ public static void UnZipFile(final String zipFileString, final String out

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

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

  • Android实现蜗牛进度条效果

    友好的界面可以给用户留下深刻印象,为APP加分,今天实现的这个进度条,以蜗牛爬动的方式告诉用户当前进度,体验比较棒,这里分享一下. 这里创建一组帧动画作为进度条的标志,如下: <?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:onesho

  • Android自定义圆形进度条

    今天小编来手写一个自定义圆形进度条:先看效果: 首先我们在attrs属性文件中增加几个自定义属性 <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="CustomProgressBar"> <!-- 圆形进度条进度显示的颜色 --> <attr name="roundProgressC

  • Android进度条控件progressbar使用方法详解

    一.简介 二.方法 1)进度条ProgressBar使用方法 1.在layout布局文件中创建ProgressBar控件 <ProgressBar style="?android:attr/progressBarStyleHorizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:progress="30&

  • Android编程自定义进度条颜色的方法详解

    本文实例讲述了Android编程自定义进度条颜色的方法.分享给大家供大家参考,具体如下: 先看效果图: 老是提些各种需求问题,我觉得系统默认的颜色挺好的,但是Pk不过,谁叫我们不是需求人员呢,改吧! 这个没法了只能看源码了,还好下载了源码, sources\base\core\res\res\ 下应有尽有,修改进度条颜色只能找progress ,因为是改变样式,首先找styles.xml 找到xml后,进去找到: <style name="Widget.ProgressBar"&

  • android自定义进度条渐变色View的实例代码

    最近在公司,项目不是很忙了,偶尔看见一个兄台在CSDN求助,帮忙要一个自定义的渐变色进度条,我当时看了一下进度条,感觉挺漂亮的,就尝试的去自定义view实现了一个,废话不说,先上图吧! 这个自定义的view,完全脱离了android自带的ProgressView,并且没使用一张图片,这样就能更好的降低程序代码上的耦合性! 下面我贴出代码  ,大概讲解一下实现思路吧! 复制代码 代码如下: package com.spring.progressview; import android.conten

  • android 中win10 使用uwp控件实现进度条Marquez效果

    本文将告诉大家,如何做一个带文字的进度条,这个进度条可以用在游戏,现在我做的挂机游戏就使用了他. 如何做上图的效果,实际需要的是两个控件,一个是显示文字 的 TextBlock 一个是进度条. 那么如何让 文字和左边的距离变化?使用 TranslateTransform 看起来 Marquez 的界面就是: <ProgressBar x:Name="Mcdon" Maximum="100" Minimum="0" Value="2

  • Android自定义双向进度条的实现代码

    想整个双向的进度条,就是可以选取播放范围的. 像这样: 然而官方控件里只有单向的.不要慌,我们自己画一个. 绘制一个进度条主要是三方面.1.样式,2.尺寸,3.操作监听. 完整代码来一遍: 注释基本上就把原理说明了一下. package util; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint;

随机推荐