手把手教大家撸一个知乎的自定义loadingview

这是我的第一篇简书博客，先自我介绍一下，本人是入行android2年的小白，学习android有1年，之前自学java半年，由于对移动端的热爱，从事android开发，借此来写几篇博客。

    第一，希望能帮到各位，与大家分享下知识点；

    第二，希望能从中梳理一些知识点，这也对我后期开发以及能力的提升有一些帮助。

废话不多说，马上开始正文：

大家都知道，在android开发中，或多或少都会使用到loading状态的view，因为网络请求延时或者彰显app的logo，都会设计对应的loading，这次我就以知乎之前的loadingview为例，帮大家讲解下，这个效果怎么实现：

效果图

1.配置一个dialog的样式，我的loadingview是继承自DialogFragment的布局

     <- 设置透明背景，居中，而且可悬浮->
    <style name="cart_dialog"
    parent="@android:style/Theme.Holo.Light.Dialog">
    <item name="android:windowFrame">@null</item>
    <item name="android:windowIsFloating">true</item>
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:background">@android:color/transparent</item>
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:backgroundDimEnabled">true</item>
    <item name="android:backgroundDimAmount">0.6</item>
    </style>

2.自定义样式需要填充的layout 比如 取名：catloading_main.xml

   <RelativeLayout 
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="170dp"
   android:layout_height="200dp"
   android:background="@drawable/background"
   tools:context=".MainActivity">
    <ImageView
        android:layout_centerInParent="true"
        android:src="@drawable/mouse"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/mouse"/>
    <RelativeLayout
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
    <ImageView
        android:layout_centerInParent="true"
        android:src="@drawable/cat"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/cat"/>
    <ImageView
        android:layout_marginLeft="3.5dp"
        android:layout_marginTop="12.5dp"
        android:src="@drawable/eyes"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/eye_left"/>
    <com.roger.catloadinglibrary.EyelidView
        android:layout_marginLeft="3.5dp"
        android:layout_marginTop="12.5dp"
        android:src="@drawable/eyes"
        android:layout_width="24dp"
        android:layout_height="15dp"
        android:id="@+id/eyelid_left"/>
    <ImageView
        android:layout_marginLeft="28dp"
        android:layout_marginTop="12.5dp"
        android:src="@drawable/eyes"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/eye_right"/>
    <com.roger.catloadinglibrary.EyelidView
        android:layout_marginLeft="28dp"
        android:layout_marginTop="12.5dp"
        android:src="@drawable/eyes"
        android:layout_width="24dp"
        android:layout_height="15dp"
        android:id="@+id/eyelid_right"/>
     </RelativeLayout>
     <com.roger.catloadinglibrary.GraduallyTextView
     android:id="@+id/graduallyTextView"
     android:layout_marginBottom="10dp"
      android:textSize="15sp"
     android:layout_alignParentBottom="true"
     android:layout_centerHorizontal="true"
     android:textColor="#ffffff"
     android:text="L O A D I N G ..."
     android:layout_width="110dp"
     android:layout_height="wrap_content"/>
    </RelativeLayout>

   样式如下：

猫眼图

3.自定义样式背景的shape

    <shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#5d4773"/>
    <corners android:radius="30px"/>
    <padding android:left="0dp" android:top="0dp"    
      android:right="0dp"android:bottom="0dp" />
    </shape>

4.自定义GraduallyTextView，主要是用于展示loading...文字的自定义view

public class GraduallyTextView extends EditText {
private CharSequence text;//自定义的文本
private int startY = 0;
private float progress;//读取进度条
private boolean isLoading;//判断是否正在读取
private Paint mPaint;
private int textLength;//设置文本长度
private boolean isStop = true;
private float scaleX;//设置缩放比例
private int duration = 2000;
private float sigleDuration;

private ValueAnimator valueAnimator;//设置属性平移、缩放动画


public GraduallyTextView(Context context) {
    super(context);
    init();
}


public GraduallyTextView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}


public GraduallyTextView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
}


public void init() {
    mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mPaint.setStyle(Paint.Style.FILL);
    setBackground(null);
    setCursorVisible(false);
    setFocusable(false);
    setEnabled(false);
    setFocusableInTouchMode(false);
    //设置平移动画
    valueAnimator = ValueAnimator.ofFloat(0, 100).setDuration(duration);
    valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
    valueAnimator.setRepeatCount(Animation.INFINITE);
    valueAnimator.setRepeatMode(ValueAnimator.RESTART);
    valueAnimator.addUpdateListener(
            new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
               //设置监听，当动画更新的时候触发重绘
                    progress = (Float) animation.getAnimatedValue();
                    GraduallyTextView.this.invalidate();
                }
            });
}

//设置开始读取的方法
public void startLoading() {
    if (!isStop) {
        return;
    }
    textLength = getText().length();
    if (TextUtils.isEmpty(getText().toString())) {
        return;
    }
    isLoading = true;
    isStop = false;
    text = getText();

    scaleX = getTextScaleX() * 10;
    startY = 88;
    mPaint.setColor(getCurrentTextColor());
    mPaint.setTextSize(getTextSize());
    setMinWidth(getWidth());
    setText("");
    setHint("");
    valueAnimator.start();
    sigleDuration = 100f / textLength;
}

//停止loading的方法
public void stopLoading() {
    isLoading = false;
    valueAnimator.end();
    valueAnimator.cancel();
    isStop = true;
    setText(text);
}

//设置时长
public void setDuration(int duration) {
    this.duration = duration;
}


@Override
protected void onVisibilityChanged(View changedView, int visibility) {
    super.onVisibilityChanged(changedView, visibility);
    if (!isLoading) {
        return;
    }
    if (visibility == View.VISIBLE) {
        valueAnimator.resume();
    }
    else {
        valueAnimator.pause();
    }
}

//重写ondraw方法，如果还在loading，而且进度还小于1,则让它和透明度联动
@Override protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    if (!isStop) {
        mPaint.setAlpha(255);
        if (progress / sigleDuration >= 1) {
            canvas.drawText(String.valueOf(text), 0,
                    (int) (progress / sigleDuration), scaleX, startY,
                    mPaint);
        }
        mPaint.setAlpha(
                (int) (255 * ((progress % sigleDuration) / sigleDuration)));
        int lastOne = (int) (progress / sigleDuration);
        if (lastOne < textLength) {
            canvas.drawText(String.valueOf(text.charAt(lastOne)), 0, 1,
                    scaleX + getPaint().measureText(
                            text.subSequence(0, lastOne).toString()),
                    startY, mPaint);
            }
         }
      }
    }

5.自定义眼睛旋转的EyelidView，

    public class EyelidView extends View {
    private float progress;
    private boolean isLoading;
    private Paint mPaint;
    private boolean isStop = true;
    private int duration = 1000;
    private ValueAnimator valueAnimator;
    private boolean isFromFull;
    public EyelidView(Context context) {
        super(context);
        init();
    }
    public EyelidView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }
    public EyelidView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }
    public void init() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(Color.BLACK);
        mPaint.setStyle(Paint.Style.FILL);
        setBackground(null);
        setFocusable(false);
        setEnabled(false);
        setFocusableInTouchMode(false);
        valueAnimator = ValueAnimator.ofFloat(0, 1).setDuration(duration);
        valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
        valueAnimator.setRepeatCount(Animation.INFINITE);
        valueAnimator.setRepeatMode(ValueAnimator.REVERSE);
        valueAnimator.addUpdateListener(
              new ValueAnimator.AnimatorUpdateListener() {
                  @Override
                  public void onAnimationUpdate(ValueAnimator animation) {
                      progress = (float) animation.getAnimatedValue();
                      invalidate();
                  }
              });
      }
  //可以设置画笔颜色
    public void setColor(int color) {
        mPaint.setColor(color);
    }

//定义开始读取方法
    public void startLoading() {
          if (!isStop) {
            return;
        }
      isLoading = true;
      isStop = false;
      valueAnimator.start();
    }

    public void resetAnimator(){
        valueAnimator.start();
    }

//停止读取方法，与生命周期绑定
    public void stopLoading() {
        isLoading = false;
        valueAnimator.end();
        valueAnimator.cancel();
        isStop = true;
    }


  public void setDuration(int duration) {
        this.duration = duration;
  }

  //重写当eyeview可见状态改变时候的动画
    @Override
      protected void onVisibilityChanged(View changedView, int visibility) {
          super.onVisibilityChanged(changedView, visibility);
            if (!isLoading) {
                return;
          }
            if (visibility == View.VISIBLE) {
              valueAnimator.resume();
          }
            else {
          valueAnimator.pause();
            }
      }

   public void setFromFull(boolean fromFull) {
        isFromFull = fromFull;
    }


  @Override
   protected void onDraw(Canvas canvas) {
      super.onDraw(canvas);

        if (!isStop) {
            float bottom = 0.0f;
            if (!isFromFull) {
              bottom = progress * getHeight();
            }
            else {
                bottom = (1.0f - progress) * getHeight();
          }
          bottom = bottom >= (getHeight() / 2) ? (getHeight() / 2) : bottom;
          canvas.drawRect(0, 0, getWidth(), bottom, mPaint);
        }
    }
    private boolean whenStop() {
        return (isLoading == false && progress <= 0.001f);
        }
    }

6.编写，loadingview的核心类CatLoadingView

public class CatLoadingView extends DialogFragment {
     public CatLoadingView() {
  }
Animation  operatingAnim, eye_left_Anim, eye_right_Anim;
Dialog mDialog;
View mouse, eye_left, eye_right;
EyelidView eyelid_left, eyelid_right;
GraduallyTextView mGraduallyTextView;

@Override public Dialog onCreateDialog(Bundle savedInstanceState) {
    if (mDialog == null) {
          //以1步骤的样式创建一个dialog并填充2步骤的布局
        mDialog = new Dialog(getActivity(), R.style.cart_dialog);
        mDialog.setContentView(R.layout.catloading_main);
        mDialog.setCanceledOnTouchOutside(true);
        mDialog.getWindow().setGravity(Gravity.CENTER);
      //设置旋转动画，以圆心为准点进行旋转，时长2s
        operatingAnim = new RotateAnimation(360f, 0f,
                Animation.RELATIVE_TO_SELF, 0.5f,
                Animation.RELATIVE_TO_SELF, 0.5f);
        operatingAnim.setRepeatCount(Animation.INFINITE);
        operatingAnim.setDuration(2000);
      //创建5中的左侧眼睛旋转动画
        eye_left_Anim = new RotateAnimation(360f, 0f,
                Animation.RELATIVE_TO_SELF, 0.5f,
                Animation.RELATIVE_TO_SELF, 0.5f);
        eye_left_Anim.setRepeatCount(Animation.INFINITE);
        eye_left_Anim.setDuration(2000);
         //创建5中的右侧眼睛旋转动画
        eye_right_Anim = new RotateAnimation(360f, 0f,
                Animation.RELATIVE_TO_SELF, 0.5f,
                Animation.RELATIVE_TO_SELF, 0.5f);
        eye_right_Anim.setRepeatCount(Animation.INFINITE);
        eye_right_Anim.setDuration(2000);
        //设置水平插值器
        LinearInterpolator lin = new LinearInterpolator();
        operatingAnim.setInterpolator(lin);
        eye_left_Anim.setInterpolator(lin);
        eye_right_Anim.setInterpolator(lin);
        
        View view = mDialog.getWindow().getDecorView();

        mouse = view.findViewById(R.id.mouse);

        eye_left = view.findViewById(R.id.eye_left);

        eye_right = view.findViewById(R.id.eye_right);

        eyelid_left = (EyelidView) view.findViewById(R.id.eyelid_left);

        eyelid_left.setColor(Color.parseColor("#d0ced1"));

        eyelid_left.setFromFull(true);

        eyelid_right = (EyelidView) view.findViewById(R.id.eyelid_right);

        eyelid_right.setColor(Color.parseColor("#d0ced1"));

        eyelid_right.setFromFull(true);
          
        mGraduallyTextView = (GraduallyTextView) view.findViewById(
                R.id.graduallyTextView);

        operatingAnim.setAnimationListener(
                new Animation.AnimationListener() {
                    @Override
                    public void onAnimationStart(Animation animation) {
                    }


                    @Override
                    public void onAnimationEnd(Animation animation) {
                    }

                  //加多一个重复动画，当文本走动时，让左侧和右侧眼睛也同时转动
                    @Override
                    public void onAnimationRepeat(Animation animation) {
                        eyelid_left.resetAnimator();
                        eyelid_right.resetAnimator();
                    }
                });
              }
             return mDialog;
          }
       //重写onresume方法，绑定activity的生命周期
     @Override public void onResume() {
        super.onResume();
        mouse.setAnimation(operatingAnim);
        eye_left.setAnimation(eye_left_Anim);
        eye_right.setAnimation(eye_right_Anim);
        eyelid_left.startLoading();
        eyelid_right.startLoading();
        mGraduallyTextView.startLoading();
         }
      //重写onPause方法，绑定activity的生命周期
     @Override public void onPause() {
       super.onPause();
       operatingAnim.reset();
        eye_left_Anim.reset();
        eye_right_Anim.reset();
        mouse.clearAnimation();
        eye_left.clearAnimation();
        eye_right.clearAnimation();

        eyelid_left.stopLoading();
        eyelid_right.stopLoading();
        mGraduallyTextView.stopLoading();
    }
     //设置关闭loadingview的方法
       @Override public void onDismiss(DialogInterface dialog) {
         super.onDismiss(dialog);
         mDialog = null;
         System.gc();
         }
    }

7.最后一步，你只需要在引用到loadingview的地方，添加

CatLoadingView mView = new CatLoadingView();
mView.show(getSupportFragmentManager(), "");

OK，这样就可以实现，有个性的loadlingview效果了，大伙，不自己自定义一个么。