Android开源框架ViewPagerIndicator的基本使用

很多新闻资讯类的app都有一些共性，那就是有一行页签，然后点击页签的内容后，会跳转到对应的页面。有很多此类app都是用到了ViewPagerIndicator这个开源框架。此篇博客就对这个框架的使用做一个笔记。后续随着在开发中不同的额使用场景，也会增加此博客的内容。

今天就先对他的使用方式，做一个介绍，完成一个小demo

首先，写一个布局。这个布局很简单，如果使用到，直接复制再根据实际需求稍作修改即可：

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
 
    <com.viewpagerindicator.TabPageIndicator
        android:id="@+id/indicator"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        />
    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        />
 
</LinearLayout>

接着就是主活动中的代码了：

package com.itydl.demo;
 
import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
 
import com.viewpagerindicator.TabPageIndicator;
 
public class MainActivity extends Activity {
	
	//定义一串数据源。这里是定义死的，当然大部分都是来源于网络解析的数据
	 private static final String[] CONTENT = new String[] { "Recent", "Artists", "Albums", "Songs", "Playlists", "Genres","Recent", "Artists", "Albums", "Songs", "Playlists", "Genres" };
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //固定使用布局
        setContentView(R.layout.activity_main);
        //获取实例
        ViewPager pager = (ViewPager)findViewById(R.id.pager);
        
        //设置viewpage的适配器
        MyAdapter adapter = new MyAdapter();
        pager.setAdapter(adapter);
 
        //把viewpage和TabPageIndicator关联
        TabPageIndicator indicator = (TabPageIndicator)findViewById(R.id.indicator);
        indicator.setViewPager(pager);
        
    }
    
    private class MyAdapter extends PagerAdapter{
 
		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return CONTENT.length;//告诉viewpage，我有多少条数据，要加载
		}
 
		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			// TODO Auto-generated method stub
			return arg0 == arg1;//官方推荐写法
		}
		
		/**
		 * 页签显示数据的方法
		 */
		@Override
        public CharSequence getPageTitle(int position) {
            return CONTENT[position];
        }
 
		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {
			// TODO Auto-generated method stub
			container.removeView((View) object);
		}
 
		@Override
		public Object instantiateItem(ViewGroup container, int position) {
 
			//先使每页page上显示text文本
			// 本page要展示的内容。替换掉Fragmenlayout那张白纸。 改变子类自己的界面数据与样式。暂时先用textview代表整块view
			TextView textView = new TextView(MainActivity.this);
			textView.setText(CONTENT[position]);//为每一页加载的page设置显示的内容
			textView.setTextSize(25);
			textView.setGravity(Gravity.CENTER);
			textView.setTextColor(Color.GREEN);
		
			//别忘记把view添加到page里面
			container.addView(textView);
			return textView;
 
		}
 
    }
}

 

可以看到，也是so easy嘛。可以直接运行啦，看一下效果图：

 

我们发现，的确奇丑无比。接下来就让他靓起来！那就要去配置一下样式了——

去开源框架提供的demo类中的配置文件，找到如下代码：

<activity
            android:name=".SampleTabsDefault"
            android:label="Tabs/Default"
            android:theme="@style/Theme.PageIndicatorDefaults">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="com.jakewharton.android.viewpagerindicator.sample.SAMPLE" />
            </intent-filter>
        </activity>

发现，它有一个样式 android:theme="@style/Theme.PageIndicatorDefaults"

 

那就把这个样式，复制到自己的activity的配置文件中来。好了，咱就使用系统自带的样式吧，运行看一看结果：

(*@ο@*) 哇～感觉好绚丽了！！什么？还是不满足？想定义自己喜欢的样式？没问题——

接下来就修改成自己喜欢的样式：

对自带的样式做修改：

style中：

<style name="Theme.PageIndicatorDefaults" parent="android:Theme">
       
        <item name="vpiTabPageIndicatorStyle">@style/Widget.TabPageIndicator</item>
    </style>
 
    <style name="Widget">
    </style>
 
    <style name="Widget.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">12dp</item>
        <item name="android:paddingBottom">12dp</item>
        <item name="android:textAppearance">@style/TextAppearance.TabPageIndicator</item>
        <item name="android:textSize">14sp</item>
        <item name="android:textColor">@color/vpi__dark_theme</item>
        <item name="android:maxLines">1</item>
    </style>
    
    <style name="TextAppearance.TabPageIndicator" parent="Widget">
        <item name="android:textStyle">bold</item>
       <!--  <item name="android:textColor">@color/vpi__dark_theme</item> -->
    </style>

 

drawable文件里的vpi__tab_indicator文件：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Non focused states -->
    <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@android:color/transparent" />
    <item android:state_focused="false" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/news_tab_item_bg_select" />
 
    <!-- Focused states -->
    <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@android:color/transparent" />
    <item android:state_focused="true" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/news_tab_item_bg_select" />
 
    <!-- Pressed -->
    <!--    Non focused states -->
    <item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="@android:color/transparent" />
    <item android:state_focused="false" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/news_tab_item_bg_select" />
 
    <!--    Focused states -->
    <item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="@android:color/transparent" />
    <item android:state_focused="true" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/news_tab_item_bg_select" />
</selector>

 

color里面的vpi__dark_theme

<selector xmlns:android="http://schemas.android.com/apk/res/android">
 
    <item android:state_enabled="false" android:color="#000000"/>
    <item android:state_window_focused="false" android:color="#000000"/>
    <item android:state_pressed="true" android:color="#ff0000"/>
    <item android:state_selected="true" android:color="#ff0000"/>
    <!-- item android:state_activated="true" android:color="@color/vpi__bright_foreground_holo_dark"/ -->
    <item android:color="#000000"/> <!-- not selected -->
 
</selector>

 

再运行一下：

 

这样看起来，就比较清爽了。如果想定义自己的样式，继续摸索改进就好了。