AndroidはWeChatトップページの左右のスライド切り替え効果を実現します。

みんなはWeChatのトップページの切り替えの効果を見ましたが、とても眩しいと思いましたか？スライド切り替え、ボトムバーをクリックして瞬時に切り替えて、スライド切り替えのグラデーション効果、オンライン効果図：

前にもブログで他の人の実現を見ましたが、改めて基礎として最適化しました。まず原理を実現します。大神略してください。o(s□t)o
ページで見た3ページは3つの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);
 }

ここでは2つのBitmapを定義し、それぞれ焦点を得る時と焦点を失う時に表示されるbitmap画像に対応して、2つのマトリクスを描画する時に使用して、外部からの呼び出しを定義しました。左右のスライドの過程で、オフセット値によって透明値が変化し、2つのピクチャを重ね合わせて、対応するオーバー効果です。
そしてスライドを通してviewを更新して描き直すことで、ODrawを書き換える方法があります。 

 @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が入ってきた2つのbitmapの透明度を変えてグラデーション効果を達成することができます。ここでmSelectedAlphaは外部から透明値が入ってきます。 
2.底のbar容器をカスタマイズして、ここでLinear Layoutを書き直して実現します。  containerの中で私たちはこのようないくつかのことをします。
1）外観呼び出しインターフェースを定義し、ボトム表示リソース情報を受信する：
a.まずは初期化パラメータです。 

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が表示するテキスト配列、表示される画像リソース配列、標準色および焦点を得るときの色値配列（配列サイズ＝2）が入っています。切り替え時に遷移効果が表示されますか？
b.レイアウトファイルとレイアウトファイルに対応するコントロールID、画像を表示するときのピクチャの幅の高いパラメータを設定し、3つの方法を提供します。
 ①図文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.View Pagerを注入する：ここではView Pagerのスライドをモニターしてグラデーションを変更する必要があります。
2）簡単containerにtabを追加する：
ここでは、iconIdおよびTextIdが0より大きいかどうかを判断する必要があります。=0は表示されません。また、中間的に底のcontainerの長さを均等にするために、すべてのtabは底のcontainerを等分します。 

/**
  * <p>  tab view     </p>
  */
 private void addTabViewToContainer() {
  final PagerAdapter adapter = mViewPager.getAdapter(); 
  mTabView = new View[adapter.getCount()]; //    adapter        tab  

  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); //       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);

   /*      */
   if (index == mViewPager.getCurrentItem()) { //    tab，             
    if (iconView != null) {
     iconView.offsetChanged(0);
    }
    tabView.setSelected(true);
    if (textView != null) {
     textView.setTextColor(mTextSelectedColor);
    }
   }

   addView(tabView);
  }
 }

3）view Pagerのスライドイベントをモニターし、オフセット値によってcontainerを更新し、再描画操作を完了します。
4）containerのonDrawでオフセット量から透明値を計算し、ここでテキストオフセット値の計算にはオープンソースのコードが使われています。

@Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  final int childCount = getChildCount();
  if (childCount > 0) {
   /*      ，      */
   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.FrangentAdapterを定義します。これは略して簡単です。 
4.上記の準備をしたら、テスト例を書いて効果を試してみます。もちろんここで効果を見るために、事前にいくつかの写真といくつかのfragmentを準備しておく必要があります。 

private void initViews() {  //  apdater
  TabFragmentAdapter mAdapter = new TabFragmentAdapter(getSupportFragmentManager(), fragments);
  ViewPager mPager = (ViewPager) findViewById(R.id.tab_pager);
  mPager.setAdapter(mAdapter);
  //        viewPager   
  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
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。