效果圖 有點大 沒弄好

下面我們來實現這個效果

1、在app的build.gradle中新增這行

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

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="halewang.com.bangbang.MainActivity">

    <halewang.com.bangbang.widght.MainViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

    </halewang.com.bangbang.widght.MainViewPager>

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="@null"
        app:tabSelectedTextColor="#FF9100"
        app:tabTextColor="#707070"
        app:tabMode="fixed">

    </android.support.design.widget.TabLayout>


</LinearLayout>
 

tab_home_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="false" android:drawable="@drawable/tab_home_normal"/>
    <item android:state_selected="true" android:drawable="@drawable/tab_home_checked"/>
</selector>
 

private void initTabLayout(){
        mTabs = new ArrayList<>();
        mTabs.add("首頁");
        mTabs.add("榜單");
        mTabs.add("我");
	//這裡就是給tab設定點選效果
        mTabLayout.addTab(mTabLayout.newTab().setText(mTabs.get(0)).setIcon(R.drawable.tab_home_selector));
        mTabLayout.addTab(mTabLayout.newTab().setText(mTabs.get(1)).setIcon(R.drawable.tab_list_selector));
        mTabLayout.addTab(mTabLayout.newTab().setText(mTabs.get(2)).setIcon(R.drawable.tab_mine_selector));
        mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                int position = tab.getPosition();
                mViewPager.setCurrentItem(position,true);
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
    }
 

還有一種將TabLayout和ViewPager相關聯的方法，不用給TabLayout設定點選事件也可以和ViewPager產生聯絡。

private void initViewPager(){
        mViewPager = getMView().getViewPager();
        mViewPager.setOffscreenPageLimit(4);
        mFragments = new ArrayList<>();
        mFragments.add(new DayFragment());
        mFragments.add(new WeekFragment());
        mFragments.add(new MonthFragment());

        MainActivity activity = (MainActivity) mContext;
        ListPagerAdapter mAdapter = new ListPagerAdapter(activity.getSupportFragmentManager(), mFragments, mItems);
        mViewPager.setAdapter(mAdapter);
        mTabLayout.setupWithViewPager(mViewPager);
        mTabLayout.setTabsFromPagerAdapter(mAdapter);
    }

推薦一個公眾號，不吐槽，不毒舌，偶爾發發文章，偶爾推薦好物，歡迎關注