计步器（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的朋友可以留言，并留下邮箱，我给发。