TabLayout和ViewPager实现Tabs切换

一、导包

Android studio 1.4版本

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

Android studio 1.3版本

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

二、xml文件

activity的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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/main_tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_blue_dark"
        app:tabIndicatorColor="#FF00FF00"
        app:tabTextColor="#ffffff"
        app:tabTextAppearance="@style/MyTabLayoutTextAppearance"
        tools:targetApi="ice_cream_sandwich" />
    <android.support.v4.view.ViewPager
        android:id="@+id/main_view_pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1" />
</LinearLayout>

fragment的xml文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/fragment_txt"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"/>
</LinearLayout>

三、自定义适配器

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import java.util.ArrayList;
/**
 * <h3>Description</h3>
 * TODO
 * <h3>Author</h3> 
 * <h3>Date</h3> 2016/1/25 14:27
 * <h3>Copyright</h3> Copyright (c)2016 Shenzhen  Technology Co., Ltd. Inc. All rights reserved.
 */
public class ContentViewPagerAdapter extends FragmentPagerAdapter {
    private ArrayList<String> tabList;
    private ArrayList<Fragment> fragments;

    public ContentViewPagerAdapter(FragmentManager fm, ArrayList<String> tabList, ArrayList<Fragment> fragments) {
        super(fm);
        this.tabList = tabList;
        this.fragments = fragments;
    }
    @Override
    public Fragment getItem(int position) {
        return fragments == null ? null : fragments.get(position);
    }
    @Override
    public int getCount() {
        return fragments == null ? 0 : fragments.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return (tabList == null) || (tabList.size()== 0) ||(tabList.size() <= position)|| (tabList.get(position) == null) ? null : tabList.get(position) ;
    }
}

四、fragment代码：

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import com.tentinet.testtapsviewpager.R;

/**
 * <h3>Description</h3>
 * TODO
 * <h3>Author</h3>
 * <h3>Date</h3> 2016/1/25 14:18
 * <h3>Copyright</h3> Copyright (c)2016 Shenzhen  Technology Co., Ltd. Inc. All rights reserved.
 */
public class TestFragment extends Fragment {
    private View fragment_layout;
    private TextView fragment_txt;
    public static final String FRAGMENT_KEY = "fragment_key";
    private  String content;
    public TestFragment() {
    }
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        fragment_layout = inflater.inflate(R.layout.fragment_layout,container,false);
        initView();
        initData();
        return fragment_layout;
    }
    private void initView() {
        fragment_txt = (TextView) fragment_layout.findViewById(R.id.fragment_txt);

    }
    private void initData() {
        Bundle bundle = getArguments();
        content = bundle.getString(FRAGMENT_KEY);
        fragment_txt.setText(content);
    }
}

五、Activity代码：

import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import com.tentinet.testtapsviewpager.adapter.ContentViewPagerAdapter;
import com.tentinet.testtapsviewpager.fragment.TestFragment;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    private TabLayout tabLayout;
    private ViewPager view_pager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        initData();
        setWidgetListener();
    }

    /**
     * 初始化Views
     * <h3>Version</h3> 1.0
     * <h3>CreateTime</h3> 2016/1/25,14:02
     * <h3>UpdateTime</h3> 2016/1/25,14:02
     * <h3>CreateAuthor</h3>
     * <h3>UpdateAuthor</h3>
     * <h3>UpdateInfo</h3> (此处输入修改内容,若无修改可不写.)
     * 
     */
    private void initView() {
        tabLayout = (TabLayout) findViewById(R.id.main_tabLayout);
        view_pager = (ViewPager) findViewById(R.id.main_view_pager);

    }

    /**
     * 初始化数据
     * <h3>Version</h3> 1.0
     * <h3>CreateTime</h3> 2016/1/25,14:02
     * <h3>UpdateTime</h3> 2016/1/25,14:02
     * <h3>CreateAuthor</h3>
     * <h3>UpdateAuthor</h3>
     * <h3>UpdateInfo</h3> (此处输入修改内容,若无修改可不写.)
     * 
     */
    private void initData() {
        ArrayList<String> tabs = new ArrayList<>();
        tabs.add("标题1");
        tabs.add("标题2");
        tabs.add("标题3");
        tabs.add("标题4");
        tabs.add("标题5");
        ArrayList<Fragment> fragments = new ArrayList<>();
        for (int i = 0; i < 5; i++) {
            TestFragment fragment = new TestFragment();
            Bundle bundle = new Bundle();
            bundle.putString(TestFragment.FRAGMENT_KEY,"标题" + i);
            fragment.setArguments(bundle);
            fragments.add(fragment);
        }
        ContentViewPagerAdapter contentViewPager = new ContentViewPagerAdapter(getSupportFragmentManager(),tabs,fragments);
        view_pager.setAdapter(contentViewPager);
        //必须先给ViewPager设置适配器后才能再给ViewPager设置ViewPager
        tabLayout.setupWithViewPager(view_pager);
        tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
        //设置指示条的高度
        tabLayout.setSelectedTabIndicatorHeight(10);

    }
    /**
     * 设置监听
     * <h3>Version</h3> 1.0
     * <h3>CreateTime</h3> 2016/1/25,14:03
     * <h3>UpdateTime</h3> 2016/1/25,14:03
     * <h3>CreateAuthor</h3> 
     * <h3>UpdateAuthor</h3>
     * <h3>UpdateInfo</h3> (此处输入修改内容,若无修改可不写.)
     *
     */
    private void setWidgetListener() {
        //设置tab监听
        tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {

            }

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

            }

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

            }
        });
    }
}

六、xml常用到的属性

1、全体Tab字体的颜色

app:tabTextColor="@android:color/holo_red_light"

2、选中Tab字体的颜色

app:tabSelectedTextColor="@android:color/holo_red_light"

3、设置指示条颜色

app:tabIndicatorColor="#FF00FF00"

4、设置Tab字体大小

       注意：这个要先自定义样式，然后再xml文件中使用才可以（参见一 红色部分）。

<!--设置TabLayout字体的大小与颜色-->
<style name="MyTabLayoutTextAppearance" parent="TextAppearance.AppCompat.Widget.ActionBar.Title">
    <item name="android:textSize">0sp</item>
    <!--<item name="android:textColor">@android:color/white</item>-->
</style>

七、效果图

示例源码