Понимание фрагментов в Android: часть 3
android android-app-development

Понимание фрагментов в Android: часть 3

23 ноября 2022 г.

В этой статье мы разберем интересные моменты анимации Fragment API.

Вы можете прочитать предыдущие части статьи по ссылке ниже.

Мы можем определить простые анимации для переходов между фрагментами в папке res/anim. Но если мы хотим управлять какими-либо атрибутами представления нашего фрагмента, мы должны указать анимации в папке res/animator. Более того, мы можем легко комбинировать их внутри транзакции.

fragmentManager.commit {
    setReorderingAllowed(true) 
    // Must be specified before add/replace otherwise they will be ignored
    setCustomAnimations( 
        R.animator.anim_enter, // InnerFragment appears on the screen
        R.anim.anim_exit, // OuterFragment goes off screen
        R.anim.anim_pop_enter, // OuterFragment returns to screen 
        R.animator.anim_pop_exit // InnerFragment goes off screen
        ) 

        replace<InnerFragment>(R.id.container) 
        addToBackStack(null) 
    }

Эти анимации автоматически применяются ко всем последующим транзакциям с использованием этого fragmentManager.

<!-- animator/anim_enter.xml --> 
<objectAnimator 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:duration="400" 
    android:valueFrom="0" 
    android:valueTo="180" 
    android:propertyName="rotation" /> 

<!-- anim/anim_exit.xml -->     
<alpha 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:duration="400" 
    android:interpolator="@android:anim/decelerate_interpolator" 
    android:fromAlpha="1" 
    android:toAlpha="0" /> 

<!-- anim/anim_pop_enter.xml --> 
<alpha 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:duration="400" 
    android:interpolator="@android:anim/decelerate_interpolator" 
    android:fromAlpha="0" 
    android:toAlpha="1" /> 

<!-- animator/anim_pop_exit.xml --> 
<objectAnimator 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:duration="400" 
    android:valueFrom="180" 
    android:valueTo="360" 
    android:propertyName="rotation" />

Если не хотите прописывать каждую анимацию, можно использовать Transition — например, подготовленный Fade() . Он указан в InnerFragment и переопределяет анимацию в транзакции, если она была указана.

// InnerFragment.kt 

override fun onCreate(savedInstanceState: Bundle?) { 
    super.onCreate(savedInstanceState) 
    // Animation when moving to the screen 
    enterTransition = Fade() 

    // Animation when leaving the screen via fragmentManager.popBackStack()
    // If not specified, will be used
    enterTransition exitTransition = Fade() 

    // Animation when exiting the screen is not via fragmentManager.popBackStack()
    // For example, via replace() 
    // If not specified, will be used
    enterTransition returnTransition = Fade() 

    // Animation when returning to the screen via
    fragmentManager.popBackStack()
    // If not specified, will be used
    enterTransition reenterTransition = Fade() 
    }

Это еще не главные функции анимации в Fragment API. Следующим этапом разработки являются общие переходы элементов, с помощью которых можно получить реализацию перехода.

Для создания такой анимации мы будем использовать метод FragmentTransaction.addSharedElement(View, String) и стандартный переход ChangeBounds().

Во-первых, нам нужно сделать элементы представления, которые мы хотим анимировать, уникальными в пределах разметки transitionName. Это можно сделать через xml или в коде. В InnerFragment мы указываем анимации:

<!--- fragment_outer_layout.xml --> 
<TextView 
    android:id="@+id/textViewStart" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="Outer Fragment" 
    android:transitionName="text_start" /> 

<!--- fragment_inner_layout.xml --> 
<TextView 
    android:id="@+id/textViewDestination" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="Inner Fragment" 
    android:transitionName="text_destination" />


// OuterFragment.kt 
override fun onViewCreated(view: View, savedInstanceState: Bundle?) { 
    ViewCompat.setTransitionName(imageViewStart, "image_start") 
} 

// InnerFragment.kt 
override fun onCreate(savedInstanceState: Bundle?) { 
    super.onCreate(savedInstanceState) 
    // Animation when opening a fragment
    sharedElementEnterTransition = ChangeBounds() 

    // Animations when closing a fragment
    // If not specified, sharedElementEnterTransition will be used 
    sharedElementReturnTransition = ChangeBounds() 
} 

override fun onViewCreated(view: View, savedInstanceState: Bundle?) { 
    ViewCompat.setTransitionName(imageViewDestination, "image_destination") 
}

Вызываем транзакцию:

// OuterFragment.kt 
parentFragmentManager.commit { 
    setReorderingAllowed(true) 
    addSharedElement(imageViewStart, "image_destination") 
    addSharedElement(textViewStart, "text_destination") 
    replace<InnerFragment>(R.id.container) 
    addToBackStack(null) 
}

Если все представления отрисовываются синхронно, мы можем получить показанную выше анимацию точно так же.

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

override fun onViewCreated(view: View, savedInstanceState: Bundle?) { 
    // Pausing the transition
    postponeEnterTransition() 

    // Waiting for everything to load
    viewModel.data.observe(viewLifecycleOwner) { 
    // Passing data to RecyclerView adapter
    adapter.setData(it) 
    // We are waiting for all the elements to be ready for drawing, and start 
    // the animation 
    (view.parent as? ViewGroup)?.doOnPreDraw { 
        startPostponedEnterTransition() 
        } 
    } 
}

Метод delayEnterTransition() требует использования FragmentTransaction.setReorderingAllowed(true).

Я также прикреплю ссылку на официальную документацию от Google по анимации фрагментов здесь.

Оригинал

Recent Post

Categories

PREVIOUS ARTICLE
NEXT ARTICLE