带标签的viewpager自动切换+滑动切换+点击标签切换 带动画效果

公司大神的设计师设计了那种以前网页中的广告效果，就是图片自动切换，下面的标签也跟着切换，还是左右移动的那种，android应用我是没发现有这种效果的，没办法，只能自己研究了，大概构思了一下，发现也是挺简单的，就加动画效果就好了。

最终做出来的效果图

 

先加定时器

	@Override
	protected void onResume() {
		scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();
		// onStart之后每4秒执行ScrollTask
		scheduledExecutorService.scheduleAtFixedRate(new ScrollTask(), 4, 5,
				TimeUnit.SECONDS);
		super.onResume();
	};

	@Override
	protected void onPause() {
		scheduledExecutorService.shutdown();
		super.onPause();
	}

/**
	 * 切换页面
	 */
	private class ScrollTask implements Runnable {

		public void run() {
			if (isPlay)
				return;
			synchronized (pager) {
				changeOrientation();
				if (shiftLeft)
					currentPage--;
				else
					currentPage++;
				handler.sendEmptyMessage(7);
			}
		}
	}

oncreate中就是加载图片 数据什么的   标签的那一栏用的framelayout 

distance = sc_w - (mViews.size() * item_w);
		list = new ArrayList<RelativeLayout>();
		FrameLayout fl = (FrameLayout) findViewById(R.id.al);
		for (int j = 0; j < mViews.size(); j++) {
			LayoutInflater inflater = LayoutInflater.from(this);
			RelativeLayout view = (RelativeLayout) inflater.inflate(
					R.layout.item, null);
			TextView item_tv = (TextView) view.findViewById(R.id.item_tv);
			item_tv.setText((j + 1) + "");
			FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(
					item_w, LayoutParams.MATCH_PARENT);
			if (j > 0) {
				params.setMargins(distance + j * item_w, 0, 0, 0);
			}
			if (j == mViews.size() - 1) {
				view.findViewById(R.id.item_iv).setVisibility(View.INVISIBLE);// 最后一个没有白边
			}
			params.gravity = Gravity.TOP;
			view.setLayoutParams(params);

			fl.addView(view);
			list.add(view);
			view.setTag(j);
			view.setOnClickListener(this);
		}

	/**
	 * 标签切换动画
	 * 
	 * @param flag
	 * 
	 * @param view要切换的view
	 * @param isRight动画方向
	 */

	private void animate(final View view, final boolean isRight, final int flag) {
		TranslateAnimation translateAnimation;
		if (isRight)
			translateAnimation = new TranslateAnimation(0, distance + 5, 0f, 0f);
		else
			translateAnimation = new TranslateAnimation(0, -distance - 5, 0f,
					0f);
		translateAnimation.setDuration(200);
		translateAnimation.setFillBefore(false);
		view.startAnimation(translateAnimation);

		translateAnimation.setAnimationListener(new AnimationListener() {

			@Override
			public void onAnimationStart(Animation animation) {
				isPlay = true;
			}

			@Override
			public void onAnimationRepeat(Animation animation) {
			}

			@Override
			public void onAnimationEnd(Animation animation) {
				isPlay = false;
				currentItem = flag;
				currentPage = flag;

				FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(
						view.getWidth(), view.getHeight());
				params.gravity = Gravity.TOP;
				if (isRight)
					params.setMargins(view.getLeft() + distance, 0, 0, 0);
				else
					params.setMargins(view.getLeft() - distance, 0, 0, 0);
				view.setLayoutParams(params);
				tv.setPadding((currentItem + 1) * item_w + 5, 0, 0, 0);
				tv.setText(strList.get(currentItem));

				pager.setCurrentItem(currentItem, true);
				changeOrientation();
			}
		});
	}

标签的点击事件

	@Override
	public void onClick(View v) {
		int flag = (Integer) v.getTag();// 点击的标签序号
		if (flag == currentItem)
			return;
		if (flag > currentItem) {// 点击了当前标签右边的标签
			for (int i = currentItem + 1; i <= flag; i++) {
				animate(list.get(i), false, flag);
			}
		} else {// 点击了当前标签左边的标签
			for (int i = currentItem; i > flag; i--) {
				animate(list.get(i), true, flag);
			}
		}

	}

源码下载地址：