13

Я использую TabLayout с 5 различными фрагментами. На 3 из этих фрагментов должен появиться android.support.design.widget.FloatingActionButton. Прямо сейчас я просто устанавливаю видимость FAB, когда вкладка меняется, но я хотел бы иметь анимацию, в которую входит и выходит FAB. Как я могу достичь этого в Android?Как анимировать FloatingActionButton новой библиотеки поддержки дизайна

+0

Наилучший способ использования пользовательского FloatingActionButton.Behton –

ответ

1

Потому что я не хочу, чтобы продлить FloatingActionButton, я сделал это так:

FloatingActionButton createButton; 

// ... 

Animation makeInAnimation = AnimationUtils.makeInAnimation(getBaseContext(), false); 
makeInAnimation.setAnimationListener(new Animation.AnimationListener() { 
    @Override 
    public void onAnimationEnd(Animation animation) { } 

    @Override 
    public void onAnimationRepeat(Animation animation) { } 

    @Override 
    public void onAnimationStart(Animation animation) { 
     createButton.setVisibility(View.VISIBLE); 
    } 
}); 

Animation makeOutAnimation = AnimationUtils.makeOutAnimation(getBaseContext(), true); 
makeOutAnimation.setAnimationListener(new Animation.AnimationListener() { 
    @Override 
    public void onAnimationEnd(Animation animation) { 
     createButton.setVisibility(View.INVISIBLE); 
    } 

    @Override 
    public void onAnimationRepeat(Animation animation) { } 

    @Override 
    public void onAnimationStart(Animation animation) { } 
}); 

// ... 

if (createButton.isShown()) { 
    createButton.startAnimation(makeOutAnimation); 
} 

// ... 

if (!createButton.isShown()) { 
    createButton.startAnimation(makeInAnimation); 
} 
+0

Я заменил 'setAnimation()' вызовы 'startAnimation()' в вашем ответе - см. Аналогичный вопрос здесь: [FAB не оживляет - тестовый код и скриншот прилагаются ] (http://stackoverflow.com/questions/31773559/fab-does-not-animate-test-code-and-screenshot-attached) –

1

Самый простой способ - расширить класс FloatingActionButton и переопределить setVisibility. Как это:

public void setVisibility(final int visibility) { 
    if (getVisibility() != View.VISIBLE && visibility == View.VISIBLE && inAnim != null) { 
     animator = // create your animator here 
     super.setVisibility(visibility); 
    } else if (getVisibility() == View.VISIBLE && visibility != View.VISIBLE) { 
     AnimatorListenerAdapter listener = new AnimatorListenerAdapter() { 
      @Override 
      public void onAnimationEnd(Animator animator) { 
       Button.super.setVisibility(visibility); 
      } 
     }); 
     animator = // create your animator here 
     animator.addListener(listener); 
    } 
} 

Код выше берется из класса Button из my library. Вы можете найти примеры реализации в источниках.

9

enter image description here

Вы хотите что-то вроде этого? Но вместо оживления на onScrollListener вы можете анимировать его по методу onCreateView или onCreate. Следуйте за этим ->Implement Floating Action Button – Part 2

В основном код суммирует только к этому

Animate Скрыть

FloatingActionButton floatingActionButton = (FloatingActionButton) getActivity().findViewById(R.id.fab); 
       floatingActionButton.animate().translationY(floatingActionButton.getHeight() + 16).setInterpolator(new AccelerateInterpolator(2)).start(); 

и

Animate назад Показать

FloatingActionButton floatingActionButton = (FloatingActionButton) getActivity().findViewById(R.id.fab); 
       floatingActionButton.animate().translationY(0).setInterpolator(new DecelerateInterpolator(2)).start(); 

но мы не хочу, чтобы он анимировал только, чтобы скрыть это так, «Анимация скрыть» будет просто b е что-то вроде этого

FloatingActionButton floatingActionButton = (FloatingActionButton) getActivity().findViewById(R.id.fab); 
       floatingActionButton.setTranslationY(floatingActionButton.getHeight() + 16); 

On «Animate Скрыть» положить, что на методе onCreateView или onCreate так, что на вашем FAB скрыта, когда вы создаете этот фрагмент, и вы можете затем добавить обработчик и работоспособным, которые будут вызывать " анимации назад показать»после того, как второй или два, чтобы показать свою анимацию

или вы могли бы использовать время для коротких анимационных

int mShortAnimationDuration = getResources().getInteger(
      android.R.integer.config_shortAnimTime); 

Я попробовал этот на OnScroll, но не пробовал на onCreateView или onCreate, но я предполагаю, что это должно работать

- EDIT -

Попробуйте этот код;)

public class DummyFragment extends Fragment { 

    @Override 
    public View onCreateView(LayoutInflater inflater, ViewGroup container, 
          Bundle savedInstanceState) { 
     int mShortAnimationDuration = getResources().getInteger(
       android.R.integer.config_shortAnimTime); 

     FloatingActionButton floatingActionButton = (FloatingActionButton) getActivity().findViewById(R.id.fab); 
     floatingActionButton.setTranslationY(floatingActionButton.getHeight() + 16); 

     new Handler().postDelayed(new Runnable() { 
      @Override 
      public void run() { 
       FloatingActionButton floatingActionButton = (FloatingActionButton) getActivity().findViewById(R.id.fab); 
       floatingActionButton.animate().translationY(0).setInterpolator(new DecelerateInterpolator(2)).start(); 

      }, mShortAnimationDuration); 
     } 
    } 
} 
+0

Могу ли я использовать это в своем (не некоммерческом) приложении? Должен ли я давать кредит? – Penn

+0

уверены, что нет проблем: D –

13

Пересмотр библиотеки дизайн поддержка 22.2.1 (июль 2015) добавил hide() и show() методов класса FloatingActionButton, поэтому вы можете использовать их с этого момента.

http://developer.android.com/tools/support-library/index.html

+0

Они не предлагают анимацию из окна, хотя – ThanosFisherman

+0

@ThanosF FAB будет анимировать при использовании 'show()' или 'hide()', но только если представление уже выложено. –

+0

Я пробовал это, и он работает! – Bruce

28

Шкура/шоу анимация для термоусадочного/попа автоматически обрабатываются с помощью новой версии библиотеки поддержки. (22.2.1) Тогда OnTabChange слушателя показать или скрыть кнопку плавающего действия с помощью показать/скрыть методы, предоставляемые новой библиотекой.

fab.show(); или fab.hide();

Смежные вопросы