效果图:
项目结构：
很简单 一个Activity 一个adapter 4个xml(一个为activity的布局，另外三个为viewpager的三个页面)
代码:
MainActivity 代码
/**
* Copyright (C) 2014 The CSDN BLOG Project （TestViewPager）
*
* @author small_coder
*
*
* 转载请保留此处 注明出处 谢谢合作！
*
* 鄙人新手， 写博客只为巩固知识，文中不正之处，请各位前辈指出，谢谢！
*
*
*/
package hhy.demo.csdn.activity;
import java.util.ArrayList;
import java.util.List;
import hhy.demo.csdn.R;
import hhy.demo.csdn.adapter.ViewPagerAdapter;
import android.os.Bundle;
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.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView;
import android.app.Activity;
public class MainActivity extends Activity implements OnPageChangeListener {
/** ViewPager控件 */
private ViewPager mViewPager;
/** TAB选项卡下面的蓝色游标 */
private ImageView cursor;
/** 目前viewpager所在的页面 默认在第一个页面 */
private int current = 0;
/** 屏幕宽度 */
private int SCREEN_WIDTH;
/** 顶部的三个按钮 */
private TextView txt1;
private TextView txt2;
private TextView txt3;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
/**
* 初始化界面
*/
private void initView() {
//顶部三个TAB 的监听
txt1 = (TextView) findViewById(R.id.text1);
txt2 = (TextView) findViewById(R.id.text2);
txt3 = (TextView) findViewById(R.id.text3);
txt1.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
mViewPager.setCurrentItem(0); //点击第一个，ViewPager 滑动到第一页
}
});
txt2.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
mViewPager.setCurrentItem(1); //点击第二个，ViewPager 滑动到第二页
}
});
txt3.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
mViewPager.setCurrentItem(2); //点击第三个，ViewPager 滑动到第三页
}
});
SCREEN_WIDTH = getScreenWidth(this);//获得屏幕宽度
cursor = (ImageView) findViewById(R.id.blue_cursor);//游标，就是三个TAB底部的蓝色长条
List<View> views = new ArrayList<View>(); //new一个集合将三个页面都add进去
// 分别得到三个页面的引用，当页面有控件的时候，需要用该view.findViewById找到
// 例如，我要得到tab1的textView 需要 TextView txt1 =
// tab1.findViewById(R.id.textview);
// 千万不能漏了tab1，否则会报空指针异常 请新手在写的时候注意
View tab1 = LayoutInflater.from(this).inflate(R.layout.tab1, null);
View tab2 = LayoutInflater.from(this).inflate(R.layout.tab2, null);
View tab3 = LayoutInflater.from(this).inflate(R.layout.tab3, null);
views.add(tab1);
views.add(tab2);
views.add(tab3);
mViewPager = (ViewPager) findViewById(R.id.viewpager);
mViewPager.setAdapter(new ViewPagerAdapter(views)); //viewpager设置适配器 将三个界面都添加到viewpager里面
mViewPager.setOnPageChangeListener(this); //viewpager设置滑动监听，在页面改变的时候触发
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
// arg0 当前页面的值 第一页是0 第二页是1 依次类推
// 这个arg0的是滑动后的页面值
@Override
public void onPageSelected(int arg0) {
Animation animation = null;
if (arg0 == 0 && current == 1) { // 如果当前页（current）在第二页 并且要滑往第一页游标从屏幕的1/3处 滑动到0点
animation = new TranslateAnimation(SCREEN_WIDTH / 3, 0, 0, 0);
} else if (arg0 == 2 && current == 1) {// 如果当前页（current）在第二页 并且要滑往第三页 游标从屏幕的1/3处 滑动到屏幕的2/3处
animation = new TranslateAnimation(SCREEN_WIDTH / 3,SCREEN_WIDTH / 3 * 2, 0, 0);
} else if (arg0 == 0 && current == 2) {// 如果当前页（current）在第三页 并且要滑往第一页 游标从屏幕的2/3处 滑动到屏幕的0点
animation = new TranslateAnimation(SCREEN_WIDTH / 3 * 2, 0, 0, 0);
} else if (arg0 == 1 && current == 2) {// 如果当前页（current）在第三页 并且要滑往第二页 游标从屏幕的2/3处 滑动到屏幕的1/3处
animation = new TranslateAnimation(SCREEN_WIDTH / 3 * 2,SCREEN_WIDTH / 3, 0, 0);
} else if (arg0 == 1 && current == 0) {// 如果当前页（current）在第一页 并且要滑往第二页 游标从屏幕的0处 滑动到屏幕的1/3处
animation = new TranslateAnimation(0, SCREEN_WIDTH / 3, 0, 0);
} else if (arg0 == 2 && current == 0) {// 如果当前页（current）在第一页 并且要滑往第三页 游标从屏幕的0处 滑动到屏幕的2/3处
animation = new TranslateAnimation(0, SCREEN_WIDTH / 3 * 2, 0, 0);
}
animation.setFillAfter(true);// true:图片停在动画结束的位置
animation.setDuration(300);// 动画执行时间
cursor.startAnimation(animation);//开始执行动画
current = arg0;//将当前页值赋给current
/***
* TranslateAnimation(float fromXDelta, float toXDelta, float
* fromYDelta, float toYDelta) float fromXDelta:这个参数表示动画开始的点离当前View
* X坐标上的差值；
*
* float toXDelta, 这个参数表示动画结束的点离当前View X坐标上的差值；
*
* float fromYDelta, 这个参数表示动画开始的点离当前View Y坐标上的差值；
*
* float toYDelta)这个参数表示动画开始的点离当前View Y坐标上的差值；
*/
}
/***
* 得到屏幕宽度 这个一般写在Utils类里面，这里就一个方法就不另外写了
* @param context
* @return 屏幕宽度
*/
public static int getScreenWidth(Activity context) {
DisplayMetrics dm = new DisplayMetrics();
context.getWindowManager().getDefaultDisplay().getMetrics(dm);
return dm.widthPixels;
}
}
ViewPagerAdapter 代码
/**
* Copyright (C) 2014 The CSDN BLOG Project （TestViewPager）
*
* @author small_coder
*
*
* 转载请保留此处 注明出处 谢谢合作
*
* ViewPager 适配器
*/
package hhy.demo.csdn.adapter;
import java.util.List;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;
public class ViewPagerAdapter extends PagerAdapter{
/**页面数据，即添加到viewpager中的三个页面*/
private List<View> mViews;
/**
* 通过构造方法，将三个页面传给适配器
* @param mViews 页面数据
*/
public ViewPagerAdapter(List<View> mViews) {
super();
this.mViews = mViews; //传递页面数据
}
@Override
public int getCount() {
//返回页面的个数
return mViews.size();
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
//删除页卡
container.removeView(mViews.get(position));
}
@Override
public Object instantiateItem(View container, int position) {
//实例化页卡
((ViewPager) container).addView(mViews.get(position),0);
return mViews.get(position);
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
//这个我也不知道什么意思 只知道这么判断是对的
/**
* 官方对这个方法是这么解释的：
* 知道的朋友可以告诉我下，感激不尽
* Determines whether a page View is associated with a specific
* key object as returned by instantiateItem(ViewGroup, int).
* This method is required for a PagerAdapter to function properly.
*/
return arg0 == arg1;
}
}
activity_main.xml 代码
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >
<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="46.0dip"
android:background="#F5f5f5" >
<TextView
android:id="@+id/text1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:gravity="center"
android:text="TAB1"
android:textColor="#000000"
android:textSize="16sp" />
<View
android:layout_width="1dp"
android:layout_height="fill_parent"
android:layout_marginBottom="12dp"
android:layout_marginTop="12dp"
android:background="#e1e1e1" />
<TextView
android:id="@+id/text2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:gravity="center"
android:text="TAB2"
android:textColor="#000000"
android:textSize="16sp" />
<View
android:layout_width="1dp"
android:layout_height="fill_parent"
android:layout_marginBottom="12dp"
android:layout_marginTop="12dp"
android:background="#e1e1e1" />
<TextView
android:id="@+id/text3"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:gravity="center"
android:text="TAB3"
android:textColor="#000000"
android:textSize="16sp" />
</LinearLayout>
<ImageView
android:id="@+id/blue_cursor"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@id/linearLayout1"
android:contentDescription="@null"
android:scaleType="matrix"
android:src="@drawable/blue_bar_line" />
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@id/blue_cursor" />
</RelativeLayout>
tab1、tab2、tab3的代码就不上了，都只放了一个textView
至此，这个demo结束了。其实有很多更好的实现，目前，我项目需求只是这么多，有好的实现，请指点，谢谢！
扫一扫
356
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
