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