Tablayout與ViewPager的結合使用

• Tablayout想要實現：首先必須添加V7包下的資源
  compile ‘com.android.support:design:23.0.0’

主Activity的佈局

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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"
    android:orientation="vertical"
 >


    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:scrollbars="none">
    </android.support.v4.view.ViewPager>

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:tabBackground="#EFEFEF"
        app:tabGravity="fill"
        app:tabIndicatorHeight="0dp"
        app:tabMode="fixed"
        app:tabSelectedTextColor="#12c8cf"
        app:tabTextColor="#000">
    </android.support.design.widget.TabLayout>


</LinearLayout>

主Activity的代碼實現

/**
 * 實現底部的Tablayout
 */
public class ThreeActivity extends FragmentActivity {

    private TabLayout mTablayout;
    private ViewPager mViewPager;
    private TabLayout.Tab one;
    private TabLayout.Tab two;
    private TabLayout.Tab three;
    private TabLayout.Tab four;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_three);
        //初始化控件
        initViews();
        initListen();
    }

    //給TabLayout加監聽
    private void initListen() {
        mTablayout.setOnTabSelectedListener(new     TabLayout.OnTabSelectedListener() {
            //選中了tab的邏輯
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                if (tab == mTablayout.getTabAt(0)) {
                    tab.setIcon(R.mipmap.toolbar_home_pre);
                    mViewPager.setCurrentItem(0);//用來點擊tab時切換
                } else if (tab == mTablayout.getTabAt(1)) {
                    tab.setIcon(R.mipmap.toolbar_message_pre);
                    mViewPager.setCurrentItem(1);
                } else if (tab == mTablayout.getTabAt(2)) {
                    tab.setIcon(R.mipmap.toolbar_my_pre);
                    mViewPager.setCurrentItem(2);
                } else if (tab == mTablayout.getTabAt(3)) {
                    tab.setIcon(R.mipmap.toolbar_home_pre);
                    mViewPager.setCurrentItem(3);
                }
            }

            //沒有選中了tab的邏輯
            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                if (tab == mTablayout.getTabAt(0)) {
                    tab.setIcon(R.mipmap.toolbar_home);
                } else if (tab == mTablayout.getTabAt(1)) {
                    tab.setIcon(R.mipmap.toolbar_message);
                } else if (tab == mTablayout.getTabAt(2)) {
                    tab.setIcon(R.mipmap.toolbar_my);
                } else if (tab == mTablayout.getTabAt(3)) {
                    tab.setIcon(R.mipmap.toolbar_home);
                }
            }
            //再次選擇的邏輯
            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });

    }

    private void initViews() {
        mTablayout = (TabLayout) findViewById(R.id.tabLayout);
        mViewPager = (ViewPager) findViewById(R.id.viewPager);

        final String names[] = {"喜", "怒", "哀", "樂"};

        //送數據
        mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return Pagefragment.newInstance(position + 1);
            }

            @Override
            public int getCount() {
                return names.length;
            }


            @Override
            public CharSequence getPageTitle(int position) {
                return names[position];
            }
        });

        //將TabLayout和viewpager聯繫起來
       mTablayout.setupWithViewPager(mViewPager);

        //給TabLayout上添加tab
        one = mTablayout.getTabAt(0);
        two = mTablayout.getTabAt(1);
        three = mTablayout.getTabAt(2);
        four = mTablayout.getTabAt(3);

        //給Tab頁上添加圖標
        one.setIcon(R.mipmap.toolbar_home_pre);
        two.setIcon(R.mipmap.toolbar_message);
        three.setIcon(R.mipmap.toolbar_my);
        four.setIcon(R.mipmap.toolbar_home);
    }
}

Fragment的代碼實現

public class Pagefragment extends Fragment {

    public static final String ARG_PAGE = "ARG_PAGE";
    private int mPage;

    public static Pagefragment newInstance(int page) {
        Bundle args = new Bundle();
        args.putInt(ARG_PAGE, page);
        Pagefragment pageFragment = new Pagefragment();
        pageFragment.setArguments(args);
        return pageFragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mPage = getArguments().getInt(ARG_PAGE);
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment, container, false);
        TextView textView = (TextView) view;
        textView.setText("Fragment #" + mPage);
        return view;
    }

fragment的佈局

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:gravity="center"
          android:text="展示傳來的值"/>

//有一個問題（滑動的時候圖標改變有問題，點擊的時候沒錯）