ViewPager的指示标跟随ViewPager滑动而滑动

1. 实现效果:

大体上的效果如上,因为是项目中的一部分,所以只截取了部分。

2. 思路

其实最开始,我是想通过动态的移动一个控件去实现的,但是试了试scrollBy和scrollTo好像没什么卵用,我就忧伤了,这尼玛怎么实现?

因为开始就没有想过用动画去实现移动,而且用动画实现的效果网上有现成的代码了,所以再写没什么意思啊。

我有篇文章专门谈到过关于OnPageChangeListener中的几个方法,各有什么用,大家可以移步去看看。其实今天这个东西没什么很玄的东西,自己想通了之后就觉得这也太简单了,如果我写篇博客,在技术大牛们面前估计毛线都不值一提啊,但是我还是想写。。。

好了,啰嗦了那么多,其实最后我的实现方式就是通过自定义View来实现的,代码很简单。

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

public class RedCursorView extends View {

	private int cursorColor = Color.RED; // 线的颜色
	private int counts = 2; // 被分成了几块
	private float posX = 0f; // 当前X坐标的位置
	private Paint paint;

	public RedCursorView(Context context, AttributeSet attrs, int defStyleAttr) {
		super(context, attrs, defStyleAttr);
		init();
	}

	public RedCursorView(Context context, AttributeSet attrs) {
		super(context, attrs);
		init();
	}

	public RedCursorView(Context context) {
		super(context);
		init();
	}

	private void init() {
		// 初始化画笔
		paint = new Paint();
		paint.setAntiAlias(true);
		paint.setDither(true);
		paint.setColor(cursorColor);
	}

	/**
	 * 设置ViewPager有几块
	 * @param counts
	 */
	public void setCounts(int counts) {
		this.counts = counts;
	}

	/**
	 * 设置坐标
	 * @param pos 当前的item
	 * @param rate 变化率
	 */
	public void setXY(int pos, float rate) {
		int single = getMeasuredWidth() / counts;
		posX = pos * single + single * rate;
		invalidate();
	}

	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		paint.setStrokeWidth(getMeasuredHeight());
		int width = getMeasuredWidth() / counts - 2;
		canvas.drawLine(posX, 0, posX + width, 0, paint);
	}

}

一看就懂,调用的时候只用调用:

@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
	cursor.setXY(position, positionOffset);
}

就行了,想想真的很简单,我之前居然还觉得很难,我也真是醉了。。。

时间: 2024-12-14 00:28:06

ViewPager的指示标跟随ViewPager滑动而滑动的相关文章

ViewPager 详解(四)----自主实现滑动指示条

ViewPager 详解(四)----自主实现滑动指示条 - harvic - 博客频道 - CSDN.NET 前言:前面我们用了三篇的时间讲述了有关ViewPager的基础知识,到这篇就要进入点实际的了.在第三篇<ViewPager 详解(三)---PagerTabStrip与PagerTitleStrip添加标题栏的异同>中,我们说了,PagerTabStrip和PagerTitleStrip都不适合用在实际用途中,当要在实际运用中,我们就要自己去实现相关的功能.这篇文章中单纯讲述划动指示

三行代码接入,社交软件打字时底下弹出的表情布局,自定义ViewPager+页面点标+各种功能的android小框架。

(转载请声明出处:http://www.cnblogs.com/linguanh/) 前言: 接上次分享的 ListView 动态加载类,入口:http://www.cnblogs.com/linguanh/p/4645115.html  这次分享给大家的是,刚些写好的类似社交软件打字时地下弹出的表情布局. 先看下我的默认效果图. 该效果图里面使用的图片资源,是默认的IC_lanucher,在我的类里面,你可以自定义,包括布局,几行几列,什么的,都可以自定义.底下的是小点标. 下集预告:我将在使

Android:简单实现ViewPager+TabHost+TabWidget实现导航栏导航和滑动切换

viewPager是v4包里的一个组件,可以实现滑动显示多个界面. android也为viewPager提供了一个adapter,此adapter最少要重写4个方法: public int getCount() public boolean isViewFromObject(View view, Object o) public void destroyItem(ViewGroup container, int position, Object object)  public Object in

Android为ViewPager增加切换动画——自定义ViewPager

转载请注明出处:http://blog.csdn.net/allen315410/article/details/44224517 在上篇博客中,我写了一个使用属性动画为ViewPager添加切换动画的方法,并且可以兼容到Android3.0以下版本的设备上,那么关于为ViewPager添加动画的方式还会有另外一种实现方案,就是自定义一个自己带动画效果的ViewPager,关于上篇博客,还没来得及查看的朋友可以点击这里进行查看.下面,我们将新建一个工程,来说说怎样自定义一个自带切换动画效果的Vi

Android开发之手势滑动(滑动手势监听)

在Android应用中,经常需要手势滑动操作,比如上下滑动,或左右方向滑动,处理手势滑动通常有两种方法:一种是单独实现setOnTouchListener监听器来,另一种是构建手势探测器 第一种方法,就是在要实现滑动的View中,实现OnTouchListener监听事件,然后判断KeyDonw和KeyUp 直接的位置距离来判断滑动方向,核心实现代码如下: /** * 设置上下滑动作监听器 * @author caizhiming */ private void setGestureListen

android ViewPager左右滑动实现导航栏的背景随页面滑动而滑动

实现viewPager和导航栏进行结合的效果图:废话不说直接上图看效果:      随着左右的滑动背景的黄色也随着滑动,代码如下: 布局  weibo_2.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width=

Fragment嵌套ViewPager切换后数据消失ViewPager空白问题

先描述一下现象 如图 解决后如图 之前先在网上找了很多的解决办法,有的网友说要继承FragmentStatePagerAdapter替换掉FragmentPagerAdapter我试了试没管用.后来在解决如下 此方法为初始化ViewPager private void init() { fragmentsList = new ArrayList(); manager = getFragmentManager(); fragmentsList = new ArrayList<Fragment>(

viewpager切换添加动画效果viewpager切换添加动画效果--IT蓝豹

viewpager切换添加动画效果,本项目中主要有三种切换特效,(1):DepthPageTransformer 效果(2):RotateDownPageTransformer 每一个view切换的时候旋转(3):ZoomOutPageTransformer 效果主要实现代码:  mViewPager.setPageTransformer(true,new ZoomOutPageTransformer());  mViewPager.setPageTransformer(true,new Rot

固定在网页顶部跟随滚动条滑动而滑动的DIV层

在一个页面放2个悬浮框,悬浮框随页面的上下滚动有上下波动的效果,最终固定在同一位置 体验效果:http://hovertree.com/texiao/jsstudy/1/ 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavScript页面悬浮框- 何问起</title><base t