android下ViewPager的使用,带下部选项栏的切换动画
（文章针对类似我这种初学者，大神看到不要嘲笑）
演示
我的规矩是先上GIF动画效果(Linux下用转的GIF,清晰度还可以但是不知道为什么放博客上,界面会这么大):
代码:
android中有ViewPager这么个控件,可以帮助用户实现多个页面的高效管理,该控件需要导入包android.support.v4.view.ViewPager;下面先把androidstudio中的项目截图贴出:
这是代码的结构,下面会对代码大概进行介绍:
private Context mContext = MainActivity.this;
private ViewPager mPager;
private List<View> listViews;//存放多个View界面
private ImageView cursor;//动画图片
private int currentIndex = 0;//当前选项编号
private TextView t1;
private TextView t2;
private TextView t3;
private int width;
mPager来自一个ViewPager对象，下面主要是对其进行初始化、适配、以及切换事件监听；
cursor这个对象到后面就会了解，它就是选项栏的黄色View。就是它在移动，在后面要对该View的移动设置动画、以及判断何时移动、怎么移动；
currentIndex这个是用于判断当前页面；
width是用于存储屏幕的宽度；
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
DisplayMetrics displayMetrics = getResources().getDisplayMetrics();
width = displayMetrics.widthPixels;
cursor = (ImageView) findViewById(R.id.move_view);
params=(LinearLayout.LayoutParams) cursor.getLayoutParams();
InitTextView();///初始化下部选项栏
params.width=width/3;
cursor.setLayoutParams(params);
InitViewPager();//初始化页面配置
}
DisplayMetrics displayMetrics = getResources().getDisplayMetrics();
width = displayMetrics.widthPixels;获取当前屏幕资源并求得宽度。
ImageView无法直接动态设置其宽高，所以可以通过这个方法来间接实现：
新建一个LayoutParams对象，并将其配置到cursor上面，这样即可修改cursor的宽度，这里高度不用修改。
private void InitTextView() {
t1 = (TextView) findViewById(R.id.text1);
t2 = (TextView) findViewById(R.id.text2);
t3 = (TextView) findViewById(R.id.text3);
t1.setOnClickListener(new MyOnClickListener(0));
t2.setOnClickListener(new MyOnClickListener(1));
t3.setOnClickListener(new MyOnClickListener(2));
}
class MyOnClickListener implements View.OnClickListener {
private int index = 0;
public MyOnClickListener(int index) {
this.index = index;
}
@Override
public void onClick(View v) {
mPager.setCurrentItem(index);
}
}
上面这个没什么好说的。
下面这个才是重点（讲解我就放在代码里面啦）：
private void InitViewPager() {
mPager = (ViewPager) findViewById(R.id.vPager);
listViews = new ArrayList<>();
listViews.add(LayoutInflater.from(mContext).inflate(R.layout.tab1, null));
listViews.add(LayoutInflater.from(mContext).inflate(R.layout.tab2, null));
listViews.add(LayoutInflater.from(mContext).inflate(R.layout.tab3, null));
mPager.setCurrentItem(0);//初始化的默认界面就是第一个，标号为0
mPager.setAdapter(new MyPagerAdapter());//为mPager设置适配器
// MyOnPageChangeListener myOnPageChangeListener=new MyOnPageChangeListener();以前是直接使用这个方法，但是现在已经弃用，改用下面两个方法的综合，这个大家可以ctrl+鼠标左键看官方的说明。
mPager.addOnPageChangeListener(new MyOnPageChangeListener());//新增页面事件监听
mPager.removeOnPageChangeListener(new MyOnPageChangeListener());//销毁页面事件监听
}
//这段代码是仿照一位大神写的，在此谢过，原文链接后来找了一会忘记在哪了。。。
class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {
int one = params.width;
int two = one * 2;
/**
* This method will be invoked when the current page is scrolled, either as part
* of a programmatically initiated smooth scroll or a user initiated touch scroll.
*
* @param position Position index of the first page currently being displayed.
* Page position+1 will be visible if positionOffset is nonzero.
* @param positionOffset Value from [0, 1) indicating the offset from the page at position.
* @param positionOffsetPixels Value in pixels indicating the offset from position.
*/
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
/**
* This method will be invoked when a new page becomes selected. Animation is not
* necessarily complete.
*
* @param position Position index of the new selected page.
*/
@Override
public void onPageSelected(int position) {
Animation animation = null;
switch (position) {
case 0:
if (currentIndex == 1) {
animation = new TranslateAnimation(one, 0, 0, 0);//这些个参数可以通过API了解到，大家可以通过修改某些值就可以很快上手动画的效果实现
} else if (currentIndex == 2) {
animation = new TranslateAnimation(two, 0, 0, 0);
}
break;
case 1:
if (currentIndex == 0) {
animation = new TranslateAnimation(0, one, 0, 0);
} else if (currentIndex == 2) {
animation = new TranslateAnimation(two, one, 0, 0);
}
break;
case 2:
if (currentIndex == 0) {
animation = new TranslateAnimation(0, two, 0, 0);
} else if (currentIndex == 1) {
animation = new TranslateAnimation(one, two, 0, 0);
}
break;
}
currentIndex = position;
animation.setFillAfter(true);
animation.setDuration(300);
cursor.startAnimation(animation);
}
/**
* Called when the scroll state changes. Useful for discovering when the user
* begins dragging, when the pager is automatically settling to the current page,
* or when it is fully stopped/idle.
*
* @param state The new scroll state.
* @see ViewPager#SCROLL_STATE_IDLE
* @see ViewPager#SCROLL_STATE_DRAGGING
* @see ViewPager#SCROLL_STATE_SETTLING
*/
@Override
public void onPageScrollStateChanged(int state) {
}
}
class MyPagerAdapter extends PagerAdapter {//适配器的写法应该都是轻车熟路，但是与平常的还是有所不同，我们需要手动去重写两个方法
/**
* Return the number of views available.
*/
@Override
public int getCount() {
return listViews.size();
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {//重写该方法，销毁不用的界面
((ViewPager) container).removeView(listViews.get(position));
}
@Override
public Object instantiateItem(ViewGroup container, int position) {//加载界面
((ViewPager) container).addView(listViews.get(position), 0);//?
return listViews.get(position);
}
/**
* Determines whether a page View is associated with a specific key object
* as returned by {@link #instantiateItem(ViewGroup, int)}. This method is
* required for a PagerAdapter to function properly.
*
* @param view Page View to check for association with <code>object</code>
* @param object Object to check for association with <code>view</code>
* @return true if <code>view</code> is associated with the key object <code>object</code>
*/
@Override
public boolean isViewFromObject(View view, Object object) {//注意重写该方法，如果两者相等返回一个true。默认是返回false
return view == object;
}
}
项目链接：
链接: https://pan.baidu.com/s/1pLIxJIj 密码: h4xn
