آموزش قدم به قدم Collapsing Toolbar در اندروید


collapsing toolbar در اندروید

آشنایی اولیه با Collapsing Toolbar در اندروید

Collapsing Toolbar در اندروید نوع خاصی از Toolbar می باشد که هم زمان با scroll شدن صفحه به سمت پایین ، اندازه ی آن تغییر کند.

در واقع زمانی که یک متن طولانی یا یک RecyclerView برای نمایش داشته باشیم ، می توانیم از Collapsing Toolbar در اندروید استفاده کنیم.

در اینجا چون هدف مون فقط نمایش این toolbar هست ، به یک متن طولانی بسنده میکنیم.

شما این امکان رو داخل برنامه های زیادی مشاهده کردید. امروز وقتشه که با هم این مدل toolbar  رو پیاده سازی کنیم!

نمونه یک collapsing toolbar

 

قدم 1: حذف ActionBar و اضافه کردن کتابخانه design support

یک اپلیکشین جدید با یک Activity خالی میسازیم. اولین کاری که لازمه انجام بدیم رفتن به قسمت values >styles.xml هست.

در این قسمت، داخل تگ <resources> این دو خط رو اضافه میکنیم :

<!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="windowNoTitle">true</item>

این کار باعث میشه ActionBar پیش فرضی که در برنامه وجود داره حذف بشه.

حالا باید کتابخانه ی design support را داخل گردل اضافه کنیم تا دانلود شه. این کتابخانه شامل کدهای لازم برای پیاده سازی Collapsing Toolbar در اندروید می باشد.

implementation 'com.google.android.material:material:1.1.0-beta01'

 

قدم 2: اضافه کردن کدهای Collapsing Toolbar

خب ما میخواستیم تو این آموزش یک متن طولانی را داخل NestedScrollView قرار بدیم. ابتدا لازمه که متن خودمون را داخل string.xml قرار بدیم.

حالا به activity_main.xml برمی گردیم و اولین کاری که میکنیم root layout رو به coordinateLayout تغییر می دهیم. در داخل این قسمت AppBarLayout باید قرار بگیره :

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

<com.google.android.material.appbar.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

حالا داخل تگ AppBarLayout باید CollpasingToolbar خودمان را قرار بدیم.

<com.google.android.material.appbar.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

<com.google.android.material.appbar.CollapsingToolbarLayout
    android:layout_width="match_parent"
    android:layout_height="317dp"
    app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"
    app:contentScrim="?attr/colorPrimary"
    app:title="@string/app_name">

در کد بالا ، دو تا attribute وجود دارند که از اهمیت خاصی برخوردار هستند.

1- خصوصیت app:layout_scrollFlags : این آیتم مسئول چگونگی نمایش هست.

2- خصوصیت app:contentScrim : در اینجا مشخص میکنیم که وقتی Toolbar جمع شد ، چه رنگی بگیرد.

حالا داخل CollapsingToolbarLayout می تونیم Toolbar رو اضافه کنیم.

 

قدم 3: اضافه کردن عکس به Toolbar

ما میتونیم Collapsing Toolbar خودمون را به همراه یک تصویر در نظر بگیریم. وقتی که scroll رو به پایین انجام می شود، toolbar ما جمع میشه و عکس هم تبدیل به یک رنگ میشه.

برای این کار ابتدا باید تصویر دلخواه خودمون را داخل پوشه ی drawable کپی کنیم.

حال برای اینکه عکس ما به ToolBar اضافه بشه باید یک ImageView به قبل از ToolBar اضافه کنیم.

<com.google.android.material.appbar.CollapsingToolbarLayout
    android:layout_width="match_parent"
    android:layout_height="317dp"
    app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"
    app:contentScrim="?attr/colorPrimary"
    app:title="@string/app_name">
<ImageView
    android:layout_width="match_parent"
    android:layout_height="250dp"
    android:src="@drawable/logo" />
    <androidx.appcompat.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"/>

بخش rootLayout جایی هست که باید اول یک NestedScrollView که حامل TextView مورد نظرمون هست رو اضافه کنیم. تنها موردی که لازمه بهش توجه کنیم اینه که یک layout_behavior برای ScrollView مشخص کنیم تا متن با Toolbar همپوشانی نداشته باشه.

app:layout_behavior=”@string/appbar_scrolling_view_behavior”

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

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

 

به این پست امتیاز دهید

روی ستاره های کلیک کنید و امتیاز بدید

میانگین امتیاز / 5. تعداد:

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *




Enter Captcha Here : *

Reload Image