首页 > 代码库 > 基于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<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的朋友可以留言，并留下邮箱，我给发。
基于Android的计步器(Pedometer)的讲解(五)——跟随界面滑动的指示器
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。