Android操作栏：选项卡图标和标题上的自定义淡入淡出动画

Question

我正在尝试制作一个自定义动画，其工作方式与使用标准操作栏的tumblr android应用程序的工作方式非常相似。 （并没有消失选项卡的内容）我非常接近它的工作，但我有麻烦修复最后一部分。 也许有人在这里可以帮助我朝着正确的方向努力实现这一目标。

编辑：图像显示我的意思： 图像

我有的。

在onCreate中，我为选项卡添加了一些自定义视图：

    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看起来像这样，我添加了两个自定义视图，因此我可以轻松设置视图的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＆Position）。 视图始终是您要在viewpager中进行的片段，因此每隔一次我在位置上有一个正值，然后下一个负值取决于您正在滑动的方向。

首先，我认为我可以使用视图来确定当前标签是哪个以及我通过采取任何视图首先进入的方向，但这似乎是随机的。

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

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

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