计步器（Pedometer）整个项目的源代码，感兴趣的朋友可以下载来看看(记得帮小弟在github打个星~)
https://github.com/296777513/pedometer
今天，说下指示器随着界面滑动，可能这样说不太直观，我先附上几张效果图：
如图所示，中间部分为一个ViewPager(可以滑动的页面)，大家可以看到屏幕的顶部，字体下面有一个指示器，
当页面向右滑动时，指示器也会随着界面动态的向右滑动，当页面停在第二个页面时，字体也会变为蓝色。
下来给大家贴出主要的代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
|
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<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); }}</fragment></fragment> |
|
1
2
|
<linearlayout android:layout_height="match_parent" android:layout_width="match_parent" android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android"><textview android:background="@android:color/darker_gray" android:layout_height="1dp" android:layout_width="match_parent"> </android.support.v4.view.viewpager> </textview></linearlayout> |
相关文章：
基于Android的计步器(Pedometer)的讲解(一)——Fragment页面跳转 – Android移动开发技术文章_手机开发 – 红黑联盟
基于Android的计步器(Pedometer)的讲解(二)——柱状图分析 – Android移动开发技术文章_手机开发 – 红黑联盟
基于Android的计步器(Pedometer)的讲解—ExpandableListView – Android移动开发技术文章_手机开发 – 红黑联盟
基于Android的计步器(Pedometer)的讲解(四)——后台记步 – Android移动开发技术文章_手机开发 – 红黑联盟
基于Android的计步器(Pedometer)的讲解(五)——跟随界面滑动的指示器 – Android移动开发技术文章_手机开发 – 红黑联盟