آشنایی با متریال دیزاین موشن در اندروید — از صفر تا صد

یکی از خصوصیات مهم «متریال دیزاین» (Material Design)، گذار عناصر و کامپوننتها برای بیان رابطه بین آنها و خروجیها و موجود بودن اکشن است. از نسخه 1.2.0-alpha05 به بعد کامپوننتهای متریال برای کتابخانه اندروید از Transitions و Motion بهره میگیرند. اینها مجموعهای از کلاسها با استفاده آسان برای پیادهسازی نوع متفاوتی از گذار و انیمیشن قابل سفارشیسازی هستند. در این مقاله با کاربردهای متریال دیزاین موشن در اندروید آشنا خواهیم شد.

الگوهای متفاوتی وجود دارند که سیستم موشن متریال دیزاین را برای ایجاد گذار بین نماهای تمام صفحه تشکیل میدهند. نکته مهم این است که الگوی گذاری با نوع مناسب را برای هر مورد انتخاب کنیم. این الگوهای گذار به شرح زیر هستند:

• تبدیل کانتینر (Container Transform) – این الگو در گذارهایی استفاده میشود که شامل عنصری دائمی از قبیل یک لیست، سطح کارت یا دکمه باشند.
• محور مشترک (Shared Axis) – این الگو برای گذارهایی بین عناصر UI که روابط فضایی یا ناوبری دارند مورد استفاده قرار میگیرد.
• محو شدن روی هم (Fade Through) – زمانی که یک رابطه بین عناصر مهم نیست یا وجود ندارد مورد استفاده قرار میگیرد.
• محو شدن (Fade) – این الگو در مواردی استفاده میشود که عناصر UI باید وارد صفحه و یا از آن خارج شوند.

implementation('com.google.android.material:material:1.2.0-beta01')

در ادامه هر یک از موارد فوق را به تفصیل شرح میدهیم.

تبدیل کانتینر

این الگو برای ایجاد یک ارتباط آشکار بین دو عنصر UI استفاده میشود. این الگو یک عنصر را به عنصر دیگر تبدیل میکند. این یک الگوی رایج UX برای بیان این نکته است که یک عنصر با عنصر دیگر مانند کانتینر جزییات آیتم ارتباط دارد. برای نمونه اگر یک آیتم در لیست به نمای جزییات تبدیل شود، کاربر درک میکند که صفحه جزییات نسخه بسط یافتهای از کارت قبلی محسوب میشود.

از این گذار میتوان به عنوان یک تبدیل دکمه FAB به منو یا برگه نیز استفاده کرد. از سوی دیگر این گذار را میتوان بین اکتیویتیها، فرگمانها یا نماها بسته به این که یک نما در یک اکتیویتی یا فرگمان قرار است به نمایی در اکتیویتی یا فرگمان دیگر تبدیل شود یا نه مورد استفاده قرار داد.

این تبدیل با تعیین مقادیر مختلف برای مشخصههایی که روی گذار تأثیر دارند به صورت کامل قابل سفارشیسازی است. این مشخصهها به شرح زیر هستند.

مدت (Duration)

این مشخصه مدت این گذار را برحسب میلیثانیه تعیین میکند.

Interpolator (درونیاب)

نوع درونیابی گذار را تعیین میکند. ما میتوانیم برخی انواع درونیاب از قبیل FastOutSlowIn را تعیین کنیم و یا درونیاب های سفارشی را با استفاده از FastOutSlowIn برای یک منحنی بزیه مکعبی مورد استفاده قرار دهیم.

FadeMode (حالت محو شدن)

این مشخصه نوع محو شدن را که برای تعویض محتوای نمای آغازین یا نمای پایانی استفاده میشود، تعیین میکند. چهار حالت محو شدن وجود دارند:

• FADE_MODE_IN – محتوای ورودی را بدون تغییر دادن میزان مات بودن محتوای خروجی محو میکند. این حالت پیشفرض است.
• FADE_MODE_OUT – محتوای خروجی را بدون تغییر دادن میزان مات بودن محتوای ورودی محو میکند.
• FADE_MODE_CROSS – محتوای ورودی و خروجی را به صورت متقاطع محو میکند.
• FADE_MODE_THROUGH – به صورت ترتیبی محتوای خروجی را فیدآوت و محتوای ورودی را فیداین میکند.

FitMode

این مشخصه سه گزینه دارد.

• FIT_MODE_HEIGHT – در طی مقیاس انیمیشن، محتوای ورودی را با ارتفاع محتوای خروجی تطبیق میدهد.
• FIT_MODE_WIDTH – در طی مقیاس انیمیشن، محتوای ورودی را با عرض محتوای خروجی تطبیق میدهد.
• FIT_MODE_AUTO – به صورت خودکار از FIT_MODE_HEIGHT یا FIT_MODE_WIDTH استفاده میکند.

containerColor

رنگ پسزمینه کانتینر مورفشونده را تعیین میکند. این رنگ زیر نماهای آغازی و پایانی رسم میشود. این مشخصه در مواردی که یک یا هر دوی نماها پسزمینه تکرنگی ندارند، بسیار مفید است. از این مشخصه میتوان برای تنظیم رنگ گذار و بهبود تبدیل از یک نما به نمای دیگر نیز بهره برد.

scrimColor

این مشخصه رنگی که باید زیر کانتینر مورفشونده و درون مرزهای drawingView رسم شود را تعیین میکند. این drawingView نمایی است که گذار روی آن همپوشانی خواهد یافت. drawingView را میتوان با استفاده از تابع ()setDrawingViewId مشخص کرد.

private fun buildContainerTransform() =
        MaterialContainerTransform().apply {
            addTarget(binding.coordinator)
            duration = 500
            fadeMode = MaterialContainerTransform.FADE_MODE_IN
            interpolator = FastOutSlowInInterpolator()
        }

FAB to Menu

این گذار یک FAB را به Menu تبدیل میکند. در این مورد باید نماهای آغازین و پایانی را تعیین کنیم.

private fun buildContainerTransformation() =
        MaterialContainerTransform().apply {
            scrimColor = Color.TRANSPARENT
            duration = 300
            interpolator = FastOutSlowInInterpolator()
            fadeMode = MaterialContainerTransform.FADE_MODE_IN
        }           


    private fun setClickListeners() {
        binding.floatingActionButton.setOnClickListener {
            val transition = buildContainerTransformation()

            transition.startView = binding.floatingActionButton
            transition.endView = binding.card

            transition.addTarget(binding.card)

            TransitionManager.beginDelayedTransition(findViewById(android.R.id.content), transition)
            binding.card.visibility = View.VISIBLE
            binding.fabScrim.visibility = View.VISIBLE

            binding.floatingActionButton.visibility = View.INVISIBLE
        }
    }

FAB to Activity

این گذار یک FAB را به یک اکتیویتی تبدیل میکند. این گذار از MaterialArcMotion برای جابجایی کانتینر در راستای یک منحنی بهره میگیرد.

private fun buildContainerTransform() =
        MaterialContainerTransform().apply {
            addTarget(binding.coordinator)
            setAllContainerColors(MaterialColors.getColor(binding.root, R.attr.colorSurface))
            pathMotion = MaterialArcMotion()
            duration = 500
            interpolator = FastOutSlowInInterpolator()
            fadeMode = MaterialContainerTransform.FADE_MODE_IN
        }

MaterialCardView to Activity

این گذار یک آیتم لیست را به یک اکتیویتی تبدیل میکند. ما میتوانیم تفاوت بین FADE_MODE_IN و FADE_MODE_OUT را مشاهده کنیم.

ier class ViewHolder(val binding: ItemNoteBinding) : RecyclerView.ViewHolder(binding.root) {
        fun bind(note: Note) {
            binding.note = note
            binding.noteCard.transitionName = note.id.toString()
            binding.noteCard.setOnClickListener {
                noteClickListener.onNoteClick(note.id, binding.noteCard)
            }
        }
    }

val adapter = NotesAdapter(notes)
        adapter.noteClickListener = object : NotesAdapter.NoteClickListener {
            override fun onNoteClick(id: Int, noteCard: MaterialCardView) {
                val intent = Intent(this@NotesActivity, NoteDetailActivity::class.java)
                val options = ActivityOptionsCompat.makeSceneTransitionAnimation(
                    this@NotesActivity, noteCard, id.toString()
                )
                intent.putExtra("noteId", id)
                startActivity(intent, options.toBundle())
            }
        }

class NoteDetailActivity : AppCompatActivity() {
    private lateinit var binding: NoteDetailActivityBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        window.requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS)
        binding = NoteDetailActivityBinding.inflate(layoutInflater)
        val noteId = intent.getIntExtra("noteId", 0)
        val note = notes.find { it.id == noteId }
        binding.note = note
        binding.coordinator.transitionName = noteId.toString()
        setEnterSharedElementCallback(MaterialContainerTransformSharedElementCallback())
        window.sharedElementEnterTransition = buildContainerTransform()
        window.sharedElementReturnTransition = buildContainerTransform()
        setContentView(binding.root)
        super.onCreate(savedInstanceState)
    }

    private fun buildContainerTransform() =
        MaterialContainerTransform().apply {
            addTarget(binding.coordinator)
            duration = 300
            interpolator = FastOutSlowInInterpolator()
            fadeMode = MaterialContainerTransform.FADE_MODE_IN
        }
}

تبدیل کانتینر در کامپوننت ناوبری اندروید

val adapter = AlbumsAdapter(albums, requireContext())
        adapter.albumClickListener = object : AlbumsAdapter.AlbumClickListener {
            override fun onAlbumClick(id: Int, cardView: MaterialCardView) {
                val extras = FragmentNavigatorExtras(
                    cardView to id.toString()
                )
                val action = AlbumsFragmentDirections.navToAlbumFragment(id)
                findNavController().navigate(action, extras)
            }
        }

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        sharedElementEnterTransition = buildContainerTransform()
        sharedElementReturnTransition = buildContainerTransform()
    }

    private fun buildContainerTransform() =
        MaterialContainerTransform().apply {
            drawingViewId = R.id.nav_host_fragment
            interpolator = FastOutSlowInInterpolator()
            containerColor = Color.WHITE
            fadeMode = MaterialContainerTransform.FADE_MODE_OUT
            duration = 300
        }

محور مشترک (Shared Axis)

این الگو برای گذار بین عناصر UI که روابط فضایی یا ناوبری خاصی دارند مورد استفاده قرار میگیرد. این گذار از تبدیلهای روی محورهای x، y یا z برای تأکید مجدد روی رابطه بین عناصر بهره میگیرد. به این ترتیب عناصر با جابجایی در جهت یکسان، با همدیگر مرتبط تصور میشوند.

val forward = true
                val fragment = MyFragment.newInstance()
                // axis: MaterialSharedAxis.X, Y or Z
                // forward: true if it move in the forward direction or false if it move in the backward direction
                fragment.enterTransition = MaterialSharedAxis(MaterialSharedAxis.Y, forward)
                supportFragmentManager
                    .beginTransaction()
                    .replace(R.id.fragment_container, fragment)
                    .commit()

محور X

در تصویر فوق مثالی از استفاده از گذار MaterialSharedAxis روی محور X برای یک ناوبری در اپلیکیشن را میبینید.

محور Y

در تصویر فوق یک stepper عمودی با استفاده از گذار MaterialSharedAxis روی محور Y میبینید.

محور Z

گذارهای محور Z شامل جابجایی یک سطح به سمت بالا یا پایین در سلسله مراتب اپلیکیشن است.

Fade Through

این الگو برای گذار بین عناصر UI که رابطهای قوی با همدیگر دارند مورد استفاده قرار میگیرد. گذار Fade through بهترین گزینه در یک نمای ناوبری تحتانی محسوب میشود، زیرا متدها غالب در وظایف عمدهای گروهبندی شدهاند که ممکن است با همدیگر مرتبط نباشند.

class ArtistsFragment : Fragment() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enterTransition = MaterialFadeThrough()
    }
  
    ...
}

Fade

این الگو برای آن عناصر UI استفاده میشود که درون مرزهای صفحه وارد یا از آن خارج میشوند. از جمله این موارد شامل یک دیالوگ است که از سمت مرکز در یک نما فیداین یا فیدآوت میشود.

// import androidx.transition.TransitionManager        
        
        binding.floatingActionButton.post {
            val transition = MaterialFade().apply {
                duration = 1500
            }
            TransitionManager.beginDelayedTransition(binding.root, transition)
            binding.floatingActionButton.visibility = View.VISIBLE
        }

سخن پایانی

به این ترتیب به پایان این مقاله با موضوع معرفی متریال دیزاین موشن برای اندروید میرسیم. در این مطلب تلاش کردیم با انواع انیمیشن و گذارهای کامپوننت محبوب متریال دیزاین در اندروید آشنا شویم. امیدواریم این مطلب مورد توجه شما قرار گرفته باشد.

اگر این مطلب برای شما مفید بوده است، آموزشها و مطالب زیر نیز به شما پیشنهاد میشوند:

• مجموعه آموزشهای برنامهنویسی اندروید
• آموزش متریال دیزاین (Material Design) برای طراحی تب ها در اپلیکیشن اندروید
• مجموعه آموزشهای برنامهنویسی
• معرفی سیستم جدید Motion در متریال دیزاین — راهنمای مقدماتی
• گذار (Transition) در انیمیشن های اپلیکیشن های اندرویدی — راهنمای کاربردی