视频地址:http://www.imooc.com/video/5905
这次的实现方法要借用一个第三方项目开源库:ViewPagerIndicator
所以要涉及到如何导入library项目开源库,因为我是用的Android Studio,不知道操作的童鞋可以看看在Android Studio中导入library项目开源库
下面就是演示的效果:
可以看到在切换到相应的Tab的时候,会有一个下划线指示着,这就是ViewPagerIndicator提供的,通过ViewPagerIndicator,我们不必再像前三篇文章中那样需要类似于
bottom.xml
的布局了,因此也不必去实现Tab对应的点击事件了,以及用于区别”点击“的效果。
首先,还是展示一下目录列表(其中包含了导入的library项目开源库–ViewPagerIndicator,跟tabtest4是同级的):
activity_main比较的简单:
<LinearLayout 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:background="#C5DAED"
android:orientation="vertical" >
<include layout="@layout/top" />
<com.viewpagerindicator.TabPageIndicator
android:id="@+id/id_indicator"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@android:color/transparent" >
</com.viewpagerindicator.TabPageIndicator>
<android.support.v4.view.ViewPager
android:id="@+id/id_viewpager"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
</android.support.v4.view.ViewPager>
</LinearLayout>
主布局文件比较的简单,top即为:
对应的布局,接着是需要借助的TabPageIndicator,最后是ViewPager。
在目录中还有一个frag.xml的布局文件,是在实例化Fragment需要用到的。
还是先把MainActivity先贴出来,方便后面的讲解,在这之前,还需要说明一点,在导入的library中已经附带了一个v4的包,所以不需要我们自己另外再为Module添加Library Dependency了:
public class MainActivity extends AppCompatActivity {
private ViewPager mViewPager;
private TabPageIndicator mTabPageIndicator;
private TabAdapter mAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
getSupportActionBar().hide();
initView();
}
private void initView() {
mViewPager= (ViewPager) findViewById(R.id.id_viewpager);
mTabPageIndicator= (TabPageIndicator) findViewById(R.id.id_indicator);
mAdapter=new TabAdapter(getSupportFragmentManager());
mViewPager.setAdapter(mAdapter);
mTabPageIndicator.setViewPager(mViewPager,);//将TabPageIndicator与ViewPager关联,第二个参数为指示器(即前面说的那个下划线)的初始位置
}
}
可以看到,相比于前三篇的MainActivity,这次的十分的简洁,大致是三步:
1、初始化ViewPager、TabPageIndicator、Adapter
2、给ViewPager设置适配器
3、将TabPageIndicator与ViewPager关联
当然,这里所用的TabAdapter是自己定义的:
public class TabAdapter extends FragmentPagerAdapter {
public static String[] TITLES=new String[]{"课程","问答","求课","学习","计划"};
public TabAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
TabFragment fragment=new TabFragment(position);
return fragment;
}
@Override
public int getCount() {
return TITLES.length;
}
@Override
public CharSequence getPageTitle(int position) {
return TITLES[position];
}
}
TabAdapter 继承自FragmentPagerAdapter ,代码的内容就跟前一篇中的差不多,只不过这里多重写了一个getPageTitle方法,用于返回page的title,而这里返回的title就对应着Tab的title(TabPageIndicator会根据这里返回的title自动设置Tab的title)。
既然有FragmentPagerAdapter ,那就少不了Fragment,可以看到在getItem中就使用了自定义的TabFragment:
public class TabFragment extends Fragment {
private int position;
public TabFragment(int position) {
this.position=position;
}
@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.id_tv);
tv.setText(TabAdapter.TITLES[position]);
return view;
}
}
自定义的TabFragment会根据构造参数传来的position来设置frag布局中TextView的内容。
看到了这儿,是不是觉得大功告成了?那你可以运行一下程序试试效果,怎么样?是不是觉得少了点什么?说好的指示下划线去哪儿了?怎么Tab的字体看着有点不对头?
没错,确实少了一点东西,就是TabPageIndicator的style,因为指示位置的下划线及颜色,Tab的字体风格、大小等都是由TabPageIndicator的style所决定的。
因此需要把下面自定义的内容添加到src\main\res\values中的styles.xml中,然后在AndroidManifest.xml中将
<application ... android:theme="@style/AppTheme">
改为
android:theme="@style/MyTheme"
即可。
<style name="MyTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="vpiTabPageIndicatorStyle">@style/MyWidget.TabPageIndicator</item>
<item name="android:windowNoTitle">true</item>
<item name="android:animationDuration"></item>
<item name="android:windowContentOverlay">@null</item>
</style>
<style name="MyWidget.TabPageIndicator" parent="Widget">
<item name="android:gravity">center</item>
<item name="android:background">@drawable/vpi__tab_indicator</item>
<item name="android:paddingLeft">dip</item>
<item name="android:paddingRight">dip</item>
<item name="android:paddingTop">dp</item>
<item name="android:paddingBottom">dp</item>
<item name="android:textAppearance">@style/MyTextAppearance.TabPageIndicator</item>
<item name="android:textSize">sp</item>
<item name="android:maxLines"></item>
</style>
<style name="MyTextAppearance.TabPageIndicator" parent="Widget">
<item name="android:textStyle">bold</item>
<item name="android:textColor">@android:color/black</item>
</style>
可以看到自定义的style有三个,MyTheme、MyWidget.TabPageIndicator和MyTextAppearance.TabPageIndicator。
其中MyTheme跟原来就有的AppTheme类似,是作为App的Theme,在其中就通过
vpiTabPageIndicatorStyle
定义了TabPageIndicator的style(需要注意,在视频中MyTheme的parent为
AppBaseTheme
,但是在实际开发中,需要视情况而定,因为可能
AppBaseTheme
不存在,而且前面提到过MyTheme跟原来就有的AppTheme类似,所以可以使用与AppTheme相同的parent)。
然后是MyWidget.TabPageIndicator,被MyTheme中的
vpiTabPageIndicatorStyle
所引用,用作TabPageIndicator的style,并且在其中引用了MyTextAppearance.TabPageIndicator,还有某些属性是引用的导入的library自带的。
而MyTextAppearance.TabPageIndicator包含了Tab的字体风格以及颜色。
源码:http://download.csdn.net/download/qq_22804827/9459234