آموزش CollapsingToolbarLayout در برنامه نویسی اندروید

سلام دوستان در این سری از آموزش برنامه نویسی اندروید به آموزش CollapsingToolbarLayout در برنامه نویسی اندروید می پردازیم همانطور که از نام آن پیدا است از این برای باز و بسته کردن Toolbar در حالت خاص استفاده می شود در ادامه می توانید پیش نمایشی از CollapsingToolbarLayout را مشاهده کنید با ما همراه باشید.
به خاطر بالا بودن حجم فایل در ادامه از لینک زیر استفاده کنید.
لینک پیشنمایش
برای اینکه از این آموزش استفاده کنید نیاز است تا کتاب خانه دیزاین گوگل را اضافه کنید.
برای اینکار وارد فایل Build.gradle از نوع Module شده سپس در بخش dependencies اضافه کنید.

سپس پروژه را sync کنید.
وارد فایل styles.xml شده در مسیر res/values قرار دارد و کد زیر را در آن قرار دهید.

سپس در مسیر res/values یک پوشه به نام values-v21 ایجاد کنید و در آن یک فایل به نام styles.xml ایجاد کرده و کد های زیر را در آن قرار دهید.

علت استفاده از کد بالا برای ایجاد Toolbar به شکل transparent است که از API 21 به بعد پشتیبانی می کند.
حالا وارد AndroidManifest.xml شده و بخش مربوط به اکتیویتی که می خواهید CollapsingToolbarLayout را در آن قرار دهید بخش Theme را همانند زیر ویرایش کنید.

سپس در اکتیویتی که نام آن برابر با CollapsingToolbarActivity است کد های زیر را قرار میدهیم.

در صورتی که به بالا scroll کنید Toolbar پنهان می شود . در بالا برای اینکه دو تا scrollView پشتیبانی شود از NestedScrollView استفاده می کنیم. اگر بخواهیم structure کلی layout بالا را درک کنید ابتدا یک CoordinatorLayout تعریف شده است سپس در داخل CoordinatorLayout یک AppBarLayout برای ایجاد یک bar در بالای CoordinatorLayout استفاده شده است سپس در داخل AppBarLayout یک CollapsingToolbarLayout قرار داده شده است و در آن یک ImageView و یک Toolbar قرار گرفته است.
در بالا ممکن است کد content_collapsible_toolbar خطا دهد
پس باید یک فایل به نام content_collapsible_toolbar.xml در پوشه layout ایجاد کرده و کد های زیر را در آن قرار دهید.

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

مطالعه بیشتر