Android仿IOS ViewPager滑动进度条

最近做项目，碰到如下的需求：ViewPager分页，如果是6页(包括6页)就用圆点，如果是6页以上就用进度条来切换。前面一种交互方法最常见，用小圆点来表示当前选中的页面，这些小圆点称为导航点，很多App都是这种实现方式。当用户第一次安装或升级应用时，都会利用导航页面告诉用户当前版本的主要亮点，一般情况下当行页面有三部分组成，背景图片，导航文字和滑动的原点，即下面的效果：

这里就不作详细的讲解，大家可以参考我以前写过的博客：
ViewPager实现图片轮翻效果
今天来实现ViewPager进度条切换，主要逻辑如下：
MainActivity.java

package com.jackie.slidebarviewdemo.activity; 
 
import android.os.Bundle; 
import android.support.v7.app.AppCompatActivity; 
import android.widget.TextView; 
 
import com.jackie.slidebarviewdemo.R; 
import com.jackie.slidebarviewdemo.widget.SlideBarView; 
 
public class MainActivity extends AppCompatActivity { 
  private SlideBarView mSlideBarView; 
  private TextView mTextView; 
 
  @Override 
  protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.activity_main); 
 
    mSlideBarView = (SlideBarView) findViewById(R.id.slide_bar); 
    mTextView = (TextView) findViewById(R.id.text_view); 
 
    mSlideBarView.setTotalPage(80); 
    mSlideBarView.setOnSlideChangeListener(new SlideBarView.OnSlideChangeListener() { 
      @Override 
      public void onSlideChange(int page) { 
        mTextView.setText("当前是第" + page + "页"); 
      } 
    }); 
  } 
} 

SlideBarView.java

package com.jackie.slidebarviewdemo.widget; 
 
import android.content.Context; 
import android.util.AttributeSet; 
import android.view.LayoutInflater; 
import android.view.MotionEvent; 
import android.view.View; 
import android.widget.LinearLayout; 
import android.widget.PopupWindow; 
import android.widget.RelativeLayout; 
import android.widget.TextView; 
 
import com.jackie.slidebarviewdemo.R; 
import com.jackie.slidebarviewdemo.utils.ConvertUtils; 
 
/** 
 * Created by Jackie on 2017/1/17. 
 */ 
 
public class SlideBarView extends RelativeLayout { 
  private LayoutInflater mInflater; 
 
  private RelativeLayout mSlideBarView; 
  private View mSlideBarBlock; 
 
  private PopupWindow mPopupWindow; 
  private TextView mPopupText; 
 
  private int mDp40; 
 
  private String mBound = "no"; // no表示没到边界，left为到左边界了，right表示到右边界了 
 
  public interface OnSlideChangeListener { 
    void onSlideChange(int page); 
  } 
 
  private OnSlideChangeListener mOnSlideChangeListener; 
  public void setOnSlideChangeListener(OnSlideChangeListener onSlideChangeListener) { 
    this.mOnSlideChangeListener = onSlideChangeListener; 
  } 
 
  public SlideBarView(Context context) { 
    this(context, null); 
  } 
 
  public SlideBarView(Context context, AttributeSet attrs) { 
    this(context, attrs, 0); 
  } 
 
  public SlideBarView(Context context, AttributeSet attrs, int defStyleAttr) { 
    super(context, attrs, defStyleAttr); 
 
    init(context); 
    initEvent(); 
  } 
 
  private void init(Context context) { 
    mInflater = LayoutInflater.from(context); 
    View slideBar = mInflater.inflate(R.layout.slide_bar, null); 
    LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT); 
    addView(slideBar, params); 
 
    mSlideBarView = (RelativeLayout) slideBar.findViewById(R.id.slide_bar_view); 
    mSlideBarBlock = slideBar.findViewById(R.id.slide_bar_block); 
 
    mDp40 = ConvertUtils.dip2px(context, 40); 
  } 
 
  private void initEvent() { 
    mSlideBarView.setOnTouchListener(new OnTouchListener() { 
      int currentX = 0; 
      int startX = 0; 
 
      @Override 
      public boolean onTouch(View v, MotionEvent event) { 
        switch (event.getAction()) { 
          case MotionEvent.ACTION_DOWN: 
            currentX = (int) event.getX(); 
            startX = (int) event.getX(); 
 
            // 设置滑块的滑动, 手指第一次点下去把滑块放到手指上 
            int downLeft = currentX - mSlideBarBlock.getMeasuredWidth() / 2; 
            int downTop = mSlideBarBlock.getTop(); 
            int downRight = downLeft + mSlideBarBlock.getWidth(); 
            int downBottom = mSlideBarBlock.getBottom(); 
 
            //边界检测 
            if (downLeft < 0) { 
              downLeft = 0; 
              downRight = mSlideBarBlock.getMeasuredWidth(); 
            } else if (downRight > mSlideBarView.getMeasuredWidth()) { 
              downLeft = mSlideBarView.getMeasuredWidth() - mSlideBarBlock.getMeasuredWidth(); 
              downRight = mSlideBarView.getMeasuredWidth(); 
            } 
 
            mSlideBarBlock.layout(downLeft, downTop, downRight, downBottom); 
            break; 
          case MotionEvent.ACTION_MOVE: 
            currentX = (int) event.getX(); 
            int currentPage = currentX * mTotalPage / mSlideBarView.getMeasuredWidth(); 
            if (currentPage < 0) { 
              currentPage = 0; 
            } else if (currentPage > mTotalPage) { 
              currentPage = mTotalPage; 
            } 
 
            // 设置滑块的滑动 
            int moveLeft = currentX - mSlideBarBlock.getMeasuredWidth() / 2; 
            int moveTop = mSlideBarBlock.getTop(); 
            int moveRight = moveLeft + mSlideBarBlock.getMeasuredWidth(); 
            int moveBottom = mSlideBarBlock.getBottom(); 
 
            //边界处理 
            if (moveLeft < 0) { 
              mBound = "left"; 
 
              moveLeft = 0; 
              moveRight = mSlideBarBlock.getMeasuredWidth(); 
            } else if (moveRight >= mSlideBarView.getMeasuredWidth()) { 
              mBound = "right"; 
 
              moveLeft = mSlideBarView.getMeasuredWidth() - mSlideBarBlock.getMeasuredWidth(); 
              moveRight = mSlideBarView.getMeasuredWidth(); 
            } else { 
              mBound = "no"; 
            } 
 
            mSlideBarBlock.layout(moveLeft, moveTop, moveRight, moveBottom); 
            startX = currentX; 
 
            //设置popupWindow的弹出位置 
            if (mOnSlideChangeListener != null) { 
              if (currentPage == mTotalPage) { 
                //防止ViewPager越界 
                currentPage = mTotalPage - 1; 
              } 
 
              mOnSlideChangeListener.onSlideChange(currentPage); 
 
              if (mPopupWindow != null) { 
                mPopupText.setText(currentPage + ""); 
 
                //设置PopupWindow的滑动 
                if (!mPopupWindow.isShowing()) { 
                  int[] location = new int[2]; 
                  mSlideBarView.getLocationInWindow(location); 
                  mPopupWindow.showAsDropDown(mSlideBarView, currentX, location[1] - mDp40); 
                } else { 
                  if ("no".equals(mBound)) { 
                    int[] location = new int[2] ; 
                    mSlideBarView.getLocationInWindow(location); 
                    mPopupWindow.update(currentX, location[1] - mDp40, mPopupWindow.getWidth(), mPopupWindow.getHeight(), true); 
                  } 
                } 
              } 
            } 
            break; 
          case MotionEvent.ACTION_UP: 
            currentX = 0; 
            startX = 0; 
            mPopupWindow.dismiss(); 
            break; 
        } 
 
        return true; 
      } 
    }); 
 
    // 初始化PopupWindow 
    View contentView = mInflater.inflate(R.layout.popup_window, null); 
    mPopupText = (TextView) contentView.findViewById(R.id.popup_text); 
    mPopupWindow = new PopupWindow(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT); 
    mPopupWindow.setContentView(contentView); 
    mPopupWindow.setOutsideTouchable(true); 
    mPopupWindow.setBackgroundDrawable(getResources().getDrawable(R.mipmap.popup_window_bg)); 
    mPopupWindow.setAnimationStyle(0); 
  } 
 
  int mTotalPage = 0; 
  public void setTotalPage(int totalPage) { 
    this.mTotalPage = totalPage; 
  } 
} 

相关的单位转化工具，大家可以拷贝到自己的项目中直接使用。
ConvertUtils.java

package com.jackie.slidebarviewdemo.utils; 
 
import android.content.Context; 
 
public class ConvertUtils { 
  public static int dip2px(Context context, float dpValue) { 
    final float scale = context.getResources().getDisplayMetrics().density; 
    return (int) (dpValue * scale + 0.5f); 
  } 
 
  public static int px2dip(Context context, float pxValue) { 
    final float scale = context.getResources().getDisplayMetrics().density; 
    return (int) (pxValue / scale + 0.5f); 
  } 
   
  public static int px2sp(Context context, float pxValue) { 
    final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;  
    return (int) (pxValue / fontScale + 0.5f);  
  }  
   
  public static int sp2px(Context context, float spValue) { 
    final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;  
    return (int) (spValue * fontScale + 0.5f);  
  } 
} 

自定义组合控件，然后实现相关的手势，思路很清晰，代码也很详细，这里就直接贴代码了。
activity_main.xml

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout 
  xmlns:android="http://schemas.android.com/apk/res/android" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent"> 
 
  <LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_centerInParent="true" 
    android:orientation="vertical"> 
 
    <com.jackie.slidebarviewdemo.widget.SlideBarView 
      android:id="@+id/slide_bar" 
      android:layout_width="match_parent" 
      android:layout_height="50dp" 
      android:layout_marginLeft="20dp" 
      android:layout_marginRight="20dp"/> 
 
    <TextView 
      android:id="@+id/text_view" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_gravity="center_horizontal" 
      android:layout_marginTop="20dp" 
      android:textColor="#000" 
      android:textSize="20dp" 
      android:text="当前是第0页"/> 
  </LinearLayout> 
</RelativeLayout> 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent"> 
 
  <RelativeLayout 
    android:id="@+id/slide_bar_view" 
    android:layout_width="match_parent" 
    android:layout_height="50dp"> 
 
    <View 
      android:layout_width="match_parent" 
      android:layout_height="5dp" 
      android:layout_centerInParent="true" 
      android:background="@drawable/shape_slide_bar_bg"/> 
 
    <View 
      android:id="@+id/slide_bar_block" 
      android:layout_width="20dp" 
      android:layout_height="14dp" 
      android:background="#b9b9b9" 
      android:layout_centerVertical="true" /> 
  </RelativeLayout> 
</RelativeLayout> 

popup_window.xml

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent"> 
  <RelativeLayout 
    android:layout_width="30dp" 
    android:layout_height="30dp"> 
    <TextView 
      android:id="@+id/popup_text" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:textColor="#fff" 
      android:textSize="16dp" 
      android:gravity="center" 
      android:layout_centerInParent="true" /> 
  </RelativeLayout> 
</RelativeLayout> 

附上相关的资源文件：
shape_slide_bar_bg.xml

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
  android:shape="rectangle"> 
  <solid android:color="#dcdcdc" /> 
  <corners android:radius="1dp"/> 
</shape> 

popup_window_bg.9.png

效果如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# Android  # ViewPager滑动进度条  # Android滑动进度条  # ViewPager进度条  # 模仿iOS版微信的滑动View效果  # iOS使用pageViewController实现多视图滑动切换  # iOS中3DTouch预览导致TableView滑动卡顿问题解决的方法  # iOS开发上下滑动UIScrollview隐藏或者显示导航栏的实例  # ios scrollview嵌套tableview同向滑动的示例  # iOS基于UIScrollView实现滑动引导页  # IOS仿今日头条滑动导航栏  # iOS滑动解锁、滑动获取验证码效果的实现代码  # iOS 页面滑动与标题切换颜色渐变的联动效果实例  # iOS自定义View实现卡片滑动  # 滑块  # 就用  # 自己的  # 都是  # 进度条  # 小圆点  # 也很  # 弹出  # 分页  # 自定义  # 不作  # 来实现  # 没到  # 最常见  # 写过  # 大家多多  # 去把  # 很清晰  # 圆点  # 我以前 

相关文章： 网站微信制作软件,如何制作微信链接？  我的世界制作壁纸网站下载,手机怎么换我的世界壁纸？  南平网站制作公司,2025年南平市事业单位报名时间？  微网站制作教程,我微信里的网站怎么才能复制到浏览器里？  制作旅游网站html,怎样注册旅游网站？  如何选择靠谱的建站公司加盟品牌？  php条件判断怎么写_ifelse和switchcase的使用区别【对比】  如何有效防御Web建站篡改攻击？  如何通过商城免费建站系统源码自定义网站主题？  建站之星安装需要哪些步骤及注意事项？  免费网站制作appp,免费制作app哪个平台好？  如何自己制作一个网站链接,如何制作一个企业网站，建设网站的基本步骤有哪些？  c# 在高并发下使用反射发射（Reflection.Emit）的性能  如何快速搭建高效WAP手机网站吸引移动用户？  常州自助建站：操作简便模板丰富，企业个人快速搭建网站  教学论文网站制作软件有哪些,写论文用什么软件 ？  已有域名和空间如何搭建网站？  佛山网站制作系统,佛山企业变更地址网上办理步骤？  企业宣传片制作网站有哪些,传媒公司怎么找企业宣传片项目？  家具网站制作软件,家具厂怎么跑业务？  北京制作网站的公司,北京铁路集团官方网站？  ,在苏州找工作，上哪个网站比较好？  小型网站制作HTML,*游戏网站怎么搭建？  如何制作公司的网站链接,公司想做一个网站，一般需要花多少钱？  建站之星导航菜单设置与功能模块配置全攻略  官网自助建站系统：SEO优化+多语言支持，快速搭建专业网站  威客平台建站流程解析：高效搭建教程与设计优化方案  Python文件管理规范_工程实践说明【指导】  矢量图网站制作软件,用千图网的一张矢量图做公司app首页，该网站并未说明版权等问题，这样做算不算侵权？应该如何解决？  上海网站制作网站建设公司,建筑电工证网上查询系统入口？  制作门户网站的参考文献在哪,小说网站怎么建立？  零基础网站服务器架设实战：轻量应用与域名解析配置指南  h5在线制作网站电脑版下载,h5网页制作软件？  网页设计网站制作软件,microsoft office哪个可以创建网页？  如何在宝塔面板创建新站点？  建站之星CMS建站配置指南：模板选择与SEO优化技巧  详解免费开源的DotNet二维码操作组件ThoughtWorks.QRCode（.NET组件介绍之四）  如何用IIS7快速搭建并优化网站站点？  盐城做公司网站,江苏电子版退休证办理流程？  宝塔建站无法访问？如何排查配置与端口问题？  大型企业网站制作流程,做网站需要注册公司吗？  高性能网站服务器配置指南：安全稳定与高效建站核心方案  建站VPS推荐：2025年高性能服务器配置指南  小捣蛋自助建站系统：数据分析与安全设置双核驱动网站优化  如何快速配置高效服务器建站软件？  黑客如何通过漏洞一步步攻陷网站服务器？  ,想在网上投简历，哪几个网站比较好？  广州网站制作的公司,现在专门做网站的公司有没有哪几家是比较好的，性价比高，模板也多的？  如何在腾讯云免费申请建站？  如何在阿里云完成域名注册与建站？