TabLayout和ViewPager以及Fragment实现超级简单导航栏

导航栏在项目中用到的很多，今天我们就来看看最简单的方式实现，这里我们用到了Design包下面的一个非常强大的类：TabLayout，先来看看那效果图：

布局文件main_activity.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"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="scrollable"
        android:background="@color/colorPrimary_pink" >
    </android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:layout_below="@+id/tablayout" >
    </android.support.v4.view.ViewPager>

</RelativeLayout>

到重点了，关键看我们的MainActivity，我们先来看看一般的方式：

package com.dice.md_13_tablayout;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;


public class MainActivity extends FragmentActivity {

	private TabLayout tablayout;
	private String[] items_1 = new String[]{"item_1","item_2","item_3","item_4","item_5",
			"item_6","item_7","item_8"
			};
	private String[] items_2 = new String[]{"item_1","item_2","item_3"};
	private ViewPager mViewPager;
	@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Adapter mAdapter = new Adapter(getSupportFragmentManager());
        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        mViewPager.setAdapter(mAdapter);
        tablayout = (TabLayout) findViewById(R.id.tablayout);
        // 1.1 关联 TabLyout 和 ViewPager  作用：为TabLayout 设置title 
        tablayout.setTabsFromPagerAdapter(mAdapter);
        // 1.2 关联 TabLyout 和 ViewPager  作用: 滑动ViewPager TabLayout自动切换 协调切换
        mViewPager.setOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tablayout));
        // 1.3 点击TabLayout 切换ViewPager
        tablayout.setOnTabSelectedListener(new OnTabSelectedListener() {
			
			@Override
			public void onTabUnselected(Tab arg0) {
				// TODO Auto-generated method stub
				
			}
			
			@Override
			public void onTabSelected(Tab tab) {
				mViewPager.setCurrentItem(tab.getPosition());				
			}
			
			@Override
			public void onTabReselected(Tab arg0) {
				// TODO Auto-generated method stub
				
			}
		});
        //  然而 上面的 1.1、1.2、1.3 这里一句话搞定
        //tablayout.setupWithViewPager(mViewPager);
    }
    
     // 这个Adapter 是必须
     public class Adapter extends FragmentPagerAdapter{

		public Adapter(FragmentManager fm) {
			super(fm);
		}
		
		@Override
		public Fragment getItem(int position) {
			// TODO Auto-generated method stub
			MyFragment fragment = new MyFragment();
			Bundle bundle = new Bundle();
			bundle.putString("title", items_1[position]);
			fragment.setArguments(bundle);
			return fragment;
		}
		
		@Override
		public CharSequence getPageTitle(int position) {
			return items_1[position];
		}

		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return items_1.length;
		}
		
    	 
     }

}

改进之后：

package com.dice.md_13_tablayout;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;


public class MainActivity extends FragmentActivity {

	private TabLayout tablayout;
	private String[] items_1 = new String[]{"item_1","item_2","item_3","item_4","item_5",
			"item_6","item_7","item_8"
			};
	private String[] items_2 = new String[]{"item_1","item_2","item_3"};
	private ViewPager mViewPager;
	@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Adapter mAdapter = new Adapter(getSupportFragmentManager());
        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        mViewPager.setAdapter(mAdapter);
        tablayout = (TabLayout) findViewById(R.id.tablayout);
        //  然而 上面的 1.1、1.2、1.3 这里一句话搞定
        tablayout.setupWithViewPager(mViewPager);
    }
    
    // 这个Adapter 是必须
     public class Adapter extends FragmentPagerAdapter{

		public Adapter(FragmentManager fm) {
			super(fm);
		}
		
		@Override
		public Fragment getItem(int position) {
			// TODO Auto-generated method stub
			MyFragment fragment = new MyFragment();
			Bundle bundle = new Bundle();
			bundle.putString("title", items_1[position]);
			fragment.setArguments(bundle);
			return fragment;
		}
		
		@Override
		public CharSequence getPageTitle(int position) {
			return items_1[position];
		}

		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return items_1.length;
		}
		
    	 
     }

}

是不是超级简单呢？