一、导包
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"
注意:这个要先自定义样式,然后再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>
七、效果图