Android實(shí)現(xiàn)微信首頁(yè)左右滑動(dòng)切換效果
大家看到微信首頁(yè)切換效果有沒(méi)有覺(jué)得很炫,滑動(dòng)切換,點(diǎn)擊底部bar瞬間切換,滑動(dòng)切換漸變效果,線上效果圖:
之前也在博客上看到別人的實(shí)現(xiàn),再次基礎(chǔ)上,我做了些優(yōu)化。首先說(shuō)下實(shí)現(xiàn)原理,大神略過(guò),o(╯□╰)o
頁(yè)面上看到的三個(gè)頁(yè)面是三個(gè)Fragment, 左右滑動(dòng)使用viewpager,相信大家也都是這么再用,那么底部用的是什么技術(shù)呢,底部漸變其實(shí)就是重寫了ImageView,以及在左右滑動(dòng)時(shí),改變了TextView的顏色值,是不是很簡(jiǎn)單...下面我們一步一步的來(lái):
1.自定義ImageView:
/** * 初始化資源圖片bitmap及相關(guān)繪制對(duì)象 * @param normal normals * @param selected focus */ public final void init(int normal, int selected, int width, int height) { this.mNormalIcon = createBitmap(normal); this.mSelectedIcon = createBitmap(selected); this.mNormalRect = new Rect(0, 0, width, height); this.mSelectedRect = new Rect(0, 0, width, height); this.mPaint = new Paint(1); }
這里定義了兩個(gè)Bitmap,分別對(duì)應(yīng)獲得焦點(diǎn)和失去焦點(diǎn)時(shí)顯示的bitmap圖像,兩個(gè)矩陣,在繪制過(guò)程中使用到,定義了一個(gè)外部調(diào)用的方法,在左右滑動(dòng)過(guò)程中,通過(guò)偏移值改變透明值,兩張圖片疊加就是對(duì)應(yīng)的過(guò)度效果。
然后通通過(guò)滑動(dòng)過(guò)程中不斷刷新view完成重新繪制,由此有了重寫onDraw方法:
@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if (this.mPaint == null) { return; } this.mPaint.setAlpha(255 - this.mSelectedAlpha); canvas.drawBitmap(this.mNormalIcon, null, this.mNormalRect, this.mPaint); this.mPaint.setAlpha(this.mSelectedAlpha); canvas.drawBitmap(this.mSelectedIcon, null, this.mSelectedRect, this.mPaint); }
這里可以看到同伙Paint改變傳入的兩個(gè)bitmap透明度,從而達(dá)到漸變效果,其中mSelectedAlpha為外部傳入透明值
2.自定義實(shí)現(xiàn)底部bar容器,這里通過(guò)重寫LinearLayout實(shí)現(xiàn)(姑且叫做container), 在container中我們要做這么幾件事:
1).定義外表調(diào)用接口,接收底部顯示資源信息:
a.首先是初始化參數(shù):
public void initContainer (String[] titles, int[][] iconsRes, int[] colors, boolean showTransitionColor) { this.mTitles = titles; this.mIconRes = iconsRes; this.mTextNormalColor = getResources().getColor(colors[0]); this.mTextSelectedColor = getResources().getColor(colors[1]); this.mShowTransitionColor = showTransitionColor; }
這里傳入了tab顯示的文字?jǐn)?shù)組、顯示的圖片資源數(shù)組、默認(rèn)顏色和獲得焦點(diǎn)時(shí)顏色值數(shù)組(數(shù)組大小=2),以及切換時(shí)是否顯示過(guò)渡效果
b.設(shè)置布局文件及布局文件里對(duì)應(yīng)的控件ID、顯示圖片時(shí)圖片寬高參數(shù),提供了三種方式:
①圖文tab:
/** * 設(shè)置布局文件及相關(guān)控件id * @param layout layout布局文件 id * @param iconId ImageView 控件 id id <=0 時(shí)不顯示 * @param textId TextView 控件 id id <=0 時(shí)不顯示 * @param width icon 寬度 * @param height icon 高度 */ public void setContainerLayout (int layout, int iconId, int textId, int width, int height) { mLayoutId = layout; mTextViewId = textId; mIconVIewId = iconId; mIconWidth = width; mIconHeight = height; }
這里的layout及tab的布局文件, iconId對(duì)應(yīng)的是自定義ImageView的資源Id, textId對(duì)應(yīng)的是TextView的Id, 寬高指的是圖片顯示的寬高
②只有文字tab: 只顯示文字tab時(shí)傳入iconId即可
③只有圖片tab: 相應(yīng)的,是在圖文tab提供的方法上,傳入文本textId=0即可
c.注入ViewPager:這里需要監(jiān)聽(tīng)ViewPager的滑動(dòng)來(lái)改變漸變色
2).添加tab到容易container中:
這里需要判斷iconId以及TextId是否大于0,=0即不顯示,同時(shí)為了居中平分底部container長(zhǎng)度, 所有tab等分底部container
/** * <p>添加tab view到當(dāng)前容器</p> */ private void addTabViewToContainer() { final PagerAdapter adapter = mViewPager.getAdapter(); mTabView = new View[adapter.getCount()]; //這里根據(jù)adapter判斷底部要顯示的tab總數(shù) for (int index = 0, len = adapter.getCount(); index < len; index++) { final View tabView = LayoutInflater.from(getContext()).inflate(mLayoutId, this, false); //加載tab布局 mTabView[index] = tabView; /*tabIconView初始化*/ TabIconView iconView = null; if (mIconVIewId > 0) { // 傳入的圖片資源文件ID不為0時(shí),表示需要顯示icon,然后初始化該View iconView = (TabIconView) tabView.findViewById(mIconVIewId); iconView.init(mIconRes[index][0], mIconRes[index][1], mIconWidth, mIconHeight); //這里調(diào)了自定義ImageView的init方法 } /*tabTextView初始化*/ TextView textView = null; if (mTextViewId > 0) { textView = (TextView) tabView.findViewById(mTextViewId); textView.setText(mTitles[index]); } /*設(shè)置寬度,等分container*/ LayoutParams lp = (LayoutParams) tabView.getLayoutParams(); lp.width = 0; lp.weight = 1; /*添加tab點(diǎn)擊事件*/ addTabOnClickListener(tabView, index); /*設(shè)置當(dāng)前狀態(tài)*/ if (index == mViewPager.getCurrentItem()) { //當(dāng)先顯示tab,設(shè)置初始狀態(tài)為獲得焦點(diǎn)狀態(tài) if (iconView != null) { iconView.offsetChanged(0); } tabView.setSelected(true); if (textView != null) { textView.setTextColor(mTextSelectedColor); } } addView(tabView); } }
3).監(jiān)聽(tīng)viewPager的滑動(dòng)事件,根據(jù)偏移值更新container,完成重繪操作
4).在container的onDraw中根據(jù)偏移量計(jì)算透明值,這里文本偏移值計(jì)算用了一個(gè)開(kāi)源的代碼
@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); final int childCount = getChildCount(); if (childCount > 0) { /*當(dāng)發(fā)生偏移時(shí),繪制漸變區(qū)域*/ if (mSelectionOffset > 0f && mSelectedPosition < (getChildCount() - 1) && mShowTransitionColor) { /*獲取當(dāng)前tab和下一tab view */ View selectedTab = getChildAt(mSelectedPosition); View nextTab = getChildAt(mSelectedPosition + 1); /*顯示tab icon時(shí),刷新各自view 透明度*/ if (mIconVIewId > 0) { View selectedIconView = selectedTab.findViewById(mIconVIewId); View nextIconView = nextTab.findViewById(mIconVIewId); //draw icon alpha if (selectedIconView instanceof TabIconView && nextIconView instanceof TabIconView) { ((TabIconView) selectedIconView).offsetChanged(mSelectionOffset); ((TabIconView) nextIconView).offsetChanged(1 - mSelectionOffset); } } /*顯示tab text,刷新各自view 透明度*/ if (mTextViewId > 0) { View selectedTextView = selectedTab.findViewById(mTextViewId); View nextTextView = nextTab.findViewById(mTextViewId); //draw text color Integer selectedColor = (Integer) evaluate(mSelectionOffset, mTextSelectedColor, mTextNormalColor); Integer nextColor = (Integer) evaluate(1 - mSelectionOffset, mTextSelectedColor, mTextNormalColor); if (selectedTextView instanceof TextView && nextTextView instanceof TextView) { ((TextView) selectedTextView).setTextColor(selectedColor); ((TextView) nextTextView).setTextColor(nextColor); } } } } }
3.定義個(gè)FragmentAdapter,這個(gè)就略過(guò),比較簡(jiǎn)單了
4.做了以上準(zhǔn)備工作,就可以寫個(gè)測(cè)試?yán)釉囋囆Ч?,?dāng)然這里為了看到效果,我們需要事先準(zhǔn)備好幾張圖片,以及幾個(gè)fragment
private void initViews() { //得到apdater TabFragmentAdapter mAdapter = new TabFragmentAdapter(getSupportFragmentManager(), fragments); ViewPager mPager = (ViewPager) findViewById(R.id.tab_pager); mPager.setAdapter(mAdapter); //如果當(dāng)前類需要對(duì)viewPager做監(jiān)聽(tīng) TabContainerView mTabLayout = (TabContainerView) findViewById(R.id.ll_tab_container); mTabLayout.setOnPageChangeListener(this); mTabLayout.initContainer(getResources().getStringArray(R.array.tab_main_title), ICONS_RES, TAB_COLORS, true); int width = getResources().getDimensionPixelSize(R.dimen.tab_icon_width); int height = getResources().getDimensionPixelSize(R.dimen.tab_icon_height); mTabLayout.setContainerLayout(R.layout.tab_container_view, R.id.iv_tab_icon, R.id.tv_tab_text, width, height); // mTabLayout.setSingleTextLayout(R.layout.tab_container_view, R.id.tv_tab_text); // mTabLayout.setSingleIconLayout(R.layout.tab_container_view, R.id.iv_tab_icon); mTabLayout.setViewPager(mPager); mPager.setCurrentItem(getIntent().getIntExtra("tab", 0)); }
ManActivity對(duì)應(yīng)的xml就比較簡(jiǎn)單了,可以參考源碼,最后運(yùn)行效果,就是上面的貼圖了,到此防微信的滑動(dòng)切換就完成了,源碼請(qǐng)?jiān)L問(wèn)以下鏈接:
源碼下載:https://github.com/JarekWang/wechathome.git
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android實(shí)現(xiàn)界面左右滑動(dòng)切換功能
- Android App中使用ViewPager+Fragment實(shí)現(xiàn)滑動(dòng)切換效果
- Android開(kāi)發(fā)之使用ViewPager實(shí)現(xiàn)圖片左右滑動(dòng)切換效果
- Android實(shí)現(xiàn)簡(jiǎn)單底部導(dǎo)航欄 Android仿微信滑動(dòng)切換效果
- Android實(shí)現(xiàn)滑動(dòng)屏幕切換圖片
- Android編程實(shí)現(xiàn)ViewPager多頁(yè)面滑動(dòng)切換及動(dòng)畫效果的方法
- android實(shí)現(xiàn)切換日期左右無(wú)限滑動(dòng)效果
- Android使用TabLayou+fragment+viewpager實(shí)現(xiàn)滑動(dòng)切換頁(yè)面效果
- Android Listview上下拉動(dòng)刷新tab滑動(dòng)切換功能
- android?viewflipper實(shí)現(xiàn)左右滑動(dòng)切換顯示圖片
相關(guān)文章
Android編程實(shí)現(xiàn)圖片放大縮小功能ZoomControls控件用法實(shí)例
這篇文章主要介紹了Android編程實(shí)現(xiàn)圖片放大縮小功能ZoomControls控件用法,結(jié)合具體實(shí)例形式分析了Android ZoomControls控件實(shí)現(xiàn)圖片縮放的具體操作方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-09-09android?ViewPager實(shí)現(xiàn)一個(gè)無(wú)限輪播圖
大家好,本篇文章主要講的是android?ViewPager實(shí)現(xiàn)一個(gè)無(wú)限輪播圖,感興趣的同學(xué)趕快來(lái)看一看吧,對(duì)你有幫助的話記得收藏一下2022-02-02Android Flutter實(shí)現(xiàn)圖片滑動(dòng)切換效果
Flutter 為了簡(jiǎn)化開(kāi)發(fā),提供了不少轉(zhuǎn)換動(dòng)畫組件,這類組件通常命名為 xxTransition。本篇要介紹的就是 SlideTransition,并用它實(shí)現(xiàn)圖片滑動(dòng)切換效果,感興趣的可以了解一下2022-04-04詳解Android Activity中的幾種監(jiān)聽(tīng)器和實(shí)現(xiàn)方式
這篇文章主要介紹了Activity中的幾種監(jiān)聽(tīng)器和實(shí)現(xiàn)方式的相關(guān)資料,幫助大家更好的理解和學(xué)習(xí)使用Android,感興趣的朋友可以了解下2021-04-04Android單點(diǎn)觸控實(shí)現(xiàn)圖片平移、縮放、旋轉(zhuǎn)功能
這篇文章主要介紹了Android單點(diǎn)觸控實(shí)現(xiàn)圖片平移、縮放、旋轉(zhuǎn)功能的相關(guān)資料,需要的朋友可以參考下2016-02-02Android實(shí)現(xiàn)文件解壓帶進(jìn)度條功能
本文通過(guò)實(shí)例代碼給大家介紹了android實(shí)現(xiàn)文件解壓帶進(jìn)度條效果,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2017-08-08android編程實(shí)現(xiàn)設(shè)置、打開(kāi)wifi熱點(diǎn)共享供他人連接的方法
這篇文章主要介紹了android編程實(shí)現(xiàn)設(shè)置、打開(kāi)wifi熱點(diǎn)共享供他人連接的方法,涉及Android創(chuàng)建WiFi及設(shè)置共享的相關(guān)實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11Android?數(shù)據(jù)結(jié)構(gòu)全面總結(jié)分析
這篇文章主要為大家介紹了Android?數(shù)據(jù)結(jié)構(gòu)全面總結(jié)分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12Android調(diào)用系統(tǒng)的發(fā)郵件功能的小例子
這篇文章介紹了Android調(diào)用系統(tǒng)的發(fā)郵件功能的小例子,有需要的朋友可以參考一下2013-08-08