TabLayout实现Tab选中图片&文字放大效果

上图

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