آموزش متریال دیزاین Material Design Bottom navigation اندروید استودیو

آموزش متریال دیزاین Bottom navigaion

Bottom navigation ،توی این قسمت از آموزش متریال دیزاین از سایت خانه اندروید می خواهیم بپردازیم به باتوم نویگیشن که در بخش Navigation قرار می گیرد و شما می توانید در هرجایی که دوست داشتین قرار بدید ولی بهترین موقعیت در قسمت نویگیشن هست که به اختصار می خواهیم این قسمت رو خدمت شما عزیزان توی بخش متریال دیزاین ، آموزش بدهیم.

وقتی صحبت از متریال دیزاین می شود پای کتابخانه Design و appcompat به اندروید استودیو باز می شود و شما برای اینکه از متریال و View های آن استفاده کنید نیاز دارید که این کتابخانه رو به اندروید استودیو Bottom navigation اضافه کنید دقت کنید نیازی نیست که قند شکن رو ران کنید تا برای اضافه کردن کتابخانه های  فوق زیرا به صورت پیشفرض این مورد در قسمت Dependencies هست و کافی شما در بخش جستجو این مورد رو پیدا کنید و روی اوکی کلیک کنید تا در بخش گردل اضافه شود و یا به صورت مستقیم کتابخانه فوق را در بخش گردل وارد کنید.

و یا  از قسمت سورس پروژه خود به بخش Gradle Scripts و سپس فایل build.gradle Module: app را بازکنید.

اضافه کردن کتابخانه ها در بخش گردل :

compile 'com.android.support:design:25.3.0'

و هم چنین کتابخانه فوق که به صورت پیشفرض اضافه شده به اندروید استودیو قابلیت متریال دیزاین رو پشتیبانی می کند .

compile 'com.android.support:appcompat-v7:25.3.0'

دقت کنید با توجه به اس دی کا موجود در پوشه Sdk اندروید استودیو کتابخانه فوق برای شما اضافه می شود و بنده چون از آخرین اس دی کا موجود استفاده می کنم به خاطر همین اس دی کا های بالا رو با آخرین ورژن موجود اضافه شده به پروژه من ، و بنده دارم از این کتابخانه ها استفاده می کنم.و اگر ورژن اس دی کا شما کمتر از موارد بالاست باید آپدیت کنید.که فیلم آموزشی  زیر پیشنهاد می شود.

حتما ببنید : فیلم آموزشی Android SDK Manager اندروید استودیو

خوب بریم سراغ آموزش Bottom navigation :

اولین کاری که انجام می دهیم منو جدیدی را طبق تصویر زیر اضافه می کنیم و ایتم های زیر را برای آن می نویسیم دقت کنید بنده سه تا تصویر هم توی بخش drawable اضافه می کنم.تا تصویر را برای دکمه های Bottom navagation قرار بدم.طبق تصاویر زیر یک منو ایجاد می کنیم.

در این قسمت دایرکتوری روی menu کلیک می کنیم (انتخاب می کنیم) سپس روی اوکی کلیک می کنیم.

پس از اینکه روی اوکی کلیک کردن در بخش rec یا سورس ها یک بخشی باعنوان menu ایجاد می شود و روی آن کلیک راست می کنیم و سپس نامی دلخواه که در اینجا بنده نام menuitems را اختصاص می دهم.

در بخش menuitems کد زیر را برای طراحی یک منو کد نویسی می کنیم.توضیح این قسمت با اضافه کردن سورس کد فوق سه تا ایتم ایجاد میشود که در بخش drawable هم تصاویر فوق موجود هست.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="https://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/recents"
        android:title="Recents"
        android:icon="@drawable/ic_history_24dp"/>
    <item
        android:id="@+id/favorites"
        android:title="Favorites"
        android:icon="@drawable/ic_favorite_24dp"/>
    <item
        android:id="@+id/nearby"
        android:title="Nearby"
        android:icon="@drawable/ic_place_24dp"/>
</menu>

حال در بخش Activitymain و قسمت xml سورس کد مربوط به ایجاد کردن Bottom navigation را اضافه می کنیم.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.rss.homeandroidir.homeandroidmaterialdesign.MainActivity">
    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        tools:layout_editor_absoluteY="0dp"
        tools:layout_editor_absoluteX="8dp" />
</android.support.design.widget.CoordinatorLayout>

حال می خواهیم تصویر زیر را ایجاد کنیم با رنگ بندی و استایل 

حال اگر قرار هست تصویر بالا رو ایجاد کنیم نیاز داریم تا یک سری استایل هم تعریف کنیم.در بخش values روی style.xml کلیک کنید و سپس استایل زیر را پیست کنید.

<style name="BottomNavigation">
    <item name="android:background">@color/indigo</item>
    <item name="itemBackground">@drawable/navigation_bar_item_bg</item>
    <item name="itemIconTint">@color/navigation_bar_txt_color</item>
    <item name="itemTextColor">@color/navigation_bar_txt_color</item>
    <item name="paddingStart">@dimen/bottom_navigation_padding</item>
    <item name="paddingEnd">@dimen/bottom_navigation_padding</item>
</style>

حال چطور استایل فوق را اضافه کنیم کافی هست در بخش اکتیویت لایویت مین Activity main سورس کد زیر را اضافه کنیم به سورس کد قبل :

 style="@style/BottomNavigation"/>

 <android.support.design.widget.BottomNavigationView android:id="@+id/bottomNavigationView" android:layout_width="match_parent" android:layout_height="wrap_content" app:menu="@menu/bottom_navigation_menu" style="@style/BottomNavigation"/>

حال می خواهیم ریپلی و یا افکتی را هم اضافه کنیم. که نحوه اضافه کردن selector هم به این صورت هست که روی drawable کلیک راست و فایل جدیدی را ایجاد کنید.و سورس کد فوق را پیست کنید.دقت کنید رنگ دلخواه خودتان را در بخش color.xml بنویسید.

<selector xmlns:android="https://schemas.android.com/apk/res/android"> 
 <item android:state_checked="false" android:color="@color/pink"/>
 <item android:color="@android:color/white"/>
</selector> 

و همان طور که در بخش کامنت ها هم ذکر شده از api 21 به بعد پشتیبان می شود.

// res/drawable, to support devices lower then 21 API
<selector xmlns:android="https://schemas.android.com/apk/res/android"> 
 <item android:state_pressed="true" android:drawable="@android:color/white"/>
 <item android:drawable="@android:color/transparent"/>
</selector>

// res/drawable-v21 folder, for devices greater or equal then 21 API
<ripple xmlns:android="https://schemas.android.com/apk/res/android" 
 android:color="@android:color/white">
</ripple>

و جمله آخر اگر قراره روی هر کدام از ایتم ها کلیک کنیم به اکتیویتی دلخواه ما هدایت بشه نیاز داریم که در بخش mainactivity.java سورس کد زیر را بنویسیم.

BottomNavigationView bottomNavigationView; 
// ...
bottomNavigationView.setOnNavigationItemSelectedListener(new OnNavigationItemSelectedListener() { 
 @Override
 public boolean onNavigationItemSelected(@NonNull MenuItem item) {
 if (item.getItemId() == R.id.favorites) {
 // on favorites clicked
 return true;
 }
 return false;
 }
});

BottomNavigationView navigationView; 
// ...
navigationView= (BottomNavigationView) findViewById(R.id.bottomNavigationView); 
navigationView.getMenu().getItem(itemToSelect).setChecked(true);

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

حتما ببنید : فیلم آموزش استفاده از کتابخانه Bottom bar اندروید استودیو

موفق و پیروز باشید خانه اندروید.