رفتن به مطلب
انجمن اندروید ایران | آموزش برنامه نویسی اندروید و موبایل
  • android.png.1fab383bc8500cd93127cebc65b1dcab.png

پست های پیشنهاد شده

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

قبل از این که شروع کنیم برای کسانی که به مسائل دیزاین و طراحی علاقه دارند، پیشنهاد میکنم که 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

لینک ارسال
به اشتراک گذاری در سایت های دیگر
  • 2 ماه بعد...

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


چیکار کنم؟؟

لینک ارسال
به اشتراک گذاری در سایت های دیگر

اون مشکل حل شد حال میخوام بدونم اندازه لیست ویویی که قراره باز بشه رو از کجا باید تایین کنم؟؟

لینک ارسال
به اشتراک گذاری در سایت های دیگر
  • 2 هفته بعد...

تو این مثال نمی تونی فونت رو تغییر بدی مگر اینکه یه آداپتور سفارشی ایجاد کنی و آیتم ها رو سفارشی کنی.

لینک ارسال
به اشتراک گذاری در سایت های دیگر

تو نمونه کد بالا از لیست ویو ساده استفاده شده. اما شما برای رسیدن به منظور خودت باید از لیست ویو سفارشی استفاده کنی. آموزشش تو انجمن هست. اگه سرچ کنی پیدا می کنی.

لینک ارسال
به اشتراک گذاری در سایت های دیگر

اینم لینکش: سفارشی سازی لیست ویو  

در ضمن بعد از سفارشی سازی لیست ویو و قرار دادن آیتم های لیست تو تکست ویو، تازه می تونی به تکست ویو مورد نظر فونت بدی. آموزش اونم تو این تاپیکه تنظیمات فونت

لینک ارسال
به اشتراک گذاری در سایت های دیگر
  • 6 ماه بعد...

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

ابتدا کتابخانه 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]

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

1438606769image_03.png

منبع

لینک ارسال
به اشتراک گذاری در سایت های دیگر

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...