上一篇：《Android ViewPager初探：让页面滑动起来》

ViewPager只是左右滑动有些丑，也不知道当前位于第几页面。

可以在上方加入滑动指示条，来确定当前位置。

只需要修改activity_main.xml和MainActivity.java即可，Adapter没什么要更改的。

首先，在activity_main.xml这个主页面中，修改根布局为LinearLayout，并增加布局TAB：

  1.  <LinearLayout
  2.          android:id="@+id/ll_tab"
  3.          android:layout_width="match_parent"
  4.          android:layout_height="45dp"
  5.          android:background="#FFFFFF" >
  6.  
  7.          <TextView
  8.              android:id="@+id/tv_first"
  9.              android:layout_width="match_parent"
  10.              android:layout_height="match_parent"
  11.              android:layout_weight="1"
  12.              android:gravity="center"
  13.              android:text="First"
  14.              android:textSize="20sp" />
  15.  
  16.          <TextView
  17.              android:id="@+id/tv_second"
  18.              android:layout_width="match_parent"
  19.              android:layout_height="match_parent"
  20.              android:layout_weight="1"
  21.              android:gravity="center"
  22.              android:text="Second"
  23.              android:textSize="20sp" />
  24.  
  25.          <TextView
  26.              android:id="@+id/tv_third"
  27.              android:layout_width="match_parent"
  28.              android:layout_height="match_parent"
  29.              android:layout_weight="1"
  30.              android:gravity="center"
  31.              android:text="Third"
  32.              android:textSize="20sp" />
  33.      </LinearLayout>

TAB布局下，应该有滑动指示条。在网上找了个图片命名为slidebar，放在mipmap-hdpi文件夹下，对应的布局为：

  1.  <ImageView
  2.          android:id="@+id/cursor"
  3.          android:layout_width="match_parent"
  4.          android:layout_height="wrap_content"
  5.          android:scaleType="matrix"
  6.          android:src="@mipmap/slidebar"
  7.          android:contentDescription="slidebar"/>

对于cursor这个滑动条指示器，首先定义需要的参数：

  1.  /*滑动条相关定义*/
  2.  private ImageView cursor;
  3.  private int bmp_width = 0;//游标宽度
  4.  private int offset = 0;//游标图片偏移量
  5.  private int number = 0;//当前页面编号

其次应该初始化它的位置：

  1.  //初始化指示器位置
  2.      public void initCursorPos() {
  3.          // 初始化动画
  4.          cursor = (ImageView) findViewById(R.id.cursor);
  5.          bmp_width = BitmapFactory.decodeResource(getResources(), R.mipmap.slidebar)
  6.                  .getWidth();// 获取图片宽度
  7.  
  8.          DisplayMetrics dm = new DisplayMetrics();//初始化DisplayMetrics对象
  9.          getWindowManager().getDefaultDisplay().getMetrics(dm);//将当前窗口信息放入DisplayMetrics类中
  10.          int s_width = dm.widthPixels;// 获取分辨率宽度
  11.          offset = (s_width / viewList.size() - bmp_width) / 2;// 计算偏移量(保证滑动条在该tab下正中间)
  12.  
  13.          Matrix matrix = new Matrix();
  14.          matrix.postTranslate(offset, 0);
  15.          cursor.setImageMatrix(matrix);// 设置动画初始位置
  16.      }

Andorid.util 包下的DisplayMetrics 类提供了一种关于显示的通用信息，如显示大小，分辨率和字体。

DisplayMetrics dm = new DisplayMetrics();这句初始化了DisplayMetrics对象，但并未保存信息。

getWindowManager().getDefaultDisplay().getMetrics(dm);这句是获取当前窗口信息，并放入dm中。

偏移量的计算参考了网上例子，让滑动条处于正下方中间。

滑动指示条的移动需要跟随viewpager页面改变，这意味着要设置监听：（此处代码参考自：http://blog.csdn.net/harvic880925/article/details/38557517）

  1.  //页面改变监听器
  2.      public class NewPageChangeListener implements ViewPager.OnPageChangeListener {
  3.  
  4.          int one = offset * 2 + bmp_width;// 页卡1 -> 页卡2 偏移量
  5.          int two = one * 2;// 页卡1 -> 页卡3 偏移量
  6.  
  7.          @Override
  8.          public void onPageSelected(int arg0) {
  9.              Animation animation = null;
  10.              switch (arg0) {
  11.                  case 0:
  12.                      if (number == 1) {
  13.                          animation = new TranslateAnimation(one, 0, 0, 0);
  14.                      } else if (number == 2) {
  15.                          animation = new TranslateAnimation(two, 0, 0, 0);
  16.                      }
  17.                      break;
  18.                  case 1:
  19.                      if (number == 0) {
  20.                          animation = new TranslateAnimation(offset, one, 0, 0);
  21.                      } else if (number == 2) {
  22.                          animation = new TranslateAnimation(two, one, 0, 0);
  23.                      }
  24.                      break;
  25.                  case 2:
  26.                      if (number == 0) {
  27.                          animation = new TranslateAnimation(offset, two, 0, 0);
  28.                      } else if (number == 1) {
  29.                          animation = new TranslateAnimation(one, two, 0, 0);
  30.                      }
  31.                      break;
  32.              }
  33.              number = arg0;
  34.              animation.setFillAfter(true);// True:图片停在动画结束位置
  35.              animation.setDuration(300);
  36.              cursor.startAnimation(animation);
  37.          }
  38.  
  39.          @Override
  40.          public void onPageScrolled(int arg0, float arg1, int arg2) {
  41.          }
  42.  
  43.          @Override
  44.          public void onPageScrollStateChanged(int arg0) {
  45.          }
  46.      }

最后，在onCreate()函数内，加上监听操作：

  1.  viewPager.setCurrentItem(0);//设置当前页
  2.  viewPager.setOnPageChangeListener(new NewPageChangeListener());//监听页面改变

到此，滑动条和viewpager就结合了。

如果希望点击tab块，能跳转到相应页面，则需要加上监听操作：

  1.  /*Tab页面参数*/
  2.  private TextView tv_first;
  3.  private TextView tv_second;
  4.  private TextView tv_third;

onCreate()里：

  1.  /*TAB页初始化*/
  2.  tv_first = (TextView)findViewById(R.id.tv_first);
  3.  tv_second = (TextView)findViewById(R.id.tv_second);
  4.  tv_third = (TextView)findViewById(R.id.tv_third);
  5.  
  6.  /*Tab页面监听*/
  7.  tv_first.setOnClickListener(new TabOnClickListener(0));
  8.  tv_second.setOnClickListener(new TabOnClickListener(1));
  9.  tv_third.setOnClickListener(new TabOnClickListener(2));

对应的监听函数：

  1.  /*Tab页面点击监听*/
  2.      public class TabOnClickListener implements View.OnClickListener{
  3.          private int num = 0;
  4.  
  5.          public TabOnClickListener(int index){
  6.              num = index;
  7.          }
  8.  
  9.          @Override
  10.          public void onClick(View v){
  11.              viewPager.setCurrentItem(num);
  12.          }
  13.      }

最后附上MainActivity的完整代码：

  1.  package com.example.viewpager.myapplication;
  2.  
  3.  import android.app.Activity;
  4.  import android.graphics.BitmapFactory;
  5.  import android.graphics.Matrix;
  6.  import android.os.Bundle;
  7.  import android.support.v4.view.ViewPager;
  8.  import android.util.DisplayMetrics;
  9.  import android.view.LayoutInflater;
  10.  import android.view.View;
  11.  import android.view.animation.Animation;
  12.  import android.view.animation.TranslateAnimation;
  13.  import android.widget.ImageView;
  14.  import android.widget.TextView;
  15.  
  16.  import java.util.ArrayList;
  17.  import java.util.List;
  18.  
  19.  public class MainActivity extends Activity {
  20.      private View first,second,third;
  21.      private ViewPager viewPager;//对应 <android.support.v4.view.ViewPager/>控件
  22.      private List<View> viewList;//View数组
  23.  
  24.      /*滑动条相关定义*/
  25.      private ImageView cursor;
  26.      private int bmp_width = 0;//游标宽度
  27.      private int offset = 0;//游标图片偏移量
  28.      private int number = 0;//当前页面编号
  29.  
  30.      /*Tab页面参数*/
  31.      private TextView tv_first;
  32.      private TextView tv_second;
  33.      private TextView tv_third;
  34.  
  35.      @Override
  36.      protected void onCreate(Bundle savedInstanceState) {
  37.          super.onCreate(savedInstanceState);
  38.          setContentView(R.layout.activity_main);
  39.  
  40.          /*TAB页初始化*/
  41.          tv_first = (TextView)findViewById(R.id.tv_first);
  42.          tv_second = (TextView)findViewById(R.id.tv_second);
  43.          tv_third = (TextView)findViewById(R.id.tv_third);
  44.  
  45.          /*初始化*/
  46.          viewPager = (ViewPager)findViewById(R.id.viewpager);
  47.          LayoutInflater inflater = getLayoutInflater();
  48.          first = inflater.inflate(R.layout.first_page,null);
  49.          second = inflater.inflate(R.layout.second_page,null);
  50.          third = inflater.inflate(R.layout.third_page,null);
  51.  
  52.          viewList = new ArrayList<View>();// 将要分页显示的View装入数组中
  53.          viewList.add(first);
  54.          viewList.add(second);
  55.          viewList.add(third);
  56.  
  57.          //初始化指示器位置
  58.          initCursorPos();
  59.  
  60.          /*适配器部分*/
  61.          NewPagerAdapter pagerAdapter = new NewPagerAdapter(viewList);
  62.          viewPager.setAdapter(pagerAdapter);
  63.  
  64.          viewPager.setCurrentItem(0);//设置当前页
  65.          viewPager.setOnPageChangeListener(new NewPageChangeListener());//监听页面改变
  66.  
  67.          /*Tab页面监听*/
  68.          tv_first.setOnClickListener(new TabOnClickListener(0));
  69.          tv_second.setOnClickListener(new TabOnClickListener(1));
  70.          tv_third.setOnClickListener(new TabOnClickListener(2));
  71.      }
  72.  
  73.      //初始化指示器位置
  74.      public void initCursorPos() {
  75.          // 初始化动画
  76.          cursor = (ImageView) findViewById(R.id.cursor);
  77.          bmp_width = BitmapFactory.decodeResource(getResources(), R.mipmap.slidebar)
  78.                  .getWidth();// 获取图片宽度
  79.  
  80.          DisplayMetrics dm = new DisplayMetrics();//初始化DisplayMetrics对象
  81.          getWindowManager().getDefaultDisplay().getMetrics(dm);//将当前窗口信息放入DisplayMetrics类中
  82.          int s_width = dm.widthPixels;// 获取分辨率宽度
  83.          offset = (s_width / viewList.size() - bmp_width) / 2;// 计算偏移量(保证滑动条在该tab下正中间)
  84.  
  85.          Matrix matrix = new Matrix();
  86.          matrix.postTranslate(offset, 0);
  87.          cursor.setImageMatrix(matrix);// 设置动画初始位置
  88.      }
  89.  
  90.      //页面改变监听器
  91.      public class NewPageChangeListener implements ViewPager.OnPageChangeListener {
  92.  
  93.          int one = offset * 2 + bmp_width;// 页卡1 -> 页卡2 偏移量
  94.          int two = one * 2;// 页卡1 -> 页卡3 偏移量
  95.  
  96.          @Override
  97.          public void onPageSelected(int arg0) {
  98.              Animation animation = null;
  99.              switch (arg0) {
  100.                  case 0:
  101.                      if (number == 1) {
  102.                          animation = new TranslateAnimation(one, 0, 0, 0);
  103.                      } else if (number == 2) {
  104.                          animation = new TranslateAnimation(two, 0, 0, 0);
  105.                      }
  106.                      break;
  107.                  case 1:
  108.                      if (number == 0) {
  109.                          animation = new TranslateAnimation(offset, one, 0, 0);
  110.                      } else if (number == 2) {
  111.                          animation = new TranslateAnimation(two, one, 0, 0);
  112.                      }
  113.                      break;
  114.                  case 2:
  115.                      if (number == 0) {
  116.                          animation = new TranslateAnimation(offset, two, 0, 0);
  117.                      } else if (number == 1) {
  118.                          animation = new TranslateAnimation(one, two, 0, 0);
  119.                      }
  120.                      break;
  121.              }
  122.              number = arg0;
  123.              animation.setFillAfter(true);// True:图片停在动画结束位置
  124.              animation.setDuration(300);
  125.              cursor.startAnimation(animation);
  126.          }
  127.  
  128.          @Override
  129.          public void onPageScrolled(int arg0, float arg1, int arg2) {
  130.          }
  131.  
  132.          @Override
  133.          public void onPageScrollStateChanged(int arg0) {
  134.          }
  135.      }
  136.  
  137.      /*Tab页面点击监听*/
  138.      public class TabOnClickListener implements View.OnClickListener{
  139.          private int num = 0;
  140.  
  141.          public TabOnClickListener(int index){
  142.              num = index;
  143.          }
  144.  
  145.          @Override
  146.          public void onClick(View v){
  147.              viewPager.setCurrentItem(num);
  148.          }
  149.      }
  150.  
  151.  }

MainActivity.java

Android ViewPager再探：增加滑动指示条的更多相关文章

  1. ViewPager 详解（四）----自主实现滑动指示条

    前言:前面我们用了三篇的时间讲述了有关ViewPager的基础知识,到这篇就要进入点实际的了.在第三篇<ViewPager 详解(三)---PagerTabStrip与PagerTitleStr ...

  2. Android ViewPager+HorizontalScrollView实现标题栏滑动(腾讯新闻)

    1) ViewPager提供了左右滑动切换页面的方法,但是它所提供的标题只是无语,估计没有真正的项目会照搬拿过来;并且它只能一页一页滑,我想直接查看最后一页要滑半天; 2) 看了腾讯新闻客户端感觉体验 ...

  3. ViewPager+Fragment再探：和TAB滑动条一起三者结合

    Fragment前篇: <Android Fragment初探:静态Fragment组成Activity> ViewPager前篇: <Android ViewPager初探:让页面 ...

  4. Android ViewPager初探：让页面滑动起来

    下一篇:<Android ViewPager再探:增加滑动指示条> ViewPager需要用到适配器PagerAAdapter,以下四个函数需要重写: instantiateItem(Vi ...

  5. （转）Android SlidingTabLayout定制分割线和指示条颜色

    本文转载与:http://blog.csdn.net/zhangphil/article/details/48863347 Android SlidingTabLayout默认的滑动指示条是系统默认的 ...

  6. Android Material Design:滑动指示选项卡android.support.design.widget.TabLayout的简单使用

    该TabLayout的功用,简单的说,就是当用户在该TabLayout的选项卡子item中选择触摸时候,文字和下方的指示器横条滑动指示.这个功能就是以前APP开发常用的选项卡某一卡片被切换.选中时候的 ...

  7. Android 使用ViewPager实现左右循环滑动图片

    ViewPager这个小demo实现的是可以左右循环滑动图片,下面带索引,滑到最后一页在往右滑动就要第一页,第一页往左滑动就到最后一页,先上效果图,用美女图片是我一贯的作风,呵呵 1.    首先看一 ...

  8. android:改动PagerTabStrip中的背景颜色，标题字体的样式、颜色和图标以及指示条的颜色

    1.改动PagerTabStrip中的背景颜色 我们在布局中直接设置background属性就可以: <android.support.v4.view.ViewPager android:id= ...

  9. android:更改PagerTabStrip背景颜色，标题字体样式、颜色和图标，以及指示条的颜色

    1.更改PagerTabStrip背景颜色 我们直接在布局中设置background属性可以: <android.support.v4.view.ViewPager android:id=&qu ...

随机推荐

  1. linux kernel: possible SYN flooding on port 8080. Sending cookie

    possible SYN flooding on port 7244. Sending cookie

  2. Subway Icon Set – 306个像素完美的特制图标

    这个图标集是306个优化的像素完美,精雕细琢的图标.为这些设备进行了优化:iOS.Windows Phone.Windows 8 and BlackBerry 10,提供 PNG, SVG, XALM ...

  3. Sql Server Always On主库与附库遇到的问题

    使用Always On的时候永远要记住只有一个主数据库可写,如果写的话要不在监听节点上做写的操作,要不只在主数据库上写的操作不然只读库无法读写

  4. 部署基于国际版Azure的SharePoint三层架构服务器场

    前言 微软Azure国际版已经很普及了,这里没有用国内版(世纪互联),用的是国际版,当然是由于公司性质的缘故.这里一步步图文的方式,分享给大家创建Azure国际版的SharePoint三层架构的过程, ...

  5. MyEclipse 2015 CI 14发布（附下载）

    支持Web和Node.jsd的JavaScript Debugger调试器,新版本功能更加强大,在MyEclipse调试web应用程序变得更方便.调试器支持断点.变量和表达式. 类的动态预加载用Hot ...

  6. 优化MySchool数据库（四）

    关于“无法附件数据库”过程的遇到的问题: 1.数据文件本身,具有访问权限的限制 ---- 选中 数据库文件所在的文件夹---->右键菜单(属性)----> 安全 --->User用户 ...

  7. Java 线程通信

    线程通信用来保证线程协调运行,一般在做线程同步的时候才需要考虑线程通信的问题. 1.传统的线程通信 通常利用Objeclt类提供的三个方法: wait() 导致当前线程等待,并释放该同步监视器的锁定, ...

  8. 深入理解Objective-C Runtime

    一.简介 主要特点: 在OC语言中,函数的调用是属于动态调用的,编译阶段并不确定要调用的函数,在真正的运行时才会根据函数名查找要调用哪个函数. 而在C语言中,函数的调用是在编译阶段就已经确定要调用哪个 ...

  9. 关于PHP的curl开启问题

    今天在做一个新浪登录功能,新浪提供的PHP SDK里需要用到curl_init()函数,在调试的时候报找不到curl_init()的方法. 经搜索得知需要开启curl的php扩展,那curl又是什么呢 ...

  10. 网站错误记录：A transport-level error has occurred when sending the request to the server.

    今天查看公司项目的日志文件,发现有这个错误:A transport-level error has occurred when sending the request to the server. 感 ...