如何在选项卡之间更改FloatingActionButton? [英] How to change FloatingActionButton between Tabs?

问题描述

我正在尝试实现 FloatingActionButton 从 Google设计支持库 进入三个标签中的两个标签，并根据

I'm trying to implement FloatingActionButton from Google Design Support Library into two of three tabs, and according to the Material Design Guidelines - FloatingActionButton it says:

如果在多个横向屏幕上有一个浮动操作按钮(例如 (如标签上的)，进入每个屏幕后，该按钮应显示并 如果每个动作所包含的动作不同，则隐藏.如果动作是 同样，该按钮应保留在屏幕上(并转换为新的 位置.)

If there is a floating action button on multiple lateral screens (such as on tabs), upon entering each screen, the button should show and hide if the action contained on each is different. If the action is the same, the button should stay on screen (and translate to a new position, if necessary.)

如何为我的应用程序中的FAB按钮进行这种过渡或动画制作?

How can I make this kind of transition or animation for the FAB buttons in my app?

推荐答案

此功能当前未内置在FloatingActionButton中，因此您必须自己对其进行动画处理.假设您的FloatingActionButton位于主活动中，则将以下函数添加到您的活动中.

This functionality is not currently built into the FloatingActionButton so you'll have to animate it yourself. Assuming your FloatingActionButton is in your main activity, add the following function to your activity.

int[] colorIntArray = {R.color.walking,R.color.running,R.color.biking,R.color.paddling,R.color.golfing};
int[] iconIntArray = {R.drawable.ic_walk_white,R.drawable.ic_run_white,R.drawable.ic_bike_white,R.drawable.ic_add_white,R.drawable.ic_arrow_back_white};

protected void animateFab(final int position) {
    fab.clearAnimation();
    // Scale down animation
    ScaleAnimation shrink =  new ScaleAnimation(1f, 0.2f, 1f, 0.2f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
    shrink.setDuration(150);     // animation duration in milliseconds
    shrink.setInterpolator(new DecelerateInterpolator());
    shrink.setAnimationListener(new Animation.AnimationListener() {
        @Override
        public void onAnimationStart(Animation animation) {

        }

        @Override
        public void onAnimationEnd(Animation animation) {
            // Change FAB color and icon
            fab.setBackgroundTintList(getResources().getColorStateList(colorIntArray[position]));
            fab.setImageDrawable(getResources().getDrawable(iconIntArray[position], null));

            // Scale up animation
            ScaleAnimation expand =  new ScaleAnimation(0.2f, 1f, 0.2f, 1f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
            expand.setDuration(100);     // animation duration in milliseconds
            expand.setInterpolator(new AccelerateInterpolator());
            fab.startAnimation(expand);
        }

        @Override
        public void onAnimationRepeat(Animation animation) {

        }
    });
    fab.startAnimation(shrink);
}

更新颜色和可绘制资源以匹配您的项目.在您的onCreate方法中添加一个选项卡选择侦听器，并在选择一个选项卡时调用animate函数.

Update the color and drawable resources to match your project. Add a tab selection listener in your onCreate method and call the animate function when a tab is selected.

tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        mViewPager.setCurrentItem(tab.getPosition());
        animateFab(tab.getPosition());
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {

    }

    @Override
    public void onTabReselected(TabLayout.Tab tab) {

    }
});

请确保您有足够的颜色和图标来匹配您拥有的标签数.

Make sure you have enough colors and icons to match the number of tabs you have.

这篇关于如何在选项卡之间更改FloatingActionButton?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！