ViewPager实现页面滑动的学习与使用

最新推荐文章于 2022-04-23 15:46:24 发布

小鸡仔hana

最新推荐文章于 2022-04-23 15:46:24 发布

阅读量548

点赞数

分类专栏： Android开发日记文章标签： Android viewpager

本文链接：https://blog.youkuaiyun.com/u011388551/article/details/46381849

版权

Android开发日记专栏收录该内容

31 篇文章

订阅专栏

app里面的ViewPager滑动页面的效果应该是非常常见的用户与app交互的效果，滑动页面是的app更加灵活也更加利于用户单手时操作手机上的事务。

今天就学习一下ViewPager的用法。

首先观察一下项目里面的Android-Private-Library里面有个Android自带的包android-support-v4.jar，里面有个包名是下图画出红线的名字，里面点开就会发现ViewPager这个类，就是我们这次使用的类，用来实现页面滑动切换。

下面先上代码：

xml:

布局是头上一列三个tab，然后下面一条横线的Image实现滑动动画的效果，下面就是Viewpager。其他的布局就是简单的三个空白的布局用于滑动显示，自己随意写。

Java：

//初始化TextView，并绑定监听器，并监听点击事件

public void initTextView() {

textView1 = (TextView) findViewById(R.id.textView1);
textView2 = (TextView) findViewById(R.id.textView2);
textView3 = (TextView) findViewById(R.id.textView3);
textView1.setOnClickListener(new MyClickListener(0));
textView2.setOnClickListener(new MyClickListener(1));
textView3.setOnClickListener(new MyClickListener(2));
}

自己的点击类实现OnClickListener接口，当点击哪个TextView就显示哪个界面

public class MyClickListener implements OnClickListener {
int index = 0;
public MyClickListener(int i) {

index = i;

}
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
viewPager.setCurrentItem(index);
}

接下来是初始化Viewpager布局：

public void initViewPager() {
viewPager = (ViewPager) findViewById(R.id.viewPager);
listView = new ArrayList<View>();
LayoutInflater inflater = LayoutInflater.from(getApplicationContext());
listView.add(inflater.inflate(R.layout.viewpager1, null));
listView.add(inflater.inflate(R.layout.viewpager2, null));
listView.add(inflater.inflate(R.layout.viewpager3, null));
viewPager.setAdapter(new MyPagerAdapter(listView));
viewPager.setCurrentItem(0);// 设置当前默认的是第一个view
viewPager.setOnPageChangeListener(new MyPageChangeListener());
}

把自己设计的布局一个个加载到listView里面，并且设置ViewPager的适配器以及滑动的监听器

public class MyPagerAdapter extends PagerAdapter {
List<View> list;
public MyPagerAdapter(List<View> list) {
this.list = list;

}
@Override
public int getCount() {
// TODO Auto-generated method stub
return list.size();
}

@Override
public boolean isViewFromObject(View arg0, Object arg1) {
// TODO Auto-generated method stub
return arg0 == (arg1);
}
//添加选项卡
@Override
public Object instantiateItem(ViewGroup container, int position) {
// TODO Auto-generated method stub
((ViewPager) container).addView(list.get(position), 0);
return list.get(position);
}
// 移除选项卡
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
// TODO Auto-generated method stub
((ViewPager) container).removeView(list.get(position));
}
}

public class MyPageChangeListener implements OnPageChangeListener {

@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
Animation animation = new TranslateAnimation(tabWidth
* currentIndex + offset, tabWidth * arg0 + offset, 0, 0);
currentIndex = arg0;
animation.setFillAfter(true);
animation.setDuration(350);
cursor.startAnimation(animation);
}
}

tabWidth是这里的三个Tab的每个宽度，offset是下图标的X方向的移动位移。整个tab栏的具体表示情况是这样的：

一个图片宽度加上两个offset就是一个TabWidth。

TranslationAnimation的参数第一二个表示从X的方向上的起始位置到末尾位置，三四参数表示的是Y方向上的移动距离，因为这里只是水平滑动，所以不需要Y方向上的平移。

还有就是初始化各种距离，具体表示的意思上面都解释清楚了：

public void initImageView() {

//获得屏幕宽度

DisplayMetrics display = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(display);
int screenWidth = display.widthPixels;
cursor = (ImageView) findViewById(R.id.cursor);

//得到图片的宽度
cursorWidth = BitmapFactory
.decodeResource(getResources(), R.drawable.a).getWidth();

//得到每个tab的宽度
tabWidth = screenWidth / listView.size();

//如果图片的宽度大于每个tab的宽度，就让图片的宽度变为tab的宽度
if (tabWidth < cursorWidth) {
cursor.getLayoutParams().width = tabWidth;
cursorWidth = tabWidth;

}

//除以2，让图片两边的宽度一样大小，左右协调
offset = (tabWidth - cursorWidth) / 2;
}

最后上效果图：