Анимация FAB с помощью viewpager/tabslider

Ответ 1

Во-первых, вам нужно иметь макет с кнопкой плавающего действия, привязанной к ViewPager:

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/action_bar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/white"
            app:tabGravity="center"
            app:tabIndicatorColor="?attr/colorAccent"
            app:tabMode="scrollable"
            app:tabSelectedTextColor="?attr/colorAccent"
            app:tabTextColor="@android:color/black" />

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

     <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            app:layout_anchor="@id/viewpager"
            app:layout_anchorGravity="bottom|right|end"
            android:layout_width="56dp"
            android:layout_height="56dp"
            android:src="@drawable/ic_add_white"
            app:borderWidth="@dimen/fab_border_width"
            app:fabSize="normal" />

</android.support.design.widget.CoordinatorLayout>

Теперь, когда у вас есть FAB, привязанный к ViewPager (примечание: я пробовал это на фрагменте, который является вкладкой в ​​viewpager, он, похоже, не ведет себя правильно), добавьте OnPageChangeListener в свой ViewPager следующим образом:

 viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        }

        @Override
        public void onPageSelected(int position) {

            switch (position) {
                case INDEX_OF_TAB_WITH_FAB:
                    fab.show();
                    break;

                default:
                    fab.hide();
                    break;
            }
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    });

Анимации для "pop" и "shrink" при переключении вкладок обрабатываются автоматически для вас с новой версией Библиотеки поддержки.

Ответ 2

Вот еще одно решение. Проблема для меня с другими заключается в том, что предоставление контроля FAB активности, содержащей ViewPager, затрудняет код.

Мне нужно много элементов управления на FAB с помощью фрагментов, чтобы легко изменить значок FAB и установить на нем определенные слушатели.

Грубо, шаги:

• Объявляет один FAB в основном действии, который содержит ViewPager, а не в фрагментах (это обязательный шаг, который я хотел избежать, но волшебство приходит после этого, а в противном случае сложная задача для хорошей анимации)
• В каждом фрагменте, который будет отображаться в ViewPager, я создаю метод, в котором я могу передать FAB, например public void shareFab(FloatingActionButton sharedFab); внутри этого метода каждый фрагмент устанавливает значок FAB и добавляет нужные слушатели.
• Я установил прослушиватель ViewPager.OnPageChangeListener на ViewPager, который вызовет анимацию и вызовет мои методы shareFab.

Таким образом, каждый раз, когда отображается фрагмент, содержащая активность будет давать отображаемому фрагменту ссылку FAB. Затем фрагмент reset/перерабатывает FAB в соответствии с его потребностями.

Вот пример:

Фрагменты для отображения

public void Fragment1 extends Fragment {

    private FloatingActionButton mSharedFab;

    @Override
    public void onDestroy() {
        super.onDestroy();
        mSharedFab = null; // To avoid keeping/leaking the reference of the FAB
    }

    public void shareFab(FloatingActionButton fab) {
        if (fab == null) { // When the FAB is shared to another Fragment
            if (mSharedFab != null) {
                mSharedFab.setOnClickListener(null);
            }
            mSharedFab = null;
        }
        else {
            mSharedFab = fab;
            mSharedFab.setImageResource(R.drawable.ic_search);
            mSharedFab.setOnClickListener((fabView) -> {
                // Your code
            });
        }
    }
}

Активность контейнера

public class ActivityMain extends AppCompatActivity {

    FloatingActionButton mSharedFab;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        mSharedFab = (FloatingActionButton) findViewById(R.id.shared_fab);

        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        Fragment1 fragment1 = new Fragment1();
        Fragment2 fragment2 = new Fragment2();
        adapter.addFragment(fragment1, "Fragment1");
        adapter.addFragment(fragment2, "Fragment2");
        ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
        viewPager.setAdapter(adapter);

        fragment1.shareFab(mSharedFab); // To init the FAB
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { }
            @Override
            public void onPageSelected(int position) {  }
            @Override
            public void onPageScrollStateChanged(int state) {
                switch (state) {
                    case ViewPager.SCROLL_STATE_DRAGGING:
                        mSharedFab.hide(); // Hide animation
                        break;
                    case ViewPager.SCROLL_STATE_IDLE:
                        switch (viewPager.getCurrentItem()) {
                            case 0:
                                fragment2.shareFab(null); // Remove FAB from fragment
                                fragment1.shareFab(mSharedFab); // Share FAB to new displayed fragment
                                break;
                            case 1:
                            default:
                                fragment1.shareFab(null); // Remove FAB from fragment
                                fragment2.shareFab(mSharedFab); // Share FAB to new displayed fragment
                                break;
                        }
                        mSharedFab.show(); // Show animation
                        break;
                }
            }
        });
    }
}

... и классический макет основного действия

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="fixed"
            app:tabGravity="fill"/>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"  />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/shared_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin" />

</android.support.design.widget.CoordinatorLayout>

Плюсы:

• анимация, подобная той, которая описана в руководстве по дизайну материалов!
• полное управление FAB каждым фрагментом

Концы:

• поскольку FAB может быть передан другим фрагментам, ссылка FAB должна проверяться каждый раз, чтобы убедиться, что она не является нулевой
• декларация FAB на уровне ViewPager, немного громоздкая

Ответ 3

Для хорошей анимации скрыть и показать это:

mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {
                switch (state){
                    case ViewPager.SCROLL_STATE_IDLE:
                        fab.show();
                        break;
                    case ViewPager.SCROLL_STATE_DRAGGING:
                    case ViewPager.SCROLL_STATE_SETTLING:
                        fab.hide();
                        break;
                }

            }
        });

Ответ 4

Решение, которое я обнаружил, было:

• Мои фрагменты, которые отображаются в моем ViewPager, реализуют интерфейс (в моем случае FloatingActionButtonFragment). Этот интерфейс требует, чтобы фрагмент имел метод handleFABClick(View).

• Мой редактор замещения ViewPager выглядит следующим образом:

  viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
  
  
      @Override
      public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
  
      }
  
      @Override
      public void onPageSelected(int position) {
  
  
      }
  
      @Override
      public void onPageScrollStateChanged(int state) {
  
          switch (state) {
              case ViewPager.SCROLL_STATE_SETTLING:
                  displayFloatingActionButtonIfNeeded(viewPager.getCurrentItem());
                  break;
  
              case ViewPager.SCROLL_STATE_IDLE:
                  displayFloatingActionButtonIfNeeded(viewPager.getCurrentItem());
                  break;
  
              default:
                  mFloatingActionButton.hide();
          }
  
      }
  });
  
  private void displayFloatingActionButtonIfNeeded(int position) {
      if (mFragmentStatePagerAdapter.getItem(position) instanceof FloatingActionButtonFragment) {
  
          final FloatingActionButtonFragment floatingActionButtonFragment = (FloatingActionButtonFragment) mFragmentStatePagerAdapter.getItem(position);
  
          mFloatingActionButton.show();
          mFloatingActionButton.setOnClickListener(new View.OnClickListener() {
              @Override
              public void onClick(View v) {
                  floatingActionButtonFragment.handleFABClick(v);
              }
          });
      }
  }
  

Это делает FAB "спрятаться", когда пользователь меняет представления, но затем запускает метод show, когда состояние представления либо бездействует (оно улажено), либо оседает (мне нужно было делать то и другое, как не чувствовал право только с использованием простоя).

Ответ 5

Недавно я нашел гораздо лучшее решение, которым я доволен. Метод FAB hide также может иметь параметр-слушатель, который запускается, когда кнопка скрыта (метод show также имеет это). Единственный недостаток заключается в том, что вы должны вручную выполнять изменения в viewpager и tablayout.

@Override
public void onPageSelected(int position) {
    onToolbarTitleChanged(adapter.getPageTitle(position).toString());
}

@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}

@Override
public void onPageScrollStateChanged(int state) {
}

@Override
public void onTabSelected(TabLayout.Tab tab) {
    viewPager.setCurrentItem(tab.getPosition());
}

@Override
public void onTabUnselected(final TabLayout.Tab tab) {
    fab.hide(new FloatingActionButton.OnVisibilityChangedListener() { // Hide FAB
        @Override
        public void onHidden(FloatingActionButton fab) {
            fab.show(); // After FAB is hidden show it again
        }
    });
}

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

Если вы хотите показывать FAB только на определенных вкладках, вы можете изменить метод onTabSelected на:

@Override
public void onTabSelected(TabLayout.Tab tab) {
    if (tab.getPosition() == 2) {
        createButton.hide();
    }
    viewPager.setCurrentItem(tab.getPosition());
}

Ответ 6

Для моей проблемы я не хотел показывать кнопку плавающего действия на первой вкладке; для этого я добавил

android:visibility="invisible"

в плавающей панели действий.

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="@dimen/fab_margin"
        android:visibility="invisible"
        app:srcCompat="@android:drawable/ic_input_add" />

И я добавил ViewpagerListner в свою деятельность, как предложил @chantell

mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {

                switch (position) {
                    case 0:
                        addFloatingActionBt.hide();
                        break;
                    default:
                        addFloatingActionBt.show();
                        break;

                }

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });