Android 应用开发---ViewPager---4自主实现滑动指示条
ViewPager 详解(四)----自主实现滑动指示条
先上本篇效果图:
一、XML布局
布局代码如下:
[html] view plain copy
- <LinearLayout 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"
- android:orientation="vertical"
- tools:context="com.example.testviewpage_2.MainActivity" >
- <ImageView
- android:id="@+id/cursor"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:scaleType="matrix"
- android:src="@drawable/a" />
- <android.support.v4.view.ViewPager
- android:id="@+id/viewpager"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_gravity="center"/>
- </LinearLayout>
采用线性垂直布局,在滑动页面的上方添加一个小水平条。
二、JAVA代码
本例代码是根据《ViewPager 详解(一)---基本入门》 更改而来。
先给出全部代码,然后再逐步讲解。
[java] view plain copy
- public class MainActivity extends Activity {
- private View view1, view2, view3;
- private List<View> viewList;// view数组
- private ViewPager viewPager; // 对应的viewPager
- private ImageView cursor;
- private int bmpw = 0; // 游标宽度
- private int offset = 0;// // 动画图片偏移量
- private int currIndex = 0;// 当前页卡编号
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
- viewPager = (ViewPager) findViewById(R.id.viewpager);
- LayoutInflater inflater = getLayoutInflater();
- view1 = inflater.inflate(R.layout.layout1, null);
- view2 = inflater.inflate(R.layout.layout2, null);
- view3 = inflater.inflate(R.layout.layout3, null);
- viewList = new ArrayList<View>();// 将要分页显示的View装入数组中
- viewList.add(view1);
- viewList.add(view2);
- viewList.add(view3);
- //初始化指示器位置
- initCursorPos();
- viewPager.setAdapter(new MyPagerAdapter(viewList));
- viewPager.setOnPageChangeListener(new MyPageChangeListener());
- }
- //初始化指示器位置
- public void initCursorPos() {
- // 初始化动画
- cursor = (ImageView) findViewById(R.id.cursor);
- bmpw = BitmapFactory.decodeResource(getResources(), R.drawable.a)
- .getWidth();// 获取图片宽度
- DisplayMetrics dm = new DisplayMetrics();
- getWindowManager().getDefaultDisplay().getMetrics(dm);
- int screenW = dm.widthPixels;// 获取分辨率宽度
- offset = (screenW / viewList.size() - bmpw) / 2;// 计算偏移量
- Matrix matrix = new Matrix();
- matrix.postTranslate(offset, 0);
- cursor.setImageMatrix(matrix);// 设置动画初始位置
- }
- //页面改变监听器
- public class MyPageChangeListener implements OnPageChangeListener {
- int one = offset * 2 + bmpw;// 页卡1 -> 页卡2 偏移量
- int two = one * 2;// 页卡1 -> 页卡3 偏移量
- @Override
- public void onPageSelected(int arg0) {
- Animation animation = null;
- switch (arg0) {
- case 0:
- if (currIndex == 1) {
- animation = new TranslateAnimation(one, 0, 0, 0);
- } else if (currIndex == 2) {
- animation = new TranslateAnimation(two, 0, 0, 0);
- }
- break;
- case 1:
- if (currIndex == 0) {
- animation = new TranslateAnimation(offset, one, 0, 0);
- } else if (currIndex == 2) {
- animation = new TranslateAnimation(two, one, 0, 0);
- }
- break;
- case 2:
- if (currIndex == 0) {
- animation = new TranslateAnimation(offset, two, 0, 0);
- } else if (currIndex == 1) {
- animation = new TranslateAnimation(one, two, 0, 0);
- }
- break;
- }
- currIndex = arg0;
- animation.setFillAfter(true);// True:图片停在动画结束位置
- animation.setDuration(300);
- cursor.startAnimation(animation);
- }
- @Override
- public void onPageScrolled(int arg0, float arg1, int arg2) {
- }
- @Override
- public void onPageScrollStateChanged(int arg0) {
- }
- }
- /**
- * ViewPager适配器
- */
- public class MyPagerAdapter extends PagerAdapter {
- public List<View> mListViews;
- public MyPagerAdapter(List<View> mListViews) {
- this.mListViews = mListViews;
- }
- @Override
- public boolean isViewFromObject(View arg0, Object arg1) {
- // TODO Auto-generated method stub
- return arg0 == arg1;
- }
- @Override
- public int getCount() {
- // TODO Auto-generated method stub
- return mListViews.size();
- }
- @Override
- public void destroyItem(ViewGroup container, int position, Object object) {
- // TODO Auto-generated method stub
- container.removeView(mListViews.get(position));
- }
- @Override
- public Object instantiateItem(ViewGroup container, int position) {
- // TODO Auto-generated method stub
- container.addView(mListViews.get(position));
- return mListViews.get(position);
- }
- }
- }
从易到难一步步来讲。
1、MyPagerAdapter类
在前几篇中,我们对于适配器的实现总是new一个PageAdapter的实例。我们这里做了一点稍微的更改,将其集合成一个类,内容都没变,只是多了一个构造函数而已。所以针对这个类的具体代码,我就不再细讲,如果对其中的复写的函数为什么要这么写不理解的同学,请看《ViewPager 详解(二)---详解四大函数》
2、initCursorPos()---初始化指示器位置
游标在初始化显示时,我们要根据屏幕宽度来显示游标位置。先看看这部分代码:
[java] view plain copy
- //初始化指示器位置
- public void initCursorPos() {
- // 初始化动画
- cursor = (ImageView) findViewById(R.id.cursor);
- bmpw = BitmapFactory.decodeResource(getResources(), R.drawable.a)
- .getWidth();// 获取图片宽度
- DisplayMetrics dm = new DisplayMetrics();
- getWindowManager().getDefaultDisplay().getMetrics(dm);
- int screenW = dm.widthPixels;// 获取分辨率宽度
- offset = (screenW / viewList.size() - bmpw) / 2;// 计算偏移量
- Matrix matrix = new Matrix();
- matrix.postTranslate(offset, 0);
- cursor.setImageMatrix(matrix);// 设置动画初始位置
- }
可能有些同学不明白的位置在于,初始化位置的偏移量为什么这么算,下面,我画了张图,看下就应该明白了。
最后对于偏移的方法,可用的很多,这里仿网上的代码用了matrix;当然大家可以用其它的偏移方法,一样。
3、MyPageChangeListener()---页面改变监听器
代码如下 :
[java] view plain copy
- public class MyPageChangeListener implements OnPageChangeListener {
- int one = offset * 2 + bmpw;// 页卡1 -> 页卡2 偏移量
- int two = one * 2;// 页卡1 -> 页卡3 偏移量
- @Override
- public void onPageSelected(int arg0) {
- Animation animation = null;
- switch (arg0) {
- case 0:
- if (currIndex == 1) {
- animation = new TranslateAnimation(one, 0, 0, 0);
- } else if (currIndex == 2) {
- animation = new TranslateAnimation(two, 0, 0, 0);
- }
- break;
- case 1:
- if (currIndex == 0) {
- animation = new TranslateAnimation(offset, one, 0, 0);
- } else if (currIndex == 2) {
- animation = new TranslateAnimation(two, one, 0, 0);
- }
- break;
- case 2:
- if (currIndex == 0) {
- animation = new TranslateAnimation(offset, two, 0, 0);
- } else if (currIndex == 1) {
- animation = new TranslateAnimation(one, two, 0, 0);
- }
- break;
- }
- currIndex = arg0;
- animation.setFillAfter(true);// True:图片停在动画结束位置
- animation.setDuration(300);
- cursor.startAnimation(animation);
- }
原理是这样,根据滑动到的页面,把游标滑动找指定位置。
这里可能有难度的地方在于,数学……
我画了一张图,解释从第一个页面到第二个页面时的距离为什么是“游标宽度+offset*2”,其它距离类似。
这篇就到这了,时间比较紧,而且这个难度不太大,讲的可能不太细。
源码中,给大家列出了一个有Tab交互的Demo,图片如下:
Android 应用开发---ViewPager---4自主实现滑动指示条相关推荐
- android 事件拦截 (Viewpager不可以左右滑动)
以前没有做过真正的需求,所以从来没有觉得事件拦截分发处理有什么好懂的. 现在做需求了,真的是什么需求都有,你作为开发都要去研究实现.比如说,只能点不能滑动的viewpager.其实这都可以不用view ...
- Android商城开发----viewPager实现广告轮播(在首页Fragment中实现)
Android商城开发----在商城首页Fragment使用viewPager实现广告轮播 写在前面:本篇文章建立在创建底部导航栏之后,对商城首页进行开发.创建底部导航栏的内容请查看:Android开 ...
- Android开发之ViewPager结合Fragment实现滑动页面的效果(源代码分享)
前段日子的博客有介绍过关于ViewPager的使用,发现大家对那篇博客都情有独钟,今天我们就在来看一下ViewPager在Fragment中的使用吧,因为ViewPager是在补丁包中添加的低版本的包 ...
- Android应用开发—ViewPager FragmentPagerAdapter和FragmentStatePagerAdapter下Fragment的生命周期
ViewPager配合不同的PagerAdapter,对应Fragment的生命周期有着不同的表现,了解这个生命周期机制对于开发者选择合适的PagerAdapter实现不同的效果,有着很大的帮助. F ...
- Android游戏开发学习路线
要想使学习Android游戏开发道路平缓,有以下几条建议: 1.反复阅读<Thinking In Java>即<Java编程思想>,反复练习,透彻理解Java语言特性,打牢Ja ...
- Android开发之ViewPager滑动页面效果实现(源代码分享)
我们先来谷歌官方文档对viewpager的介绍,该类允许用户通过页面翻转左右的数据,需要通过实现PagerAdapter适配器来生成视图显示的页面.因为注意这个类是早期设计和开发的,API可能会改变, ...
- Android开发之ViewPager+ActionBar+Fragment实现响应式可滑动Tab
今天我们要实现的这个效果呢,在Android的应用中十分地常见,我们可以看到下面两张图,无论是系统内置的联系人应用,还是AnyView的阅读器应用,我们总能找到这样的影子,当我们滑动屏幕时,Tab可以 ...
- Android实战开发——引导页面(ViewPager)篇
Android实战开发之引导页面 文章目录 Android实战开发之引导页面 前言 一.概述 二.操作步骤 1.操作准备 2.初始化 3.适配器设置 3.圆点的滑动事件 三.总结 前言 本篇文章主要介 ...
- Android实战简易教程-第三十四枪(基于ViewPager和FragmentPagerAdapter实现滑动通用Tab)...
上一段时间写过一篇文章<基于ViewPager实现微信页面切换效果> 里面实现了相似微信Tab的页面.可是这样的实现方法有个问题.就是以后全部的代码逻辑都必须在MainActivity中实 ...
最新文章
- 吴志强院士:CIM与城市未来
- 关于OSPF---1
- drf4 视图与路由组件
- lis最长上升子序列o(nlogn)优化
- User Mode Driver Management介绍(一)
- document.createelement如何绑定点击事件_番外篇-EXCEL如何使用宏(VBA)
- 【端午送福】13000 人正在学习的数据分析实战课,抽奖送送送!
- java给方法参数赋值_java方法参数的赋值问题实例源码介绍
- 情人节程序员用HTML网页表白【表白对话】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
- 两表关联去重查询全部数据
- 双因素方差分析(R)
- numpy抽样函数 np.random.choice用法详解
- PCBA方案设计——蓝牙脂肪心率秤方案
- 外贸出口业务管理解决方案丨汇信
- 旋转木马图片效果图,轮播图
- 什么是Batch,什么是Epoch?在训练模型的时候经常看到的参数,自己的见解。
- 基于sklearn实现Bagging算法(python)
- 日语中特殊汉字「髙」写入文件后乱码
- 如何删除电脑浏览记录
- doc转换成html接口,九云图文档转换接口在线word转pdf,pdf转html,doc转pdf等各种文档相互转换的接口...