reza zarchi 0 ارسال شده در ۹ تیر ۱۳۹۴ گزارش اشتراک گذاری ارسال شده در ۹ تیر ۱۳۹۴ سلام. در این آموزش میخوام آموزش ساختن منوی کشویی را به شما نشان دهم. حتما شما هم در بیشتر برنامه ها دیدید که با کشیدن دست از حاشیه صفحه نمایش به داخل اپلیکیشن، یک منوی کشویی باز می شود که درون آن آیتم های مختلفی وجود دارند. شاید برایتان سوال پیش آمده باشد که چگونه می توان چنین چیزی را در برنامه خودمان داشته باشیم. با خواندن این آموزش و البته دانستن یک سری پیش نیاز های جزئی می توان این منو را در اپلیکیشن خود پیاده سازی کرد. قبل از این که شروع کنیم برای کسانی که به مسائل دیزاین و طراحی علاقه دارند، پیشنهاد میکنم که Navigation Drawer design guide را مطالعه کنند. برای شروع ابتدا به سراغ ساختن لی اوت اصلی می رویم: باید دقت داشته باشید که در اکتیویتی ای که میخواهید منوی کشویی داشته باشید، باید DrawerLayout به عنوان نمای اصلی شما و بالاتر از همه ی اشیا در صفحه تعریف شود. درون این شی دو چیز باید تعریف شود. اولی که بالاتر باید باشد، محلی برای نمایش محتوای صفحه است که می تواند یک FrameLayout یا LinearLayout یا هر چیز دیگری که میخواهید موارد دیگر درون آن قرار بگیرند باشد. مورد دوم هم یک لیست ویو است که برای آیتم های منوی کشویی می باشد. دقت شود که اگر میخواهید لیست ویو برای لی اوت های چپ به راست و راست به چپ به صورت خودکار در محل چپ برنامه و یا راست برنامه قرار گیرد، باید صفت android:layout_gravity را برابر با Start قرار دهید. این هم از کد تکمیل شده: <?xml version="1.0" encoding="utf-8"?> xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent"> android:layout_width="match_parent" android:layout_height="wrap_content"> android:layout_width="240dp" android:layout_height="match_parent" android:layout_gravity="start" android:choiceMode="singleChoice" android:divider="@android:color/transparent" android:dividerHeight="0dp" android:background="#fff"/> تعریف لیست منوی کشویی در کد جاوا: حالا باید در کد جاوا لیست خود را تعریف کرده و مقداردهی کنید. در صورتی که کار با لیست ها را نمیدانید، میتوانید از این لینک ها که در وبسایت آقای کمالان هستند کمک بگیرید: کار کردن با لیست ها (۱/۵) کار کردن با لیست ها (۲/۵) کار کردن با لیست ها (۳/۵) کار کردن با لیست ها (۴/۵) کار کردن با لیست ها (۵/۵) کد زیر نمونه ای برای انجام عملیات تعریف لیست و مقداردهی آن است: public class MainActivity extends Activity { private String[] mPlanetTitles={"page1","page2","setting","about","exit"}; private DrawerLayout mDrawerLayout; private ListView mDrawerList; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); mDrawerList = (ListView) findViewById(R.id.left_drawer); // تنظیم آداپتور روی لیست ویو mDrawerList.setAdapter(new ArrayAdapter(this, android.R.layout.simple_list_item_1, mPlanetTitles)); // تنظیم عملیات هر کدام از آیتم های لیست ویو در هنگام کلیک روی هرکدام از آنها mDrawerList.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) { switch (arg2) { case 0: drawerLayout.closeDrawers(); //Go to Page1 break; case 1: drawerLayout.closeDrawers(); //Go to Page2 break; case 2: drawerLayout.closeDrawers(); //Go to Setting break; case 3: drawerLayout.closeDrawers(); //Go to About break; case 4: drawerLayout.closeDrawers(); finish(); break; default: //default break; } } }); } تنظیم رفتارهای هنگام باز و بسته کردن منوی کشویی: کدهای زیر جهت مدیریت این که در هنگام باز و بسته شدن منوی کشویی چه اتفاقی بیفتد، استفاده می شوند. برای مثال وضعیت عنوان صفحه در actionBar و آیکون منوی کشویی و... public class MainActivity extends Activity { private DrawerLayout mDrawerLayout; private ActionBarDrawerToggle mDrawerToggle; ... public void onCreate(Bundle savedInstanceState) { ... mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); mDrawerToggle = new ActionBarDrawerToggle( this, /* اکتیویتی جاری */ mDrawerLayout, /* شی منوی کشویی */ R.drawable.ic_drawer, /* آیکون مربوط به دکمه ی باز کردن منوی کشویی */ R.string.drawer_open, /* "توضیحات باز شدن منوی کشویی */ R.string.drawer_close /* "توضیحات بسته شدن منوی کشویی*/ ) { // متد زیر هنگامی که کشو را میبندیم فراخوانی میشود public void onDrawerClosed(View view) { super.onDrawerClosed(view); getActionBar().setTitle(mTitle); } // متد زیر هنگامی که کشو را باز میکنیم فراخوانی میشود public void onDrawerOpened(View drawerView) { super.onDrawerOpened(drawerView); getActionBar().setTitle(mDrawerTitle); } }; // Set the drawer toggle as the DrawerListener mDrawerLayout.setDrawerListener(mDrawerToggle); getActionBar().setDisplayHomeAsUpEnabled(true); getActionBar().setHomeButtonEnabled(true); } @Override protected void onPostCreate(Bundle savedInstanceState) { super.onPostCreate(savedInstanceState); // Sync the toggle state after onRestoreInstanceState has occurred. mDrawerToggle.syncState(); } @Override public void onConfigurationChanged(Configuration newConfig) { super.onConfigurationChanged(newConfig); mDrawerToggle.onConfigurationChanged(newConfig); } @Override public boolean onOptionsItemSelected(MenuItem item) { // Pass the event to ActionBarDrawerToggle, if it returns // true, then it has handled the app icon touch event if (mDrawerToggle.onOptionsItemSelected(item)) { return true; } // Handle your other action bar items... return super.onOptionsItemSelected(item); } ... در پایان کد زیر هم جهت باز شدن منوی کشویی در هنگام فشردن کلید سخت افزاری منو استفاده می شود. این کلید در برخی موبایل ها که در پایین صفحه نمایش کلیدهای سخت افزاری دارند، وجود دارد. @Override public boolean onKeyDown(int keyCode, KeyEvent event) { if (keyCode==KeyEvent.KEYCODE_MENU){ if(!mDrawerLayout.isDrawerOpen(mDrawerList)){ mDrawerLayout.openDrawer(mDrawerList); }else{ mDrawerLayout.closeDrawers(); } } return super.onKeyDown(keyCode, event); این آموزش برگرفته از آموزش گوگل در آدرس زیر است: Creating a Navigation Drawer کد sample لینک بالا هم برای شما ضمیمه کردم و می توانید از آن استفاده کنید: NavigationDrawer.zip نقل قول لینک ارسال به اشتراک گذاری در سایت های دیگر
adelansari 0 ارسال شده در ۱۰ شهریور ۱۳۹۴ گزارش اشتراک گذاری ارسال شده در ۱۰ شهریور ۱۳۹۴ من قبل از شروع هرچی گشتم هنگام ساخت فایل xml ، دراور لایوت رو پیدا نکردم که xml از اون نوع بسازم چیکار کنم؟؟ نقل قول لینک ارسال به اشتراک گذاری در سایت های دیگر
adelansari 0 ارسال شده در ۱۱ شهریور ۱۳۹۴ گزارش اشتراک گذاری ارسال شده در ۱۱ شهریور ۱۳۹۴ اون مشکل حل شد حال میخوام بدونم اندازه لیست ویویی که قراره باز بشه رو از کجا باید تایین کنم؟؟ نقل قول لینک ارسال به اشتراک گذاری در سایت های دیگر
adelansari 0 ارسال شده در ۲۱ شهریور ۱۳۹۴ گزارش اشتراک گذاری ارسال شده در ۲۱ شهریور ۱۳۹۴ فونت آیتم های اسلاید منو رو از کجا باید عوض کرد؟؟؟؟ نقل قول لینک ارسال به اشتراک گذاری در سایت های دیگر
اعظم نوری 1 ارسال شده در ۲۱ شهریور ۱۳۹۴ گزارش اشتراک گذاری ارسال شده در ۲۱ شهریور ۱۳۹۴ تو این مثال نمی تونی فونت رو تغییر بدی مگر اینکه یه آداپتور سفارشی ایجاد کنی و آیتم ها رو سفارشی کنی. نقل قول لینک ارسال به اشتراک گذاری در سایت های دیگر
adelansari 0 ارسال شده در ۲۱ شهریور ۱۳۹۴ گزارش اشتراک گذاری ارسال شده در ۲۱ شهریور ۱۳۹۴ ممکنه آموزشش رو بدین؟؟ نقل قول لینک ارسال به اشتراک گذاری در سایت های دیگر
اعظم نوری 1 ارسال شده در ۲۱ شهریور ۱۳۹۴ گزارش اشتراک گذاری ارسال شده در ۲۱ شهریور ۱۳۹۴ تو نمونه کد بالا از لیست ویو ساده استفاده شده. اما شما برای رسیدن به منظور خودت باید از لیست ویو سفارشی استفاده کنی. آموزشش تو انجمن هست. اگه سرچ کنی پیدا می کنی. نقل قول لینک ارسال به اشتراک گذاری در سایت های دیگر
adelansari 0 ارسال شده در ۲۱ شهریور ۱۳۹۴ گزارش اشتراک گذاری ارسال شده در ۲۱ شهریور ۱۳۹۴ شرمنده لینکش رو پیدا نکردم اگه میشه لینکش رو بذارین نقل قول لینک ارسال به اشتراک گذاری در سایت های دیگر
اعظم نوری 1 ارسال شده در ۲۱ شهریور ۱۳۹۴ گزارش اشتراک گذاری ارسال شده در ۲۱ شهریور ۱۳۹۴ اینم لینکش: سفارشی سازی لیست ویو در ضمن بعد از سفارشی سازی لیست ویو و قرار دادن آیتم های لیست تو تکست ویو، تازه می تونی به تکست ویو مورد نظر فونت بدی. آموزش اونم تو این تاپیکه تنظیمات فونت نقل قول لینک ارسال به اشتراک گذاری در سایت های دیگر
reza zarchi 0 ارسال شده در ۲۸ اسفند ۱۳۹۴ مالک گزارش اشتراک گذاری ارسال شده در ۲۸ اسفند ۱۳۹۴ به عنوان بروزرسانی این مطلب لازمه اضافه کنم که به کمک کتابخانه دیزاین گوگل، کار ساختن منوی کشویی راحت تر شده و دیگه نیازی به ساختن آداپتور و کدهای مربوط به لیست ویو نیست... ابتدا کتابخانه design را به پروژه خودتون اضافه کنید. در اکتیویتی مورد نظر باید تگ DrawerLayout و درون آن NavigationView را اضافه کنید که مربوط به آیتم های درون منوی کشویی می باشند. کد زیر به عنوان مثال: [shcode=xml] xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> android:layout_width="match_parent" android:layout_height="match_parent"> android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" android:theme="@style/ThemeOverlay.AppCompat.Dark" /> android:id="@+id/navigation_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" app:headerLayout="@layout/drawer_header" app:menu="@menu/drawer"/> [/shcode] همونطور که می بینید، صفت app:menu="@menu/drawer" در تگ NavigationView نوشته شده است که آدرس منویی که درون آن آیتم های منوی کشویی را وارد کرده اید وجود دارند. به عنوان مثال فایل منو به شکل زیر می تواند باشد: (همانطور که می دانید فایل منو باید در مسیر res/menu ساخته شود.) [shcode=xml]<?xml version="1.0" encoding="utf-8"?> android:id="@+id/navigation_item_attachment" android:checked="true" android:icon="@drawable/ic_attachment" android:title="@string/nav_item_attachment" /> android:id="@+id/navigation_item_images" android:icon="@drawable/ic_image" android:title="@string/nav_item_images" /> android:id="@+id/navigation_item_location" android:icon="@drawable/ic_place" android:title="@string/nav_item_location" /> android:icon="@drawable/ic_emoticon" android:title="@string/nav_sub_menu_item01" /> android:icon="@drawable/ic_emoticon" android:title="@string/nav_sub_menu_item02" /> [/shcode] صفت app:headerLayout="@layout/drawer_header" درون تگ NavigationView به منظور دادن آدرس لی اوت قسمت بالایی منوی کشویی نوشته شده است که درون آن لی اوت به عنوان مثال به شکل زیر یک تکست ویو قرار داده ایم: (فایل لی اوت در همان مسیر لی اوت های دیگر ساخته می شود) [shcode=xml]<?xml version="1.0" encoding="utf-8"?> android:orientation="vertical" android:layout_width="match_parent" android:layout_height="150dp" android:background="?attr/colorPrimaryDark" android:padding="16dp" android:theme="@style/ThemeOverlay.AppCompat.Dark" android:gravity="bottom"> android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/drawer_header_text" android:textAppearance="@style/TextAppearance.AppCompat.Body1"/> [/shcode] پس از ساخت ظاهر پروژه به سراغ بخش کدنویسی می رویم که البته نسبت به روش قبلی حجم کمتری خواهد داشت. ابتدا یک شی DrawerLayout می سازیم. سپس آدرس منوی کشویی را برای آن تعیین می کنیم. یک شی NavigationView نیز می سازیم و آدرس NavigationView را نیز برای آن تعین میکنیم. سپس متدهایی که می خواهیم هنگام کلیک روی آیتم ها انجام شوند را در navigationView.setNavigationItemSelectedListener تعیین می کنیم. در نهایت کد جاوای پروژه برای منوی کشویی به صورت زیر می شود:[shcode=java] @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // ساخت و تعریف شی لی اوت منوی کشویی: DrawerLayout mDrawerLayout; mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); // ساخت و تعریف شی آیتم های منوی کشویی: NavigationView navigationView = (NavigationView) findViewById(R.id.navigation_view); navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(MenuItem menuItem) { menuItem.setChecked(true); //در کد زیر منوی کشویی بسته می شود mDrawerLayout.closeDrawers(); // در کد زیر عنوان آیتم انتخاب شده به صورت تست نمایش داده می شود. شما می توانید با دستور شرطی برای هر یک از آیتم ها کد مورد نظر خود را بنویسید Toast.makeText(MainActivity.this, menuItem.getTitle(), Toast.LENGTH_LONG).show(); return true; } }); } [/shcode] کد مربوط به تولبار مرتبط به این قسمت نمی شود اما به منظور تکمیل این پروژه کد تکمیل شده را به همراه کدهای مربوط به تولبار برای شما میذارم: [shcode=java]import android.os.Bundle; import android.support.design.widget.NavigationView; import android.support.v4.view.GravityCompat; import android.support.v4.widget.DrawerLayout; import android.support.v7.app.ActionBar; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import android.view.Menu; import android.view.MenuItem; import android.widget.Toast; public class MainActivity extends AppCompatActivity { DrawerLayout mDrawerLayout; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); ActionBar actionBar = getSupportActionBar(); actionBar.setHomeAsUpIndicator(R.drawable.ic_menu); actionBar.setDisplayHomeAsUpEnabled(true); mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); NavigationView navigationView = (NavigationView) findViewById(R.id.navigation_view); navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(MenuItem menuItem) { menuItem.setChecked(true); mDrawerLayout.closeDrawers(); Toast.makeText(MainActivity.this, menuItem.getTitle(), Toast.LENGTH_LONG).show(); return true; } }); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. int id = item.getItemId(); switch (id) { case android.R.id.home: mDrawerLayout.openDrawer(GravityCompat.START); return true; case R.id.action_search: return true; } return super.onOptionsItemSelected(item); } } [/shcode] منوی کشویی ساخته شده به شکل زیر است: منبع نقل قول لینک ارسال به اشتراک گذاری در سایت های دیگر
پست های پیشنهاد شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .