Android實現(xiàn)微信首頁左右滑動切換效果
大家看到微信首頁切換效果有沒有覺得很炫，滑動切換，點擊底部bar瞬間切換，滑動切換漸變效果，線上效果圖：
之前也在博客上看到別人的實現(xiàn)，再次基礎上，我做了些優(yōu)化。首先說下實現(xiàn)原理，大神略過，o(╯□╰)o
頁面上看到的三個頁面是三個Fragment, 左右滑動使用viewpager,相信大家也都是這么再用，那么底部用的是什么技術呢，底部漸變其實就是重寫了ImageView,以及在左右滑動時，改變了TextView的顏色值，是不是很簡單...下面我們一步一步的來：
1.自定義ImageView：
/**
* 初始化資源圖片bitmap及相關繪制對象
* @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);
}
這里定義了兩個Bitmap，分別對應獲得焦點和失去焦點時顯示的bitmap圖像，兩個矩陣，在繪制過程中使用到，定義了一個外部調(diào)用的方法，在左右滑動過程中，通過偏移值改變透明值，兩張圖片疊加就是對應的過度效果。
然后通通過滑動過程中不斷刷新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改變傳入的兩個bitmap透明度，從而達到漸變效果,其中mSelectedAlpha為外部傳入透明值
2.自定義實現(xiàn)底部bar容器，這里通過重寫LinearLayout實現(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顯示的文字數(shù)組、顯示的圖片資源數(shù)組、默認顏色和獲得焦點時顏色值數(shù)組（數(shù)組大小=2），以及切換時是否顯示過渡效果
b.設置布局文件及布局文件里對應的控件ID、顯示圖片時圖片寬高參數(shù)，提供了三種方式：
①圖文tab：
/**
* 設置布局文件及相關控件id
* @param layout layout布局文件 id
* @param iconId ImageView 控件 id id <=0 時不顯示
* @param textId TextView 控件 id id <=0 時不顯示
* @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對應的是自定義ImageView的資源Id, textId對應的是TextView的Id, 寬高指的是圖片顯示的寬高
②只有文字tab： 只顯示文字tab時傳入iconId即可
③只有圖片tab: 相應的，是在圖文tab提供的方法上，傳入文本textId=0即可
c.注入ViewPager:這里需要監(jiān)聽ViewPager的滑動來改變漸變色
2).添加tab到容易container中：
這里需要判斷iconId以及TextId是否大于0，=0即不顯示，同時為了居中平分底部container長度， 所有tab等分底部container
/**
* <p>添加tab view到當前容器</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時，表示需要顯示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]);
}
/*設置寬度，等分container*/
LayoutParams lp = (LayoutParams) tabView.getLayoutParams();
lp.width = 0;
lp.weight = 1;
/*添加tab點擊事件*/
addTabOnClickListener(tabView, index);
/*設置當前狀態(tài)*/
if (index == mViewPager.getCurrentItem()) { //當先顯示tab，設置初始狀態(tài)為獲得焦點狀態(tài)
if (iconView != null) {
iconView.offsetChanged(0);
}
tabView.setSelected(true);
if (textView != null) {
textView.setTextColor(mTextSelectedColor);
}
}
addView(tabView);
}
}
3).監(jiān)聽viewPager的滑動事件，根據(jù)偏移值更新container，完成重繪操作
4).在container的onDraw中根據(jù)偏移量計算透明值，這里文本偏移值計算用了一個開源的代碼
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
final int childCount = getChildCount();
if (childCount > 0) {
/*當發(fā)生偏移時，繪制漸變區(qū)域*/
if (mSelectionOffset > 0f && mSelectedPosition < (getChildCount() - 1) && mShowTransitionColor) {
/*獲取當前tab和下一tab view */
View selectedTab = getChildAt(mSelectedPosition);
View nextTab = getChildAt(mSelectedPosition + 1);
/*顯示tab icon時,刷新各自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.定義個FragmentAdapter，這個就略過，比較簡單了
4.做了以上準備工作，就可以寫個測試例子試試效果了，當然這里為了看到效果，我們需要事先準備好幾張圖片，以及幾個fragment
private void initViews() { //得到apdater
TabFragmentAdapter mAdapter = new TabFragmentAdapter(getSupportFragmentManager(), fragments);
ViewPager mPager = (ViewPager) findViewById(R.id.tab_pager);
mPager.setAdapter(mAdapter);
//如果當前類需要對viewPager做監(jiān)聽
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對應的xml就比較簡單了，可以參考源碼，最后運行效果，就是上面的貼圖了，到此防微信的滑動切換就完成了，源碼請訪問以下鏈接：
源碼下載：https://github.com/JarekWang/wechathome.git
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
- Android實現(xiàn)界面左右滑動切換功能
- Android App中使用ViewPager+Fragment實現(xiàn)滑動切換效果
- Android開發(fā)之使用ViewPager實現(xiàn)圖片左右滑動切換效果
- Android實現(xiàn)簡單底部導航欄 Android仿微信滑動切換效果
- Android實現(xiàn)滑動屏幕切換圖片
- Android編程實現(xiàn)ViewPager多頁面滑動切換及動畫效果的方法
- android實現(xiàn)切換日期左右無限滑動效果
- Android使用TabLayou+fragment+viewpager實現(xiàn)滑動切換頁面效果
- Android Listview上下拉動刷新tab滑動切換功能
- android?viewflipper實現(xiàn)左右滑動切換顯示圖片
相關文章
Android編程實現(xiàn)圖片放大縮小功能ZoomControls控件用法實例
這篇文章主要介紹了Android編程實現(xiàn)圖片放大縮小功能ZoomControls控件用法,結合具體實例形式分析了Android ZoomControls控件實現(xiàn)圖片縮放的具體操作方法與相關注意事項,需要的朋友可以參考下2017-09-09
android?ViewPager實現(xiàn)一個無限輪播圖
大家好，本篇文章主要講的是android?ViewPager實現(xiàn)一個無限輪播圖，感興趣的同學趕快來看一看吧，對你有幫助的話記得收藏一下2022-02-02
Android Flutter實現(xiàn)圖片滑動切換效果
Flutter 為了簡化開發(fā)，提供了不少轉(zhuǎn)換動畫組件，這類組件通常命名為 xxTransition。本篇要介紹的就是 SlideTransition，并用它實現(xiàn)圖片滑動切換效果，感興趣的可以了解一下2022-04-04
詳解Android Activity中的幾種監(jiān)聽器和實現(xiàn)方式
這篇文章主要介紹了Activity中的幾種監(jiān)聽器和實現(xiàn)方式的相關資料，幫助大家更好的理解和學習使用Android，感興趣的朋友可以了解下2021-04-04
Android單點觸控實現(xiàn)圖片平移、縮放、旋轉(zhuǎn)功能
這篇文章主要介紹了Android單點觸控實現(xiàn)圖片平移、縮放、旋轉(zhuǎn)功能的相關資料,需要的朋友可以參考下2016-02-02
這篇文章主要為大家詳細介紹了Android仿QQ討論組頭像效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
本文通過實例代碼給大家介紹了android實現(xiàn)文件解壓帶進度條效果，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-08-08
android編程實現(xiàn)設置、打開wifi熱點共享供他人連接的方法
這篇文章主要介紹了android編程實現(xiàn)設置、打開wifi熱點共享供他人連接的方法,涉及Android創(chuàng)建WiFi及設置共享的相關實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
這篇文章主要為大家介紹了Android?數(shù)據(jù)結構全面總結分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
Android調(diào)用系統(tǒng)的發(fā)郵件功能的小例子
這篇文章介紹了Android調(diào)用系統(tǒng)的發(fā)郵件功能的小例子，有需要的朋友可以參考一下2013-08-08