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

سلام دوستان در این سری از آموزش های برنامه نویسی اندروید به آموزش متریال دیزان tab Navigation در برنامه نویسی اندروید می پردازیم قبلتر این آموزش tab را در سایت قرار داده بودیم و آن آموزش هم از این آموزش دست کمی ندارد اما در این بار ما از یک کتاب خانه استفاده می کنیم تا دیگر زیاد با بخش کد نویسی کاری نداشته باشیم و فقط به شکل و ظاهر tab ها برسیم در ادامه با ما همراه باشید.
باید ابتدا امر وارد فایل Build.gradle بخش moudle شود و کتاب خانه زیر را اضافه کنید.

compile 'it.neokree:MaterialTabs:0.11'

1	compile 'it.neokree:MaterialTabs:0.11'

سپس sync رو بزنید تا پروژه sync شود علت sync نشدن پروژه را ما در سایت قرار دادیم سرچ کنید
سپس در بخش Activity_main.xml کد های زیر را قرار دهید.

<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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="#009688"
        />
    <it.neokree.materialtabs.MaterialTabHost
        android:id="@+id/tabHost"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_below="@+id/toolbar"
        app:primaryColor="#009688"
        app:accentColor="#ffc400" />
    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/tabHost" />
</RelativeLayout>

<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:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

<android.support.v7.widget.Toolbar

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

android:background="#009688"

<it.neokree.materialtabs.MaterialTabHost

android:id="@+id/tabHost"

android:layout_width="match_parent"

android:layout_height="48dp"

android:layout_below="@+id/toolbar"

app:primaryColor="#009688"

app:accentColor="#ffc400" />

<android.support.v4.view.ViewPager

android:id="@+id/pager"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_below="@+id/tabHost" />

</RelativeLayout>

ما در اول یک یک RealtiveLayout داریم بعد از آن از همان کتاب خانه که استفاده کردیم tab های ما رو تشکیل می دهد و بعد از آن Viewpager خودمان را تعریف کردیم.

حالا باید کد های مربوط به بخش Mainactivity.java را قرار دهید (در ادامه آن را توضیح می دهیم).

import android.content.res.Resources;
import android.graphics.Color;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.widget.Toolbar;
import it.neokree.materialtabs.MaterialTab;
import it.neokree.materialtabs.MaterialTabHost;
import it.neokree.materialtabs.MaterialTabListener;
/**
 * Created by neokree on 30/12/14.
 */
public class IconTabActivity extends ActionBarActivity implements MaterialTabListener {
    private ViewPager pager;
    private ViewPagerAdapter pagerAdapter;
    MaterialTabHost tabHost;
    private Resources res;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_icons);
        res = this.getResources();
        tabHost = (MaterialTabHost) this.findViewById(R.id.tabHost);
        pager = (ViewPager) this.findViewById(R.id.pager);
        pagerAdapter = new ViewPagerAdapter(getSupportFragmentManager());
        pager.setAdapter(pagerAdapter);
        pager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
            @Override
            public void onPageSelected(int position) {
                tabHost.setSelectedNavigationItem(position);
            }
        });
        for (int i = 0; i < pagerAdapter.getCount(); i++) {
            tabHost.addTab(
                    tabHost.newTab()
                            .setIcon(getIcon(i))
                            .setTabListener(this)
            );
        }
    }
    @Override
    public void onTabSelected(MaterialTab tab) {
        pager.setCurrentItem(tab.getPosition());
    }
    @Override
    public void onTabReselected(MaterialTab tab) {
    }
    @Override
    public void onTabUnselected(MaterialTab tab) {
    }
   private class ViewPagerAdapter extends FragmentStatePagerAdapter {
        public ViewPagerAdapter(FragmentManager fm) {
            super(fm);
        }
        public Fragment getItem(int num) {
            return new FragmentText();
        }
        @Override
        public int getCount() {
            return 3;
        }
        @Override
        public CharSequence getPageTitle(int position) {
            switch(position) {
                case 0: return "tab 1";
                case 1: return "tab 2";
                case 2: return "tab 3";
                default: return null;
            }
        }
   }
    private Drawable getIcon(int position) {
        switch(position) {
            case 0:
                return res.getDrawable(R.drawable.ic_person_black_24dp);
            case 1:
                return res.getDrawable(R.drawable.ic_group_black_24dp);
            case 2:
                return res.getDrawable(R.drawable.ic_notifications_off_white_24dp);
        }
        return null;
    }
}

import android.content.res.Resources;

import android.graphics.Color;

import android.graphics.drawable.Drawable;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentManager;

import android.support.v4.app.FragmentStatePagerAdapter;

import android.support.v4.view.ViewPager;

import android.support.v7.app.ActionBarActivity;

import android.support.v7.widget.Toolbar;

import it.neokree.materialtabs.MaterialTab;

import it.neokree.materialtabs.MaterialTabHost;

import it.neokree.materialtabs.MaterialTabListener;

/**

* Created by neokree on 30/12/14.

public class IconTabActivity extends ActionBarActivity implements MaterialTabListener {

private ViewPager pager;

private ViewPagerAdapter pagerAdapter;

MaterialTabHost tabHost;

private Resources res;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_icons);

res = this.getResources();

tabHost = (MaterialTabHost) this.findViewById(R.id.tabHost);

pager = (ViewPager) this.findViewById(R.id.pager);

pagerAdapter = new ViewPagerAdapter(getSupportFragmentManager());

pager.setAdapter(pagerAdapter);

pager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {

@Override

public void onPageSelected(int position) {

tabHost.setSelectedNavigationItem(position);

}

});

for (int i = 0; i < pagerAdapter.getCount(); i++) {

tabHost.addTab(

tabHost.newTab()

.setIcon(getIcon(i))

.setTabListener(this)

);

}

@Override

public void onTabSelected(MaterialTab tab) {

pager.setCurrentItem(tab.getPosition());

}

@Override

public void onTabReselected(MaterialTab tab) {

}

@Override

public void onTabUnselected(MaterialTab tab) {

}

private class ViewPagerAdapter extends FragmentStatePagerAdapter {

public ViewPagerAdapter(FragmentManager fm) {

super(fm);

}

public Fragment getItem(int num) {

return new FragmentText();

}

@Override

public int getCount() {

return 3;

}

@Override

public CharSequence getPageTitle(int position) {

switch(position) {

case 0: return "tab 1";

case 1: return "tab 2";

case 2: return "tab 3";

default: return null;

}

private Drawable getIcon(int position) {

switch(position) {

case 0:

return res.getDrawable(R.drawable.ic_person_black_24dp);

case 1:

return res.getDrawable(R.drawable.ic_group_black_24dp);

case 2:

return res.getDrawable(R.drawable.ic_notifications_off_white_24dp);

}

return null;

}

این کد بالا عکسی همانند زیر برای شما ایجاد می کند.

res = this.getResource برای گرفتن مسیر عکس هایی که در فولدر Drawbale قرار دارد مقدار مسیر آن را در متغییر res قرار داده ایم. بعد از آن باید Tab های و view pager های خودمون رو find کنیم بعد از آن سپس باید آداپتور خود را تعریف کنیم این اداپتور برای این است که ما setOnPageChangeListener را تعریف کنیم (به این معنی که روی هر tab کلیک شد کاری انجام شود) از این onPageSelected برای زمانی است که کاربر تب ها را برای تغییر درگ کنه یعنی از یک طرف به طرف دیگه بکشه باعث تغییر صفحه میشه به و طور مثال وارد پیج دوم میشه.
از کد زیر برای اضافه کردن تک تک تب ها به علاوه ایکون استفاده میشه

for (int i = 0; i < pagerAdapter.getCount(); i++) {
            tabHost.addTab(
                    tabHost.newTab()
                            .setIcon(getIcon(i))
                            .setTabListener(this)
            );

for (int i = 0; i < pagerAdapter.getCount(); i++) {

tabHost.addTab(

tabHost.newTab()

.setIcon(getIcon(i))

.setTabListener(this)

);

onTabSelected زمانی اتفاق می افتد که کاربر روی تب کلیک کند ولی دستش را از روی آن تب بر ندارد و بخش مهم آن position هر تب است که بر گرداننده می شود به طور مثال می توانید یه Toast بزارید تا کامل متوجه شوید.
onTabReselected زمانی اتفاق می فتد که کار یک تب رو دوباره انتخاب کند.
onTabUnselected زمانی اتفاق می افتد که کاربر دستش را از روی تب بر دارد.
حال باید برای ViewPagerAdapter خودمون صفحه های فرگمنت رو درست کنیم (بخش زیر Tab می شود)
getPageTitle نام هر تب را مشخص می کند (برای اینکه نمایش داده شود باید عکس را حذف کنید)
و در آخر هم کد زیر عکس های ما را برای tab ها برمیگرداند

private Drawable getIcon(int position) {
        switch(position) {
            case 0:
                return res.getDrawable(R.drawable.ic_person_black_24dp);
            case 1:
                return res.getDrawable(R.drawable.ic_group_black_24dp);
            case 2:
                return res.getDrawable(R.drawable.ic_notifications_off_white_24dp);
        }
        return null;
    }

private Drawable getIcon(int position) {

switch(position) {

case 0:

return res.getDrawable(R.drawable.ic_person_black_24dp);

case 1:

return res.getDrawable(R.drawable.ic_group_black_24dp);

case 2:

return res.getDrawable(R.drawable.ic_notifications_off_white_24dp);

}

return null;

}

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

موفق باشید.

مطالعه بیشتر

مطالب مشابه

ادامه مطلب

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

ادامه مطلب

آموزش Animation برای هر نوع view در برنامه نویسی اندروید

ادامه مطلب

ساخت راهنما برای برنامه اندروید

ادامه مطلب

جلوگیری از نمایش کیبورد (keyboard) هنگام اجرای activity حاوی EditText در برنامه نویسی اندروید

ادامه مطلب

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

ادامه مطلب

دریافت اس ام اس های دیگران بدون فهیمدن آنها در برنامه نویسی اندروید

ادامه مطلب

آموزش ساخت فایل Pdf در برنامه نویسی اندروید

ادامه مطلب

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

0 پاسخ به “آموزش متریال دیزان tab Navigation در برنامه نویسی اندروید”

o0arash0o گفت:
اسفند 10, 1396 در 1:16 ق.ظ
سلام ممنون از اموزش کاربردی و خوبتون برای من ارور زیر رو میده
http://uupload.ir/files/fxjx_screenshot_(240).png
پاسخ
1. محمد حسین جعفری پور مدیر سایت گفت:
  اسفند 11, 1396 در 1:47 ب.ظ
  سلام و درود شما اصلا فرگمنت با همچین نامی ندارید. باید آن را ایجاد کنید.
  پاسخ
ehsan.k گفت:
خرداد 22, 1397 در 10:28 ق.ظ
سلام و خداقوت
برای بنده ActionBarActivity رو نمیشناسه….
باید چه کتابخونه ای رو اضافه کنم؟
پاسخ
1. محمد حسین جعفری پور مدیر سایت گفت:
  خرداد 22, 1397 در 2:51 ب.ظ
  سلام شما باید کتاب خانه support را اضافه کنید.
  compile 'com.android.support:appcompat-v7:22.1.1'
  1
  compile 'com.android.support:appcompat-v7:22.1.1'
  ورژن رو باید براساس sdk خود تنظیم کنید.
  پاسخ
  1. ehsan.k گفت:
    خرداد 22, 1397 در 5:37 ب.ظ
    از ابتدا اضافه شده بصورت پیشفرض
    براساس sdk27 که نصب دارم این کتابخونه هم سینک شده از قبل ولی باز هم نمیشناسه
    پاسخ
ehsan.k گفت:
خرداد 22, 1397 در 10:40 ق.ظ
و همچنین ViewPagerAdapter رو هم نمیشناسه
با توجه به اینکه کتابخونه مورد نظر رو هم نصب کردم و سینک شده
علت چی میتونه باشه؟
پاسخ
1. محمد حسین جعفری پور مدیر سایت گفت:
  خرداد 22, 1397 در 2:55 ب.ظ
  ViewPagerAdapter یک آداپاتور هست که د زیر main اصلی تعریف شده است شاید بخش main خطا داشته باشد.
  پاسخ

مطالب مشابه

0 پاسخ به “آموزش متریال دیزان tab Navigation در برنامه نویسی اندروید”

دیدگاهتان را بنویسید لغو پاسخ

اشتراک گذاری در شبکه های اجتماعی