IOS-शैली एनिमेशन के साथ एक टुकड़ा प्रबंधक में ViewPager की ओर मुड़ते हुए

एंड्रॉइड के लिए कई डेवलपर्स ने नए टुकड़े खोलते समय एनिमेशन और बदलाव को लागू करने की समस्या का सामना किया। हमें कंटेनर में या तो टुकड़े जोड़ने के लिए आमंत्रित किया जाता है, उन्हें एक दूसरे के ऊपर लेटाया जाता है, या फिर से खेलना (एक टुकड़े को दूसरे के साथ बदलना)। रिप्ले में चार प्रकार के एनिमेशन हैं:

.beginTransaction() .setCustomAnimations( R.anim.enter_from_left, //   2 R.anim.exit_to_right, //   1 R.anim.enter_from_right, //   1 R.anim.exit_to_left) //   2 .replace(R.id.container, myFragment) .commit() 

रिप्ले के साथ समस्या यह है कि ए) पिछला टुकड़ा नष्ट हो गया है, बी) एक इशारे के साथ टुकड़े को बंद करने के लिए कोई कार्रवाई निर्धारित करने का कोई तरीका नहीं है (उदाहरण के लिए, जैसा कि Google इनबॉक्स में लागू किया गया है)।

स्टैक में टुकड़े जोड़ना (जोड़ना) आपको केवल टुकड़े को खोलने के लिए एनिमेशन का उपयोग करने की अनुमति देता है, पीछे वाला गतिहीन होगा।

और यह सब, निश्चित रूप से, खराब प्रतिपादन और टूटे हुए फ्रेम के साथ है।

नतीजतन, यहां तक ​​कि VKontakte या Instagram जैसे बड़े एप्लिकेशन भी अपने अनुप्रयोगों में टुकड़े के एनिमेशन का उपयोग नहीं करते हैं।

डेढ़ साल पहले, टेलीग्राम ने टेलीग्राम एक्स (अपने क्लाइंट का एक परीक्षण संस्करण) पेश किया। उन्होंने इस समस्या को इस तरह हल किया:

यहां, सामने और पीछे के टुकड़े के एनीमेशन को लागू किया गया है, साथ ही एक इशारे के साथ टुकड़े को बंद करने की क्षमता भी है।

मैं कुछ ऐसा ही करने में कामयाब रहा और मैं अपने अंशों को खोलने की विधि साझा करना चाहूंगा:

तो, NavigatorViewPager वर्ग बनाएं:

 class NavigatorViewPager : ViewPager { init { init() } constructor(context: Context) : super(context) constructor(context: Context, attributeSet: AttributeSet) : super(context, attributeSet) override fun canScrollHorizontally(direction: Int): Boolean { return false } //  private fun init() { // PageTransformer       setPageTransformer(false, NavigatorPageTransformer()) //   overScrollMode = View.OVER_SCROLL_NEVER //       , //    setDurationScroll(300) } //      fun setDurationScroll(millis: Int) { try { val viewpager = ViewPager::class.java val scroller = viewpager.getDeclaredField("mScroller") scroller.isAccessible = true scroller.set(this, OwnScroller(context, millis)) } catch (e: Exception) { e.printStackTrace() } } //      DecelerateInterpolator() inner class OwnScroller(context: Context, durationScroll: Int) : Scroller(context, DecelerateInterpolator(1.5f)) { private var durationScrollMillis = 1 init { this.durationScrollMillis = durationScroll } override fun startScroll(startX: Int, startY: Int, dx: Int, dy: Int, duration: Int) { super.startScroll(startX, startY, dx, dy, durationScrollMillis) } } } 

अब हमारे पास हमारा नेविगेटर है, जिसे हम अपनी गतिविधि में सभी टुकड़ों के लिए एक कंटेनर के रूप में उपयोग करते हैं:

 <info.yamm.project2.navigator.NavigatorViewPager xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/navigator_view_pager" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/black" android:fitsSystemWindows="false" tools:context=".activities.MainActivity"/> 

बैकग्राउंड सेट ब्लैक। बंद टुकड़े पर छाया का अनुकरण करना आवश्यक है। आगे यह और स्पष्ट होगा।

अब हमें एक एडाप्टर की आवश्यकता है जिसमें हम टुकड़े डालेंगे:

 class NavigatorAdapter(val fragmentManager: FragmentManager) : FragmentStatePagerAdapter(fragmentManager) { // ArrayList      private val listOfFragments: ArrayList<BaseFragment> = ArrayList() //  fun addFragment(fragment: BaseFragment) { listOfFragments.add(fragment) notifyDataSetChanged() } //   fun removeLastFragment() { listOfFragments.removeAt(listOfFragments.size - 1) notifyDataSetChanged() } //     fun getFragmentsCount(): Int { return listOfFragments.size } override fun getItemPosition(`object`: Any): Int { val index = listOfFragments.indexOf(`object`) //        return if (index == -1) PagerAdapter.POSITION_NONE else index } override fun getItem(position: Int): Fragment? { return listOfFragments[position] } override fun getCount(): Int { return listOfFragments.size } override fun destroyItem(container: ViewGroup, position: Int, `object`: Any) { super.destroyItem(container, position, `object`) } } 

हमारे नेविगेटर के लिए तुरंत एक ट्रांसफार्मर बनाएँ:

 class NavigatorPageTransformer : ViewPager.PageTransformer { override fun transformPage(view: View, position: Float) { // PageTransformer       view.apply { val pageWidth = width when { //        position <= -1 -> { //   INVISIBLE       //    visibility = View.INVISIBLE } // ,          position > 0 && position <= 1 -> { alpha = 1f visibility = View.VISIBLE translationX = 0f } //         // (    ,     NavigatorViewPager?) position <= 0 -> { alpha = 1.0F - Math.abs(position) / 2 translationX = -pageWidth * position / 1.3F visibility = View.VISIBLE } //    ,     else -> { visibility = View.INVISIBLE } } } } } 

अब - सबसे दिलचस्प! हम अपनी गतिविधि में अंशों को खोलने के लिए आवश्यक कार्य लिखते हैं:

 class MainActivity : BaseActivity() { private lateinit var navigatorAdapter: NavigatorAdapter private lateinit var navigatorViewPager: NavigatorViewPager private lateinit var mainFragment: MainFragment override fun onCreate(savedInstanceState: Bundle?) { setTheme(info.yamm.project2.R.style.AppTheme) //   navigatorViewPager = findViewById<NavigatorViewPager>(info.yamm.project2.R.id.navigator_view_pager) //   (    BottomNavigationView   ) mainFragment = MainFragment() //  navigatorAdapter = NavigatorAdapter(supportFragmentManager) //       addFragment(mainFragment) //     navigatorViewPager.adapter = navigatorAdapter //      // :   FragmentStatePagerAdapter,   //     . // FragmentPagerAdapter   ,         // ,    . // ,     INVISIBLE  PageTransformer //     ,        //   .    , //       navigatorViewPager.offscreenPageLimit = 30 var canRemoveFragment: Boolean = false //         var sumPositionAndPositionOffset = 0.0f //   navigatorViewPager.addOnPageChangeListener(object : OnPageChangeListener { //     ,     override fun onPageScrollStateChanged(state: Int) { if (state == 0 && canRemoveFragment) { while ((navigatorAdapter.getFragmentsCount() - 1) > navigatorViewPager.currentItem) { navigatorAdapter.removeLastFragment() } } } //       //        override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) { canRemoveFragment = position + positionOffset < sumPositionAndPositionOffset sumPositionAndPositionOffset = position + positionOffset } override fun onPageSelected(position: Int) { } }) } //             fun addFragment(fragment: BaseFragment) { navigatorAdapter.addFragment(fragment) navigatorViewPager.currentItem = navigatorViewPager.currentItem + 1 } //    "" override fun onBackPressed() { if (navigatorAdapter.getFragmentsCount() > 1) { navigatorViewPager.setCurrentItem(navigatorViewPager.currentItem - 1, true) } else { finish() } } } 

वह, वास्तव में, सब है। अब किसी भी टुकड़े पर हम एक्टीविटी से विधि कहते हैं:

 (activity as MainActivity).addFragment(ConversationFragment()) 

और जब दाईं ओर स्वाइप किया जाता है, तो वह स्वयं ही हमारे ऑनपेंजचेंजलिस्टर श्रोता की मदद से स्टैक से हटा दिया जाएगा।

यह विधि आदर्श नहीं है, शायद कुछ नुकसान आगे के विकास में खुलेंगे, लेकिन मुझे अभी तक कोई प्रयोज्य समस्या नहीं मिली है, शायद अनुभवी डेवलपर्स मुझे सही करेंगे या मुझे कुछ बताएंगे। आप देख सकते हैं कि यह सब कैसे यहां एक वास्तविक उदाहरण पर काम करता है ।