上圖

123.gif

1、TabLayout中每個Tab都是一個View。

2、先手動設置每個Tab的自定義View。

3、然后設置TabLayout選中Tab監聽。

4、未選中 --> 選中 的Tab取出View，設置放大透明度動畫。

5、選中 --> 未選中 的Tab去除View，設置縮小透明動畫。

private TabLayout tabLayout;

/**
 * 設置每個TabLayout的View
 */
private void setupTabIcons() {
    for (int i = 0; i < mTitleList.size(); i++) {
        tabLayout.getTabAt(i).setCustomView(getTabView(i));
    }
}

/**
 * 提供TabLayout的View
 * 根據index返回不同的View
 * 主意：默認選中的View要返回選中狀態的樣式
 */
private View getTabView(int index) {
    //自定義View布局
    View view = LayoutInflater.from(getActivity()).inflate(R.layout.item_rank_tab, null);
    TextView title = (TextView) view.findViewById(R.id.title);
    ImageView iv = (ImageView) view.findViewById(R.id.iv);
    title.setText(mTitleList.get(index));
    if (index != 1) {
        view.setAlpha(0.5f);
        if (index == 0) {
            iv.setImageResource(R.drawable.rank_01);
        } else {
            iv.setImageResource(R.drawable.rank_03);
        }
    } else {
        iv.setImageResource(R.drawable.rank_02);
        view.setScaleX(1.1f);
        view.setScaleY(1.1f);
    }
    return view;
}

/**
 * 設置TabLayout的選中監聽
 */
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {

    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        changeTabSelect(tab);   //Tab獲取焦點
    }
    
    @Override
    public void onTabUnselected(TabLayout.Tab tab) {
        changeTabNormal(tab);   //Tab失去焦點
    }
    
    @Override
    public void onTabReselected(TabLayout.Tab tab) {
    
    }
});

/**
 * 改變TabLayout的View到選中狀態
 * 使用屬性動畫改編Tab中View的狀態
 */
private void changeTabSelect(TabLayout.Tab tab) {
    final View view = tab.getCustomView();
    ObjectAnimator anim = ObjectAnimator
            .ofFloat(view, "", 1.0F, 1.1F)
            .setDuration(200);
    anim.start();
    anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            float cVal = (Float) animation.getAnimatedValue();
            view.setAlpha(0.5f + (cVal - 1f) * (0.5f / 0.1f));
            view.setScaleX(cVal);
            view.setScaleY(cVal);
        }
    });
}

/**
 * 改變TabLayout的View到未選中狀態
 */
private void changeTabNormal(TabLayout.Tab tab) {
    final View view = tab.getCustomView();
    ObjectAnimator anim = ObjectAnimator
            .ofFloat(view, "", 1.0F, 0.9F)
            .setDuration(200);
    anim.start();
    anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            float cVal = (Float) animation.getAnimatedValue();
            view.setAlpha(1f - (1f - cVal) * (0.5f / 0.1f));
            view.setScaleX(cVal);
            view.setScaleY(cVal);
        }
    });
}