原理 通过计算滑动距离，通过动画进行滑动。
直接上代码。
布局文件
通过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());
}private void setbutt(){
remen.setTextColor(page==0?0xffffa800:0xff000000);
tuijian.setTextColor(page==1?0xffffa800:0xff000000);
xinren.setTextColor(page==2?0xffffa800:0xff000000);
}@Override
public 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);// 设置动画初始位置
}public class MyOnPageChangeListener implements OnPageChangeListener {
@Override
public void onPageScrollStateChanged(int arg0) {
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public 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个怎么优化
@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub
}
@Override
public void onPageSelected(int arg0) {
// TODO Auto-generated method stub
anima(arg0);
page = arg0;
setbutt();
}anima（）方法
private void anima(int arg0) {
// TODO Auto-generated method stub
Animation animation = new TranslateAnimation(page * bmpw, arg0 * bmpw,
0, 0);
animation.setFillAfter(true);// True:图片停在动画结束位置
animation.setDuration(300);
game_fragment_select_line.startAnimation(animation);
}重写onResume()
@Override
public 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（）
@Override
public void onPause() {
// TODO Auto-generated method stub
super.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);
}
@Override
public 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 {
@Override
public void onPageScrollStateChanged(int arg0) {
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public 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();
}
}
@Override
public 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);
}
@Override
public View getView(LayoutInflater inflater) {
// TODO Auto-generated method stub
view = inflater.inflate(R.layout.shenyou_layout, null);
initPage();
InitViewPager();
InitImageView();
return view;
}
@Override
public void onPause() {
// TODO Auto-generated method stub
super.onPause();
if(mFragmentList!=null&&mFragmentList.size()>page)
mFragmentList.get(page).onPause();
}
@Override
protected void lazyLoad() {
super.lazyLoad();
// TODO Auto-generated method stub
}
}
