Android自定義View Flyme6的Viewpager指示器
最新更新的Flyme6整體效果不錯(cuò),動(dòng)畫效果增加了很多了,看了看flyme6的Viewpager指示器,覺得有點(diǎn)意思,就模仿寫了一下,整體效果如下:
Gradle
allprojects { repositories { maven { url 'https://jitpack.io' } } } dependencies { compile 'com.github.Dawish:FlymeTabStrip:v1.0.2' }
Attrs
<declare-styleable name="FlymeTabStrip"> <!-- 指示器高度 --> <attr name="indicatorHeight" format="dimension" /> <!-- 指示器滑動(dòng)條顏色 --> <attr name="indicatorColor" format="color" /> <!-- 指示器左右間距 --> <attr name="indicatorMargin" format="dimension" /> <!-- 指示器文字顏色 --> <attr name="indicatorTextColor" format="color" /> <!-- 指示器文字大小 --> <attr name="indicatorTextSize" format="dimension" /> <!-- 指示器文字被選中后的大小 --> <attr name="selectedIndicatorTextSize" format="dimension" /> </declare-styleable>
Sample
Demo地址:https://github.com/Dawish/FlymeTabStrip/tree/master/samples
代碼解釋
指示器的動(dòng)畫效果,主要依賴Viewpager的滑動(dòng)監(jiān)聽器,在Viewpager的滑動(dòng)過程中不斷重繪只是控件就可以實(shí)現(xiàn)指示器的位移和縮放動(dòng)畫效果。首先我們講解一下ViewPager的三個(gè)滾動(dòng)監(jiān)聽方法:
/** * viewPager狀態(tài)改變監(jiān)聽 * */ private class PagerStateChangeListener implements OnPageChangeListener { /** * viewpager狀態(tài)監(jiān)聽 * @param state */ @Override public void onPageScrollStateChanged(int state) { if (state == ViewPager.SCROLL_STATE_IDLE) { // 0 空閑狀態(tài) pager處于空閑狀態(tài) scrollToChild(viewPager.getCurrentItem(), 0); }else if(state == ViewPager.SCROLL_STATE_SETTLING){ // 2 正在自動(dòng)沉降,相當(dāng)于松手后,pager恢復(fù)到一個(gè)完整pager的過程 }else if(state == ViewPager.SCROLL_STATE_DRAGGING){ // 1 viewpager正在被滑動(dòng),處于正在拖拽中 } } /** * viewpager正在滑動(dòng),會(huì)回調(diào)一些偏移量 * 滾動(dòng)時(shí),只要處理指示器下方橫線的滾動(dòng) * @param position 當(dāng)前頁面 * @param positionOffset 當(dāng)前頁面偏移的百分比 * @param positionOffsetPixels 當(dāng)前頁面偏移的像素值 */ @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { currentPosition = position; currentPositionOffset = positionOffset; // 處理指示器下方橫線的滾動(dòng),scrollToChild會(huì)不斷調(diào)用ondraw方法,繪制在重繪下劃線,這就是移動(dòng)動(dòng)畫效果 scrollToChild(position, (int) (positionOffset * container.getChildAt(position).getWidth())); invalidate(); } /** * page滾動(dòng)結(jié)束 * @param position 滾動(dòng)結(jié)束后選中的頁面 */ @Override public void onPageSelected(int position) { // 滾動(dòng)結(jié)束后的未知 selectedPosition = position; // 更新指示器狀態(tài) updateTabStyle(); } }
其中最主要的方法就是:
/** * viewpager正在滑動(dòng),會(huì)回調(diào)一些偏移量 * 滾動(dòng)時(shí),只要處理指示器下方橫線的滾動(dòng) * @param position 當(dāng)前頁面 * @param positionOffset 當(dāng)前頁面偏移的百分比 * @param positionOffsetPixels 當(dāng)前頁面偏移的像素值 */ @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { currentPosition = position; currentPositionOffset = positionOffset; // 處理指示器下方橫線的滾動(dòng),scrollToChild會(huì)不斷調(diào)用ondraw方法,繪制在重繪下劃線,這就是移動(dòng)動(dòng)畫效果 scrollToChild(position, (int) (positionOffset * container.getChildAt(position).getWidth())); invalidate(); }
github地址:https://github.com/Dawish/FlymeTabStrip
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android 中 viewpager 滑動(dòng)指示器的實(shí)例代碼
- Android開發(fā)實(shí)現(xiàn)的ViewPager引導(dǎo)頁功能(動(dòng)態(tài)加載指示器)詳解
- Android自定義ViewPagerIndicator實(shí)現(xiàn)炫酷導(dǎo)航欄指示器(ViewPager+Fragment)
- Android實(shí)現(xiàn)基于ViewPager的無限循環(huán)自動(dòng)播放帶指示器的輪播圖CarouselFigureView控件
- Android實(shí)現(xiàn)帶指示器的自動(dòng)輪播式ViewPager
- Android自定義ViewPager指示器
- Android應(yīng)用中仿今日頭條App制作ViewPager指示器
- Android應(yīng)用中使用ViewPager和ViewPager指示器來制作Tab標(biāo)簽
- Android ViewPager小圓點(diǎn)指示器
相關(guān)文章
Android巧用ViewPager實(shí)現(xiàn)左右循環(huán)滑動(dòng)圖片
這篇文章主要為大家詳細(xì)介紹了Android巧用ViewPager實(shí)現(xiàn)左右循環(huán)滑動(dòng)圖片的相關(guān)資料,感興趣的小伙伴們可以參考一下2016-05-05Android使用Circular Reveal動(dòng)畫讓頁面跳轉(zhuǎn)更炫酷
本篇文章主要介紹了Android使用Circular Reveal動(dòng)畫讓頁面跳轉(zhuǎn)更炫酷,具有一定的參考價(jià)值,有興趣的可以了解一下2017-08-08Android定時(shí)器實(shí)現(xiàn)的幾種方式整理及removeCallbacks失效問題解決
本文為大家詳細(xì)介紹下Android 定時(shí)器實(shí)現(xiàn)的幾種方式:Handler + Runnable、Timer的方式、Handle與線程的sleep(long )方法和removeCallbacks失效問題如何解決2013-06-06Android UI組件LinearLayout線性布局詳解
這篇文章主要為大家詳細(xì)介紹了AndroidUI組件LinearLayout線性布局,具有一定的實(shí)用性,感興趣的小伙伴們可以參考一下2016-08-08Android實(shí)現(xiàn)傾斜角標(biāo)樣式
最新小編接到這樣一個(gè)項(xiàng)目,需要在一個(gè)距形卡片上做一個(gè)傾斜的Tag,類似支付寶上的一個(gè)功能,接著小編給大家?guī)砹藢?shí)現(xiàn)思路,對(duì)android 傾斜角標(biāo)的實(shí)現(xiàn)方法感興趣的朋友跟隨小編一起看看吧2019-10-10Android組件化開發(fā)路由的設(shè)計(jì)實(shí)踐
本篇文章主要介紹了Android組件化開發(fā)路由的設(shè)計(jì)實(shí)踐,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05分享一個(gè)輕量級(jí)圖片加載類 ImageLoader
這篇文章給大家分享一個(gè)輕量級(jí)圖片加載類 ImageLoader,需要的朋友可以參考下2016-08-08Android 混合動(dòng)畫詳解及實(shí)現(xiàn)代碼
這篇文章主要介紹了Android 混合動(dòng)畫詳解及實(shí)現(xiàn)代碼的相關(guān)資料,簡單的一種動(dòng)畫(如旋轉(zhuǎn)、縮放、漸變、位移等)有時(shí)候并不能滿足我們項(xiàng)目的要求,這時(shí)候就需要運(yùn)用到混合動(dòng)畫,需要的朋友可以參考下2016-11-11