Просмотр перевода при сдвиге ViewPager

Ответ 1

Есть одна вещь, которую вам не хватает здесь, PageTransformer применяется к представлениям ПОСЛЕ, которые они позиционировали.

Таким образом, с или без PageTransformer, привязанного к PageView - при прокрутке между страницами - вы просто выполняете прокрутку (например, в LiseView) с возможностями SNAP.

PageTransformer только добавляет эффекты поверх этого.

Итак, цель,

float vertMargin = pageHeight * (1 - scaleFactor) / 2;
float horzMargin = pageWidth * (1 - scaleFactor) / 2;
if (position < 0) {
    view.setTranslationX(horzMargin - vertMargin / 2);
} else {
    view.setTranslationX(-horzMargin + vertMargin / 2);
}

НЕ для перемещения страниц, но для компенсации сжатия страницы.

Без него страница будет иметь некоторые уродливые побочные эффекты. ПОПРОБУЙТЕ ЭТО, удалите строки:) - Представления будут идти вправо/влево, но позиционирование будет выключено.

Таким образом, перевод X не перемещает страницу, но в этом случае просто управляет расстоянием между страницами, чтобы улучшить ощущение анимации - выше это математика для него. Он делает это, чтобы уменьшить пространство между страницами на основе высоты/ширины экрана. Сначала он отрицает пространство (horzMargin), затем он добавляет небольшой интервал (- vertMargin/2)

И вот почему ваш расчет не является хорошим (w * x) - вы пытаетесь переместить страницу - но он уже перемещается.

Ответ 2

GitHub предоставляет библиотеку для анимации, которую вы хотите без каких-либо вычислений
Вам не нужно создавать свой собственный ViewPager PageTransformer
Просто добавьте ниже библиотеки в свой app/build.gradle файл.

compile 'com.ToxicBakery.viewpager.transforms:view-pager-transforms:[email protected]'

MainActivity.java

public class MainActivity extends Activity {

    private static final String KEY_SELECTED_PAGE = "KEY_SELECTED_PAGE";
    private static final String KEY_SELECTED_CLASS = "KEY_SELECTED_CLASS";

    private int mSelectedItem;
    private ViewPager mPager;
    private PageAdapter mAdapter;

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

        int selectedPage = 0;
        if (savedInstanceState != null) {
            mSelectedItem = savedInstanceState.getInt(KEY_SELECTED_CLASS);
            selectedPage = savedInstanceState.getInt(KEY_SELECTED_PAGE);
        }


        setContentView(R.layout.activity_main);

        mAdapter = new PageAdapter(getFragmentManager());

        mPager = (ViewPager) findViewById(R.id.container);
        mPager.setAdapter(mAdapter);
        try {
            mPager.setPageTransformer(true, new TransformerItem(ZoomOutSlideTransformer.class).clazz.newInstance());
        } catch (InstantiationException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }
        mPager.setCurrentItem(selectedPage);

    }


    public static class PlaceholderFragment extends Fragment {

        private static final String EXTRA_POSITION = "EXTRA_POSITION";
        private static final int[] COLORS = new int[] { 0xFF33B5E5, 0xFFAA66CC, 0xFF99CC00, 0xFFFFBB33, 0xFFFF4444 };

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
            final int position = getArguments().getInt(EXTRA_POSITION);
            final TextView textViewPosition = (TextView) inflater.inflate(R.layout.fragment_main, container, false);
            textViewPosition.setText(Integer.toString(position));
            textViewPosition.setBackgroundColor(COLORS[position - 1]);

            return textViewPosition;
        }

    }

    private static final class PageAdapter extends FragmentStatePagerAdapter {

        public PageAdapter(FragmentManager fragmentManager) {
            super(fragmentManager);
        }

        @Override
        public Fragment getItem(int position) {
            final Bundle bundle = new Bundle();
            bundle.putInt(PlaceholderFragment.EXTRA_POSITION, position + 1);

            final PlaceholderFragment fragment = new PlaceholderFragment();
            fragment.setArguments(bundle);

            return fragment;
        }

        @Override
        public int getCount() {
            return 5;
        }

    }

    private static final class TransformerItem {

        final String title;
        final Class<? extends PageTransformer> clazz;

        public TransformerItem(Class<? extends PageTransformer> clazz) {
            this.clazz = clazz;
            title = clazz.getSimpleName();
        }

        @Override
        public String toString() {
            return title;
        }

    }

}

activity_main.xml

<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="MainActivity" />

fragment_main.xml

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="@string/app_name"
android:textColor="@android:color/white"
android:textSize="72sp"
tools:context="MainActivity$PlaceholderFragment" />

Надеюсь, это может вам помочь.: -)

Ответ 3

Когда я перечитаю ваш вопрос и этот ответ, я не уверен, что действительно ответил на ваш вопрос. Я думаю, что это может помочь, хотя я отправляю его.

В соответствии с this, position = 0 означает, что эта страница находится спереди и в центре (& для этого примера, в полноэкранном режиме). Мы заботимся только о странице с позицией в диапазоне от -1 до +1, иначе она слишком далеко не подходит для заботы. Вы можете увидеть это в 1-м и последнем условиях, когда альфа установлена ​​в 0, делая просмотр полностью прозрачным.

Я не могу понять утверждение,

view.setTranslationX(horzMargin - vertMargin / 2);

Как я смотрел на это, я не видел большой ценности в этом разделе кода. Поскольку маржи рассчитываются на основе scaleFactor, и это ограничено 0,85 - 1,0, это не очень сильно влияет на внешний вид перехода. Я уверен, что кто-то с гораздо лучшими глазами для дизайна, чем я, не согласится. Однако я удалил эту часть кода в качестве эксперимента.

        float vertMargin = pageHeight * (1 - scaleFactor) / 2;
        float horzMargin = pageWidth * (1 - scaleFactor) / 2;
        if (position < 0) {
            view.setTranslationX(horzMargin - vertMargin / 2);
        } else {
            view.setTranslationX(-horzMargin + vertMargin / 2);
        }

В то время как я мог видеть небольшие различия в зависимости от установки translationX, если бы я присмотрелся, я бы никогда не заметил при случайном использовании. Больше различий можно увидеть, установив MIN_SCALE на 0,5 (или меньше).

что было бы неправильно с моими расчетами?

Наверное, ничего, пока вы ограничили его небольшим результатом, как это делает текущий код. Имейте в виду, что класс ViewPager является основным контроллером анимации, а не setTranslationX().

Ответ 4

Если вы уменьшите прямоугольник с помощью scaleFactor,

Предположим, что исходная высота - pageHeight и Width - pageWidth;

Новая усадка Высота будет scaleFactor * pageHeight

shrinkMarginTopBottom = pageHeight - scaleFactor * pageHeight = pageHeight(1 - scaleFactor);

and I assume it will be equally shirnked from bottom and top;

shrinkMarginTop = shrinkMarginTopBottom/2;
which is equal to below mentioned formula
float vertMargin = pageHeight * (1 - scaleFactor) / 2;

Таким образом, объяснение расчета полей

float vertMargin = pageHeight * (1 - scaleFactor) / 2;
float horzMargin = pageWidth * (1 - scaleFactor) / 2;
if (position < 0) {
    view.setTranslationX(horzMargin - vertMargin / 2);
} else {
    view.setTranslationX(-horzMargin + vertMargin / 2);
}

У перевода x должно быть некоторое смещение для позиций страницы 0 и 1, чтобы получить эффект анимации, а некоторое расстояние, следовательно, вычитание полей для обоих... Деление происходит, потому что + ve и -ve x перевод добавляет до точного значения маржи

Я могу угадать, но для меня есть переменная x-перевод и маржа, которая зависит от масштабного коэффициента, vertMargin используется для создания этого смещения, которое зависит от масштаба. Если вы удалите код vertMargin, он все равно будет анимировать то же самое, но бит быстрее, но без сохранения разницы между двумя страницами.