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

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

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

آموزش ساخت منو اسلایدی با کتابخانه sliding menu wrapper

در این بخش با کتابخانه sliding menu wrapper آشنا شده و یک منوی اسلایدی را می سازیم. ابتدا کتابخانه را از لینک زیر دانلوده نموده و سپس کتابخانه مورد نظر را تیک زده و به کتابخانه های بیسیک فور اندروید خودتون اضافه کنید.

دانلود کتابخانه sliding menu wrapper

حال یک متغیر از نوع sliding menu تعریف می کنیم.

Dim navi As SlidingMenu

سپس در اکتیویتی پس از لود کردن لایوت، کدهای زیر را اضافه می کنیم.

navi.Initialize("navi")
	navi.BehindOffset=30%x
	navi.Mode=navi.RIGHT
	navi.Menu.Color=Colors.LightGray

در خط اول ، منوی اسلایدی را initialize می کنیم.
در خط دوم میزانی که می خواهیم منو هنگام بازشدن افست داشته باشد را تعیین می کنیم.(به عنوان مثال اکنون که ۳۰% انتخاب شده است، منو هنگام بازشدن تا هفتاد درصد عرض صفحه را می پوشاند).
خط سوم مشخص می کند که منو از چپ باز شود و یا راست.
و در خط چهارم رنگ پس زمینه منو را انتخاب کرده ایم.

حال یک لیبل در قسمت بالای صفحه اضافه می کنیم تا با کلیک کردن بر روی آن بتوانیم منو را باز و بسته کنیم.

lblmenu.Initialize("lblmenu")
	Activity.AddView(lblmenu,80%x,0%y,19%x,10%y)
	lblmenu.Typeface=Typeface.MATERIALICONS
	lblmenu.Text=Chr(0xE5D2)
	lblmenu.Color=Colors.White
	lblmenu.Gravity=Gravity.CENTER
	lblmenu.TextSize=30
	lblmenu.TextColor=Colors.Black

کدهای بالا مربوط به اضافه کردن لیبل و تنظمیات مربوط به آن هست که نکته خاصی ندارد. فقط برای متن لیبل از آیکون menu فونت متریال آیکون استفاده شده که برای دسترسی به کد آن کافی است در محیط b4a راست کلیک کرده و گزینه icon picker را انتخاب کنید تا در پنجره بازشده آیکون مورد نظر را پیدا که پس از کلیک، کد آیکون کپی شده و آن را مقابل label.text ، قرار می دهید. حال در قسمت ساب مربوط به کلیک بر روی لیبل کدهای زیر را اضافه می کنیم:

Sub lblmenu_click
	If navi.Visible=False Then
		navi.ShowMenu
	End If
	If navi.Visible=True Then
		navi.HideMenus
	End If
End Sub

این کد می گوید در صورتی که منو بسته بود ، با کلیک بر روی لیبل منو باز شود و در صورتی که باز بود، بسته گردد. حال می رسیم به اضافه کردن محتویات به داخل منو. شما هر چیزی اعم از باتون، لیبل، لیست ویو ، ایمیج ویو و … را می توانید با استفاده از متد navi.menu.addview به محتویات منوی خود اضافه کنید. اما راه حل استانداردتر این است که همه مواردی را که می خواهید به یک پنل اضافه کرده و سپس پنل را به منوی کشویی خود اضافه نمایید.مثلا در کد زیر ما یک باتن ، یک لیبل و یک ایمیج ویو به یک پنل اضافه کرده و سپس پنل را به منو اضافه کرده ایم.

pnl1.Initialize("")
	btn1.Initialize("btn1")
	lbl1.Initialize("")
	img1.Initialize("")
	pnl1.AddView(img1,0%x,0%y,70%x,30%y)
	img1.Bitmap=LoadBitmap(File.DirAssets,"flower.jpg")
	img1.Gravity=Gravity.FILL
	pnl1.AddView(btn1,0%x,30%y,70%x,14%y)
	btn1.Text="نظردهی"
	btn1.TextSize=30
	btn1.Gravity=Gravity.CENTER
	btn1.Color=Colors.Green
	btn1.TextColor=Colors.Black
	pnl1.AddView(lbl1,0%x,44%y,70%x,15%y)
	lbl1.Text="شما می توانید هر محتوایی در این قسمت قرار دهید"
	lbl1.TextColor=Colors.Black
	lbl1.Color=Colors.red
	lbl1.TextSize=30
	navi.Menu.AddView(pnl1,0%x,0%y,70%x,100%y)

کدهای بالا مربوط به تنظیماتی مثل رنگ و اندازه سایز و … ویوها برای بهتر مشخص شدن آن ها در مثال است و نکته خاصی ندارد. فقط نکته ای که به آن باید توجه کنید این است که چون عرض منوی ما روی هفتاد درصد تنظیم شده است، لذا عرض ویوهای اضافه شده به پنل و همچنین عرض پنل اضافه شده به منو حداکثر ۷۰% می تواند باشد.

مساله ای که درمورد این منو وجود دارد و شاید از دید بعضی ها یک اشکال باشد، این است که با باز شدن منو محتویات صفحه اکتیویتی به سمت راست یا چپ شیفت می خورد.این مشکل در آموزش بعدی مان وجود ندارد.

آموزش ساخت منو اسلایدی با کتابخانه ahnavigation drawer

ابتدا کتابخانه ahnavigation drawer را از زیر دانلود نموده و در قسمت کتابخانه های بیسیک فور اندروید وارد می کنیم

دانلود کتابخانه ahnavigation drawer

یک متغیر از نوع ahnavigationdrawer تعریف می نماییم.

Dim navi As AHNavigationDrawer

سپس در قسمت اکتیویتی کریت پس از لود کردن لایوت ، کد زیر را اضافه می کنیم.

Sub Activity_Create(FirstTime As Boolean)
	Activity.LoadLayout("1")
	navi.Initialize2("navi",Activity,70%x,navi.GRAVITY_RIGHT)

این کد مربوط به initialize کردن منو می باشد و چهار پارامتر می گیرد. پارامتر اول همان event name متغیر است. پارامتر دوم مشخص کننده قسمتی است که منو در آن قرار می گیرد که در اینجا اکتیویتی انتخاب شده است. پارامتر سوم عرض منو در هنگام بازشدن و پارامتر چهارم مشخص کننده از چپ یا راست باز شدن منو است. این متغیر دو متد دارد.یکی به نام navi.navigationpanel.addview که برای اضافه کردن محتویات به داخل خود منو استفاده می شود و دیگری به نام navi.contentpanel.addview که برای افزودن محتوا به صفحه ای که منو قرار است در آن باز شود ،(همان اکتیویتی) مورد استفاده قرار می گیرد.

ما دو پانل به اسامی pnlcontent و pnlnavi برای اضافه کردن این محتویات به برنامه اضافه می کنیم.اول بریم سراغ pnl content. در این قسمت هر چیزی می توانید قرار دهید. ما به عنوان مثال یک لیبل کوچک به اسم lblmenu در گوشه بالای صفحه برای باز کردن منو و یک لیبل بزرگ به اسم lblcontent اضافه کرده ایم.کدهای مربوط به این قسمت در زیر آمده اند.

pnlcontent.Initialize("")
lblcontent.Initialize("")
lblmenu.Initialize("lblmenu")
pnlcontent.Color=Colors.Blue
pnlcontent.AddView(lblmenu,85%x,0%y,15%x,10%y)
lblmenu.Typeface=Typeface.MATERIALICONS
	lblmenu.Text=Chr(0xE5D2)
	lblmenu.TextSize=30
	lblmenu.TextColor=Colors.Black
	lblmenu.Gravity=Gravity.RIGHT
	pnlcontent.AddView(lblcontent,0%x,10%y,100%x,90%y)
	lblcontent.Text="این قسمت مربوط به صفحه اصلی و اکتیویتی برنامه است"
	lblcontent.TextSize=20

کدی که مربوط به باز شدن منو با کلیک بر روی لیبل است، در زیر آمده است:

Sub lblmenu_click
	navi.OpenDrawer2(navi.GRAVITY_RIGHT)
End Sub

حال می رویم سراغ pnlnavi. در این جا هم دست شما باز هست و هر چیزی را می توانید به پانل اضافه کنید.به عنوان مثال ما در این منو سه باتون به صورت ّباتون آرایه ای اضافه کرده ایم.(اگر با باتون آرایه ای آشنایی ندارید، آموزش این جا رامشاهده کنید.) کدهای این قسمت در زیر آمده اند.

pnlnavi.Initialize("")
	For i=0 To 2
		btnnavi(i).Initialize("btn"&i)
		pnlnavi.AddView(btnnavi(i),0%x,i*15%y,70%x,14%y)
		btnnavi(i).TextSize=20
		btnnavi(i).Gravity=Gravity.CENTER
		btnnavi(i).Color=Colors.White
		btnnavi(i).Text="باتون شماره "&i
		btnnavi(i).TextColor=Colors.Black
	Next

و حالا این دو پانل را به منویمان اضافه می کنیم.

navi.ContentPanel.AddView(pnlcontent,0%x,0%y,100%x,100%y)
	navi.NavigationPanel.AddView(pnlnavi,0%x,0%y,70%x,100%y)
	navi.NavigationPanel.Color=Colors.Red

نکته قابل عرض این است که عرض پنل منوی کشویی و همچنین عرض ویوهای اضافه شده به این پنل ، حداکثر ۷۰% می توان باشد ، چرا که عرض منوی اسلایدی روی ۷۰% تنظیم شده است. در ضمن تنظمیات مربوط به سایز متن، رنگ ویوها ، رنگ پس زمینه و … فقط برای آسان تر پیدا کردن موارد آموزش داده شده انجام شده است و فاقد استاندارد لازم هستند. امیداوریم که این مطلب مورد توجه دوستان قرار گرفته باشد…

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

آموزش بیسیک فور اندروید – دانلود تمامی ابزارهای مورد نیاز برنامه نویسی B4A

آموزش بیسیک فور اندروید – آموزش گام به گام نصب و راه اندازی JDK

آموزش کامل نصب Android SDK

آموزش کامل نصب بیسیک فور اندروید+دانلود نرم افزار Basic4Android

آموزش نصب و کار با شبیه ساز اندروید NOX

آموزش کامل اجرا مستقیم برنامه روی گوشی با B4A Bridge

آموزش بیسیک فور اندروید – معرفی Activity و Layout + تغییر تم محیط بیسیک فور اندروید

آموزش و کاربرد دستور Try و Catch در بیسیک فور اندروید

آموزش حذف انیمیشن پیشفرض لایوت ها در بیسیک فور اندروید

آموزش استفاده از اینتنت های کافه بازار در بیسیک فور اندروید

آموزش کار با فونت ها در بیسیک فور اندروید

آموزش کار با پروگرس بار و سفارشی سازی آن در بیسیک فور اندروید

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

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

آموزش کار با تایمر در بیسیک فور اندروید