نوار ابزار متحرک یا Collapsing Toolbar Layout

<به نام خدایی که خود خالق ماست و ما را به شکلی آفرید که توانایی خلق نیاز هامون را داشته باشیم>

سلام محمد علی ریاضتی هستم و در این آموزش توی سایت “خانه اندروید” با شما همراهان همیشگی همراه هستم.

من گشتی توی اینترنت میزدم و میگشتم که متوجه موضوعی شدم. این آموزشی که بنده امروز قصد دارم براتون شرح بدم و مهم تر از همه (رایگان) توی بعضی سایتا فروشی بوده یا خیلی مختصر گفته شده یا خیلی پیچیده. من این در این آموزش نه از RecyclerView استفاده میکنم نه چیز دیگه ای که فقط ۲ Layout و یک کلاس تشکیل شده است.

خب زیاد حرف نمیزنم و میریم سراغ آموزشمون.

۱)  مرحله اول شما باید داخل گریدل برنامتون این ۴ خط کد را وارد کنید:

از کتابخانه design برای تولبارمون استفاده میکنیم.

از کتابخانه cardview هم برای نمایش متن های مورد نظرمون به صورت کادر بندی شده و شیک استفاده میکنیم.

نکته: برای اضافه کردن کتابخونه ها بهتره گریدلتون رو آنلاین کنید و با اینترنت بارگذاری کنید اما باید از برنامه های گذر از تحریم استفاده کنید و دلیل این هم تحریم بودن کشورمون توسط گوگل میباشد.

نکته: گاها شده که از ScrollingActivity  خود اندروید استودیو بخواهید استفاده کنید که نیازمند minSDK 14 است و شدنیه اما برای افراد مبتدی قابل درک نیست که چیشد و چرا شد.

*برای فهمیدن بهتر شما همراهان عزیز چون کدها ترکیب خواهند شد با جمله “//محل قرار گیری کدهای قسمت بعدی آموزش//” مشخص کردیم که مثلا کدی که در آموزش ۳) است باید در محلی که مشخص کردیم در کد ۲) گذاشته بشه!

۲) و حالا قسمت دوم آموزش نوشتن کد های لایه متناظرمون که ما به اسم main_activity قرار دادیم. در این لایه ابتدا لایه کلی خودمون رو تعریف میکنیم:

۳) حالا داخل تگ Layout اصلیمون یک AppBarLayout تعریف میکنیم:

*در پوشه values در فایل style کد های زیر را وارد وارد کنید:

۴) حالا در تگ AppBarLayout کد های زیر را قرار میدیم:

و اما این که کد ها چی هستن؟

*در قسمت Collapsing Toolbar Layout تولبار متحرک خودمون رو تعریفف کردیم و طبق مشخصه هایی که میخواستیم تعریفش کردیم.

*ذر قسمت ImageView عکس بگراند تولبارمون که در پوشه Drawable قرار دادیم و با تولبار ست میکنیم و “آدرس عکس شما”=android:src است.

*در قسمت RelativeLayout ما درون تولبارمون یک layout اضافه میکنیم تا متن هامون رو داخلش قرار بدیم.

*در قسمت ۳تا textView ما ۳ عدد متن قرار دادیم یک متن ک در وسط عکس نمایش داده میشه و ۲ متن دیگه که مثل کادر متن اول قرار میگیره.

*و خارج از تگ RelativeLayout هم تولبار خودمون رو اضافه کردیم که بعد از بسته شدن تولبار متحرکمون اون تولبار رو نمایش بده.

کار تولبار متحرک ما تقریبا تموم شده اما هنوز نیاز به آیتم هایی داریم که توی عملکرد تولبار بهمون کمک کنند تا تولبارمون از زیبایی بیشتری برخوردار باشه پس با استفاده از cardView این کار رو انجام میدیم.

۵) در مسیر app/res/layout یک layout جدید میسازیم و اسم آن را من برابر با nested_scroll_view قرار میدم و هر آیتمی که نیاز دارم را درون اون میریزم. بعد ساخته شدن layout مقادیر پیش فرضی درون اون قرار داده شده پس شما اون مقادیر رو میبایست پاک کنید و مقادیر زیر را جایگزین کنید:

*اینجا ما از یک به اصطلاح طومار تو در تو یا NestedScrollView استفاده کردیم برای تا بتونیم آیم هامون رو درونش قرار بدیم.

*درون NestedScrollView از یک LinierLayout استفاده کردیم تا بتوانیم تمامی آیتم های مد نطرمون رو درونش قرار بدیم.

۶) و حالا نوبت به استفاده از CardView میرسه که توی اون از یک Layout استفاده کردیم و داخلش ۲ تا TextView قرار دادیم مثل کد های زیر:

۷) من در این آموزش از ۴تا CardView استفاده کردم برای بهتر عمل کردن تولبار متحرکمون و فرقی با کدهای بالا ندارن فقط کدهای بالا رو ۴ بار پشت هم کپی میکنیم مثل زیر:

۸) حالا برمیگردیم به activity_main و بعد AppBarLayout با include لایه ای که ساختیم رو وارد میکنیم با نوشتن کد زیر:

*برای توضیح و درک بهتر به این روش عمل میکنیم:

۹) و حالا نوبت به کار با دکمه fab یا همون FloatingActionButton میرسه کا با هم تکمیلش میکنیم, قسمت آخر طراحی دیزاین.

برای گذاشتن این سبک دکمه (درصورت نیاز) کافیه کد های زیر رو توی قسمتی که توی کد های بالا مشخص کردیم وارد کنیم:

خب دوستان عزیز کار ما با طراحی دیزاین تولبار متحرکمون تموم شد.

*****

حالا نوبت میرسه به کلاس جاوا که تعریفش کنیم تولبارمون رو و به fab هم یک رویداد برای عملکرد بدیم.

۱۰) برای معرفی کردن تولبار متحرکمون که اگر این کار رو نکنیم با خطای Unfortunately, yourApp has stopped working مواجه خواهید شد. و برای دادن یک عملکرد به fab که با لمس کاری رو انجام بده هم به این شکل عمل میکنیم:

۱۱) ما تولبارمون و fab رو تعریف کردیم به کلاس و بر اساس id گفتیم که منظورمون دقیقا کدوم آیتمه و به fab رویداد نمایش Toast که در اموزش قبلی گفتیم رو دادیم که با کلیک کردن رویداد Toast رو برامون اجرا کنه که شما میتونید با پاک کردن Toast رویداد مد نظرتون رو بنویسید.

کار با Toast در برنامه نویسی اندروید

***و در نهایت خواهیم دید***

در حال بارگذاری

دانلود دمو آموزش:   CollapsingToolbarLayout.apk

دانلود سورس آموزش:   CollapsingToolbarLayout.zip

***********************************

بالاخره این آموزش هم پایان یافت

همواره بهترین ها را برای شما آرزومندیم!

موفق و پیروز باشید:)

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

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

Mohammad Ali Riazati
محمد هستم و امیدوارم که بتونم سهم کوچکی توی پیشترفت برنامه نویسان جوان و آینده دار داشته باشم.

قبل از ارسال دیدگاه

  • قبل از ارسال دیدگاه: لطفا دیدگاه خودتون رو فقط در مورد این مطلب بنویسید.سپاسگزارم.

7 دیدگاه

  1. ابوالفضل سلمانی از کاشان گفت:

    یعنی این آموزش رایگان نیست؟ نسخه بجز دمو برای دانلود کجاست؟

    • Admin Admin گفت:

      درود و احترام
      آموزش فوق رایگان هست دوستم.
      سورس کد و توضیحات کامل قرار گرفته شده ولی فیلم آموزش این قسمت تهیه نشده و فقط توضیحات + سورس کد قرار گرفته شده و اگر اموزش به صورت رایگان نباشه در زیر پست نوشته میشه هزینه برای تهیه این آموزش باید بپردازید مثل این اموزش پرداز فایل xml
      موفق باشید.
      با احترام.

  2. مخمد گفت:

    عالی بود
    لی ای کاش همراه اموزش ها سورس هم قرار میدادین
    چون وقتی خودمون پیادش میکنیم خیلی وقتا با ارور مواجه میشیم
    ولی اگه سورس بود میتونستیم کامل با سوزس خودمون مقایسه کنیم و بهتر متوجه میشدیم
    در هر حال تشکر

  3. مهدی گفت:

    سلام خیلی ممنونم بابت آموزش خوبی گذاشتید خانه اندروید رو دوست دارم واقعا حرف ندارید.

ارسال دیدگاه شما





کد امنیتی *