کتابخانه BottomNavigationView در داخل کتابخانه deisgn از ورژن 25 به بالاتر وجود دارد

خروجی :

 

داکیومنت گوگل :

https://developer.android.com/reference/android/support/design/widget/BottomNavigationView.html

 

برای پیاده سازی استفاده از BottomNavigationView  میابیستی مراحل زیر را بطور کامل انجام دهید :

 

1- ابتدا Dependencyها را در فایل app->build.gradle وارد نمایید

compile 'com.android.support:appcompat-v7:25.1.0'
compile 'com.android.support:design:25.1.0'
compile 'com.android.support:support-v4:25.1.0'

2- فرگمنت ها :

همانطور که مطلع هستید برای نمایش تب های هر کدام از گزینه های BottomNavigationView   میبایستی فرگمنت های مربوطه را طراحی کرد. در این مثال فرض میگیریم 3 تب داریم پس باید 3 فرگمنت ایجاد کنیم.

Fragment 1:

fragment_item_one.xml

<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"
                tools:context="com.truiton.bottomnavigation.ItemOneFragment">
 
    <ImageView
        android:id="@+id/truiton_image"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_centerInParent="true"
        android:src="@mipmap/truiton"/>
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/truiton_image"
        android:layout_centerHorizontal="true"
        android:text="Fragment 1"
        android:textSize="30sp"/>
 
</RelativeLayout>

 

 
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
 
public class ItemOneFragment extends Fragment {
    public static ItemOneFragment newInstance() {
        ItemOneFragment fragment = new ItemOneFragment();
        return fragment;
    }
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }
 
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_item_one, container, false);
    }
}

Fragment 2:

fragment_item_two.xml

<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"
                tools:context="com.truiton.bottomnavigation.ItemTwoFragment">
 
    <ImageView
        android:id="@+id/truiton_image"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_centerInParent="true"
        android:src="@mipmap/truiton"/>
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/truiton_image"
        android:layout_centerHorizontal="true"
        android:text="Fragment 2"
        android:textSize="30sp"/>
 
</RelativeLayout>

 

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
 
public class ItemTwoFragment extends Fragment {
    public static ItemTwoFragment newInstance() {
        ItemTwoFragment fragment = new ItemTwoFragment();
        return fragment;
    }
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }
 
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_item_two, container, false);
    }
}

Fragment 3:

fragment_item_three.xml

<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"
                tools:context="com.truiton.bottomnavigation.ItemThreeFragment">
 
    <ImageView
        android:id="@+id/truiton_image"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_centerInParent="true"
        android:src="@mipmap/truiton"/>
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/truiton_image"
        android:layout_centerHorizontal="true"
        android:text="Fragment 3"
        android:textSize="30sp"/>
 
</RelativeLayout>

 

 
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
 
public class ItemThreeFragment extends Fragment {
    public static ItemThreeFragment newInstance() {
        ItemThreeFragment fragment = new ItemThreeFragment();
        return fragment;
    }
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }
 
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_item_three, container, false);
    }
}

 

3- منو ها:

در این مرحله میبایستی منوها را ایجاد نمایید از مسیر res->menu

bottom_navigation_items.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/action_item1"
        android:icon="@drawable/ic_account_box_black_24dp"
        android:title="@string/item_1"/>
    <item
        android:id="@+id/action_item2"
        android:icon="@drawable/ic_account_circle_black_24dp"
        android:title="@string/item_2"/>
    <item
        android:id="@+id/action_item3"
        android:icon="@drawable/ic_assignment_ind_black_24dp"
        android:title="@string/item_3"/>
</menu>

 

4- در این مرحله طراحی ظاهر کاربری اکتیویتی اصلی را انجام میدهیم :

در این مرحله از تگ BottomNavigationView استفاده میکنیم

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:id="@+id/activity_main"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.truiton.bottomnavigation.MainActivity">
 
    <FrameLayout
        android:id="@+id/frame_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/navigation"
        android:animateLayoutChanges="true">
 
    </FrameLayout>
 
    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@color/colorPrimary"
        app:itemIconTint="@color/nav_item_state_list"
        app:itemTextColor="@color/nav_item_state_list"
        app:menu="@menu/bottom_navigation_items"/>
</RelativeLayout>

 

5- در این مرحله میبایستی BottomNavigation را در اکتیویتی تعریف نماییم

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.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.view.MenuItem;
 
public class MainActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        BottomNavigationView bottomNavigationView = (BottomNavigationView)
                findViewById(R.id.navigation);
 
        bottomNavigationView.setOnNavigationItemSelectedListener
                (new BottomNavigationView.OnNavigationItemSelectedListener() {
                    @Override
                    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                        Fragment selectedFragment = null;
                        switch (item.getItemId()) {
                            case R.id.action_item1:
                                selectedFragment = ItemOneFragment.newInstance();
                                break;
                            case R.id.action_item2:
                                selectedFragment = ItemTwoFragment.newInstance();
                                break;
                            case R.id.action_item3:
                                selectedFragment = ItemThreeFragment.newInstance();
                                break;
                        }
                        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
                        transaction.replace(R.id.frame_layout, selectedFragment);
                        transaction.commit();
                        return true;
                    }
                });
 
        //Manually displaying the first fragment - one time only
        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
        transaction.replace(R.id.frame_layout, ItemOneFragment.newInstance());
        transaction.commit();
 
        //Used to select an item programmatically
        //bottomNavigationView.getMenu().getItem(2).setChecked(true);
    }
}

 

آموزش استفاده از کتابخانه BottomNavigationView

آموزش اندروید     آموزش برنامه نویسی اندروید    برنامه نویسی اندروید    اندروید استودیو     آموزش اندروید استودیو

آموزش اندروید     آموزش برنامه نویسی اندروید    برنامه نویسی اندروید    اندروید استودیو     آموزش اندروید استودیو

آموزش اندروید     آموزش برنامه نویسی اندروید    برنامه نویسی اندروید    اندروید استودیو     آموزش اندروید استودیو

آموزش اندروید     آموزش برنامه نویسی اندروید    برنامه نویسی اندروید    اندروید استودیو     آموزش اندروید استودیو