Анимация плавающей кнопки действия при прокрутке ViewPager

У меня есть AppBarLayout, ViewPager под ним и кнопка с плавающим действием в одном действии. Я хочу анимировать FAB при прокрутке ViewPager. Взгляните на приведенные ниже экраны.

введите здесь описание изображения

Когда Tab1 является текущей вкладкой, FAB должен находиться в правом нижнем углу. Когда Tab2 является текущей вкладкой, FAB должен находиться в нижней центральной области. Когда Tab3 является текущей вкладкой, FAB должен вернуться в нижний правый угол. Когда Tab4 является текущей вкладкой, FAB должен быть привязан к ImageView4 и должен находиться в правом нижнем углу ImageView4.

Как я могу этого добиться? Пожалуйста, помогите мне.

Мне нужно реализовать onPageChangeListener на ViewPager и обработать то же самое в onPageScrolled().

mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            final int width = mViewPager.getWidth();
            if(position == 0) {
                // Transition from page 0 to page 1 (horizontal shift)
                int translationX = (int) ((-(width - mFab.getWidth()) / 2f) * positionOffset);
                mFab.setTranslationX(translationX);
                mFab.setTranslationY(0);
            } else if(position == 1) {
                // Transition from page 1 to page 2 (horizontal shift)
                int translationX = (int) (((width - mFab.getWidth())) * positionOffset);
                mFab.setTranslationX(translationX);
                mFab.setTranslationY(0);
            } else if(position == 2) {
                // Transition from page 2 to page 3

            }
        }

        @Override
        public void onPageSelected(int position) {

        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    });

Когда я перехожу с вкладки 1 на вкладку 2, FAB переводит правильно, однако в конце концов он возвращается в исходное положение.

Как мне анимировать FAB в onPageScrolled()?


person Nitesh Kumar    schedule 25.08.2015    source источник
comment
Вам действительно нужно, чтобы он был таким же FAB? Что, если бы у вас было по одному элементу для каждого фрагмента (чтобы вы могли закрепить их в правильном положении) и вы могли бы анимировать их так же, как пример № 4 здесь: google.com/design/spec/components/   -  person zsolt.kocsi    schedule 06.09.2015


Ответы (1)


Вы можете легко сделать это с помощью координатного макета. Во-первых, добавьте библиотеку дизайна поддержки в gradle: compile 'com.android.support:design:22.2.0'

Теперь давайте создадим простой макет для нашей активности.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
     <LinearLayout
        android:id="@+id/your fist layout"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical">
    </LinearLayout>
    <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="16dp"
        android:src="@drawable/ic_done" />

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

<LinearLayout
        android:id="@+id/your second layout"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical">
</LinearLayout>

Это должно работать, иначе вы можете поиграть, поместив оба макета в макет coorindate и скрыть второй.

Подробнее по ссылке: http://android-developers.blogspot.in/2015/05/android-design-support-library.html

person Ashish Rawat    schedule 24.09.2015