用ViewPagerIndicator实现App主页面Tab

最近一直在研究怎么实现Tab,鸿洋大神超叼的用四种方法实现App主页Tab,分别是：

纯ViewPager，纯Fragment，ViewPager+FragmentPagerAdapter和ViewPager+FragmentPagerAdapter+ViewPagerIndicator

其中呢最后一种最复杂，我将对最后一种重点总结，当然还会再加上那么一点自己的认识。

一、先描述一下我们的思路，下图是我们要完成的页面和大概功能描述。

1.主页面布局，线性的垂直的布局，里面先放ViewPagerIndicator，接下来是一个ViewPager。

2.ViewPager的item里放的是fragment，fragment的布局里一个居中的TextView。

3.写TabAdapter类继承FragmentPagerAdapter，重写里面的几个方法，在里面设置一个字符串数组存放下面的5个个Tag。

4.写TabFragement继承Fragment，把Textview中内容设置成TabAdapter里相应的字符串数组中的某个值。

5.在MainActivity中初始化，为ViewPager设置适配器，为ViewPagerIndicator设置ViewPager。

6.在res\values\styles.xml中写style样式，在AndroidManifast.xml中引用添加的style样式，展示出蓝色的条目。

二、要在本项目中用到ViewPagerIndicator，在Android Studio中用ViewPagerIndicator需要做如下操作：

根build.gradle下加一行
allprojects {
repositories {
...
maven { url "https://jitpack.io" }
}
}
在另外的build.gradle中加一行
dependencies {
...
compile 'com.github.JakeWharton:ViewPagerIndicator:2.4.1@aar'
}
最后sync

三、首先展示布局

1.主页面布局

<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:orientation="vertical"
   >
    <com.viewpagerindicator.TabPageIndicator
        android:id="@+id/indicator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent">

    </com.viewpagerindicator.TabPageIndicator>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </android.support.v4.view.ViewPager>

</LinearLayout>

2.Fragment页面的布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Hello World!"/>

</RelativeLayout>

四、

1.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 CharSequence getPageTitle(int position) {
        return TITLES[position];
    }
    @Override
    public int getCount() {
        return TITLES.length;
    }
}

2.TabFragment中的代码

@SuppressLint("ValidFragment")
public class TabFragment extends Fragment {
   public int pos;
    @SuppressLint("ValidFragment")
    public TabFragment(int pos){

        this.pos=pos;
    }

    @Override
    public View onCreateView(LayoutInflater inflater,  ViewGroup container,  Bundle savedInstanceState) {

        View view=inflater.inflate(R.layout.frag,container,false);
        TextView textView= (TextView) view.findViewById(R.id.textview);
        textView.setText(TabAdapter.TITLES[pos]);
        return view;
    }
}

五、

MainActivity中的代码

public class MainActivity extends FragmentActivity {
    private ViewPager mViewPager;
    private TabPageIndicator mTabPagIndicator;
    private TabAdapter mAdapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        iniView();
    }
    private void iniView() {
        mViewPager= (ViewPager) findViewById(R.id.viewpager);
        mTabPagIndicator= (TabPageIndicator) findViewById(R.id.indicator);
        mAdapter=new TabAdapter(getSupportFragmentManager());
        mViewPager.setAdapter(mAdapter);
        mTabPagIndicator.setViewPager(mViewPager,0);
    }
}

六、要添加的style样式

<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">5000</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">22dip</item>
        <item name="android:paddingRight">22dip</item>
        <item name="android:paddingTop">8dp</item>
        <item name="android:paddingBottom">8dp</item>
        <item name="android:textAppearance">@style/MyTextAppearance.TabPageIndicator</item>
        <item name="android:textSize">16sp</item>
        <item name="android:maxLines">1</item>
    </style>

    <style name="MyTextAppearance.TabPageIndicator" parent="Widget">
        <item name="android:textStyle">bold</item>
        <item name="android:textColor">@android:color/black</item>
    </style>

在AndroidManifast.xml中引用添加的样式，在application节点下把，原来的样式改为自己添加的样式：android:theme="@style/MyTheme"

七、

有人说在ViewPager中使用Fragment切换，因为Fragment的生命周期的原因会变得不是很好控制。这样我想起来以前做的一个相关的Tab是把ViewPager的item都设置成一个空白的FrameLayout,然后写一个类去向item中添加控件，并写相关的逻辑。这样就把代码和逻辑进行了一定程度的分离，也不用考虑生命周期的问题。

八、

收工，睡觉。

性别女的Android实习生杭州有人要吗？没人搭理我的话，我在下一篇博客再问问！！！