در مطلب قبلی شما را با برخی از تکنیک های اسکرولینگ در اندروید آشنا نمودیم، در ادامه با ما همراه باشید تا چند تکنیک دیگر را نیز به شما آموزش دهیم.

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

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

برای این نوع تکنیک اسکرولینگ از لی اوت زیر استفاده می شود:

<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="192dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:background="@color/primary">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="@color/primary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginEnd="64dp">
            <android.support.v7.widget.Toolbar
                android:id="@+id/technique_three_toolbar"
                android:layout_height="?attr/actionBarSize"
                android:layout_width="match_parent"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin"/>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <android.support.v7.widget.RecyclerView
        android:id="@+id/days_list_3"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@drawable/plus"
        app:borderWidth="0dp"
        app:layout_anchor="@id/my_appbar_container"
        app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>

کدهای موردنظر زیاد به نظر می رسند، بهتر است آنها را بخش بندی کنیم، برای این کار تغییرات زیر در کدها داده می شوند.

Toolbar در یک collapsingToolBarLayout قرار داده شده است و هر دو جز در AppBarLayout قرار داده شده اند.

ویژگی app:layout_scrollFlags از Toolbar به CollapsingToolBarLayout جابجا شده است، چرا که این کانتینر هم اکنون به رخدادهای اسکرول پاسخ می دهد.

یک ویژگی جدید به نام app:layout_collapseMode به Toolbar افزوده شده است، این ویژگی از بابت پین ماندن Toolbar در قسمت بالای صفحه نمایش اطمینان حاصل می کند.

AppBarLayout یک ارتفاع اولیه ثابت با اندازه 192dp دارد.

یک FloatingActionButton در زیر RecyclerView به لی اوت افزوده شده است.

این کلاس های جدید برای چه هستند؟

CollapsingToolBarLayout

این یک ویوی جدید است که برای جایگذاری Toolbar و اپ ویوی باز شونده طراحی شده است. در حین استفاده از CollapsingToolBarLayout باید به ویژگی های زیر توجه کنید.

App:contentScrim

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

app:expandedTitleMarginStart/app:expandedTitleMarginEnd

این ویژگی مارجین های عنوان گسترش یافته را مشخص می سازد. زمانی که قصد دارید در اکتیویتی خود از متد setDisplayHomeAsUpEnabled استفاده کنید و فضاهای جدید اطراف عنوان را پر کنید، از آن استفاده کنید.

FloatingActionButton

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

از ویژگی app:fabSize می توان برای گزینش بین دو اندازه مختلف استفاده کرد، استاندارد و کوچک. اندازه استاندارد پیش فرض است.

افکت ناپدید شدن با اتصال دکمه اکشن شناور به AppBarLayout و استفاده از ویژگی app:layout_anchor انجام می شود. علاوه بر این می توانید یک موقعیت نسبی نیز با کمک ویژگی app:layout_anchorGravity به آن اختصاص دهید.

پیش از اجرای پروژه لازم است در اکتیویتی مشخص کنید که CollapsingToolBarLayout عنوان را به جای نوار ابزار نمایش می دهد. برای درک بهتر می توانید نگاهی به قطعه کد زیر بیندازید. با اجرای پروژه سومین تکنیک اسکرولینگ را در عمل مشاهده کنید.

collapsing_container = (CollapsingToolbarLayout) findViewById(R.id.collapsing_container);

4. تکنیک اسکرولینگ چهارم

این تکنیک از AppBarLayout گسترش یافته که در تکنیک قبل شرح داده شد برای نمایش تصویر استفاده می کند. در ویدئوی زیر این تکنیک به نمایش گذاشته شده است. در این تکنیک لی اوت قبلی را همراه با کمی تغییرات مورد استفاده قرار می دهیم، تغییرات در زیر نمایش داده شده اند:

<android.support.design.widget.CoordinatorLayout
    ...>
    <android.support.design.widget.AppBarLayout
        android:id="@+id/my_appbar_container"
        android:layout_width="match_parent"
        android:layout_height="192dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" >
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="@color/primary">
            <ImageView
                android:id="@+id/imgToolbar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/image"
                app:layout_collapseMode="parallax" />
            <android.support.v7.widget.Toolbar
                ...>
            </android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <android.support.v7.widget.RecyclerView
        .../>
    <android.support.design.widget.FloatingActionButton
        ... />
</android.support.design.widget.CoordinatorLayout>

ویژگی android:background از AppBarLayout حذف شده است، زیرا ImageView این فضا را پر خواهد کرد و نیازی به رنگ پس زمینه احساس نمی شود.

ویژگی های app:expandedTitleMarginStart و app:expandedTitleMarginEnd حذف شده اند، زیرا از متد setDisplayHomeAsUpEnabled در اکتیویتی استفاده نخواهیم کرد.

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

ImageView دارای یک ویژگی به نام app:layout_collapseMode نیز می باشد، مقدار این ویژگی parallax گذاشته شده است، با این کار یک اسکرول انطباقی خواهید ساخت. علاوه بر این می توانید یک ویژگی app:layout_collapseParallasxMultiplier نیز برای نشاندن یک multiplier اضافه کنید.

با اعمال این تغییرات و اجرای پروژه این تکنیک اسکرولینگ را در عمل مشاهده کنید.

5. تکنیک اسکرولینگ پنجم

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

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

<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="192dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:background="@color/primary">
            <android.support.v7.widget.Toolbar
                android:id="@+id/technique_five_toolbar"
                android:layout_height="?attr/actionBarSize"
                android:layout_width="match_parent"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin"
                android:background="@color/primary" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <android.support.v7.widget.RecyclerView
        android:id="@+id/days_list_5"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        app:behavior_overlapTop="64dp" />
</android.support.design.widget.CoordinatorLayout>

برای این لی اوت:

ImageView و FloatingActionButton در CollapsingToolbarLayout حذف شده اند، این تکنیک به تصویر احتیاجی ندارد.

در CollapsingToolbarLayout، ویژگی app:contentScrim با android:background جایگزین شده است. این کار برای مطابقت رنگ پس زمینه با پس زمینه Toolbar انجام می شود.

ویژگی android:background به Toolbar افزوده شده است.

ویژگی app:behavior_overlapTop به RecyclerView افزوده شده است، این ویژگی در این تکنیک بسیار مهم است، چرا که وظیفه تعیین میزان همپوشانی با AppBarLayout را بر عهده دارد. لازم به ذکر است که باید این ویژگی را به همان ویویی که دارای ویژگی app:layout_behavior است اضافه کرد.

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

TextView text = new TextView(this);
text.setText(R.string.title_activity_technique5);
text.setTextAppearance(this, android.R.style.TextAppearance_Material_Widget_ActionBar_Title_Inverse);
toolbar.addView(text);

نتیجه گیری

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

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