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