TabLayout+ViewPager的使用

TabLayout+ViewPager的效果

這種布局用的還是很多的，比如微信，知乎上面有不少這種布局。

使用步驟

1.添加依賴

    compile 'com.android.support:design:23.3.0'
    compile 'com.android.support:support-v4:23.3.0

2.在xml中放一個TabLayout和ViewPager

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="org.xdkitten.study.TabLayoutActivity">
    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:id="@+id/tab_layout"
        android:layout_alignParentTop="true">
    </android.support.design.widget.TabLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/tab_layout"
        android:layout_alignParentBottom="true">
    </android.support.v4.view.ViewPager>
</RelativeLayout>

3.在java文件中寫adapter

        class TabFragmentAdapter extends FragmentStatePagerAdapter{
        List<String> titileList;
        List<TabFragment> fmList;
        public TabFragmentAdapter(FragmentManager fm,List<TabFragment> fmList,List<String> titileList) {
            super(fm);
            this.fmList=fmList;
            this.titileList=titileList;
        }

        @Override
        public Fragment getItem(int position) {
            return fmList.get(position);
        }

        @Override
        public int getCount() {
            if(fmList==null){
                return 0;
            }else{
                return fmList.size();
            }
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return titileList.get(position);
        }
    }

adapter中有兩個List一個存Fragment，一個存標題。
重寫以getItem，getCount，getPageTitle函數（其實也不一定都要重寫）
4.主代碼

    private TabLayout tabLayout;
    private ViewPager viewPager;
    private List<String> titleList = new ArrayList<String>();
    private List<TabFragment> fmList=new ArrayList<TabFragment>();

        viewPager= (ViewPager) findViewById(R.id.view_pager);
        tabLayout= (TabLayout) findViewById(R.id.tab_layout);

        //初始化標題以及Fragment內容
        for(int i=0;i<4;i++){
            titleList.add("fm"+i);
            TabFragment fm=TabFragment.newInstance("This is TabFragment "+i);
            fmList.add(fm);
        }
        viewPager.setAdapter(new TabFragmentAdapter(getSupportFragmentManager(),fmList,titleList));
        tabLayout.setupWithViewPager(viewPager);

到目前為止就可以實現一開頭出現的效果了，但是實際上我們還可以去設置其他很多的效果。

常用屬性與方法

在TabLayout中添加如下代碼

        app:tabSelectedTextColor="@android:color/holo_blue_bright"
        app:tabTextColor="@android:color/black"
        app:tabIndicatorColor="@android:color/holo_blue_bright"

效果

這3個常用屬性的作用是

• app:tabSelectedTextColor：Tab被選中字體的顏色
• app:tabTextColor：Tab未被選中字體的顏色
• app:tabIndicatorColor：Tab指示器下標的顏色

TabLayout常用的方法如下：

• addTab(TabLayout.Tab tab, int position, boolean setSelected) 增加選項卡到 layout 中
• addTab(TabLayout.Tab tab, boolean setSelected) 同上
• addTab(TabLayout.Tab tab) 同上
• getTabAt(int index) 得到選項卡
• getTabCount() 得到選項卡的總個數
• getTabGravity() 得到 tab 的 Gravity
• getTabMode() 得到 tab 的模式
• getTabTextColors() 得到 tab 中文本的顏色
• newTab() 新建個 tab
• removeAllTabs() 移除所有的 tab
• removeTab(TabLayout.Tab tab) 移除指定的 tab
• removeTabAt(int position) 移除指定位置的 tab
• setOnTabSelectedListener(TabLayout.OnTabSelectedListener onTabSelectedListener) 為每個 tab 增加選擇監聽器
• setScrollPosition(int position, float positionOffset, boolean updateSelectedText) 設置滾動位置
• setTabGravity(int gravity) 設置 Gravity
• setTabMode(int mode) 設置 Mode,有兩種值：TabLayout.MODE_SCROLLABLE和TabLayout.MODE_FIXED分別表示當tab的內容超過屏幕寬度是否支持橫向水平滑動，第一種支持滑動，第二種不支持，默認不支持水平滑動。
• setTabTextColors(ColorStateList textColor) 設置 tab 中文本的顏色
• setTabTextColors(int normalColor, int selectedColor) 設置 tab 中文本的顏色 默認 選中
• setTabsFromPagerAdapter(PagerAdapter adapter) 設置 PagerAdapter
• setupWithViewPager(ViewPager viewPager) 和 ViewPager 聯動
• tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);//設置tab模式為可以滑動
  以上常用屬性和方法來自http://blog.csdn.net/feiduclear_up/article/details/46500865

嘗試着給tab都改個名

        TabLayout.Tab tab0=tabLayout.getTabAt(0);
        tab0.setText("Change");

效果