本文出自簡書：堯沐，如需轉載請標明出處，尊重原創謝謝
博客地址：http://www.lxweimin.com/p/94cd5021cf3c
1 純粹的View
概念:繼承子View或者系統控件如Textview,Imageview,然后自己畫點東西，實現一些動畫 這種稱之為純粹的自定義View(其實說法很多自己喜歡就好)
2 系統控件的組合
概念:通過Android中給定的控件組合成的一個新的控件我們加以使用，日歷控件就是一個很好的說明
3 步驟 一般分為幾步曲？？
1 測量 onMeasure()
2 繪畫 onDraw()
3 觸摸 onTouch()
........
構造View() --> onFinishInflate() --> onAttachedToWindow() --> onMeasure() --> onSizeChanged() --> onLayout() --> onDraw() --> onDetackedFromWindow()
這是想做出的樣子
手機不會弄動圖，2333 后期我會加一些炫酷的效果
一，實現分析
- 1 一個高度滿屏也就是match_parent，寬度自定義的一個VIew，不是系統組合控件，需要全部自己繪制
- 2 需要向外拋出自定義屬性 文字顏色，選中的文字顏色，文字大小（這里只寫3種）
- 3 測量--->onMeasure()
- 4 畫出來! --->onDraw()
- 5 onTouch事件處理
- 6 對外接口回掉
分解成若干步驟就可以開始嘗試了！
二，具體代碼
-
第一步 自定義屬性
首先要定義出你三個自定義屬性，所以需要在你 values目錄下面新建一個attr.xml文件夾
然后打開! 在里面寫上你需要的屬性比如-->
-
第二步 初始化操作
你的三個構造方法改一下 都指定到第三個方法去操作
this(context, null);
this(context, attrs, 0);
在你的第三個方法里面就可以進行一下初始化操作了 比如畫筆的初始化
initPaintAndType()代碼如下
這些都是很基礎很簡單的東西 我就不多說了
-
第三步 測量onMeasure()
測量這里有必要說一下widthMeasureSpec heightMeasureSpec 這兩個值
大家都知道測量模式把,有三種 1 UNSPECIFIED || 2 EXACTLY || 3 AT_MOST
分別代表什么意思呢- -很簡單那
- UNSPECIFIED 沒有做任何限制，他可以是任何大小，說白了就就是沒給數字（這個我拿不準，希望有人能告訴我一下）
- EXACTLY 精確數值模式，就是你在xml里面給定了大小 他就走這個模式
- AT_MOST 最大值嘛 就是 match_parent 你父組件多大 他就多大
但是這個View卻用不到這個 哈哈哈哈哈哈哈
我們看一下View 他的寬度是什么，不就是 控件寬度 = 左邊邊距 + 右邊邊距 + 字母寬度，高度呢？？ 不就是match_parent嘛 所以我們也就測量完成了- -
如果你問我為什么測量A? 你測量Y也可以- -
-
第四步 畫出來--->onDraw()
這里就要涉及一個簡單的想法 文字每次繪制的高度怎們遞增，或者說按照什么標準來遞增，我們看第一個文字 它畫的時候是不是 僅僅考慮了他基線的位置（不知道什么是基線的我也幫不了你）
所以我們計算出第一個基線的位置
baseline = 字母塊中心高度 + ascent- descent；
好的 我們知道了位置- -這不就完事了么！ 剩下的不就是看看之前有多少塊 然后每塊多高然后乘畫到第幾個了在加上自己基線的高度么- - 所以代碼是這樣的
每一個字母塊的高度 * 當前第幾個 + baseline
高度我們知道了，那寬度呢？？ 寬度不就是 控件寬度 / 2 - 字母寬度 / 2
高度，寬度我們都知道了
for循環你還不會么 然后看看效果吧 是不是出來了 美滋滋
for (int i = 0; i < 字母數量; i++) {
canvas.drawText(字母數組[i], 寬度, 字母塊的高度 * i + mBaseline, mPaintTouch);
}
-
第五步 onTouchEvent事件處理
這東西你得觸摸吧，觸摸有幾種啊？？無非就是 按下 移動 抬起來
所以基礎代碼就是 算了 基礎代碼不想寫了 switch case寫寫吧- -
一點一點分析 - -你觸摸上了怎么知道，你當前位置選擇得是那個 字母
event.getY() 可以獲取你當前觸摸得位置
我們還知道每一個字母塊的高度 所以啊- - 一個除法就出來了啊
index = (int) (event.getY() / 每一個字母塊); index 就是你觸摸的26個字母的哪一個
-
第六步 接口回掉處理
到了這一步 也就是最后一步了 需要把你的數據傳給外面- - 設置監聽
直接上代碼了
private OnTouchMyListener mOnTouchMyListener;
public void setOnTouchMyListener(OnTouchMyListener Listener) {
this.mOnTouchMyListener = Listener;
}
/**
* 回調監聽
*/
public interface OnTouchMyListener {
/**
* 側邊欄滑動監聽
*
* @param nowLetter 選中字母
* @param nowIndex 選中數字
* @param isTouch 是否正在觸碰
*/
void SidebarLetterTouchListener(String nowLetter, int nowIndex, boolean isTouch);
}
然后分析一手，我們的這個數字是不是實時改變的呢? 當然是了- -所以在 觸摸事件的移動中去發送
if (mOnTouchMyListener != null) {
mOnTouchMyListener.SidebarLetterTouchListener(現在選擇的字母, 現在選擇的下標, 手指是否離開了);
}
至此也就結束了，我在代碼中寫了一些注釋 可以看一看，東西很簡單，但是還是挺有成就感的，我接下來可能會繼續做，加一些效果 GitHub：https://github.com/XiaMuYaoDQX/CustomView 給個start吧！
（一個想進階高級的工程師 一個交流群：233138718 平時交流交流怎么吹牛逼啥的）
