基于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:[email protected] 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<Fragment> 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<Fragment>();

		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);

	}

}

还有对应的xml的页面代码为：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="53dp"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:gravity="center"
            android:orientation="horizontal" >

            <TextView
                android:id="@+id/pk1"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_marginLeft="60dp"
                android:layout_weight="1"
                android:gravity="center"
                android:text="多人PK"
                android:textSize="20dp" />

            <TextView
                android:layout_width="1dp"
                android:layout_height="10dp"
                android:background="@android:color/darker_gray" />

            <TextView
                android:id="@+id/pk2"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_marginRight="60dp"
                android:layout_weight="1"
                android:gravity="center"
                android:text="分组PK"
                android:textSize="20dp" />
        </LinearLayout>

        <ImageView
            android:id="@+id/bar"
            android:layout_width="match_parent"
            android:layout_height="3dp"
            android:background="@android:color/holo_blue_bright" />
    </LinearLayout>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@android:color/darker_gray" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </android.support.v4.view.ViewPager>

</LinearLayout>

如果有想要Demo的朋友可以留言，并留下邮箱，我给发。