基於Android的計步器(Pedometer)的講解(五)——跟隨界面滑動的指示器

計步器（Pedometer）整個項目的源代碼，感興趣的朋友可以下載來看看(記得幫小弟在github打個星~)

https://github.com/296777513/pedometer

今天，說下指示器隨著界面滑動，可能這樣說不太直觀，我先附上幾張效果圖：

如圖所示，中間部分為一個ViewPager(可以滑動的頁面)，大家可以看到屏幕的頂部，字體下面有一個指示器，

當頁面向右滑動時，指示器也會隨著界面動態的向右滑動，當頁面停在第二個頁面時，字體也會變為藍色。

下來給大家貼出主要的代碼：

package com.example.histogram;

import java.util.ArrayList;
import java.util.List;
import com.example.changepage1.R;
import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.view.Display;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.LinearLayout.LayoutParams;

/**
 * 這是記步的碎片 Author: 李垭超 
 * email:296777513@qq.com Date: 2015-1-8 Time: 下午6:39
 */
public class FragmentPK extends Fragment {
	private View view;
	private int currentPage1_2;// 這是屏幕的一般
	private ImageView bar;// 隨著屏幕移動的線條
	private TextView title1, title2;//
	private ViewPager page;// 滑動變化界面
	private FragmentPagerAdapter adapter;
	private List fragments;
	private int currentPageIndex;// 目前的頁面

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		view = inflater.inflate(R.layout.pk, container, false);
		init();
		initTabLine();
		return view;
	}

	@SuppressLint(NewApi)
	private void initTabLine() {
		bar = (ImageView) view.findViewById(R.id.bar);
		Display display = getActivity().getWindow().getWindowManager()
				.getDefaultDisplay();
		DisplayMetrics dMetrics = new DisplayMetrics();// 手機屏幕的寬和高
		display.getRealMetrics(dMetrics);// 向dMetrics中放入當前手機的寬和高
		currentPage1_2 = (dMetrics.widthPixels / 2) - dip2px(getActivity(), 60);
		LinearLayout.LayoutParams lp = (LayoutParams) bar.getLayoutParams();
		lp.width = currentPage1_2;
		lp.leftMargin = dip2px(getActivity(), 60);
		bar.setLayoutParams(lp);
	}

	/**
	 * 初始化數據
	 */
	private void init() {
		title1 = (TextView) view.findViewById(R.id.pk1);
		title2 = (TextView) view.findViewById(R.id.pk2);
		title1.setTextColor(Color.parseColor(#6DCAEC));
		page = (ViewPager) view.findViewById(R.id.viewPager);
		fragments = new ArrayList();

		fragments.add(new FragmentPK_1());
		fragments.add(new FragmentPK_2());

		// 實例化viewpager的適配器
		adapter = new FragmentPagerAdapter(getActivity()
				.getSupportFragmentManager()) {

			@Override
			public int getCount() {
				// TODO Auto-generated method stub
				return fragments.size();
			}

			@Override
			public Fragment getItem(int arg0) {

				return fragments.get(arg0);
			}
		};
		page.setAdapter(adapter);// 給viewpager設置適配器
		// 給viewpager設置監聽器
		page.setOnPageChangeListener(new OnPageChangeListener() {

			@SuppressLint(ResourceAsColor)
			@Override
			public void onPageSelected(int position) {
				switch (position) {
				case 0:
					title2.setTextColor(Color.parseColor(#000000));
					title1.setTextColor(Color.parseColor(#6DCAEC));
					break;
				case 1:
					title1.setTextColor(Color.parseColor(#000000));
					title2.setTextColor(Color.parseColor(#6DCAEC));
					break;
				}
				currentPageIndex = position;

			}

			@Override
			public void onPageScrolled(int position, float positionOffset,
					int positionOffsetPx) {
				LinearLayout.LayoutParams lp = (LayoutParams) bar
						.getLayoutParams();
				if (currentPageIndex == 0 && position == 0) {// 這是從第一個頁面到第二個頁面
					lp.leftMargin = (int) (dip2px(getActivity(), 60)
							+ currentPageIndex * currentPage1_2 + currentPage1_2
							* positionOffset);
				} else if (currentPageIndex == 1 && position == 0) {
					lp.leftMargin = (int) (dip2px(getActivity(), 60)
							+ currentPageIndex * currentPage1_2 + currentPage1_2
							* (positionOffset - 1));
				}
				bar.setLayoutParams(lp);

			}

			@Override
			public void onPageScrollStateChanged(int arg0) {
				// TODO Auto-generated method stub

			}
		});
	}

	private int dip2px(Context context, float dipValue) {
		final float scale = context.getResources().getDisplayMetrics().density;
		return (int) (scale * dipValue + 0.5f);

	}

}