ورود / ثبت نام سبد خرید 0
در این پست آموزشی قصد داریم نحوه ی ساختن منو در اپلیکیشن های اندرویدی در محیط اندروید استودیو را خدمت شما آموزش دهیم .
این مقاله در حالت کلی به دو بخش زیر تقسیم میشود که هر بخش که مورد نیاز شما بود را میتوانید آموزش ببینید
در ابتدا به انواع منو ها در اپلیکیشن های اندرویدی می پردازیم که قابل پیاده سازی در محیط اندروید استودیو هستند .
خب بیاید شروع کنیم !
اندروید استودیو یک کامپوننت راحت و قابل انعطاف برای ساخت رابط کاربری فراهم میکند به نام menu که بسیاری از عملیات ها را در اپلیکیشن کنترل میکند .
منو مجموعه ای از گزینه ها (options) است که کاربر می تواند برای انجام یک عمل (action) گزینه ای را انتخاب کند .
کامپوننت menu در اندروید تجربه ی کاربری یکسانی در اکثر اپلیکیشن های اندرویدی ایجاد میکند .
با کلیک شدن روی هر گزینه از منو اتفاقاتی مثل اضافه کردن چیزی ، جستجو ، حذف کردن ، ویرایش ، بروزرسانی یا هر چیز مشابهی اتفاق میوفتد .
کامپوننت menu از sdk Android 3.0 یا API level 11 به اندروید اضافه گردیده است و میتوانید استفاده کنید .
بطور اساسی سه نوع منو در اندروید معرفی میگردد که در زیر لیست شده اند
در ادامه به توضیح مختصر درباره ی این منو میپردازیم و سپس بصورت کامل نحوه ی برنامه نویسی و پیاده سازی هر سه منو را آموزش میدهیم .
در این منو عملیات اصلی و گلوبال اپلیکیشن ایجاد میشود . این منو از روی toolbar یا appbar باز میگردد و معمولا عملیاتی مثل جستجو ، تنظیمات و حذف در آن بخش قرار میگیرد .
در تصویر زیر یک نمونه از Option Menu را مشاهده میکنید که در حالت باز شده قرار دارد .
این نوع منو زمانی نمایش داده میشود که کاربر روی یک عنصری عملیات long click انجام دهد . منظور از long click این است که مثلا یک آیتم لمس شود و به مدت سه ثانیه انگشت از روی آن برداشته نشود . در این صورت منویی باز میشود .
بیشتر کاربرد این نوع منو ها برای ListView ، RecyclerView و GridView است یا هر نوع لیست دیگری که ممکن است کاربر نیاز داشته باشد روی یکی از آیتم های آن مدیریتی را انجام دهد .
در تصویر زیر یک نمونه از Context Menu در اندروید را مشاهده میکنید
سومین نوع منو که اندروید فراهم میکند یک نوع منو راحت و قابل انعطاف به نام Popup menu است . این منو یک لیستی است که بصورت عمودی روی صفحه و تمام چیزهایی که پشتش قرار میگیرد می آید و گزینه هایی را نمایش میدهد که برنامه نویس تعبیه کرده است .
یک منوی Popup در اندروید هم میتواند در زیر گزینه ی والد خود یا روی آن باز شود . مثلا اگر روی یک دکمه ای کلیک شود و قرار باشد Popup منو باز شود هم میتواند پایین آن بصورت عمودی باز شود و هم میتواند بالای آن .
Popup menu از API نسخه ی 11 به اندروید اضافه شده است .
در تصویر زیر یک نمونه از منو Popup اندرویدی را مشاهده میکنید
خب تا اینجای کار ما به سه نوع menu در اپلیکیشن های اندرویدی آشنا شدیم . در ادامه به نحوه ی کدنویسی و پیاده سازی هر کدام در محیط اندروید استودیو خواهیم پرداخت .
برای ساختن Option Menu در اندروید استودیو ساده ترین روش ممکن را در زیر برای شما توضیح داده ایم . لطفا مرحله به مرحله و به همراه خواندن توضیحات بصورت کامل جلو بروید .
1 - یک پروژه جدید بسازید .
محیط اندروید استودیو را باز کنید و به منوی File ⇒ New Project بروید ، یک پروژه جدید بسازید و در بخش Template ها یک Empty Activity انتخاب کنید .
2 - کتابخانه ی مورد نیاز را اضافه کنید .
به فایل build.gradle مراجعه کنید و سپس کد زیر را اضافه کنید فایل گردل را ذخیره کنید.
نکته : ممکن است این آموزش را درآینده بخوانید و نسخه های جدیدی از کتابخانه های معرفی شده آمده باشد بهتر است از اخرین نسخه استفاده کنید .
implementation 'com.android.support:design:28.0.0
سپس گزینه ی Sync را که بصورت خودکار ظاهر شده است کلیک کنید و منتظر باشید تا کتابخانه نصب شود . (اتصال اینترنت باید برقرار باشد و به دلیل تحریم ایران آی پی شما نباید ایرانی باشد ) .
3 - یک TextView به activity_main.xml اضافه کنید .
شما میتوانید به راحتی یک TextView را به صفحه ی اصلی خود درگ کنید یا در قسمت XML آن کدهای زیر را اضافه کنید تا یک TextView ساخته شود .
<TextView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Android Options Menu" android:layout_centerInParent="true" android:textSize="18sp"/>
کد بالا را باید درون تگ اصلی اضافه کنید و در نهایت کد فایل res -> layout -> activity_main.xml شما باید مثل زیر باشد .
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Android Options Menu" android:layout_centerInParent="true" android:textSize="18sp"/> </RelativeLayout>
4 - یک فایل resource از نوع XML برای منو بسازید .
یک فایل جدید menu resource بسازید و نامش را options_menu.xml بگذارید
<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <item android:id="@+id/notification" android:title="@string/notification"/> <item android:id="@+id/help" android:title="@string/help"/> <item android:id="@+id/setting" android:title="@string/setting"/> <item android:id="@+id/logout" android:title="@string/logout"/> </menu>
5 - منو را Inflate بکنید .
برای انجام این کار شما باید به اکتیویتی اصلی یا فرگمنت که استفاده میکنید مراجعه کنید و متد onCreateOptionsMenu() را override کنید .
سپس کدهای متد override شده باید به شکل زیر باشد تا عمل Inflate انجام پذیرد .
@Override public boolean onCreateOptionsMenu(Menu menu) { MenuInflater menuInflater = getMenuInflater(); menuInflater.inflate(R.menu.options_menu,menu); return true; }
6 - کنترل کلیک آیتم های منو
زمانی که کاربر یکی از آیتم های منوی Option Menu را کلیک میکند سیستم متد onOptionsItemSelected() را صدا میزند .
متد onOptionsItemSelected() میتواند تمام کلیک های روی آیتم های منو را یکجا کنترل کند و کشف کند که کدام آیتم توسط کاربر کلیک شده است .
کدهای زیر را ببینید
@Override public boolean onOptionsItemSelected(MenuItem item) { // Handle item selection switch (item.getItemId()){ case R.id.notification : Toast.makeText(this,"Notification",Toast.LENGTH_SHORT).show(); break; case R.id.help : Toast.makeText(this,"Help",Toast.LENGTH_SHORT).show(); break; case R.id.setting : Toast.makeText(this,"Setting",Toast.LENGTH_SHORT).show(); break; case R.id.logout : Toast.makeText(this,"Logout",Toast.LENGTH_SHORT).show(); break; default: break; } return super.onOptionsItemSelected(item); }
7 - حالا فایل MainActivity.java را باز کنید و کدهای زیر را اضافه کنید .
package net.technxt.optionmenu; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.Menu; import android.view.MenuInflater; import android.view.MenuItem; import android.view.View; import android.widget.TextView; import android.widget.Toast; public class MainActivity extends AppCompatActivity { TextView text; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); text = (TextView)findViewById(R.id.text); } @Override public boolean onCreateOptionsMenu(Menu menu) { MenuInflater menuInflater = getMenuInflater(); menuInflater.inflate(R.menu.options_menu,menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle item click switch (item.getItemId()){ case R.id.notification : Toast.makeText(this,"Notification",Toast.LENGTH_SHORT).show(); break; case R.id.help : Toast.makeText(this,"Help",Toast.LENGTH_SHORT).show(); break; case R.id.setting : Toast.makeText(this,"Setting",Toast.LENGTH_SHORT).show(); break; case R.id.logout : Toast.makeText(this,"Logout",Toast.LENGTH_SHORT).show(); break; default: break; } return super.onOptionsItemSelected(item); } }
حالا از طریق محیط اندروید استودیو برنامه ای که نوشتید را روی امولاتور یا روی دستگاه واقعی اندروید اجرا کنید و نتیجه را ببینید .
تبریک میگوییم ! شما یک Option Menu در اندروید استودیو ساختید .
اندروید برای ساختن Context Menu دو راه پیشنهاد میدهد که در زیر آمده اند
که در این آموزش ما به بحث Floating Menu خواهیم پرداخت و در ادامه با مثال عملی نشان خواهیم داد چطور یک منو از نوع Floating Menu بسازید .
این منو زمانی کاربرد دارد که وقتی روی یک عنصر روی صفحه عمل long-click اتفاق بیوفتد نمایش داده میشود . منظور از long-click لمس کردن یک آیتم و نگه داشتن انگشت روی ان است که باعث میشود منویی باز شود . در اپلیکیشن های زیادی این مثال را دیده اید از جمله اپ Gmail و ...
در ادامه مثال عملی خواهیم آورد تا بتوانید در محیط اندروید استودیو یک منو از نوع Floating Menu بسازید .
در محیط اندروید استودیو یک پروژه جدید بسازید . این کار را میتوانید از طریق منو File ⇒ New Project انجام دهید و در هنگام ساختن پروژه ی جدید از بخش template ها گزینه ی Empty Activity را انتخاب کنید .
2 - یک Button جدید بسازید .
یک عدد Button در layout اصلی خود که نامش بصورت پیشفرض activity_main.xml است بسازید .
کد xml مربوط به Button باید به شکل زیر باشد
<Button android:id="@+id/btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="Context Menu"/>
محتویات فایل layout شما که در مسیر res -> layout -> activity_main.xml است نهایتا باید مثل کد زیر باشد
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <Button android:id="@+id/btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="Context Menu"/> </RelativeLayout>
3 - فایل resource منو مورد نیاز را بسازید .
یک فایل resource برای منو بسازید و نام آنرا options_menu.xml بگذارید .
4 - یک view برای context menu یا Floating menu تعیین کنید .
انتساب یک view به Floating menu یا context menu از طریق متد زیر قابل انجام است
registerForContextMenu(btn);
5 - منو را inflate کنید .
برای Inflate کردن منو باید از متد onCreateContextMenu() استفاده کنید که در اکتیویتی یا فرگمنت نوشته میشود .توجه کنید که این متد Override خواهد شد .
به کد زیر دقت کنید تا نحوه ی Inflate کردن را یاد بگیرید .
@Override public void onCreateContextMenu(ContextMenu menu, View v, ContextMenu.ContextMenuInfo menuInfo) { super.onCreateContextMenu(menu, v, menuInfo); MenuInflater menuInflater = getMenuInflater(); menuInflater.inflate(R.menu.options_menu,menu); }
6 - کنترل و مدیریت کلیک های روی منو
وقتی کاربر یک گزینه از بین منوی Floating Menu یا Context Menu انتخاب میکند سیستم بصورت خودکار متد onContextItemSelected() را صدا میزند . متد onContextItemSelected() بررسی میکند تا ببیند کاربر کدام آیتم را کلیک کرده است و آنرا بفهمد .
@Override public boolean onContextItemSelected(MenuItem item) { // Handle item selection switch (item.getItemId()){ case R.id.notification : Toast.makeText(this,"Notification", Toast.LENGTH_SHORT).show(); break; case R.id.help : Toast.makeText(this,"Help",Toast.LENGTH_SHORT).show(); break; case R.id.setting : Toast.makeText(this,"Setting",Toast.LENGTH_SHORT).show(); break; case R.id.logout : Toast.makeText(this,"Logout",Toast.LENGTH_SHORT).show(); break; default: break; } return super.onContextItemSelected(item); }
7 - حالا MainActivity.java را باز کنید و کدهای زیر را اضافه کنید .
package net.technxt.contextmenu; import android.content.Intent; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.ContextMenu; import android.view.MenuInflater; import android.view.MenuItem; import android.view.View; import android.widget.Button; import android.widget.Toast; public class MainActivity extends AppCompatActivity { Button btn; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); btn = (Button)findViewById(R.id.btn); registerForContextMenu(btn); } @Override public void onCreateContextMenu(ContextMenu menu, View v, ContextMenu.ContextMenuInfo menuInfo) { super.onCreateContextMenu(menu, v, menuInfo); MenuInflater menuInflater = getMenuInflater(); menuInflater.inflate(R.menu.options_menu,menu); } @Override public boolean onContextItemSelected(MenuItem item) { // Handle item click switch (item.getItemId()){ case R.id.notification : Toast.makeText(this,"Notification", Toast.LENGTH_SHORT).show(); break; case R.id.help : Toast.makeText(this,"Help",Toast.LENGTH_SHORT).show(); break; case R.id.setting : Toast.makeText(this,"Setting",Toast.LENGTH_SHORT).show(); break; case R.id.logout : Toast.makeText(this,"Logout",Toast.LENGTH_SHORT).show(); break; default: break; } return super.onContextItemSelected(item); } }
حالا اپلیکیشن را روی امولاتور اندرویدی یا دستگاه واقعی اندرویدی اجرا کنید .
تبریک ! شما یک Floating Menu ساختید که در دسته ی Context Menu قرار میگیرد .
منو Popup Menu در اندروید به یک view میچسبد و هنگام کلیک شدن روی آن بصورت پاپ آپ نمایش داده میشود که روی view های صفحه قرار میگیرد .
منو Popup Menu در اندروید زیر یک view باز میشود و اگر زیر view جا نباشد بصورت خودکار به سمت بالا باز میشود .
این منو در اندروید استودیو از API level 11 به بعد اضافه شده است .
بیایید بصورت پروژه ای یک منو بسازیم تا ببینیم که چگونه این منو را در اندروید استودیو باید بسازیم .
1 - یک پروژه ی جدید بسازید .
این کار را میتوانید با مراجعه به منوی File ⇒ New Project نیز انجام دهید و هنگام ساختن پروژه در بخش template ها گزینه ی Empty Activity را انتخاب کنید .
2 - یک Button در activity_main.xml بسازید .
کد xml افزودن button باید شکل زیر باشد .
<Button android:id="@+id/popupbtn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="Popup Menu"/>
و در نهایت محتویات کلی فایل res -> layout -> activity_main.xml شما باید شکل زیر باشد
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <Button android:id="@+id/popupbtn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="Popup Menu"/> </RelativeLayout>
3 - فایل XML مربوط به resourc منو را بسازید
کد زیر را برای resourc خود استفاده کنید
4 - متد setOnClickListener( ) را برای Button پیاده سازی کنید
popupbtn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //On clicking this button pop up menu will be appear popupMenu(v); } });
5 - یک instance برای Popup Menu درست کنید
طبق کد زیر شما میتوانید instance را انجام دهید
PopupMenu popup = new PopupMenu(this,v );
6 - منو مورد نظر را Inflate کنید .
طبق کد زیر منوی Popup را inflate کنید .
popup.getMenuInflater().inflate(R.menu.options_menu, popup.getMenu());
7 - کنترل کلیک شدن آیتم های منو
حالا نوبت این رسیده است متد setOnMenuItemClickListener() را برای Popup منو خودمان بسازیم تا بفهمیم کدام آیتم منو کلیک شده است
popup.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() { public boolean onMenuItemClick(MenuItem item) { switch (item.getItemId()){ case R.id.notification : Toast.makeText(MainActivity.this,"Notification", Toast.LENGTH_SHORT).show(); break; case R.id.help : Toast.makeText(MainActivity.this,"Help",Toast.LENGTH_SHORT).show(); break; case R.id.setting : Toast.makeText(MainActivity.this,"Setting",Toast.LENGTH_SHORT).show(); break; case R.id.logout : Toast.makeText(MainActivity.this,"Logout",Toast.LENGTH_SHORT).show(); break; default: break; } return false; } });
8 - متد PopupMenu.show() را صدا بزنید .
برای نمایش دادن popup از کد زیر استفاده کنید
popup.show();
9 - حالا MainActivity.java را باز کنید و کدهای زیر را به آن اضافه کنید .
package net.technxt.popupmenu; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.MenuItem; import android.view.View; import android.widget.Button; import android.widget.PopupMenu; import android.widget.Toast; public class MainActivity extends AppCompatActivity { Button popupbtn; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); popupbtn = (Button)findViewById(R.id.popupbtn); popupbtn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //clicking this button pop up menu will be appear popupMenu(v); } }); } private void popupMenu(View v) { //Creating the instance of PopupMenu PopupMenu popup = new PopupMenu(this,v ); // to inflate the menu resource (defined in XML) into the PopupMenu popup.getMenuInflater().inflate(R.menu.options_menu, popup.getMenu()); //popup with OnMenuItemClickListener popup.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() { public boolean onMenuItemClick(MenuItem item) { switch (item.getItemId()){ case R.id.notification : Toast.makeText(MainActivity.this,"Notification", Toast.LENGTH_SHORT).show(); break; case R.id.help : Toast.makeText(MainActivity.this,"Help",Toast.LENGTH_SHORT).show(); break; case R.id.setting : Toast.makeText(MainActivity.this,"Setting",Toast.LENGTH_SHORT).show(); break; case R.id.logout : Toast.makeText(MainActivity.this,"Logout",Toast.LENGTH_SHORT).show(); break; default: break; } return false; } }); popup.show();//show the popup menu } }
برنامه را روی امولاتور اندرویدی یا روی دستگاه واقعی اندروید اجرا کنید و از نتیجه لذت ببرید .
شما در این آموزش با مثال سه نوع از منو های اندروید در محیط android studio را یاد گرفتید . ساختن منو در اندروید استودیو کار سختی نیست با چندبار تکرار و تمرین مقاله ی بالا مسلط خواهید شد .
از آنجایی که این مقاله با زبان جاوا و در محیط اندروید استودیو است در صورت اینکه به این موارد مسلط نیستید دوره ی آموزش برنامه نویسی اندروید با جاوا در محیط اندروید استودیو را ببینید .
مقالات دیگر مرتبط با این مقاله ی آموزشی :
دوره های آموزشی مرتبط با این مقاله :