超简单的viewpage指示器

原理 通过计算滑动距离，通过动画进行滑动。

直接上代码。

布局文件

通过RadioButton 加 viewpage  

但是在RadioButton 的下面 我们新增了一个Imageview 来表示我们的指示器。

<?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" >    <!-- <include layout="@layout/shenyou_title_shaixuan" /> -->    <RelativeLayout        android:id="@+id/my"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:paddingTop="2dp"        android:paddingBottom="5dp"        android:background="#0FFF" >        <RadioGroup            android:id="@+id/ch_home_radio"            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:layout_gravity="bottom"            android:gravity="center_vertical"            android:orientation="horizontal"             >            <RadioButton                android:id="@+id/remen"                android:layout_width="0dp"                android:layout_weight="1"                android:layout_height="wrap_content"                android:drawablePadding="2dp"                android:background="#00000000"                android:button="@null"                android:ellipsize="marquee"                android:gravity="center"                android:checked="true"                android:text="热门"                android:textColor="#000000"                android:textSize="@dimen/text_size4" />            <RadioButton                android:id="@+id/tuijian"                android:layout_width="0dp"                android:layout_weight="1"                 android:layout_height="wrap_content"                android:drawablePadding="2dp"                 android:background="#00000000"                android:button="@null"                android:ellipsize="marquee"                android:gravity="center"                android:text="推荐"                android:textColor="#000000"                android:textSize="@dimen/text_size4" />            <RadioButton                android:id="@+id/xinren"                android:layout_width="0dp"                android:layout_weight="1"                 android:layout_height="wrap_content"                android:drawablePadding="2dp"                 android:background="#00000000"                android:button="@null"                android:ellipsize="marquee"                android:gravity="center"                android:text="新人"                android:textColor="#000000"                android:textSize="@dimen/text_size4" />        </RadioGroup>    </RelativeLayout>    <LinearLayout        android:gravity="bottom"        android:layout_width="match_parent"        android:layout_height="2dip"        android:background="#FFF"        android:orientation="vertical" >        <ImageView            android:id="@+id/cursor"            android:layout_width="wrap_content"            android:layout_height="2dip"            android:scaleType="centerCrop"            android:src="@drawable/cursor" />        <View            android:id="@+id/view"            android:layout_width="match_parent"            android:layout_height="@dimen/line_size"            android:background="@color/line_color" />    </LinearLayout>    <android.support.v4.view.ViewPager        android:id="@+id/vpager"        android:layout_width="match_parent"        android:layout_height="0dip"        android:layout_weight="2" >    </android.support.v4.view.ViewPager></LinearLayout>

Fragment文件

首先 InitViewPager()；初始化我们的view和将子fragment放入

private void InitViewPager() {remen = (Button) findViewById(R.id.remen);tuijian = (Button)findViewById(R.id.tuijian);xinren = (Button) findViewById(R.id.xinren);remen.setOnClickListener(this);tuijian.setOnClickListener(this);xinren.setOnClickListener(this);viewPager = (ViewPager)findViewById(R.id.vpager);mReMenFragment = new YouShenReMenFragment();mTuiJianFragment = new YouShenTuiJianFragment();mXinRenFragment = new YouShenXinRenFragment();mFragmentList.add(mReMenFragment);// 热门mFragmentList.add(mTuiJianFragment);// 推荐mFragmentList.add(mXinRenFragment);// 新人mFragmentAdapter = new GameFragmentAdapter(getChildFragmentManager(),mFragmentList);viewPager.setAdapter(mFragmentAdapter);viewPager.setOffscreenPageLimit(1);viewPager.setCurrentItem(0);remen.setTextColor(0xffffa800);viewPager.setOnPageChangeListener(new MyOnPageChangeListener());}

 滑动时改变文字颜色方法setbutt（）

private void setbutt(){   remen.setTextColor(page==0?0xffffa800:0xff000000);   tuijian.setTextColor(page==1?0xffffa800:0xff000000);   xinren.setTextColor(page==2?0xffffa800:0xff000000);    }

 设置onclick事件 点击滑动到相应的界面

@Overridepublic void onClick(View v) {XHLog.e("=====", "currIndex="+currIndex);onResume();switch (v.getId()) {case R.id.remen:page=0;break;case R.id.xinren:page=2;break;case R.id.tuijian:page=1;break;default:break;}viewPager.setCurrentItem(page);}

 初始化动画和计算初始化

private int offset = 0;// 动绘图片偏移量private int currIndex = 0;// 当前页卡编号private int bmpW;// 动绘图片宽度

/** * 2 * 初始化动画，这个就是页卡滑动时，以下的横线也滑动的效果，在这里须要计算一些数据  */private void InitImageView() {imageView = (ImageView)findViewById(R.id.cursor);DisplayMetrics dm = new DisplayMetrics();getActivity().getWindowManager().getDefaultDisplay().getMetrics(dm);int screenW = dm.widthPixels;// 获取分辨率宽度LayoutParams para = imageView.getLayoutParams();para.width = screenW / 3;//设置分成几份imageView.setLayoutParams(para);bmpW = imageView.getWidth();offset = (screenW / 3 - bmpW) / 2;// 计算偏移量Matrix matrix = new Matrix();matrix.postTranslate(offset, 0);imageView.setImageMatrix(matrix);// 设置动画初始位置}

v iewpage滑动监听

public class MyOnPageChangeListener implements OnPageChangeListener {@Overridepublic void onPageScrollStateChanged(int arg0) {}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageSelected(int arg0) {int one = offset * 2 + bmpW;// 页卡1 -> 页卡2 偏移量int two = one * 2;// 页卡1 -> 页卡3 偏移量Animation animation = new TranslateAnimation(one * currIndex, one* arg0, 0, 0);// 显然这个比較简洁，仅仅有一行代码。currIndex = arg0;animation.setFillAfter(true);// True:图片停在动画结束位置animation.setDuration(300);imageView.startAnimation(animation);page=arg0;setbutt();

这里的滑动模块是3个，如果超过3个怎么优化

@Overridepublic void onPageScrollStateChanged(int arg0) {// TODO Auto-generated method stub}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {// TODO Auto-generated method stub}@Overridepublic void onPageSelected(int arg0) {// TODO Auto-generated method stubanima(arg0);page = arg0;setbutt();}

anima（）方法

private void anima(int arg0) {// TODO Auto-generated method stubAnimation animation = new TranslateAnimation(page * bmpw, arg0 * bmpw,0, 0);animation.setFillAfter(true);// True:图片停在动画结束位置animation.setDuration(300);game_fragment_select_line.startAnimation(animation);}

重写onResume()

@Overridepublic void onResume() {super.onResume();//页卡切换回来时让横线停留在切换时的位置if(currIndex==0&&mReMenFragment!=null)mReMenFragment.onResume();else if(currIndex==1&&mTuiJianFragment!=null)mTuiJianFragment.onResume();else if(mXinRenFragment!=null)mXinRenFragment.onResume();if(imageView==null)return;Animation animation = new TranslateAnimation((offset * 2 + bmpW)*currIndex, (offset * 2 + bmpW)*currIndex, 0, 0);// 显然这个比較简洁，仅仅有一行代码。animation.setFillAfter(true);// True:图片停在动画结束位置animation.setDuration(0);imageView.startAnimation(animation);}

重写onPause（）

@Overridepublic void onPause() {// TODO Auto-generated method stubsuper.onPause();if(mFragmentList!=null&&mFragmentList.size()>page)mFragmentList.get(page).onPause();}

ok。

上完整代码

package com.qpp.V4Fragment;import java.util.ArrayList;import android.graphics.Matrix;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.util.DisplayMetrics;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.view.View.OnClickListener;import android.view.ViewGroup.LayoutParams;import android.view.animation.Animation;import android.view.animation.TranslateAnimation;import android.widget.Button;import android.widget.ImageView;/* * 神游页面 * */public class SwimGodFragment extends Fragmentparent implements OnClickListener {private int offset = 0;// 动绘图片偏移量private int currIndex = 0;// 当前页卡编号private int bmpW;// 动绘图片宽度private ImageView imageView;// 动绘图片Button tuijian, remen, xinren;private ViewPager viewPager;private int page;private List<Fragment> mFragmentList = new ArrayList<Fragment>();private GameFragmentAdapter mFragmentAdapter;private YouShenReMenFragment mReMenFragment;private YouShenTuiJianFragment mTuiJianFragment;private YouShenXinRenFragment mXinRenFragment;private void InitViewPager() {viewPager = (ViewPager)findViewById(R.id.vpager);mReMenFragment = new YouShenReMenFragment();mTuiJianFragment = new YouShenTuiJianFragment();mXinRenFragment = new YouShenXinRenFragment();mFragmentList.add(mReMenFragment);// 热门mFragmentList.add(mTuiJianFragment);// 推荐mFragmentList.add(mXinRenFragment);// 新人mFragmentAdapter = new GameFragmentAdapter(getChildFragmentManager(),mFragmentList);viewPager.setAdapter(mFragmentAdapter);viewPager.setOffscreenPageLimit(1);viewPager.setCurrentItem(0);remen.setTextColor(0xffffa800);viewPager.setOnPageChangeListener(new MyOnPageChangeListener());}private void initPage() {remen = (Button) findViewById(R.id.remen);tuijian = (Button)findViewById(R.id.tuijian);xinren = (Button) findViewById(R.id.xinren);remen.setOnClickListener(this);tuijian.setOnClickListener(this);xinren.setOnClickListener(this);}   private void setbutt(){   remen.setTextColor(page==0?0xffffa800:0xff000000);   tuijian.setTextColor(page==1?0xffffa800:0xff000000);   xinren.setTextColor(page==2?0xffffa800:0xff000000);    }@Overridepublic void onClick(View v) {XHLog.e("=====", "currIndex="+currIndex);onResume();switch (v.getId()) {case R.id.remen:page=0;break;case R.id.xinren:page=2;break;case R.id.tuijian:page=1;break;default:break;}viewPager.setCurrentItem(page);//setbutt();}/** * 2 * 初始化动画，这个就是页卡滑动时，以下的横线也滑动的效果，在这里须要计算一些数据 3 */private void InitImageView() {imageView = (ImageView)findViewById(R.id.cursor);DisplayMetrics dm = new DisplayMetrics();getActivity().getWindowManager().getDefaultDisplay().getMetrics(dm);int screenW = dm.widthPixels;// 获取分辨率宽度LayoutParams para = imageView.getLayoutParams();para.width = screenW / 3;//设置分成几份imageView.setLayoutParams(para);bmpW = imageView.getWidth();offset = (screenW / 3 - bmpW) / 2;// 计算偏移量Matrix matrix = new Matrix();matrix.postTranslate(offset, 0);imageView.setImageMatrix(matrix);// 设置动画初始位置}public class MyOnPageChangeListener implements OnPageChangeListener {@Overridepublic void onPageScrollStateChanged(int arg0) {}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageSelected(int arg0) {int one = offset * 2 + bmpW;// 页卡1 -> 页卡2 偏移量int two = one * 2;// 页卡1 -> 页卡3 偏移量Animation animation = new TranslateAnimation(one * currIndex, one* arg0, 0, 0);// 显然这个比較简洁，仅仅有一行代码。currIndex = arg0;animation.setFillAfter(true);// True:图片停在动画结束位置animation.setDuration(300);imageView.startAnimation(animation);page=arg0;setbutt();}}@Overridepublic void onResume() {super.onResume();//页卡切换回来时让横线停留在切换时的位置if(currIndex==0&&mReMenFragment!=null)mReMenFragment.onResume();else if(currIndex==1&&mTuiJianFragment!=null)mTuiJianFragment.onResume();else if(mXinRenFragment!=null)mXinRenFragment.onResume();if(imageView==null)return;Animation animation = new TranslateAnimation((offset * 2 + bmpW)*currIndex, (offset * 2 + bmpW)*currIndex, 0, 0);// 显然这个比較简洁，仅仅有一行代码。animation.setFillAfter(true);// True:图片停在动画结束位置animation.setDuration(0);imageView.startAnimation(animation);}@Overridepublic View getView(LayoutInflater inflater) {// TODO Auto-generated method stubview = inflater.inflate(R.layout.shenyou_layout, null);initPage();InitViewPager();InitImageView();return view;}@Overridepublic void onPause() {// TODO Auto-generated method stubsuper.onPause();if(mFragmentList!=null&&mFragmentList.size()>page)mFragmentList.get(page).onPause();}@Overrideprotected void lazyLoad() {super.lazyLoad();// TODO Auto-generated method stub}}