Android仿IOSViewPager滑動(dòng)進(jìn)度條

最近做項(xiàng)目，碰到如下的需求：ViewPager分頁，如果是6頁(包括6頁)就用圓點(diǎn)，如果是6頁以上就用進(jìn)度條來切換。前面一種交互方法最常見，用小圓點(diǎn)來表示當(dāng)前選中的頁面，這些小圓點(diǎn)稱為導(dǎo)航點(diǎn)，很多App都是這種實(shí)現(xiàn)方式。當(dāng)用戶第一次安裝或升級(jí)應(yīng)用時(shí)，都會(huì)利用導(dǎo)航頁面告訴用戶當(dāng)前版本的主要亮點(diǎn)，一般情況下當(dāng)行頁面有三部分組成，背景圖片，導(dǎo)航文字和滑動(dòng)的原點(diǎn)，即下面的效果：

創(chuàng)新互聯(lián)建站網(wǎng)絡(luò)公司擁有10多年的成都網(wǎng)站開發(fā)建設(shè)經(jīng)驗(yàn)，超過千家客戶的共同信賴。提供網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、網(wǎng)站開發(fā)、網(wǎng)站定制、外鏈、建網(wǎng)站、網(wǎng)站搭建、響應(yīng)式網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)師打造企業(yè)風(fēng)格，提供周到的售前咨詢和貼心的售后服務(wù)

Android仿IOS ViewPager滑動(dòng)進(jìn)度條

這里就不作詳細(xì)的講解，大家可以參考我以前寫過的博客：
ViewPager實(shí)現(xiàn)圖片輪翻效果
今天來實(shí)現(xiàn)ViewPager進(jìn)度條切換，主要邏輯如下：
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("當(dāng)前是第" + 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(); 
 
            // 設(shè)置滑塊的滑動(dòng), 手指第一次點(diǎn)下去把滑塊放到手指上 
            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; 
            } 
 
            // 設(shè)置滑塊的滑動(dòng) 
            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; 
 
            //設(shè)置popupWindow的彈出位置 
            if (mOnSlideChangeListener != null) { 
              if (currentPage == mTotalPage) { 
                //防止ViewPager越界 
                currentPage = mTotalPage - 1; 
              } 
 
              mOnSlideChangeListener.onSlideChange(currentPage); 
 
              if (mPopupWindow != null) { 
                mPopupText.setText(currentPage + ""); 
 
                //設(shè)置PopupWindow的滑動(dòng) 
                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; 
  } 
}

相關(guān)的單位轉(zhuǎn)化工具，大家可以拷貝到自己的項(xiàng)目中直接使用。
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);  
  } 
}

自定義組合控件，然后實(shí)現(xiàn)相關(guān)的手勢(shì)，思路很清晰，代碼也很詳細(xì)，這里就直接貼代碼了。
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

popup_window.xml

<?xml version="1.0" encoding="utf-8"?>

附上相關(guān)的資源文件：
shape_slide_bar_bg.xml

<?xml version="1.0" encoding="utf-8"?>

popup_window_bg.9.png

Android仿IOS ViewPager滑動(dòng)進(jìn)度條

效果如下：

Android仿IOS ViewPager滑動(dòng)進(jìn)度條

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)站標(biāo)題：Android仿IOSViewPager滑動(dòng)進(jìn)度條
地址分享：http://weahome.cn/article/gisccp.html

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

Android仿IOSViewPager滑動(dòng)進(jìn)度條

其他資訊

網(wǎng)站制作

企業(yè)服務(wù)

網(wǎng)站建設(shè)

服務(wù)器托管