آموزش های این وب سایت به صورت رایگان در دسترس است. اطلاعات بیشتر
بروز خطا
   [message]
اشتراک در سوال
رای ها
[dataList]

ساخت NavigationDrawer (آموزش)

Hajhosseini  11 سال پیش  11 سال پیش
+22 0

با توجه به اینکه قبلا تاپیکی برای ساخت NavigationDrawer توسط محمد حسین عزیز ایجاد شده بوده، نباید این تاپیک ساخته میشد. ولی به دلیل درخواست دوستان و پیچیدگی جزئی در تاپیک های موجود من ساده ترین روش برای این کار رو اینجا درج میکنم.

مرحله اول: ایجاد Layout ها
ابتدا یک Layout به نام activity_main ایجاد کنید ( در این Layout میتونید صفحه اصلی برنامتون رو قرار بدید )
سپس یک Layout به نام navigation_drawer ایجاد کنید که در اون محتوای navigation_drawer رو قرار میدید.
بعد از اون یک Layout به نام main.xml بسازید، این Layout باید دربرگیرنده 2 Layout بالا باشد که میتونید کد مربوطه رو در زیر ببینید:

 <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

   <include layout="@layout/activity_main" />
   <include layout="@layout/navigation_drawer" />
</android.support.v4.widget.DrawerLayout>

 

برای اینکه عمل اسلاید کردن انجام بشه باید از DrawerLayout استفاده  کنیم و برای اضافه کردن اون باید حتما android.support.v4 رو به قسمت BuildPath اضافه کرده باشیم.(آموزش این کار در ویدیو های استاد، و در انجمن وجود دارد)
پس از این میتونیم به navigation_drawer.xml بگیم که از کدوم سمت باید باز بشه، برای این کار در کد navigation_drawer  این قسمت رو اضافه کنید:

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="right"              <====== این قسمت
    android:background="#ffffff"
    android:gravity="center" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="NavigationDrawer" />

</RelativeLayout>

حالا در کلاس جاوایی که داریم (MainActivity) حتما باید مقدار  

 setContentView(R.layout.activity_main);

رو به

  setContentView(R.layout.main);

تغییر بدیم.

با توجه به کاهایی که انجام دادیم، NavigationDrawer ما آمادست. برای اینکه NavigationDrawer با زدن کلید منو باز بشه هم میتونیم از کد زیر استفاده کنیم:

 @Override
    public boolean onKeyDown(int keycode, KeyEvent e) {
        switch (keycode) {
            case KeyEvent.KEYCODE_MENU:
                DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
                if (drawer.isDrawerOpen(Gravity.RIGHT))
                    drawer.closeDrawer(Gravity.RIGHT);
                else
                    drawer.openDrawer(Gravity.RIGHT);
                return true;
        }
        return super.onKeyDown(keycode, e);
    }
+1 0
لینک (11 سال پیش)
0 0
خیلی ممنون (11 سال پیش)
+1 0
حسینی عزیز بسیار ممنون بابت آموزش.. واقعا خیلی خیلی ساده انجام شد. اما کاش میشد کلید Drawer را هم میشد با روش خیلی ساده گذاشت. اینو میدونم که باید از متد syncState() در ActionBarDrawerToggle استفاده کرد که متاسفانه به راحتی نمیشه انجامش داد. ولی اگه راه حل ساده ای مثل مثال خودتون پیدا کردید حتما اضافه بفرمائید. تشکر فراوان/ (11 سال پیش)
+1 0
ببخشید دوستان.همزمان میشه از این navigation bar های دست ساز در کنار اکشن بار شرلوک استفاده کرد؟مشکلی پیش نمیاد؟منظورم از لحاظ کتابخانس چون انگار این داره از v4 استفاده میکنه و اونم که خودمختار یه کتابخانه جدا داره.ممنون. (11 سال پیش)
0 0
حاج حسینی عزیز ممنون از آموزش هاتون من به راحتی تو پروژم استفاده کردم اما مشکلم اینه دراور با انگشت باز میشه اما مثل پروژه شما نمیشه با درگ کردن اونو بست فقط میشه روش تاچ کرد تا بسته بشه . (11 سال پیش)
0 0
سلام مرسی از آموزشت فقط یک سوال اینکه چه مقدار بیاد داخل چطوری تنظیم میشه الآن همینجوری حدودا 90درصد صفحه میاد تو میخوام کمش کنم (11 سال پیش)
0 0
سلام، امیرمحمد جان میتونید با setMargin یا روش های دیگه که در انجمن آموزش داده شده میزان باز شدن navigationDrawer رو مشخص کنید.(توی انجمن به طور کامل آموزش داده شده) (11 سال پیش)
 برای این سوال 5 پاسخ وجود دارد. مشاهده پاسخ صحیح
پاسخ به سوال 
Hajhosseini  11 سال پیش
+4 0

 پاسخ صحیح

مهدی جان از کلید Drawer نمیدونم منظورتون چیه ولی برای باز و بسته کردن و Instance ساختن کافیه یک DrawerLayout بسازید و بعد findViewById کنید:

 DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
 drawer.openDrawer(Gravity.RIGHT);

این کد رو شما هرجایی که استفاده کنید، NavigationDrawer باز میشه.

Delina جان با اکشن بار کاملا سازگاره، ولی اگر مثل من از اکشن بار گوگل استفاده نکنید و اکشن بار شخصی خودتون رو داشته باشید باید یک تغییرات کوچکی در Layout ها بدید.

0 0
ممنون آقای حاج حسینی خیلی مفید بود.فقط اگه میشه یه آموزشم برای استفاده navigationmenu واسه همه ی اکتیویتی ها بزارین.من تو stackoverflow گشتم ولی چیز خاصی دستگیرم نشد.ممنون میشم. (11 سال پیش)
0 0
خواهش Delina جان،اگر منظورتون باز کردن drawer در اکتیویتی های دیگره: راه های زیادی داره .ساده ترین راهش اینه که توی همه ی اکتیویتی ها این 2 خط رو بنویسید، راه یکم پیچیده تر اینه که یک متد برای باز و بسته کردن drawer بنویسید و در اکتیویتی بعدی اون متد رو کال کنید.(ترجیحا به جای متد از کلاس استفاده بشه بهتره)، راه سختش هم اینه که یک ماژول بنویسید که همه ی کارهای مربوط به drawer رو انجام بده. اگر نه که من منظورتون رو از navigationmenu متوجه نشدم. (11 سال پیش)
0 0
بله آقای حسینی.منظورم همینه ولی خب راه اول که گفتین معقولتره ولی من حدود 100تا اکتیویتی دارم که خب خیلی کار میبره.میشه از طریق activityEnhanced توضیح بدید.منظورم اینه که تو activityEnhanced تنظیمات منوی بغل اعمال کنم بعد همه رو از اون اکستندز کنم. (11 سال پیش)
0 0
خوب همین کاری که بالا گفتم رو باید در اکتیویتی enhance انجام بدید، یعنی یک کلیک لیستنر برای دکمه ای که در اکشن بار هست تعریف میکنید و میگید drawer رو باز و بسته کنه. کلا استفاده از 100 اکتیویتی کار اشتباهیه، شما باید یک لیست از فرگمنت ها داشته باشید و از اونها به جای اکتیویتی هاتون استفاده کنید (11 سال پیش)
0 0
راهی که من در نظر دوم گفتم برای آیتم های درون drawer بود، که باید در تمام اکتیویتی ها دونه دونه ست بشه، ولی این کار برای شما اصلا جواب نمیده، باید navigation drawer رو هم فرگمنت بسازید و یکبار تمام آیتم ها رو در اون فرگمنت ست کنید. اگر از فرگمنت استفاده نمیکنید یا اکتیویتی enhance رو اکستندز از یک کلاس navigation drawer کنید و در اون کارها رو انجام بدید یا اکتیویتی اصلی تون رو که توش فرگمنت ها باز میشه از یک کلاس navigation drawer ایمپلمنت کنید و در اکتیویتی متدی که در کلاس navigation drawer تغییرات رو انجام میده کال کنید. یکم پیچیده شد، باید زمان زیادی برای این پروژه بذارید، ولی وقتی همه ی این کارها رو یاد بگیرید خیلی ساده میشن (11 سال پیش)
0 0
خیلی خیلی ممنون. بهترین راه حل همون fragment هس که همونطور که تو stackoverflow هم همین راه دیدم ولی مشکل اینجاس که من به عنوان یه تازه کار تابحال از fragment استفاده نکردم و راه استفاده ازش رو نمیدونم.در کل زیادی مزاحمتون شدم و نمیخوام بگم که مثلا fragment توضیح بدین ولی اگه لینکی که استفاده از fragment رو آموزش بده داشتین ممنون میشم بهم بگین.بازم عذر میخوام. (11 سال پیش)
0 0
این هفته چند پروژه سنگین دارم که باید حتی اضافه بمونم شرکت و کار کنم.احتمال زیاد شنبه بتونم براتون یک آموزش تهیه کنم، ولی قول نمیدم. در مورد لینک آموزشی هم باید سرچ کنید، لینک خاصی سراغ ندارم. (11 سال پیش)
پاسخ به سوال 
محمد نمازی  11 سال پیش
+2 0

سلام،

آقای  حسینی خیلی ازتون ممنونم که این تاپیک رو ایجاد کردید، مشکلم براحتی حل شد .

اگر بشه در این تاپیک در مورد طراحی و زیباسازی navigation drawer هم صحبت کرد، بنظرم تاپیک پر طرفداری خواهد شد .

بازم ازتون ممنونم

0 0
دوست عزیز فامیلی من حاج حسینی هست و شما میتونید حسینی صدام کنید ;) خیلی خوشحالم که مشکلتون حل شده و کم کم دارم ذره ای از دینی که به استاد دارم رو جبران میکنم. زیباسازی، بسته به برنامه هر شخص میتونه کاملا متفاوت باشه. تخصص من برنامه نویسی و تحلیل هست، دیزاین رو دیزاینر انجام میده. (11 سال پیش)
+1 0
بله، درست می فرمایید، اشتباه از من بود، راستش منظورم تمام دوستان انجمن بود، اینطوری مشکلات بقیه هم حل خواهد شد . ممنون :) (11 سال پیش)
پاسخ به سوال 
محمد نمازی  11 سال پیش
+2 0

دوستان توسعه دهنده چطوری میشه چنین Navigation Drawer شبیه به این طراحی کرد ؟

پاسخ به سوال 
Hajhosseini  11 سال پیش
+3 0

کار خیلی ساده ایه محمد جان
تعیین ساز NavigationDrawer : 
میتونید از این لینک  استفاده کنید، خیلی ساده ت.
خط بالا: 

در صورتی که از اکشن بار استفاده کنید که باید طبق آموزش های اکشن بار (Shadow) رو تغییر بدید.
در صورتی که از اکشن بار خودتون استفاده میکنید هم میتونید یک LinearLayot زیر اکشن بار بگذارید و بهش رنگ بدید.
آیتم های داخل NavigationDrawer : 
راه ساده(اصلا پیشنهاد نمیشه): میشه تمام آیتم هارو دانه دانه در Layout مورد نظرتون که به عنوان navigation_drawer استفاده کردید اضافه کنید.
راه معمولی: میتونید یک LinearLayout در بالای یک لیست ویو اضافه کنید و قسمت بالا رو بسازید و در زیر اون یک لیست ویو داشته باشید که آداپتر مخصوص خودش رو (آیتم ها) داشته باشه.
راه مناسب: فقط یک لیست ویو داشته باشید، قسمت بالا رو به عنوان Header در لیست ویو تنظیم کنید و قسمت پایین رو به عنوان آیتم ها در نظر بگیرید
راه حرفه ای: یک آداپتر داینامیک بنویسید که Type پذیر باشد، یعنی شما هر نوع تایپی که بهش بدید رو بسازه. کار خیلی سختی نیست ولی یکم زمان میبره. قابلیت ها: 1: شما در تمام برنامه هاتون میتونید ازش استفاده کنید 2: مانند گوگل میتونید هر آیتم لیست ویو رو به شکل دلخواهتون استفاده کنید 3: میتونید این Library رو به یک Madule تبدیل کنید و بعد در تمام پروژه هاتون ازش استفاده کنید و بسیاری قابلیت های دیگر.

پاسخ به سوال 
sh.khaksar  11 سال پیش
0 0

اقا مرسی، فقط من یه مشکلی داره، این که وقتی نویگیشن دراور باز هست، و توی صفحه اصلی دکمه ای وجود داره که زیر نویگیشن دراور قرار میگیره، بعد از تپ کردن رو دکمه (یعنی در حالتی که نویگیشن بازه، و دکمه زیرش قرار گرفته) ، عمل میکنه. در صورتی که باید وقتی نویگیشن باز باشه، دیگه به صفحه زیرین واکنشی نشون نده.

0 0
زمانی که متد onClickListener رو برای بالاترین view تون تعریف کنید دیگه این مشکل پیش نمیاد.به اولین LinearLayout آیدی اختصاص بدید و در onCreate در activityEnhance متد onClickListener رو براش بنویسید. لازم نیست کاری در متدتون انجام بدید. (11 سال پیش)
+2 0
مرسی، توی xml قابلیت clickable رو true گذاشتم درست شد. (11 سال پیش)
0 0
آقا این قسمت ثبت نام این عکسی که گذاشتید رو اگه لینک توضیح واسه ثبت نام دارید که راهنمایی کنه رو لطفا بزارید.ممنون. (11 سال پیش)

پاسخگویی و مشاهده پاسخ های این سوال تنها برای اعضای ویژه سایت امکان پذیر است .
چنانچه تمایل دارید به همه بخش ها دسترسی داشته باشید میتوانید از این بخش لایسنس این آموزش را خریداری نمایید .