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

基於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;// 目前的頁面@Overridepublic 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()) {@Overridepublic int getCount() {// TODO Auto-generated method stubreturn fragments.size();}@Overridepublic Fragment getItem(int arg0) {return fragments.get(arg0);}};page.setAdapter(adapter);// 給viewpager設定適配器// 給viewpager設定監聽器page.setOnPageChangeListener(new OnPageChangeListener() {@SuppressLint(ResourceAsColor)@Overridepublic 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;}@Overridepublic 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);}@Overridepublic 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);}}