Android實(shí)現(xiàn)微信首頁(yè)左右滑動(dòng)切換效果

更新時(shí)間：2016年09月12日 17:24:37 作者：_堅(jiān)果

這篇文章主要介紹了Android實(shí)現(xiàn)微信首頁(yè)左右滑動(dòng)切換效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

大家看到微信首頁(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í)就是重寫(xiě)了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完成重新繪制，由此有了重寫(xiě)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ò)重寫(xiě)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)備工作，就可以寫(xiě)個(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)前類(lèi)需要對(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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: