前言

扯來扯去，前面三篇自定義 View 文章，終於扯完了一些知識點，有些枯燥，所以我也是講下核心點，沒有細分析，主要是讓各位有點印象和了解。這篇終於是實踐，敲程式碼的了，因為工作原因，這篇拖的比較久，不過這系列會一直更新下去的，會把我工作中用到的自定義 View 也會加上去。好了，迴歸正原題，說到自定義 View ，似乎都離不開貝塞爾曲線，因此，第一篇實踐就是與貝塞爾曲線有關的。

目錄

一、貝塞爾曲線

1、貝塞爾曲線簡介

來看看官方對神奇的賽貝爾曲線的介紹：貝塞爾曲線於 1962，由法國工程師皮埃爾·貝塞爾所廣泛發表，他運用貝塞爾曲線來為汽車的主體進行設計。貝塞爾曲線最初由 Paul de Casteljau 於 1959 年運用 de Casteljau 演演算法開發，以穩定數值的方法求出貝茲曲線。貝塞爾曲線主要用於二維圖形應用程式中的數學曲線，曲線由起始點，終止點（也稱錨點）和控制點組成，通過調整控制點，貝塞爾曲線的形狀會發生變化。

看完後是不是一臉矇蔽，一句話理解貝塞爾曲線就是：將任意一條曲線轉化為精確的數學公式。

2、賽貝爾曲線公式

竟然說了是將曲線轉化為精確的數學公式，那麼我們來看下具體的數學公式（ 注：以下公式中，B(t) 為 t 時間下點的座標； P0 為起點,Pn 為終點,Pi 為控制點 ）：

(1) 一階貝塞爾曲線(線段)

由 P0 至 P1 的連續點， 描述的一條線段

(2) 二階貝塞爾曲線(拋物線)：

由 P0 至 P1 的連續點 Q0，描述一條線段。

由 P1 至 P2 的連續點 Q1，描述一條線段。

由 Q0 至 Q1 的連續點 B(t)，描述一條二次貝塞爾曲線。

(3) 三階貝塞爾曲線：

3、貝塞爾曲線在 Android 中的應用

其實貝塞爾曲線在 Android 自定義 View 中運用還是挺多的，比如

• Android 5.0 後下拉重新整理的陰影曲線
• QQ 訊息提醒的小紅點
• 用於左右滑動時顯示個數的點的移動動畫
• 水流波動效果
• 一個彈性效果的抽屜選單

4、Android Path 類中提供貝塞爾曲線的操作方法

在 Android 開發中，要實現貝塞爾曲線其實還是很簡單的，因為 Android 已經給我們提供了相關介面，此介面方法在 Path 類中，而關於 Path 類的講解，前面一篇部落格就介紹過了。而且通過 Android 的 API 可以知道，貝塞爾曲線從 API1 就開始支援了。下面就是賽貝爾曲線對應的 API 方法了。

貝塞爾曲線	對應的方法	演示動畫
一階曲線 (線性曲線)	lineTo
二階曲線	quadTo
三階曲線	cubicTo
四階曲線	無

5、通過 de Casteljau 演算法繪製貝塞爾曲線

上面提過，Path 類中提供了畫一到三階的貝塞爾曲線的方法，如果我們需要繪製更高階的貝塞爾曲線呢？我們可以採用德卡斯特里奧演算法（De Casteljau’s Algorithm）來實現貝塞爾曲線。

效果圖：

Github 上的程式碼：beziercurve

裡面主要就一個類，beziercurve ，這是個自定義 View ，BezierCurve 裡面主要提供了以下的方法：

Methods:

method 方法	description 描述
void start()	開始貝塞爾曲線（required）
void stop()	停止貝塞爾曲線（optional）
boolean addPoint()	增加控制點（optional）
boolean delPoint()	刪除控制點（optional）
int getOrder()	獲取貝塞爾曲線階數（optional）
void setRate(int rate)	設定移動速率（optional）
void setTangent(boolean tangent)	設定是否顯示切線（optional）
void setLoop(boolean loop)	設定是否迴圈（optional）
void setOrder(int order)	設定貝塞爾曲線階數（optional）

最後通過 BezierCurveActivity 來展示。

二、貝塞爾曲線的應用

1.QQ 訊息提醒可拖拽紅點

Github 上的專案地址：qqmsgnotify

效果圖：

主要是在繪製紅點的時候運用了貝塞爾曲線，在固定的位置中，拖拽的時候，有一種粘性的效果，就是這裡運用了貝塞爾曲線。

運用：

(1) 在對應的位置建立一個 TextView
(2) 設定 GooViewListener 監聽事件就可以了

 mTvPoint = (TextView) findViewById(R.id.point_conversation);
        mTvPoint.setText("10");
        mTvPoint.setTag(10);
        GooViewListener listener = new GooViewListener(this, mTvPoint) {
            @Override
            public void onDisappear(PointF mDragCenter) {
                super.onDisappear(mDragCenter);
                Toast.makeText(QQMsgNotifyActivity.this, "消失了", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onReset(boolean isOutOfRange) {
                super.onReset(isOutOfRange);
                Toast.makeText(QQMsgNotifyActivity.this, "重置了", Toast.LENGTH_SHORT).show();
            }
        };
        mTvPoint.setOnTouchListener(listener);複製程式碼

2.Viewpage頁面引導切換動畫

Github 上的專案地址：guideview

效果圖：

)

其實這個例子也是，運用貝塞爾曲線也就是在繪製那個圓形的地方而已，其他地方基本不怎麼使用貝塞爾曲線。