آموزش برنامه نویسی اندروید | آموزش CollapsingToolbarLayout در برنامه نویسی اندروید
سلام دوستان در این سری از آموزش برنامه نویسی اندروید به آموزش CollapsingToolbarLayout در برنامه نویسی اندروید می پردازیم همانطور که از نام آن پیدا است از این برای باز و بسته کردن Toolbar در حالت خاص استفاده می شود در ادامه می توانید پیش نمایشی از CollapsingToolbarLayout را مشاهده کنید با ما همراه باشید.
به خاطر بالا بودن حجم فایل در ادامه از لینک زیر استفاده کنید.
لینک پیشنمایش
برای اینکه از این آموزش استفاده کنید نیاز است تا کتاب خانه دیزاین گوگل را اضافه کنید.
برای اینکار وارد فایل Build.gradle از نوع Module شده سپس در بخش dependencies اضافه کنید.
1 | compile 'com.android.support:design:24.2.1' |
سپس پروژه را sync کنید.
وارد فایل styles.xml شده در مسیر res/values قرار دارد و کد زیر را در آن قرار دهید.
1 2 3 4 5 | <style name="AppTheme.NoActionBar"> <item name="windowActionBar">false</item> <item name="windowNoTitle">true</item> </style> <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar"/> |
سپس در مسیر res/values یک پوشه به نام values-v21 ایجاد کنید و در آن یک فایل به نام styles.xml ایجاد کرده و کد های زیر را در آن قرار دهید.
1 2 3 4 5 6 7 8 | <resources> <style name="AppTheme.NoActionBar"> <item name="windowActionBar">false</item> <item name="windowNoTitle">true</item> <item name="android:windowDrawsSystemBarBackgrounds">true</item> <item name="android:statusBarColor">@android:color/transparent</item> </style> </resources> |
علت استفاده از کد بالا برای ایجاد Toolbar به شکل transparent است که از API 21 به بعد پشتیبانی می کند.
حالا وارد AndroidManifest.xml شده و بخش مربوط به اکتیویتی که می خواهید CollapsingToolbarLayout را در آن قرار دهید بخش Theme را همانند زیر ویرایش کنید.
1 | android:theme="@style/AppTheme.NoActionBar" |
سپس در اکتیویتی که نام آن برابر با CollapsingToolbarActivity است کد های زیر را قرار میدهیم.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <android.support.design.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:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context=".CollapsingToolbarActivity"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/app_bar_layout" android:fitsSystemWindows="true" app:elevation="0dp" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.design.widget.CollapsingToolbarLayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/collapsing_toolbar" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:layout_scrollFlags="scroll|enterAlways"> <ImageView android:layout_width="match_parent" android:layout_height="350dp" android:scaleType="centerCrop" android:fitsSystemWindows="true" android:id="@+id/iv_detail" android:src="@drawable/android_apple_fight" app:layout_collapseMode="parallax"/> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin"/> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <include layout="@layout/content_collapsible_toolbar"/> </android.support.v4.widget.NestedScrollView> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="16dp" app:layout_anchor="@id/app_bar_layout" app:layout_anchorGravity="bottom|right|end" app:srcCompat="@android:drawable/ic_menu_share"/> </android.support.design.widget.CoordinatorLayout> |
در صورتی که به بالا scroll کنید Toolbar پنهان می شود . در بالا برای اینکه دو تا scrollView پشتیبانی شود از NestedScrollView استفاده می کنیم. اگر بخواهیم structure کلی layout بالا را درک کنید ابتدا یک CoordinatorLayout تعریف شده است سپس در داخل CoordinatorLayout یک AppBarLayout برای ایجاد یک bar در بالای CoordinatorLayout استفاده شده است سپس در داخل AppBarLayout یک CollapsingToolbarLayout قرار داده شده است و در آن یک ImageView و یک Toolbar قرار گرفته است.
در بالا ممکن است کد content_collapsible_toolbar خطا دهد
پس باید یک فایل به نام content_collapsible_toolbar.xml در پوشه layout ایجاد کرده و کد های زیر را در آن قرار دهید.
1 2 3 4 5 6 | <android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <include layout="@layout/content_collapsible_toolbar"/> </android.support.v4.widget.NestedScrollView> |
در بخش اکتیویتی کدی قرار نداده ایم فقط بخش llayout است که مهم است در آموزش های بدی نحوه سفارشی سازی آن را خواهیم گفت ولی به راحتی می توانید آن را سفارشی سازی کنید.
این آموزش هم به پایان رسید
موفق و موید باشید.
عالی بود ممنون ادامه بدید.از مطالب مفیدتون همیشه استفاده می کنم
خواهش می کنم.
سلام بعضی برنامه ها اولش بالای صفحه یکی عکس هست و تولبار پیدا نیست بعد که اسکرول می کنیم و عکس جمع میشه تولبار ظاهر میشه که داخلش متنی نوشته شده می تونید راهنمایی کنید چطور کدشو بنویسم؟
چرا اینقدر شما خوبید آخه؟ خیلی خیلی ممنونم