تکنیک های اسکرولینگ برای متریال دیزاین - بخش اول

تکنیک های اسکرولینگ برای متریال دیزاین - بخش اول

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

در طول کنفرانس I/O امسال، گوگل به معرفی کتابخانه پشتیبانی اندروید پرداخت، این اقدام گوگل کار با متریال دیزاین را برای توسعه دهندگان تسهیل می بخشد، بدین ترتیب توسعه دهندگان قادر به تمرکز بر روی امکاناتی می شوند که اپلیکیشن های آنها را منحصر به فرد و خاص می سازد.

1. نواحی

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

blog_15342_1

نوار وضعیت

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

نوار ابزار

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

نوار یا تب جستجو

این ناحیه برای نمایش تب هایی که به بخش بندی محتوای اپلیکیشن می پردازند، اختصاص داده شده است. جهت کسب اطلاعات بیشتر در این باره می توانید به Google's Material Design specification مراجعه کنید. در صورت نیاز می توانید از آن در ناوبری نیز استفاده کنید.

فضای منعطف

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

2. راه اندازی پروژه

برای ادامه نیاز است تا آخرین نسخه از اندروید استودیو را مورد استفاده قرار دهید. شما می توانید آن را از وب سایت Android Developer website دریافت کنید. به منظور تست این تکنیک های اسکرولینگ بهتر است یک پروژه جدید بسازید.

چنین پروژه ای در GitHub قرار داده شده و قابل دانلود می باشد، شما می توانید به عنوان نقطه شروع کار خود این پروژه را مورد استفاده قرار دهید و سپس این تکنیک های اسکرولینگ را در سایر پروژه های خود استفاده نمایید. در نخستین گام لازم است وابستگی های زیر را به فایل build.gradle در داخل پوشه اپلیکیشن بیفزایید.

compile 'com.android.support:design:22.2.0'

compile 'com.android.support:recyclerview-v7:22.2.0'

با استفاده از وابستگی اول شما کتابخانه پشتیبانی طراحی اندروید را دریافت می کنید، این کتابخانه شامل کلاس های جدیدی است که در این پروژه موردنیاز خواهند بود.

با وابستگی دوم آخرین نسخه از RecyclerView در اختیار شما قرار می گیرد.

در گام بعدی شما به داده هایی برای پر کردن RecyclerView نیاز دارید، می توانید خود آنها را جاسازی کنید و یا از کلاس InitialActivity برای این منظور بهره بگیرید.

1. تکنیک اسکرولینگ اول

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

برای طراحی این لی اوت ممکن است به چیزی مشابه زیر بیندیشید:

<RelativeLayout

… >

<Toolbar

… />

<RecyclerView

… />

</RelativeLayout>

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

<android.support.design.widget.CoordinatorLayout

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="co.herovitamin.androiddesignsupportlibraryapplication.CoordinatorLayoutAndAppBarActivity">

<android.support.design.widget.AppBarLayout

android:id="@+id/my_appbar_container"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" >

<android.support.v7.widget.Toolbar

android:id="@+id/technique_one_toolbar"

style="@style/TechniqueToolbar"

app:layout_scrollFlags="scroll|enterAlways">

<!--

scroll

enterAlways

enterAlwaysCollapsed

exitUntilCollapsed

-->

</android.support.v7.widget.Toolbar>

</android.support.design.widget.AppBarLayout>

<android.support.v7.widget.RecyclerView

android:id="@+id/days_list"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

</android.support.design.widget.CoordinatorLayout>

در لی اوت جدید مشاهده می کنید که:

RelativeLayout با CoordinateLayout جایگزین شده است.

Toolbar در AppBarLayout پاک شده است.

بخش Toolbar و RecyclerView چندین ویژگی اضافه دریافت کرده اند.

اما این کلاس های جدید کدامند؟

CoordinateLayout

این لی اوت یک کانتینر جدید است و به FrameLayout که یک سطح افزونه برای کنترل ایونت های لمسی بین ویوهای فرزند است، قدرت بخشیده است.

AppBarLayout

این لی اوت نیز یک کانتینر جدید می باشد و به منظور جایگذاری بسیاری از امکانات متریال دیزاین برای نوار طراحی شده است. به یاد داشته باشید که چنانچه از آن در داخل یک ViewGroup دیگر استفاده کنید، بسیاری از عملکردهای آن به درستی کار نخواهند کرد.

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

به منظور فعال سازی این تکنیک ویژگی app:layout_behavior مشخص می کند که کدام ویو باید اوینت های درون Toolbar را تریگر نماید. در این حالت ویوی موردنظر RecylcerView است.

app:layout_behavior=“@string/appbar_scrolling_view_behavior"

ویژگی app:layout_scrollFlags از Toolbar نحوه پاسخ گویی ویو را مشخص می کند.

app:layout_scrollFlags=“scroll|enterAlways"

ویژگی app:layout_scrollFlags می تواند دارای چهار مقدار ممکن باشد، این مقادیر را می توان به منظور ساخت افکت موردنظر ترکیب کرد.

Scroll

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

enterAlways

این فلگ از بابت قابل مشاهده بودن ویو در صورت اسکرول به سمت پایین اطمینان حاصل می نماید و الگوی quick return را فعال سازی می کند.

enterAlwaysCollapsed

زمانی که ویو یک minHeight تعریف کرده باشد و این فلگ را مورد استفاده قرار دهید، ویو تنها به طول مینیموم خود وارد می شود(به صورت جمع شده) و زمانی که ویوی اسکرول شده به قسمت بالای خود برسد، باز می شود.

exitUntilCollapsed

این فلگ موجب اسکرول شدن ویو تا زمان باز شدن آن پیش از خروج می شود(زمانی که به minHeight برسد).

در این مرحله می توانید پروژه را به اجرا در آورید و یا Control+R را بفشارید و این تکنیک را در عمل مشاهده نمایید.

2. تکنیک اسکرولینگ دوم

این اسکرول زمانی که ناحیه نوار تب به قسمت بالا وصل شده، نوار ابزار را به اسکرول در می آورد. در ویئویی زیر قادر به مشاهده این تکنیک در عمل هستید.

برای این تکنیک لی اوت استفاده شده در تکنیک قبلی را مورد استفاده قرار می دهیم و یک ویوی TabLayout را به کنار Toolbar درون AppBarLayout آن اضافه می کنیم.

<android.support.design.widget.CoordinatorLayout

...

<android.support.design.widget.AppBarLayout

...

<android.support.v7.widget.Toolbar

...

app:layout_scrollFlags="scroll|enterAlways"/>

<android.support.design.widget.TabLayout

android:id="@+id/tabs"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="@color/primary"

/>

</android.support.design.widget.AppBarLayout>

<android.support.v7.widget.RecyclerView

...

app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

</android.support.design.widget.CoordinatorLayout>

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

tab_layout = (TabLayout) findViewById(R.id.tabs);

tab_layout.setTabMode(TabLayout.MODE_FIXED);

tab_layout.addTab(tab_layout.newTab().setText("Tab 1"));

tab_layout.addTab(tab_layout.newTab().setText("Tab 2"));

tab_layout.addTab(tab_layout.newTab().setText("Tab 3"));

با تغییر مقدار ویژگی app:layout_scrollFlags و افزودن و حذف آن از Toolbar و TabLayout می توانید انیمیشن هایی مشابه موارد زیر بدست آورید.

- در گوگل پلی استور که نوار ابزار مخفی شده و نوار تب قابل رویت می ماند.

- Foursquare که نوار تب اسکرول می شود در حالی که نوار ابزار در قسمت بالا می ماند.

- Play Music که نوار ابزار و نوار تب هر دو اسکرول می شوند.

با مشاهده ویدئوهای زیر می توانید تکنیک های اسکرول را بهتر درک کنید، با اجرای پروژه قادر به مشاهده این تکنیک ها در عمل هستید.

در مطلب آینده شما را با سایر تکنیک های اسکرولینگ در اندروید آشنا می کنیم.

http://code.tutsplus.com برگرفته از

 

اینها را هم بخوانید