حتما توی خیلی از برنامه ها دیدید که مثلا یه عکس بالای صفحه هست ، و یه متن بلند هم پایین عکس . و وقتی میخواید ادامه متن رو بخونید و متن رو به سمت بالا میکشونید ، اون عکس با یه حالت و افکت خاصی کوچیک میشه و در آخر محو میشه . ( این حالت مثه وقتی هست که یه دختر توی خیابون با عشوه و ناز شلوارشو بالا میکشه ! ) . این حالت رو بهش میگن CollapsingToolbar . توی این آموزش بیشتر با XML کار داریم و یه قسمت کوچولو موچولو توی اکتیویتی کار داریم ( میتونیم این برنامه رو با جاوا هم دقیقا پیاده سازی کنیم ، ولی خوب همون یه ذره کد توی کلاس با کاتلین راحت تره ! ) . این یه نمونه برنامه از CollapsingToolbar هست : 


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

توی کد بالا و خط ۱۸ ، گفتیم که title یا همون تیتر ما که قراره روی عکس قرار بگیره و وقتی اون عکس کامل محو شد و فقط تیتر موند ، کجا قرار بگیره . که گفتیم bottom|right یعنی پایین و سمت راست . بعد از اینکه AppBarLayout و CollapsingToolbarLayout رو تعریف کردیم ، عکس اصلی رو اضافه کردیم . پایین عکس ، ما یه متن طولانی داریم ، که باید از ScrollView استفاده میکنیم . ولی چون قراره یه حالت پیشرفته باشه ، میایم از حالت پیشرفته تر ScrollView که NestedScrollView هست استفاده میکنیم . بعد از NestedScrollView ما یه LinearLayout تعریف میکنیم که میخوایم داخل این LinearLayout متن خودمون رو بذاریم . واسه اینکه خیلی شلوغ پلوغ نشه ، میایم متن خودمون رو توی یه لایوت دیگه به نام content_layout تعریف میکنیم و با استفاده از include اون لایوت رو توی LinearLayout صدا میزنیم . یعنی اینجوری : 

اینم کدهای content_layout هست : 

گفتم که اساس کار این برنامه ، CollapsingToolbarLayout هست و ما هم یه آی دی بهش دادیم به اسم collapsingToolbarLayout . حالا میخوایم تیتر خودمون رو بگیم چه متنی باشه . اینجاست که میریم سراغ کاتلین و MainActivity.kt و خیلی راحت آی دی رو مینویسیم و بهش میگیم تیترمون برابر چی باشه . اینجوری  : 

و کل کدهای کاتلین :

خــــــــوب ، عزیزان من ، سورس رو هم میتونید دانلود کنید : 

دانلود سورس

آموزش ساخت CollapsingToolbar در کاتلین

مجتبی صابری


همه عشقم برنامه نویسی هست | t.me/kotlin9


پیمایش نوشته


پاسخ دهید

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