آموزش ساخت هدر متحرک در B4A
سلام
اگر برنامه ای مثل واتس اپ را دیده باشید، وقتی لیست مخاطبینتان را به سمت بالا اسکرول میکنید، هدر واتس اپ کوچک میشود و به سمت بالا میرود حالا ما میخواهیم یه همچین هدری را در این آموزش به زبان بیسیک فور اندروید به شما آموزش دهیم، در ادامه همراه پبرسم باشید.
ساخت هدر متحرک b4a
آموزش:
- بیسیک فور اندروید را اجرا کنید و یک پروژه ی جدید ایجاد کنید.
- سپس کتابخانه های زیر را تیک بزنید:
|
۱ ۲ ۳ ۴ |
javaObject StringUtils xCustomListView XUI |
برای استفاده از این آموزش بیسیکتان باید نسخه ۷ به بالا باشد.
- سپس کتابخانه ها را تعریف یا Initialize میکنیم.
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ |
Sub Globals Private CustomListView1 As CustomListView Private pnlTop As B4XView Private lblHeader As B4XView Private CLVHeader1 As CLVHeader Private ImageView1 As B4XView End Sub |
- سپس در بخش Activity Create دستورات زیر را مینویسیم:
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ |
Sub Activity_Create(FirstTime As Boolean) Activity.LoadLayout("۱") CLVHeader1.Initialize(Me, "CLVHeader1", pnlTop, CustomListView1) CLVHeader1.MaxHeaderHeight = ۱۵۰dip CLVHeader1.Resize(۱۰۰%x, ۱۰۰%y) CustomListView1.DefaultTextBackgroundColor = Colors.White For i = ۱ To ۱۰۰ CustomListView1.AddTextItem("Item #" & i, "") Next End Sub |
توضیحات کدهای بالا:
– در خط اول لیوت بارگذاری میشود.
– در خط دوم ماژولی که باید به برنامه اضافه شود راه اندازی میشود که پارامتر اول به اکتیویتی فعلی اشاره دارد؛ پارامتر دوم نام رویداد؛ پارامتر سوم پنلی که انیمیشن در آن اتفاق می افتد و پارامتر آخر، لیست ویو سفارشیمون.
– خط سوم حداکثر ارتفاع پنل انیمیشنیمون رو بهش اشاره داره.
– خط چهارم اندازه پنل.
– خط پنجم رنگ پس زمینه متن پنل.
– و در حلقه فور تعداد آیتم ها را مشخص میکنیم و درون حلقه آیتم ها را به لیست ویو اضافه میکنیم.
- سپس رویداد تغییر اسکرول را با دستور زیر مینویسیم:
|
۱ ۲ ۳ |
Sub CustomListView1_ScrollChanged (Offset As Int) CLVHeader1.ScrollChanged(Offset) End Sub |
- با تغییر اسکرول مقدار متغیر آفست که یک عدد صحیح است، تغییر میکند.
- و سپس ساب مربوط به ارتفاع هدر را مینویسیم.
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ |
Sub CLVHeader1_UpdateHeaderHeight (Height As Int, Fraction As Float) If Fraction = ۱ Then ImageView1.Height = Height End If lblHeader.SetLayoutAnimated(۰, ۰, ۰, pnlTop.Width, pnlTop.Height) lblHeader.TextSize = ۲۰ + ۲۰ * Fraction lblHeader.Color = xui.Color_ARGB(۲۵۵ * (۱ - Fraction), ۰, ۱۰۰, ۰) End Sub |
توضیحات کدهای بالا:
– در این خط هر بار که اسکرول میکنید، چون یک بخش از لیست جا به جا میشود، شرط اجرا میشود و ارتفاع تصویر هدر کم یا زیاد میشود.
– در خط دوم لیبل عنوان متن با توجه به ارتفاع و پهای پنل، حالت انیمیشنی به خود میگیرد.
– در خط سوم اندازه متن هدر تغییر میکند.
– و در خط چهارم رنگ مربوط به متن هدر تغییر میکند.
- این قابلیت هم در رویداد کلیک پنل مینویسیم تا اسکرول، به هر آیتمی که خواستید بروید:
|
۱ ۲ ۳ |
Sub pnlTop_Click CustomListView1.ScrollToItem(۰) End Sub |
البته این اختیاری هست و در صورت نیاز باید نوشته شود.
چنانچه مشکلی در رابطه با آموزش بالا داشتید در بخش پرسش و پاسخ سایت مشکل خود را مطرح کنید.
موفق باشید.
ارسال نظر
شما باید وارد شوید یا عضو شوید تا بتوانید نظر ارسال کنید