java - Android 操作栏 : Custom fade animation on tab icon and title

Question

我正在尝试制作一个自定义动画，其工作方式与使用标准操作栏的 tumblr android 应用程序的工作方式几乎相同。 (选项卡的内容没有褪色)我已经很接近让它正常工作了，但我在修复最后一部分时遇到了麻烦。也许这里有人可以帮助我朝着正确的方向发展。

编辑:图像显示我的意思:IMAGE

我有什么。

在 onCreate 中，我为选项卡添加了一些自定义 View :

    actionBar = getActionBar();
    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
    actionBar.setDisplayShowTitleEnabled(false);
    actionBar.setDisplayUseLogoEnabled(false);
    actionBar.setDisplayShowHomeEnabled(false);
    actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);

    mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());

    final CustomPageTransformer cpt = new CustomPageTransformer();

    mViewPager = (ViewPager) findViewById(R.id.pager);
    mViewPager.setAdapter(mSectionsPagerAdapter);
    mViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
        @Override
        public void onPageSelected(int position) {
            actionBar.setSelectedNavigationItem(position);
            cpt.currentItem = position;
        }
    });
    mViewPager.setPageTransformer(true, cpt);

    CustomTabView tabNews = new CustomTabView(this, mSectionsPagerAdapter.getPageTitle(0).toString(), mSectionsPagerAdapter.getIcon(0));
    CustomTabView tabEvents = new CustomTabView(this, mSectionsPagerAdapter.getPageTitle(1).toString(), mSectionsPagerAdapter.getIcon(1));
    CustomTabView tabContacts = new CustomTabView(this, mSectionsPagerAdapter.getPageTitle(2).toString(), mSectionsPagerAdapter.getIcon(2));
    CustomTabView tabClub = new CustomTabView(this, mSectionsPagerAdapter.getPageTitle(3).toString(), mSectionsPagerAdapter.getIcon(3));

    actionBar.addTab(actionBar.newTab().setCustomView(tabNews).setTabListener(this).setTag(0));
    actionBar.addTab(actionBar.newTab().setCustomView(tabEvents).setTabListener(this).setTag(1));
    actionBar.addTab(actionBar.newTab().setCustomView(tabContacts).setTabListener(this).setTag(2));
    actionBar.addTab(actionBar.newTab().setCustomView(tabClub).setTabListener(this).setTag(3));

CustomTabView 看起来像这样，我在其中添加了两个自定义 View ，因此我可以轻松设置 View 的 alpha:

public class CustomTabView extends RelativeLayout {

AlphaTextView text1;
AlphaImageView icon1;
int alpha;

public CustomTabView(Context context, String text, Drawable icon) {
    super(context);
    init(context, text, icon);
}

public CustomTabView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init(context, null, null);     
}

public CustomTabView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);    
    init(context, null, null);
}

private void init(Context context, String text, Drawable icon) {
    LayoutInflater inflater = (LayoutInflater)  getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    inflater.inflate(R.layout.tab_view, this, true);

    text1 = (AlphaTextView) findViewById(R.id.title);
    text1.setTypeface(Font.rMedium(context));
    text1.setText(text);

    icon1 = (AlphaImageView) findViewById(R.id.icon);
    icon1.setImageDrawable(icon);

    setTheAlpha(128);
}

public void setTheAlpha(int aleph) {
    this.alpha = aleph;
    if (alpha < 128) alpha = 128;
    if (alpha > 255) alpha = 255;
    text1.onSetAlpha(alpha);
    icon1.onSetAlpha(alpha);
}

public int getTheAlpha() {
    return alpha;
}
}

那么问题来了，CustomPageTransformer:

public class CustomPageTransformer implements ViewPager.PageTransformer {

public int currentItem = 0;
View currentView = null;

public CustomTabView tabNews = null;
public CustomTabView tabEvents = null;
public CustomTabView tabContacts = null;
public CustomTabView tabClub = null;

@Override
public void transformPage(View view, float position) {

    if (position != 0.0 && position != 1.0 && position != 2.0 && position != -1.0) {
        if (currentView == null) {
            currentView = view;
            Log.e("First number", String.valueOf(position));
        }
    } else if (position == 0.0 || position == 1.0 || position == 2.0 || position == -1.0 || position == -2.0) currentView = null;

    if (view == currentView) {
        int alphaCurrent = (int) (255 - (128*Math.abs(position)));
        if (alphaCurrent > 255) alphaCurrent = 255;
        else if (alphaCurrent < 128) alphaCurrent = 128;

        int alphaNext = (int) (128 + (128*Math.abs(position)));
        if (alphaNext > 255) alphaNext = 255;
        else if (alphaNext < 128) alphaNext = 128;

        if (tabNews != null && tabEvents != null && tabContacts != null && tabClub != null) {
            switch(currentItem) {
            case 0:
                if (position <= -1) {
                    tabNews.setTheAlpha(128);
                    tabEvents.setTheAlpha(255);

                } else if (position <= 0) {
                    tabNews.setTheAlpha(alphaCurrent);
                    tabEvents.setTheAlpha(alphaNext);
                }
                break;
            case 1:
                if (position <= -1) {
                    tabEvents.setTheAlpha(128);
                    tabContacts.setTheAlpha(255);

                } else if (position <= 0) {
                    tabEvents.setTheAlpha(alphaCurrent);
                    tabContacts.setTheAlpha(alphaNext);

                } else if (position <= 1) {
                    tabEvents.setTheAlpha(alphaCurrent);
                    tabNews.setTheAlpha(alphaNext);

                } else if (position > 1) {
                    tabEvents.setTheAlpha(128);
                    tabNews.setTheAlpha(255);
                }
                break;
            case 2:
                if (position <= -1) {
                    tabContacts.setTheAlpha(128);
                    tabClub.setTheAlpha(255);

                } else if (position <= 0) {
                    tabContacts.setTheAlpha(alphaCurrent);
                    tabClub.setTheAlpha(alphaNext);

                } else if (position <= 1) {
                    tabContacts.setTheAlpha(alphaCurrent);
                    tabEvents.setTheAlpha(alphaNext);

                } else if (position > 1) {
                    tabEvents.setTheAlpha(255);
                    tabContacts.setTheAlpha(128);
                }
                break;
            case 3:
                if (position <= 1) {
                    tabClub.setTheAlpha(alphaCurrent);
                    tabContacts.setTheAlpha(alphaNext);

                } else if (position > 1) {
                    tabClub.setTheAlpha(128);
                    tabContacts.setTheAlpha(255);
                }
                break;
            }

        }
    }

}
}

transformPage方法获取( View 和位置)。 View 始终是您在 viewpager 中进出的 fragment ，因此每隔两次我的位置值都是正值，然后下一次是负值，具体取决于您滑动的方向。

首先，我认为我可以使用 View 来确定当前选项卡是哪个以及我将通过首先出现的 View 来确定前进的方向，但这似乎是随机的。

并且由于位置值从负值跳到正值，它会在选项卡中生成一些随机淡化结果。

关于如何让它顺利运行的任何想法？

Answer 1

我找到了一种无需使用页面转换器即可实现此目的的更好方法。通过使用 setOnPageChangeListener。

我在这里制作了一个示例应用程序:https://github.com/andreborud/FadingTabs

代码大致就是这样:

mViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
    @Override
    public void onPageSelected(int position) {
        actionBar.setSelectedNavigationItem(position);
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        int alphaCurrent = (int) (255 - (128*Math.abs(positionOffset)));
        int alphaNext = (int) (128 + (128*Math.abs(positionOffset)));
        if (positionOffset != 0) {
            switch(position) {
                case 0: 
                    tab0.setTheAlpha(alphaCurrent);
                    tab1.setTheAlpha(alphaNext);
                    break;
                case 1:
                    tab1.setTheAlpha(alphaCurrent);
                    tab2.setTheAlpha(alphaNext);
                    break;
                case 2:
                    tab2.setTheAlpha(alphaCurrent);
                    tab3.setTheAlpha(alphaNext);
                    break;
            }
        }
    }
});