Android實(shí)現(xiàn)仿微信tab高亮icon粘著手的滑動(dòng)效果
微信的主頁分為3個(gè)tab,被選中的tab的tabwidget下面會(huì)有一個(gè)高亮的長(zhǎng)條icon,而當(dāng)切換tab頁面的時(shí)候,這個(gè)icon不是等到tab切換完成后再出現(xiàn)在當(dāng)前被選中的tab的tabwidget的下面,而是會(huì)隨著viewpager滑動(dòng)頁面的動(dòng)作也進(jìn)行滑動(dòng),從前一個(gè)tabwidget滑到當(dāng)前被選中的tabwidget,像viewpager一樣有一種粘著你的手的效果,體驗(yàn)很贊。上個(gè)圖:
本篇分析如何實(shí)現(xiàn)這個(gè)效果。
首先基本知識(shí)是,實(shí)現(xiàn)不同tab頁之間可以滑動(dòng)切換需要用到TabPageIndicator + ViewPager,其中TabPageIndicator是一個(gè)開源控件,ViewPager是android的support.v4包里面的控件。這個(gè)實(shí)現(xiàn)這里不進(jìn)行描述,網(wǎng)上有很多的例子。本篇主要實(shí)現(xiàn)高亮icon的粘手效果。
先看布局:
<RelativeLayout android:layout_width="match_parent" android:layout_height="@dimen/height_56"> <com.widget.TabPageIndicator android:id="@+id/indicator" android:layout_width="fill_parent" android:layout_height="@dimen/height_56" android:background="@drawable/base_action_bar_bg" /> <ImageView android:id="@+id/highlight_tab_iv" android:layout_height="wrap_content" android:layout_width="90dp" android:background="@drawable/base_tabpager_indicator_selected" android:layout_alignParentBottom="true"/> </RelativeLayout>
如上面的代碼,高亮icon用一個(gè)ImageView實(shí)現(xiàn),這個(gè)ImageView就是那個(gè)高亮的長(zhǎng)條icon。
然后針對(duì)這個(gè)ImageView我們需要初始化的時(shí)候計(jì)算其寬度,保證它的寬度和一個(gè)單獨(dú)的tabwidget是一樣寬的:
mHlTabIv = (ImageView)findViewById(R.id.highlight_tab_iv); RelativeLayout.LayoutParams mParams = (RelativeLayout.LayoutParams)mHlTabIv.getLayoutParams(); mParams.width = getScreenWidth() / tabCount; mTabViewWidth = mParams.width; mHlTabIv.setLayoutParams(mParams);
然后,要做到這個(gè)ImageView粘手的效果,要怎么做呢,其實(shí)android3.0之后添加的api就能很簡(jiǎn)單的實(shí)現(xiàn),3.0之前的就需要用到nineoldandroids這個(gè)第三方的開源框架,這個(gè)框架的目的就是讓3.0之前的android版本實(shí)現(xiàn)android3.0之后的屬性動(dòng)畫。這個(gè)框架的用法和3.0之后的api用法差不多,所以本篇直接用3.0之后的api。
mAnimator = mHlTabIv.animate();
下面是動(dòng)畫的實(shí)現(xiàn)代碼:
mTabPageIndicator.setOnPageChangeListener(new OnPageChangeListener() { @Override public void onPageSelected(int index) { } @Override public void onPageScrolled(int currentPos, float percent, int delta) { if (!mIsScrolling) mAnimator.translationX(mTabViewWidth * currentPos + delta / tabCount).setDuration(50) .setListener(new Animator.AnimatorListener() { @Override public void onAnimationStart(Animator animation) { mIsScrolling = true; } @Override public void onAnimationRepeat(Animator animation) { } @Override public void onAnimationEnd(Animator animation) { mIsScrolling = false; } @Override public void onAnimationCancel(Animator animation) { mIsScrolling = false; } }).start(); } @Override public void onPageScrollStateChanged(int arg0) { } });
如上代碼,只需簡(jiǎn)單的幾行代碼就能實(shí)現(xiàn)這個(gè)順滑的動(dòng)畫的效果。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
完美解決Android三星手機(jī)從圖庫選擇照片旋轉(zhuǎn)問題
這篇文章主要幫助大家完美解決了Android三星手機(jī)從圖庫選擇照片旋轉(zhuǎn)問題,很實(shí)用的解決小案例,感興趣的小伙伴們可以參考一下2016-04-04Android 雙進(jìn)程守護(hù)的實(shí)現(xiàn)代碼
這篇文章主要介紹了Android 雙進(jìn)程守護(hù)的實(shí)現(xiàn)代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08Android實(shí)現(xiàn)圓形漸變加載進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)圓形漸變加載進(jìn)度條,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-09-09Android TextView自定義數(shù)字滾動(dòng)動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了Android TextView自定義數(shù)字滾動(dòng)動(dòng)畫,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04Android自動(dòng)化測(cè)試處理各種彈窗的操作方法
這篇文章主要介紹了Android自動(dòng)化測(cè)試中如何處理各種彈窗,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2021-07-07Android 錄制手機(jī)屏幕視頻生成GIF圖片實(shí)例詳解
這篇文章主要介紹了Android 錄制手機(jī)屏幕視頻生成GIF圖片實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-03-03Android簡(jiǎn)單修改原有應(yīng)用和添加應(yīng)用的方法
這篇文章主要介紹了Android簡(jiǎn)單修改原有應(yīng)用和添加應(yīng)用的方法,涉及Android工程項(xiàng)目中針對(duì)源碼的修改及資源文件的編譯等操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-10-10Android編程實(shí)現(xiàn)讀取手機(jī)聯(lián)系人、撥號(hào)、發(fā)送短信及長(zhǎng)按菜單操作方法實(shí)例小結(jié)
這篇文章主要介紹了Android編程實(shí)現(xiàn)讀取手機(jī)聯(lián)系人、撥號(hào)、發(fā)送短信及長(zhǎng)按菜單操作方法,以完整實(shí)例形式總結(jié)分析了Android編程實(shí)現(xiàn)讀取手機(jī)聯(lián)系人、撥號(hào)、發(fā)送短信及長(zhǎng)按菜單等操作的相關(guān)技巧,需要的朋友可以參考下2015-10-10Android自定義組合控件之自定義下拉刷新和左滑刪除實(shí)例代碼
最近做了個(gè)項(xiàng)目,其中有項(xiàng)目需求,用到下拉刷新和左滑刪除,網(wǎng)上沒有找到比較理想的解決辦法。下面小編給大家分享我的一個(gè)小demo有關(guān)Android自定義組合控件之自定義下拉刷新和左滑刪除實(shí)例代碼,需要的朋友參考下2016-04-04