编写布局文件代码:
activity_main.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"
xmlns:tools="http://schemas.android.com/tools"
tools:context="com.example.pagerindicator_tab.MainActivity"
>
<com.viewpagerindicator.TabPageIndicator
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/tabPageIndicator"
android:background="@color/colorAccent"/>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/viewPager"/>
</LinearLayout>
<?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">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello"
android:id="@+id/tv"
android:textSize="25sp"/>
</LinearLayout><
编写TabFragment继承fragment,用来显示页面数据:
public class TabFragment extends Fragment{
private int pos;
@SuppressLint("ValidFragment")
public TabFragment(int pos){
this.pos = pos;
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.frag,container,false);
TextView tv = (TextView) view.findViewById(R.id.tv);
tv.setText(TabAdapter.TITLES[pos]);
return view;
}
}
ViewPager与FragmentPagerAdapter的配合去装载页面,可自定义一个TabAdapter继承FragmentPagerAdapter
public class TabAdapter extends FragmentPagerAdapter{
public static String TITLES[] = {"新朋友","群聊","公众号","商城"};
public TabAdapter(FragmentManager fm) {
super(fm);
}
// viewPager填充的每个fragment页面,
@Override
public Fragment getItem(int position) {
TabFragment fragment = new TabFragment(position);
return fragment;
}
// Tab的数目
@Override
public int getCount() {
return TITLES.length;
}
// 填充Tab的标题
@Override
public CharSequence getPageTitle(int position) {
return TITLES[position];
}
}
编写MainActivity代码:
public class MainActivity extends FragmentActivity {
private TabAdapter tabAdapter;
private ViewPager viewPager;
private TabPageIndicator tabPageIndicator;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tabAdapter = new TabAdapter(getSupportFragmentManager());
initViews();
viewPager.setAdapter(tabAdapter);
tabPageIndicator.setViewPager(viewPager,0);
}
private void initViews(){
viewPager = (ViewPager) findViewById(R.id.viewPager);
tabPageIndicator = (TabPageIndicator) findViewById(R.id.tabPageIndicator);
}
}
使用viewPager.setAdapter(fragmentPagerAdapter)填充ViewPager,tabPageIndicator.setViewPager(viewPager)使TabPageIndicator实现对viewPager的适配
关于TabPageIndicator的样式可以在style.xml中进行配置,如下:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<!--设置TabPageIndicator样式为MyTabPageIndicator-->
<item name="vpiTabPageIndicatorStyle">@style/MyTabPageIndicator</item>
<item name="android:windowNoTitle">true</item>
</style>
<style name="MyTabPageIndicator" parent="Widget">
<item name="android:background">@drawable/vpi__tab_indicator</item> <<span style="font-family: Arial, Helvetica, sans-serif;">!--设置TabPageIndicator的背景样式--></span>
<item name="android:textSize">20sp</item> <!--设置TabPageIndicator中文字的大小-->
</style>
对TabPageIndicator还有很多样式可以改变,这里不多讲
实现的效果如下:
注:com.viewpagerindicator.TabPageIndicator需要导入相关包,在Android Studio中导入这个包,可以参见我的博客介绍:http://blog.csdn.net/csdn_blog_lcl/article/details/52744101