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

just_user 发表于 Dev

just_user

我正在尝试制作一个自定义动画，其效果与使用标准动作栏的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方法获取（查看器和位置）。视图始终是您要在viewpager中访问的片段，因此每隔两次我在位置上都有一个正值，然后在第二个位置有一个负值，具体取决于您向哪个方向滑动。

首先，我认为我可以使用视图来确定当前选项卡的位置以及前进的方向，方法是先采用任何视图，但这似乎是随机的。

并且由于位置值从负值跳到正值，因此会在标签中产生一些随机的淡入淡出结果。

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

just_user

我找到了一种无需使用页面转换器的更好方法。通过使用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;
            }
        }
    }
});