Android使用开源库ViewPagerIndicator实现Tab选项和左右滑动

顶部选项卡在应用中算是比较常见的今天使用github开源项目ViewPagerIndicator结合Fragment实现Tab选项

先看下效果图

第一步下载ViewPagerIndicator 下载地址：https://github.com/JakeWharton/ViewPagerIndicator

第二步新建一个项目然后把ViewPagerIndicator库依赖进去

然后打开settings.gradle查看是否依赖成功

如果没有成功的话手动添加一下

include ':library'

同时再到build.gradle中添加一下依赖库

implementation project(':library')

然后打开ViewPagerIndicator库中的build.gradle修改里面的配置如下

apply plugin: 'com.android.library'

android {
    compileSdkVersion 16
    buildToolsVersion "28.0.3"

//    defaultConfig { //这部分注释掉不然运行会直接报错
//        minSdkVersion 4
//        targetSdkVersion 4
//    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.txt'
        }
    }
}

dependencies {
    //api 'com.android.support:support-v4:18.+'
    implementation 'com.android.support:appcompat-v7:28.0.0' //这里改成你当前开发的最高版本即可
}

下面开始写我们的布局activity_main.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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity"
    android:background="@android:color/white">

    <com.viewpagerindicator.TabPageIndicator
        android:id="@+id/tab_page"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </com.viewpagerindicator.TabPageIndicator>

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

</LinearLayout>

接着是MainActivity 用到的Fragment里面就只放了一个TextView用来显示文字的这里就不贴上来了

package com.ranlegeran.viewpagerindicatortest;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.os.Bundle;

import com.ranlegeran.viewpagerindicatortest.fragment.AllFragment;
import com.ranlegeran.viewpagerindicatortest.fragment.ComingsoonStartFragment;
import com.ranlegeran.viewpagerindicatortest.fragment.PanicBuyingInFragment;
import com.viewpagerindicator.TabPageIndicator;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends FragmentActivity {

    private TabPageIndicator mTabPageIndicator;

    private ViewPager mViewPager;

    private List<Fragment> mFragmentList = new ArrayList<>();

    private String[] mTitles = {"全部","抢购中","即将开始"};

    private AllFragment mAllFragment;

    private PanicBuyingInFragment mPanicBuyingInFragment;

    private ComingsoonStartFragment mComingsoonStartFragment;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        mTabPageIndicator = (TabPageIndicator) findViewById(R.id.tab_page);
        mViewPager = (ViewPager) findViewById(R.id.view_pager);
        initFragments();
        MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());
        mViewPager.setAdapter(adapter);
        mTabPageIndicator.setViewPager(mViewPager);
    }

    private void initFragments() {
        mAllFragment = new AllFragment();
        mPanicBuyingInFragment = new PanicBuyingInFragment();
        mComingsoonStartFragment = new ComingsoonStartFragment();
        mFragmentList.add(mAllFragment);
        mFragmentList.add(mPanicBuyingInFragment);
        mFragmentList.add(mComingsoonStartFragment);
    }

    class MyPagerAdapter extends FragmentPagerAdapter {

        public MyPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return mFragmentList.get(position);
        }

        @Override
        public int getCount() {
            return mFragmentList == null ? 0 : mFragmentList.size();
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return mTitles[position];
        }
    }
}

接着要给它设置一个主题，ViewPagerIndicator这个库它提供的有默认的主题但是默认主题色调是黑色的效果不是很好，这里我们定义一个主题。打开styles.xml定义如下

<style name="StyledIndicators" parent="@android:style/Theme.Light">
        <item name="vpiTabPageIndicatorStyle">@style/CustomViewTabPageIndicator</item>
        <item name="android:windowNoTitle">true</item>
    </style>

    <style name="CustomViewTabPageIndicator" parent="Widget.TabPageIndicator">
        <item name="android:background">@drawable/custom_view_tab_page_indicator</item>
        <item name="android:textAppearance">@style/CustomTabPageIndicator.Text</item>
        <item name="android:textSize">14sp</item>
        <item name="android:dividerPadding">8dp</item>
        <item name="android:showDividers">middle</item>
        <item name="android:paddingLeft">10dp</item>
        <item name="android:paddingRight">10dp</item>
        <item name="android:fadingEdge">horizontal</item>
        <item name="android:fadingEdgeLength">8dp</item>
    </style>

    <style name="CustomTabPageIndicator.Text" parent="android:TextAppearance.Medium">
        <item name="android:typeface">monospace</item>
        <item name="android:textColor">@drawable/custom_selector_tab_text</item>
    </style>

用到的资源文件如下

custom_view_tab_page_indicator

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="false" android:state_pressed="false" android:drawable="@color/colorBg"/>
    <item android:state_selected="false" android:state_pressed="true" android:drawable="@color/colorBg"/>
    <item android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/custom_gradient"/>
    <item android:state_selected="true" android:state_pressed="true" android:drawable="@drawable/custom_gradient"/>
</selector>

custom_selector_tab_text

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:color="@android:color/white"/>
    <item android:state_pressed="true" android:color="@android:color/white"/>
    <item android:state_focused="true" android:color="@android:color/white"/>
    <item android:color="#98E8E2"/>

</selector>

渐变色资源文件

custom_gradient.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <gradient
        android:angle="90"
        android:endColor="#6BB6FF"
        android:startColor="#807CFF"/>

</shape>

用到的颜色值

 <color name="colorBg">#807CFF</color>

最后到AndroidManifest中设置一下MainActivity的主题

 <activity android:name=".MainActivity"
        android:theme="@style/StyledIndicators">

以上是全部代码，动手测试下吧。