转载本博客请注明出处:点击打开链接    http://blog.csdn.net/qq_32059827/article/details/52495647

很多新闻资讯类的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>

再运行一下:

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

Android开源框架ViewPagerIndicator的基本使用的更多相关文章

  1. Android开源框架ViewPageIndicator和ViewPager实现Tab导航

    前言: 关于使用ViewPageIndicator和ViewPager实现Tab导航,在开发社区里已经有一堆的博客对其进行了介绍,假设我还在这里写怎样去实现.那简直就是老生常谈,毫无新奇感,并且.我也 ...

  2. Android 开源框架Universal-Image-Loader学习

    Android 开源框架Universal-Image-Loader完全解析(一)--- 基本介绍及使用 Android 开源框架Universal-Image-Loader完全解析(二)--- 图片 ...

  3. Android 开源框架Universal-Image-Loader完全解析(三)---源代码解读

    转载请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/39057201),请尊重他人的辛勤劳动成果,谢谢! 本篇文章 ...

  4. Android 开源框架Universal-Image-Loader完全解析(二)--- 图片缓存策略详解

    转载请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/26810303),请尊重他人的辛勤劳动成果,谢谢! 本篇文章 ...

  5. Android进阶笔记13:RoboBinding(实现了数据绑定 Presentation Model(MVVM) 模式的Android开源框架)

    1.RoboBinding RoboBinding是一个实现了数据绑定 Presentation Model(MVVM) 模式的Android开源框架.从简单的角度看,他移除了如addXXListen ...

  6. android 开源框架推荐

    同事整理的 android 开源框架,个个都堪称经典.32 个赞! 1.volley 项目地址 https://github.com/smanikandan14/Volley-demo (1)  JS ...

  7. Android 开源框架Universal-Image-Loader全然解析(二)--- 图片缓存策略具体解释

    转载请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/26810303),请尊重他人的辛勤劳动成果,谢谢! 本篇文章 ...

  8. Android开源框架Afinal第一篇——揭开圣女的面纱

    Android开源框架Afinal第一篇——揭开圣女的面纱 分类: Android开源框架哪点事2013-09-02 14:25 260人阅读 评论(0) 收藏 举报 Afinal 这是Afinal在 ...

  9. 六款值得推荐的Android开源框架简介

    技术不再多,知道一些常用的.不错的就够了.下面就是最近整理的“性价比”比较高的Android开源框架,应该是相对实用的. 1.volley 项目地址 https://github.com/smanik ...

随机推荐

  1. [SDOI2011]黑白棋

    Description 小A和小B又想到了一个新的游戏. 这个游戏是在一个1*n的棋盘上进行的,棋盘上有k个棋子,一半是黑色,一半是白色. 最左边是白色棋子,最右边是黑色棋子,相邻的棋子颜色不同. 小 ...

  2. [SDOI2014]数表

    题目描述 有一张N*m的数表,其第i行第j列(1 < =i < =礼,1 < =j < =m)的数值为能同时整除i和j的所有自然数之和.给定a,计算数表中不大于a的数之和. 输 ...

  3. 冰精冻西瓜[P3787洛谷]

    题目描述 琪露诺是拥有操纵冷气程度的能力的妖精,一天她发现了一片西瓜地.这里有n个西瓜,由n-1条西瓜蔓连接,形成一个有根树,琪露诺想要把它们冷冻起来慢慢吃. 这些西瓜蔓具有神奇的性质,可以将经过它的 ...

  4. 关于快速沃尔什变换(FWT)的一点学习和思考

    最近在学FWT,抽点时间出来把这个算法总结一下. 快速沃尔什变换(Fast Walsh-Hadamard Transform),简称FWT.是快速完成集合卷积运算的一种算法. 主要功能是求:,其中为集 ...

  5. 【Codeforces Round 438 A B C D 四个题】

    题目所在比赛的地址在这里呀 A. Bark to Unlock ·述大意:       输入一个目标串.然后输入n(1<=n<=100)个串,询问是否可以通过这些串收尾相接或者它本身拼出目 ...

  6. Django Class Views

    一.Base views View class django.views.generic.base.View 主要的基于类的基本视图.所有其他基于类的视图都从这个基类继承而来.它不是一个通用的视图,因 ...

  7. Git常用命令及常见问题解决

    $ mkdir xxx       ----创建xxx目录 $ cd learngit     ----切到xxx目录下 $ pwd               ----查看当前文件所在目录 $ gi ...

  8. Redis持久化的两种方式(RDB和AOF)

    redis提供了两种持久化的方式,分别是RDB(Redis DataBase)和AOF(Append Only File). RDB,简而言之,就是在不同的时间点,将redis存储的数据生成快照并存储 ...

  9. TP中的AJAX返回ajaxReturn()

    系统支持任何的AJAX类库,Action类提供了ajaxReturn方法用于AJAX调用后返回数据给客户端.并且支持JSON.XML和EVAL三种方式给客户端接受数据,通过配置DEFAULT_AJAX ...

  10. JAVA 练习 找出素数

    package com.zhang.hello; public class Task { /** * 1. 输出打印九九乘法表 * */ public void NO1(){ for(int i=1; ...