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">

以上是全部代碼，動手測試下吧。