Snapchat-подобная анимация Viewpager

Я пытаюсь создать анимацию точно так же, как Snapchat Viewpager, где фон левого и правого фрагментов исчезает, но содержимое скользит. Все это происходит, пока фрагмент камеры (центральный фрагмент) остается статичным. Как будто левый и правый фрагменты перекрывают центральный фрагмент.

Я видел несколько руководств, и самое близкое, что я мог найти, это эта ссылка: Альфа-перекрестное затухание OnPageChangeListener

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

КОД :

public class CustomPageTransformer implements ViewPager.PageTransformer {
public void transformPage(View view, float position) {
    int pageWidth = view.getWidth();
    View imageView = view.findViewById(R.id.image_view);
    View contentView = view.findViewById(R.id.content_area);

    if (position < -1) { // [-Infinity,-1)
        // This page is way off-screen to the left
    } else if (position <= 0) { // [-1,0]
        // This page is moving out to the left

        // Counteract the default swipe
        view.setTranslationX(pageWidth * -position);
        if (contentView != null) {
            // But swipe the contentView
            contentView.setTranslationX(pageWidth * position);
        }
        if (imageView != null) {
            // Fade the image in
            imageView.setAlpha(1 + position);
        }

    } else if (position <= 1) { // (0,1]
        // This page is moving in from the right

        // Counteract the default swipe
        view.setTranslationX(pageWidth * -position);
        if (contentView != null) {
            // But swipe the contentView
            contentView.setTranslationX(pageWidth * position);
        }
        if (imageView != null) {
            // Fade the image out
            imageView.setAlpha(1 - position);
        }
    } else { // (1,+Infinity]
        // This page is way off-screen to the right
    }
}

Пример :

Официальное приложение Snapchat

Пример выше показывает, что камера является статической (неподвижной), в то время как фон страницы обнаружения перекрывает фрагмент камеры (центральный фрагмент), но содержимое страницы обнаружения скользит внутрь (также перекрывая фрагмент камеры).

Если кто-то из вас, ребята, знает, как это сделать, я был бы очень признателен.


person Wilbert Tan    schedule 01.07.2018    source источник


Ответы (1)


Вы можете использовать эту библиотеку для реализации того же пользовательского интерфейса, что и SnapChat. Эта библиотека также обеспечивает настройку, например отображение более 3 вкладок, а также имеет множество функций, которые помогут вам создать Snap Like Viewpager.

SnapTabLayout

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

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

person Asad Mukhtar    schedule 13.05.2019