手把手教大家擼一個知乎的自定義loadingview

buxiemg 8年前發布 | 14K 次閱讀安卓開發 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效果了，大伙，不自己自定義一個么。

來自：http://www.jianshu.com/p/f8a9cfb729f9

本文由用戶 buxiemg 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1477967213484.html

安卓開發 Android開發移動開發

手把手教大家擼一個知乎的自定義loadingview

相關經驗

相關資訊

相關文檔

目錄