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>

七、效果图