2. 程式人生 > >自定義View之炫酷的水滴ViewPageIndicator

自定義View之炫酷的水滴ViewPageIndicator

阿新 • • 發佈：2019-02-02

 *本篇文章已授權微信公眾號 guolin_blog （郭霖）獨家釋出 

        去年在是某個Android群了看到有人發了一個設計圖，覺得很好。想自己實現一下，到上網搜了一些資料，比如參考，這位兄弟已經把如何繪製一個彈性的圓寫的很詳細了，在此對他表示感謝。不過他沒有完整實現這個自定義控制元件，所以還是自己動手實現一個，但是我覺得效果和原設計還有差距，一直沒寫部落格。這幾天抽時間把裡面的效果在改了改，順便也把部落格寫了。

原始碼地址放在最後，先上效果圖：

下面開始分析寫得思路，先來個方法截圖：



        用貝塞爾曲線繪製一個圓需要12個點，如上圖所示。然後在繪製時用mPath.cubicTo()依次連線，canvas.drawPath(mPath, mPaint)就能繪製一個完整的圓了，彈性圓就是在此基礎上調整p的引數。比如{p2,p3,p4},增加X座標，會使圓向右凸起。

程式碼中XPoint為x相同的一組點：p2，p3，p4和p8，p9，p10，YPoint 同理。程式碼中的mc對應圖中的M，繪製圓時這個值是固定的，理論參考：How to create circle with Bézier curves?。p1={p5,p6,p7}.,p3={p11,p0,p1},p2={p2,p3,p4},p4={p8,p9,p10}，radius為圓半徑。

private XPoint p2, p4;
private YPoint p1, p3;
private void resetP() {
    p1.setY(radius);
p1.setX(0);
p1.setMc(mc
 
);
p3.setY(-radius);
p3.setX(0);
p3.setMc(mc);
p2.setY(0);
p2.setX(radius);
p2.setMc(mc);
p4.setY(0);
p4.setX(-radius);
p4.setMc(mc);
}
resetP()在完成選項切換時都需要呼叫一下，重置繪製的圓形形狀，不然有時候會繪製不規則的圓，造成這個的原因是view重新整理頻率是有限的，有些臨界狀態直接就跳過了，導致引數沒跟著變化就繪製了影象。

下面根據兩種切換viewpager的方式分析：

第一種情況，點選indicator切換：

在onTouchEvent計算將要切換的位置，呼叫startAniTo(int currentPos, int toPos),  animator監聽setTouchAble(!animating)是禁止動畫未結束使用者又去手動滑動viewpager切換。

private boolean startAniTo(int currentPos, int toPos) {
    this.currentPos = currentPos;
    this.toPos = toPos;
    if (currentPos == toPos)
        return true;
startColor = roundColors[(this.currentPos) % 4];
endColor = roundColors[(toPos) % 4];
resetP();
startX = div + radius + (this.currentPos) * (div + 2 * radius);
distance = (toPos - this.currentPos) * (2 * radius + div) + (toPos > currentPos ? -radius : radius);
    if (animator == null) {
        animator = ValueAnimator.ofFloat(0, 1.0f);
animator.setDuration(duration);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
public void onAnimationUpdate(ValueAnimator animation) {
                mCurrentTime = (float) animation.getAnimatedValue();
invalidate();
}
        });
animator.addListener(new Animator.AnimatorListener() {
            @Override
public void onAnimationStart(Animator animation) {
                animating = true;
setTouchAble(!animating);
}

            @Override
public void onAnimationEnd(Animator animation) {
                goo();
animating = false;
setTouchAble(!animating);
}

            @Override
public void onAnimationCancel(Animator animation) {
                goo();
animating = false;
setTouchAble(!animating);
}

            @Override
public void onAnimationRepeat(Animator animation) {

            }
        });
}
    animator.start();
    if (mViewPager != null) {
        mViewPager.setCurrentItem(toPos);
}
    return true;
}

下面是dispatchDraw方法,為了更簡單看懂，我就擷取position從左向右的情況；處理臨界情況很重要，沒處理好你會發現繪製出來的是什麼鬼！

@Override
protected void dispatchDraw(Canvas canvas) {
    canvas.save();
mPath.reset();
tabNum = getChildCount();
    for (int i = 0; i < tabNum; i++) {
        canvas.drawCircle(div + radius + i * (div + 2 * radius), startY, radius, mPaintCircle);
}
    if (mCurrentTime == 0) {
        resetP();
canvas.drawCircle(div + radius + (currentPos) * (div + 2 * radius), startY, 0, mClickPaint);
mPaint.setColor(startColor);
canvas.translate(startX, startY);
p2.setX(radius);
}
    if (mCurrentTime > 0 && mCurrentTime <= 0.2) {
        if (animating)
            canvas.drawCircle(div + radius + (toPos) * (div + 2 * radius), startY, radius * 1.0f * 5 * mCurrentTime, mClickPaint);
canvas.translate(startX, startY);
p2.setX(radius + 2 * 5 * mCurrentTime * radius / 2);
} else if (mCurrentTime > 0.2 && mCurrentTime <= 0.5) {
        canvas.translate(startX + (mCurrentTime - 0.2f) * distance / 0.7f, startY);
p2.setX(2 * radius);
p1.setX(0.5f * radius * (mCurrentTime - 0.2f) / 0.3f);
p3.setX(0.5f * radius * (mCurrentTime - 0.2f) / 0.3f);
p2.setMc(mc + (mCurrentTime - 0.2f) * mc / 4 / 0.3f);
p4.setMc(mc + (mCurrentTime - 0.2f) * mc / 4 / 0.3f);
} else if (mCurrentTime > 0.5 && mCurrentTime <= 0.8) {
        canvas.translate(startX + (mCurrentTime - 0.2f) * distance / 0.7f, startY);
p1.setX(0.5f * radius + 0.5f * radius * (mCurrentTime - 0.5f) / 0.3f);
p3.setX(0.5f * radius + 0.5f * radius * (mCurrentTime - 0.5f) / 0.3f);
p2.setMc(1.25f * mc - 0.25f * mc * (mCurrentTime - 0.5f) / 0.3f);
p4.setMc(1.25f * mc - 0.25f * mc * (mCurrentTime - 0.5f) / 0.3f);
} else if (mCurrentTime > 0.8 && mCurrentTime <= 0.9) {
        p2.setMc(mc);
p4.setMc(mc);
canvas.translate(startX + (mCurrentTime - 0.2f) * distance / 0.7f, startY);
p4.setX(-radius + 1.6f * radius * (mCurrentTime - 0.8f) / 0.1f);
} else if (mCurrentTime > 0.9 && mCurrentTime < 1) {
        p1.setX(radius);
p3.setX(radius);
canvas.translate(startX + distance, startY);
p4.setX(0.6f * radius - 0.6f * radius * (mCurrentTime - 0.9f) / 0.1f);
}
    if (mCurrentTime == 1) {
        lastCurrentTime = 0;
mPaint.setColor(endColor);
p1.setX(radius);
p3.setX(radius);
canvas.translate(startX + distance, startY);
p4.setX(0);
currentPos = toPos;
resetP();
canvas.translate(radius, 0);
}
    mPath.moveTo(p1.x, p1.y);
mPath.cubicTo(p1.right.x, p1.right.y, p2.bottom.x, p2.bottom.y, p2.x, p2.y);
mPath.cubicTo(p2.top.x, p2.top.y, p3.right.x, p3.right.y, p3.x, p3.y);
mPath.cubicTo(p3.left.x, p3.left.y, p4.top.x, p4.top.y, p4.x, p4.y);
mPath.cubicTo(p4.bottom.x, p4.bottom.y, p1.left.x, p1.left.y, p1.x, p1.y);
    if (mCurrentTime > 0 && mCurrentTime < 1)
        mPaint.setColor(getCurrentColor(mCurrentTime, startColor, endColor));
canvas.drawPath(mPath, mPaint);
canvas.restore();
    super.dispatchDraw(canvas);
}
mCurrentTime 是動畫變化時重新整理的值，從0到1，根據這個值重繪時計算圓的座標。我將mCurrentTime 分為下列幾種狀態：
mCurrentTime == 0： 
        這個狀態就是根據position繪製正常的圓。
mCurrentTime > 0 && mCurrentTime <= 0.2：
        這個此時圓向右凸起，但是原本的canvas.translate和上個狀態不變，所以是圓停止在當前位置並且慢慢凸起的效果。
mCurrentTime > 0.2 && mCurrentTime <= 0.5：
        這時圓開始平移，canvas.translate(startX + (mCurrentTime - 0.2f) * distance / 0.7f, startY);那為啥是除以0.7呢？因為0到0.2沒平移，0.2到0.9平移完成，0.9到1處理回彈。平移時間只有0.9-0.2=0.7，這段時間要完成一個distance的距離的平移。同時之前圓向右凸起時,p2組的點x座標總共增加了一個radius（這個決定凸起程度）。現在要把它弄回對稱橢圓，所以p1組和p3組的點要右移半個radius，同時mc調整一下使橢圓不那麼尖；
mCurrentTime > 0.5 && mCurrentTime <= 0.8：
        p1和p3的X座標繼續往右移，mc逐漸重置為原來大小，效果就是圓的最右端固定不變，左邊的凸起縮回去，
mCurrentTime > 0.8 && mCurrentTime <= 0.9：
        左邊的p4.組點往右平移過頭，圓形成凹陷，
mCurrentTime > 0.9 && mCurrentTime < 1：
        這個階段是處理回彈，p4.組點x逐漸恢復正常。表現為回彈恢復為標準圓。
mCurrentTime == 1：
        position此時真實改變了，重置為正常的圓。
        以上的每個階段在進入下個階段時，都需要重置一下p座標，因為view重新整理頻率是有限的，有些結束的臨界狀態值直接就跳過了，導致引數沒跟著變化就繪製了影象。

第二種情況，拖動viewpager切換：

viewPager.addOnPageChangeListener,在onPageScrolled中呼叫 updateDrop(position, positionOffset, positionOffsetPixels),更新位置。這裡需要注意的是點選indicator也會回撥， 若不進行判斷會造成重複的移動，所以之前在動畫開啟的監聽時設定boolean animating值。

private void updateDrop(int position, float positionOffset, int positionOffsetPixels) {
    if (animator != null)
        animator.cancel();
    if ((position + positionOffset) - currentPos > 0)
        direction = true;
    else if ((position + positionOffset) - currentPos < 0)
        direction = false;
    if (direction)
        toPos = currentPos + 1;
    else
toPos = currentPos - 1;
startColor = roundColors[(currentPos) % 4];
endColor = roundColors[(currentPos + (direction ? 1 : -1)) % 4];
startX = div + radius + (currentPos) * (div + 2 * radius);
distance = direction ? ((2 * radius + div) + (direction ? -radius : radius)) : (-(2 * radius + div) + (direction ? -radius : radius));
mCurrentTime = position + positionOffset - (int) (position + positionOffset);
    if (!direction)
        mCurrentTime = 1 - mCurrentTime;
    if (Math.abs(lastCurrentTime - mCurrentTime) > 0.2) {//突變時根據接近0或1更改為0或1；
if (lastCurrentTime < 0.1)
            mCurrentTime = 0;
        else if (lastCurrentTime > 0.9)
            mCurrentTime = 1;
}
    lastCurrentTime = mCurrentTime;
invalidate();
}
        這裡我用mCurrentTime = position + positionOffset - (int) (position + positionOffset);然而這樣計算是有問題的，比如向左滑動，它是從0到0.9幾，然後突變為0，為了這個判斷添加了一個lastCurrentTime ，根據接近接近0或1更改為0或1。

        總結一下，需要注意的是mCurrentTime 狀態的劃分、臨界狀態的處理、以及在合適的位置重置p座標，在寫的過程幾次碰到繪製的影象莫名其妙，這是p的座標問題，查詢原因一般也是狀態沒重置。

       寫在最後：昨天投稿了，今天收到郭神的回覆，會幫我釋出文章，但是由於稿件的積壓，需要等上一段時間，還是很開心，感謝郭神。

相關推薦

自定義View之炫酷的水滴ViewPageIndicator

 *本篇文章已授權微信公眾號 guolin_blog （郭霖）獨家釋出          去年在是某個Android群了看到有人發了一個設計圖，覺得很好。想自己實現一下，到上網搜了一些資料，比如參考，這位兄弟已經把如何繪製一個彈性的圓寫的很詳細了，在此對他表示感謝。不過他沒

Android自定義View實現炫酷的主題切換動畫(仿酷安客戶端)

前兩日偶然看到了一個很炫酷的動畫效果： 判斷它是不是用的ValueAnimator, 如果是的話, 我們可以在設定-開發者選項裡面設定 “動畫時長縮放”來改變動畫時長. 所以這次我們通過設定這個選項, 把動畫速度降低之後, 很快就看出了其中的奧妙

自定義View實現炫酷進度條

本篇部落格主要介紹利用自定義View來實現自己想要的進度載入效果，其中涉及到的內容不會說的很多，但是我會稍微解釋一下，其實只要有了思路都好處理。而且個人感覺自己寫一個自定義View要比看別人寫的自定義View要簡單一點，因為你很明白裡面屬性的意義，看別人的自定義

Android自定義View之實現簡單炫酷的球體進度球

前言 最近一直在研究自定義view，正好專案中有一個根據下載進度來實現球體進度的需求，所以自己寫了個進度球，程式碼非常簡單。先看下效果： 效果還是非常不錯的。 準備知識 要實現上面的效果我們只要掌握兩個知識點就好了，一個是Handler機制，用於發訊息重新整理我們的進度球，一個是clip

自定義日期格式-炫酷

inf clas hid 輸入 right ctype prompt rip san 代碼： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta

自定義View之Rect的使用與理解

此篇為我的第一篇部落格,藉此平臺讓更多的人知道和掌握更多android的知識,希望能越來越優秀.高手過招,不只是會用,更多的是理解它的原理,能舉一反三,與已知知識對比學習,方便記憶與理解,下面,我們直接進入正題.我的文章會有一個很明顯的特徵,就是中學時期老師所講的"3W"原則,what(是什麼),h

自定義View之指南針（反編譯別人的程式碼實現）

一、說明        偶爾點開魅族手機內建的工具箱應用，發現其指南針做的還不錯，就想模擬做一個類似的效果，在這裡我們不準備自己從頭開始編寫程式碼，而是採用一點黑科技，首先，我們從魅族系統中匯出工具箱應用的apk，然後反編譯apk，結合

Android自定義View之分貝儀

一、說明        最近在整理自定義View方面的知識，偶爾看到meizu工具箱的分貝儀效果，感覺它的實效效果還挺好的，遂想自己模擬實現練練手，廢話不多說，直接開擼。 二、效果圖 首先看一下效果圖： 看效果還挺炫酷

自定義View之onMeasure()方法

前言 一個View從建立到被繪製到螢幕上，需要完成measure（測量）、layout（佈置）、draw（繪製）三個步驟，分別對應View中的measure()、layout()、draw()三個方法。網上關於這三個方法的原始碼解析文章有很多，而且一般情況下也不會去重寫它們（measure()方

Android自定義View之Canvas

https://www.jianshu.com/p/fb18c28d6627 用繼承View的方式來自定義View，我們就需要重寫onDraw方法，也就是得咱自己來畫圖了。畫圖就得用到畫筆和畫布，也就是Paint和Canvas。我們來了解下Canvas。 Canvas Canvas我們可

Android 自定義View之Canvas詳解

自定義View的相關文章： Android 實現一個簡單的自定義View Android 自定義View步驟 Android Paint詳解 Android 自定義View之Canvas相關方法說明 Android 自定義View例項之 “京東跑”

Android : 自定義View之流式佈局

寫了一個很簡單的佈局 這是周圍圓框的drawable <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android">

android自定義View之仿通訊錄側邊欄滑動，實現A-Z字母檢索

我們的手機通訊錄一般都有這樣的效果，如下圖： OK，這種效果大家都見得多了，基本上所有的android手機通訊錄都有這樣的效果。那我們今天就來看看這個效果該怎麼實現。 一.概述 1.頁面功能分析 整體上來說，左邊是一個ListView，右邊是一個自定義View，但

自定義View之自定屬性

在自定義的View中，很多時候我們需要對View新增自定義屬性步驟如下： 1) 編寫xml檔案，定義屬性名稱與屬性資料型別 //attrs.xml <resources> <declare-styleable name="MyV

Android自定義View之getTextBounds()

在Android自定義View的過程中一定會用到Paint，而paint屬性中有一個方法getTextBounds(String text,int start,int end,Rext bounds),它的中文解釋是：返回一個包含中文的矩形邊界，位置為(start,end) 英文解釋：Retur

Android自定義View之自定義屬性

在Android開發中經常會用到自定義View的情況，而在自定義View時，自定義屬性是必須用到的。 1、新建一個自定義View如CustomView 它的自定義屬性主要是通過declare-styleable標籤為其配置自定義屬性。具體做法是：在res/values/目錄下增加一個reso

Android -- 自定義view之StepView

先看看實現的效果： 2，首先我們來看看我們常規的自定義view的基礎步驟吧         1，繼承View，重寫構造方法 2，自定義屬性 3，重寫onMeasure（）測量控制元件高度 4，重寫onDra

Android 自定義View 之 可隨意拖動的View

因為趕專案本人停更兩個月 從今天開始又可以更新了 今天說一下這個可隨意拖動的view 簡單說一下這個view效果 和 發展 一開始這種效果是使用在網頁端的特別是購物類 例如某寶 某東 購物車和客服視窗 都有使用這個懸浮可拖動的設計效果 後來才發展到的移動端 還有

自定義View之仿ios分段選擇器

一：效果 1.1 可動態新增或刪除tab，更改指定tab的文字。 二：實現思路 自定義view，實現效果 動態建立textview，有幾個tab建立幾個textview 第一個tab和最後一個tab為圓角矩形，其餘的為直角矩形，通過shape檔案完成 預設選

自定義View之Region區域

Region在Android的繪製中是區域的意思，使用Region可以對圖形進行很多操作，比如區域的合併，取交集、或抑或等等。 Region的建構函式有以下四個： public Region() //無參構造 public Region(Region regi