Android实现一个带粘连效果的LoadingBar

 更新时间:2017年12月15日 09:54:49   作者:Greenda米  
Loading效果相信大家应该都实现过,最近发现了一个不错的效果,决定分享给大家,所以下面这篇文章主要给大家介绍了关于利用Android实现一个带粘连效果的LoadingBar的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。

前言

我们平时在开发的时候,发起网络请求前,会需要显示一个Loading,一般的做法都是在xml布局上添加好Loading,然后在Activity中,setVisibility来控制Loading的显示和隐藏,这样使用起来就很不方便,因为每一个xml都得引入一个Loading布局。

而LoadingBar就更好的解决了这个问题

最近设计师在外国的一个网站上挑了一个Loading的效果图,尝试实现之后,虽然和原图有点不太一样,但是效果还是不错的。难点就是粘连效果的实现,贝塞尔曲线的点点们简直要把我折磨死了。

先上效果图:


实例代码

然后是源码,就是一个简单VIew,可以直接放在xml中使用。

package top.greendami.greendami;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;
/**
 * Created by GreendaMi on 2017/3/17.
 */
public class PPView extends View {
 String TAG = "PPView";
 //动画开关
 boolean isLoading = true;
 Context mContext;
 private int mWidth = 100;
 private int mheight = 100;
 public int mColor;
 public Paint mPaint = new Paint();
 float time = 0;
 //小球与中间打球的最远距离
 float distance = 100;

 public PPView(Context context) {
  super(context);
  mContext = context;
 }
 public PPView(Context context, @Nullable AttributeSet attrs) {
  super(context, attrs);
  mContext = context;
  mColor = context.getResources().getColor(R.color.colorPrimary);
  init();
 }
 private void init() {
  mPaint.setAntiAlias(true);
  mPaint.setColor(mColor);
 }
 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
  int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
  //宽度至少是高度的4倍
  if (widthSpecSize < 4 * heightSpecSize) {
   widthSpecSize = 4 * heightSpecSize;
  }
  mWidth = widthSpecSize;
  mheight = heightSpecSize;
  distance = 1.2f * mheight;
  setMeasuredDimension(widthSpecSize, heightSpecSize);
 }
 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  if (isLoading) {
   //大圆半径
   float bigR = mheight * 0.32f + mheight * 0.03f * Math.abs((float) Math.sin(Math.toRadians(time)));
   float smallR = mheight * 0.22f + mheight * 0.03f * Math.abs((float) Math.cos(Math.toRadians(time)));
   float bigx = (getWidth()) / 2;
   //画中间大圆
   canvas.drawCircle(bigx, mheight / 2, bigR, mPaint);
   float smalx = getSmallCenterX();
   //画小圆
   canvas.drawCircle(smalx, mheight / 2, smallR, mPaint);
   //画链接
   //小球在右侧
   if (smalx > bigx) {
    Path path = new Path();
    //上面的贝塞尔曲线的第一个点,在大圆身上
    float x1 = bigx + bigR * (float) Math.cos(Math.toRadians(time));
    float y1 = mheight / 2 - bigR * (float) Math.sin(Math.toRadians(time));
    if (y1 > mheight / 2 - smallR) {
     y1 = mheight / 2 - smallR;
     x1 = bigx + (float) (Math.sqrt(bigR * bigR - smallR * smallR));
    }
    //上面的贝塞尔曲线的第三个点,在小圆身上
    float x2 = smalx - smallR * (float) Math.cos(Math.toRadians(time));
    float y2 = mheight / 2 - smallR * (float) Math.sin(Math.toRadians(time));
    if (y2 > mheight / 2 - smallR * 0.8) {
     y2 = mheight / 2 - smallR * 0.8f;
     x2 = smalx - smallR * (float) (Math.sqrt(1-0.64f));
    }
    //下面的贝塞尔曲线的第三个点,在小圆身上
    float x3 = smalx - smallR * (float) Math.cos(Math.toRadians(time));
    float y3 = mheight / 2 + smallR * (float) Math.sin(Math.toRadians(time));
    if (y3 < mheight / 2 + smallR * 0.8) {
     y3 = mheight / 2 + smallR * 0.8f;
     x3 = smalx - smallR * (float) (Math.sqrt(1-0.64f));
    }
    //下面的贝塞尔曲线的第一个点,在大圆身上
    float x4 = bigx + bigR * (float) Math.cos(Math.toRadians(time));
    float y4 = mheight / 2 + bigR * (float) Math.sin(Math.toRadians(time));
    if (y4 < mheight / 2 + smallR) {
     y4 = mheight / 2 + smallR;
     x4 = bigx + (float) (Math.sqrt(bigR * bigR - smallR * smallR));
    }
    path.moveTo(x1, y1);
    path.quadTo((bigx + smalx) / 2, mheight / 2, x2, y2);
    // 绘制贝赛尔曲线(Path)
    path.lineTo(x3, y3);
    path.quadTo((bigx + smalx) / 2, mheight / 2, x4, y4);
    canvas.drawPath(path, mPaint);
   }
   //小球在左侧
   if (smalx < bigx) {
    Path path = new Path();
    float x1 = bigx + bigR * (float) Math.cos(Math.toRadians(time));
    float y1 = mheight / 2 - bigR * (float) Math.sin(Math.toRadians(time));
    if (y1 > mheight / 2 - smallR) {
     y1 = mheight / 2 - smallR;
     x1 = bigx - (float) (Math.sqrt(bigR * bigR - smallR * smallR));
    }
    float x2 = smalx - smallR * (float) Math.cos(Math.toRadians(time));
    float y2 = mheight / 2 - smallR * (float) Math.sin(Math.toRadians(time));
    if (y2 > mheight / 2 - smallR * 0.8) {
     y2 = mheight / 2 - smallR * 0.8f;
     x2 = smalx + smallR * (float) (Math.sqrt(1-0.64f));
    }
    float x3 = smalx - smallR * (float) Math.cos(Math.toRadians(time));
    float y3 = mheight / 2 + smallR * (float) Math.sin(Math.toRadians(time));
    if (y3 < mheight / 2 + smallR * 0.8) {
     y3 = mheight / 2 + smallR * 0.8f;
     x3 = smalx + smallR * (float) (Math.sqrt(1-0.64f));
    }
    float x4 = bigx + bigR * (float) Math.cos(Math.toRadians(time));
    float y4 = mheight / 2 + bigR * (float) Math.sin(Math.toRadians(time));
    if (y4 < mheight / 2 + smallR) {
     y4 = mheight / 2 + smallR;
     x4 = bigx - (float) (Math.sqrt(bigR * bigR - smallR * smallR));
    }
    path.moveTo(x1, y1);
    path.quadTo((bigx + smalx) / 2, mheight / 2, x2, y2);
    // 绘制贝赛尔曲线(Path)
    path.lineTo(x3, y3);
    path.quadTo((bigx + smalx) / 2, mheight / 2, x4, y4);
    canvas.drawPath(path, mPaint);
   }
   postInvalidate();
  }
 }
 //计算小球的X坐标
 private float getSmallCenterX() {
  //此处控制速度
  time = time + 2.5f;
  return mWidth / 2 + distance * (float) Math.cos(Math.toRadians(time));
 }
}

“精心”画了一张图,对代码做了说明。


在代码中使用

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="@color/white" tools:context="top.greendami.greendami.MainActivity">
 <top.greendami.greendami.PPView
  android:layout_centerInParent="true"
  android:layout_width="400dp"
  android:layout_height="80dp" />
</RelativeLayout>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

相关文章

  • Android实现文字动态高亮读取进度效果

    Android实现文字动态高亮读取进度效果

    这篇文章主要为大家详细介绍了Android实现文字动态高亮读取进度效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • Android SurfaceView画板操作

    Android SurfaceView画板操作

    这篇文章主要为大家详细介绍了Android SurfaceView画板操作,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • Android画个时钟玩玩

    Android画个时钟玩玩

    这篇文章主要向大家介绍了Android画时钟的方法,内容很详细,分享了每一个制作步骤,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • Android 实现单指滑动双指缩放照片demo及过程解析

    Android 实现单指滑动双指缩放照片demo及过程解析

    这篇文章主要为大家介绍了Android 实现单指滑动双指缩放照片demo及过程解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • Android 利用ViewPager实现图片可以左右循环滑动效果附代码下载

    Android 利用ViewPager实现图片可以左右循环滑动效果附代码下载

    本文通过一个小demo给大家展示一段代码实现viewpage图片左右循环滑动效果,对viewgager循环滑动相关知识感兴趣的朋友一起学习吧
    2015-11-11
  • 浅析Android手机卫士关闭自动更新

    浅析Android手机卫士关闭自动更新

    保存数据的四种方式,网络,广播提供者,SharedPreferences,数据库。接下来通过本文给大家介绍android手机卫士关闭自动更新的相关知识,感兴趣的朋友一起学习吧
    2016-04-04
  • android实现背景音乐播放功能

    android实现背景音乐播放功能

    这篇文章主要为大家详细介绍了android实现背景音乐播放功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-05-05
  • DownloadManager实现文件下载功能

    DownloadManager实现文件下载功能

    这篇文章主要为大家详细介绍了DownloadManager实现文件下载功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • Android studio 连接手机调试操作步骤

    Android studio 连接手机调试操作步骤

    这篇文章主要介绍了Android studio 连接手机调试操作步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • Android开发中Button组件的使用

    Android开发中Button组件的使用

    这篇文章主要介绍了Android开发中Button组件的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07

最新评论