آموزش Bottom Navigation View در اندروید

سلام دوستان گل در این بخش از آموزش اندروید به Bottom Navigation View می پردازیم در قدیم استفاده از Bottom Navigation View فقط توسط کتاب خانه های مختلف امکان پذیر بود اما گوگل پس از آپدیت کتاب خانه Desgin خود Bottom Navigation View را به آن افزود.
خب همانطور که گفته شد باید از کتاب خانه Design گوگل استفاده شود پس خط زیر را به Gradle خود افزوده و منتظر شوید تا Sync شود.
در صورتی که Sync انجام نشد (Failed شد ) این پست رو مطالعه کنید.

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

پس بخش کامل کد به شکل زیر شد ممکن است مقداری با کد شما فرق کند زیاد مهم نیست

apply plugin: 'com.android.application'
android {
    compileSdkVersion 25
    buildToolsVersion "24.0.1"
    defaultConfig {
        applicationId "com.inducesmile.androidbottomnavigationview"
        minSdkVersion 14
        targetSdkVersion 25
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}
dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:25.0.0'
    compile 'com.android.support:design:25.0.0'
    compile 'com.android.support:support-v4:25.0.0'
    testCompile 'junit:junit:4.12'

بخش فایل string.xml همانند زیر می شود فقط تعداری string اضافه کردیم نیاز به توضیح ندارد

<resources>
    <string name="app_name">Android Bottom Navigation View</string>
    <string name="menu">Menu</string>
    <string name="action_search">Search</string>
    <string name="action_cart">Cart</string>
    <string name="action_hot_deals">Hot deals</string>
    <!-- TODO: Remove or change this placeholder text -->
    <string name="hello_blank_fragment">Hello blank fragment</string>
    <string name="search_fragment">Search Fragment</string>
    <string name="cart_fragment">Cart Fragment</string>
    <string name="hot_deals_fragment">Hot Deals Fragment</string>
</resources>

فایل colors.xml همانند زیر می شود

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#56B900</color>
    <color name="colorPrimaryDark">#289C2B</color>
    <color name="colorAccent">#FF4081</color>
    <color name="colorPrimaryLight">#84FF19</color>
    <color name="colorWhite">#ffffff</color>
    <color name="colorBlack">#000000</color>
    <color name="colorDivider">#2FE897</color>
    <color name="colorBorder">#a7a4a4</color>
    <color name="colorExtra">#fffac1</color>
</resources>

فایل Activity_main.xml همانند زیر می شود.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.inducesmile.androidbottomnavigationview.MainActivity">
    <FrameLayout
        android:id="@+id/main_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottom_navigation"
        android:layout_alignParentTop="true">
    </FrameLayout>
    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:itemBackground="@color/colorPrimary"
        app:itemIconTint="@color/color_state_list"
        app:itemTextColor="@color/color_state_list"
        android:layout_alignParentBottom="true">
    </android.support.design.widget.BottomNavigationView>
</RelativeLayout>

و فایل جاوا Mainactivity.java همانند زیر می شود.

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.view.MenuItem;
public class MainActivity extends AppCompatActivity {
    private static final String TAG = MainActivity.class.getSimpleName();
    private BottomNavigationView bottomNavigation;
    private Fragment fragment;
    private FragmentManager fragmentManager;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        bottomNavigation = (BottomNavigationView)findViewById(R.id.bottom_navigation);
        bottomNavigation.inflateMenu(R.menu.bottom_menu);
        fragmentManager = getSupportFragmentManager();
        bottomNavigation.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                int id = item.getItemId();
                switch (id){
                    case R.id.action_search:
                        fragment = new SearchFragment();
                        break;
                    case R.id.action_cart:
                        fragment = new CartFragment();
                        break;
                    case R.id.action_hot_deals:
                        fragment = new DealsFragment();
                        break;
                }
                final FragmentTransaction transaction = fragmentManager.beginTransaction();
                transaction.replace(R.id.main_container, fragment).commit();
                return true;
            }
        });
    }
}

یک فایل xml ایجاده کرد و نام آن را BOTTOM_MENU.XML قرار دهید.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_search"
        android:title="@string/action_search"
        app:showAsAction="ifRoom"
        android:enabled="true"
        android:icon="@drawable/ic_action_menu">
    </item>
    <item
        android:id="@+id/action_cart"
        android:title="@string/action_cart"
        app:showAsAction="ifRoom"
        android:enabled="true"
        android:icon="@drawable/ic_action_menu">
    </item>
    <item
        android:id="@+id/action_hot_deals"
        android:title="@string/action_hot_deals"
        app:showAsAction="ifRoom"
        android:enabled="true"
        android:icon="@drawable/ic_action_menu">
    </item>
</menu>

حال زمان ایجاد Fragment برای صفحه های Bottom Navigation رسیده است یک فایل به نام DEALSFRAGMENT.JAVA ایجاد کرده و کد های زیر را در آن قرار دهید.(دقت کنید کدهای XMl و javd با هم گذاشته شده است.)

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class DealsFragment extends Fragment {
    public DealsFragment() {
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_deals, container, false);
    }
}
<FrameLayout 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"
    tools:context="com.inducesmile.androidbottomnavigationview.DealsFragment">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hot_deals_fragment"
        android:textStyle="bold"
        android:layout_gravity="center"/>
</FrameLayout>

CARTFRAGMENT.JAVA

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class CartFragment extends Fragment {
    public CartFragment() {
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_cart, container, false);
    }
}
<FrameLayout 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"
    tools:context="com.inducesmile.androidbottomnavigationview.CartFragment">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/cart_fragment"
        android:textStyle="bold"
        android:layout_gravity="center"/>
</FrameLayout>

SEARCHFRAGMENT.JAVA

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class SearchFragment extends Fragment {
    public SearchFragment() {
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_search, container, false);
        return view;
    }
}
<FrameLayout 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"
    tools:context="com.inducesmile.androidbottomnavigationview.SearchFragment">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textStyle="bold"
        android:text="@string/search_fragment" />
</FrameLayout>

در مورد کدهایی که باهم گذاشته شده است یک توضیح بدم شما باید یک فایل java و یک فایل xml برای هر کردام از کد ها درست کنید و بخش کد مورد نظر را در آن قرار دهید .
آموزش به پایان رسید انشاالله که مثل همیشه مفید بوده باشد.
 

مطالعه بیشتر