上圖

123.gif

1、TabLayout中每個(gè)Tab都是一個(gè)View。

2、先手動(dòng)設(shè)置每個(gè)Tab的自定義View。

3、然后設(shè)置TabLayout選中Tab監(jiān)聽(tīng)。

4、未選中 --> 選中 的Tab取出View，設(shè)置放大透明度動(dòng)畫(huà)。

5、選中 --> 未選中 的Tab去除View，設(shè)置縮小透明動(dòng)畫(huà)。

private TabLayout tabLayout;

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

/**
 * 提供TabLayout的View
 * 根據(jù)index返回不同的View
 * 主意：默認(rèn)選中的View要返回選中狀態(tài)的樣式
 */
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;
}

/**
 * 設(shè)置TabLayout的選中監(jiān)聽(tīng)
 */
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {

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

/**
 * 改變TabLayout的View到選中狀態(tài)
 * 使用屬性動(dòng)畫(huà)改編Tab中View的狀態(tài)
 */
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到未選中狀態(tài)
 */
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);
        }
    });
}