[Android]使用ViewPager实现图片滑动展示
通常会自动滚动，也可以根据手势滑动。我没有研究过人家的APP是通过什么实现的，可能有第三方已经封装好的控件可以直接使用，也可能通过webview来实现，毕竟在网页上也有很多类似的内容。如果有高手经验丰富不妨指点一二。不管别人怎样，今天我准备自己动手做一个，其实也不是特别复杂的。
我主要使用的实现方法是自带的ViewPager控件，这个控件主要用于实现屏幕水平切换，有自带的动画效果。Android官网上有使用教程：/training/animation/screen-slide.html，当然下文会有相一致的说明。
然后就开始动手实现这个图片滑动效果吧。
1. 首先解释一下ViewPager的使用过程，通常来说ViewPager可以和Fragment结合起来用，每次ViewPager滑动，也就是展示一个新的Fragment。Fragment里面就是我们需要展现的内容。而这滑动的动画就交给ViewPager来实现。所以第一步我们需要设置好Fragment的内容，新建一个布局文件，这里只需要展示一张图即可，当然可以根据自己的需要进行改变：
&RelativeLayout xmlns:android=&/apk/res/android&
& & android:layout_width=&match_parent&
& & android:layout_height=&match_parent& &
& & &ImageView
& & & & android:id=&@+id/iv_main_pic&
& & & & android:layout_width=&match_parent&
& & & & android:layout_height=&match_parent&
& & & & android:contentDescription=&@string/main_image&
& & & & android:scaleType=&fitXY& /&
&/RelativeLayout&
2. 然后建立Fragment类。
import android.support.v4.app.F
public class PictureSlideFragment extends Fragment {
& & @Override
& & public View onCreateView(LayoutInflater inflater, ViewGroup container,
& & & & & & Bundle savedInstanceState) {
& & & & View v = inflater.inflate(R.layout.fragment_picture_slide, container, false);
3. 在Activity布局文件的合适位置加入ViewPager控件。
& & & & &android.support.v4.view.ViewPager
& & & & & & android:id=&@+id/pager&
& & & & & & android:layout_width=&match_parent&
& & & & & & android:layout_height=&match_parent& /&
4. 在Activity中得到这个ViewPager并且为其设置Adapter:
private ViewPager mP
protected void onCreate(Bundle savedInstanceState) {
　　super.onCreate(savedInstanceState);
　　setContentView(R.layout.activity_main);
　　mPager = (ViewPager) findViewById(R.id.pager);
　　mPagerAdapter = new PictureSlidePagerAdapter(getSupportFragmentManager());
　　mPager.setAdapter(mPagerAdapter);
5. 这个Adapter继承自FragmentStatePagerAdapter，其中getCount()返回的值是一共需要显示的内容数，是个常数:
& & private class PictureSlidePagerAdapter extends FragmentStatePagerAdapter {
& & & & public PictureSlidePagerAdapter(FragmentManager fm) {
& & & & & & super(fm);
& & & & & & // TODO Auto-generated constructor stub
& & & & @Override
& & & & public Fragment getItem(int arg0) {
& & & & & & // TODO Auto-generated method stub
& & & & & & return new PictureSlideFragment();
& & & & @Override
& & & & public int getCount() {
& & & & & & // TODO Auto-generated method stub
& & & & & & return NUM_PIC;
6. 到目前为止所有的内容都和官方的教程一致。如果你在Fragment中的那个ImageView通过android:src属性设置图片，会实现数张静态图片滑动的效果。这离我们的目标还有一些区别：
（1）图片需要能够动态改变，而不是固定的内容；
（2）每张图片需要有点击的响应；
（3）一般情况下需要实现循环滚动，即滑到最后一张图时继续滑动会回到第一张图；
（4）图片要能够自动滚动；
（5）图片下方需要有显示第几张图的指示（小圆点）。
7. 接下来我们朝着目标继续努力。首先是图片的变化。观察上述Adapter的实现方法，可以发现getItem()方法每次返回的都是一个Fragment的实例，需要显示多少个Fragment这个方法就会执行多少遍。但我们发现每次创建新的Fragment都没有区别，直接new一个了事，因此我们需要改写这个创建新Fragment实例的方法，以实现每次新建的Fragment实例都不一样。在我们的Fragment类中补充如下内容：
& & private int mI
& & public static PictureSlideFragment newInstance(int index) {
& & & & PictureSlideFragment f = new PictureSlideFragment();
& & & & Bundle args = new Bundle();
& & & & args.putInt(&index&, index);
& & & & f.setArguments(args);
& & @Override
& & public void onCreate(Bundle savedInstanceState) {
& & & & // TODO Auto-generated method stub
& & & & super.onCreate(savedInstanceState);
& & & & mIndex = getArguments() != null ? getArguments().getInt(&index&) : 1;
这个叫做newInstance的方法主要功能也是创建一个Fragment实例，和直接new的区别是传递进来一个index参数，这个参数在onCreate()方法中被获得。然后我们将Adapter的getItem()改写为如下：
& & & & @Override
& & & & public Fragment getItem(int arg0) {
& & & & & & // TODO Auto-generated method stub
& & & & & & return PictureSlideFragment.newInstance(arg0);
每次getItem都将Item的序号传递到新建的Fragment，然后再Fragment中根据需要设定不同的内容。真正实现的时候，可以在Fragment中加入从网络获取图片的操作。
8. 图片的点击响应。这个比较简单，在Fragment中获得ImageView控件，然后设置onClick监听器即可。就不给出代码了。
9. 图片的循环滚动。一般的ViewPager不能实现内容的循环滚动，即第一张向左滑或者最后一张向右滑都会到顶，显示到顶的效果。如果要从ViewPager自身入手加入这功能需要对这个控件进行改写，比较麻烦，这里我从stackoverflow上找到了一种比较聪明的办法。
　　要实现几张图的循环滚动，其实只需要满足视觉效果就可以了。比如有三张图A，B，C，要实现A-&B-&C-&A-&B......以及C-&B-&A-&C-&B...这样的循环，实际上可以这样实现：
　　提供5张图，分别是C' &A &B &C &A'，其中C'和C，A'和A完全相同，当滑到C'时，自动切换到C，当滑到A'时，自动切换到A，并且这个切换过程没有动画，于是，使用者体验出来的感觉就是A B C三张图在循环滚动了。
　　于是我们为ViewPager添加setOnPageChangeListener方法：
& & & & mPager.setOnPageChangeListener(new OnPageChangeListener() {
& & & & & &&
& & & & & & @Override
& & & & & & public void onPageSelected(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 onPageScrollStateChanged(int state) {
& & & & & & & & // 当到第一张时切换到倒数第二张，当到最后一张时切换到第二张
& & & & & & & & &if (state == ViewPager.SCROLL_STATE_IDLE) {
& & & & & & & & & & &int curr = mPager.getCurrentItem();
& & & & & & & & & & &int lastReal = mPager.getAdapter().getCount() - 2;
& & & & & & & & & & &if (curr == 0) {
& & & & & & & & & & & & &mPager.setCurrentItem(lastReal, false);
& & & & & & & & & & &} else if (curr & lastReal) {
& & & & & & & & & & & & &mPager.setCurrentItem(1, false);
& & & & & & & & & & &}
& & & & & & & & &}
& & & & & & }
& & & & });
覆写的onPageScrollStateChanged方法在滑动内容改变时调用，在其中实现C'和C，A'和A的切换。
10. 图片的自动滚动，这里我使用了timer启动线程来实现，定时器线程每隔5秒发送消息，UI线程捕获消息并调用ViewPager.setCurrentItem(currentItem+1, true)方法，滚动到下一张图片。代码就不赘述了。这里有个体验细节，就是当使用者用手指滑动时，定时器需要取消，防止自动滑动和手指滑动发生冲突。这个我在Fragment的ImageView的onTouchListener中实现：
& & & & mMainImage.setOnTouchListener(new OnTouchListener() {
& & & & & &&
& & & & & & @Override
& & & & & & public boolean onTouch(View v, MotionEvent event) {
& & & & & & & & if (event.getAction() == MotionEvent.ACTION_DOWN) {
& & & & & & & & & & ((MainActivity)getActivity()).getTimer().cancel();
& & & & & & & & } else if (event.getAction() == MotionEvent.ACTION_CANCEL) {
& & & & & & & & & & ((MainActivity)getActivity()).startSwitchImage();
& & & & & & & & }
& & & & & & & &
& & & & & & }
& & & & });
&11. 图片序号的指示，也就是图片下方的几个小圆点，这个实现比较简单，首先在Activity的布局文件中添加几个图片，因为这几个小圆点本身不能随ViewPager移动，因此不能放在Fragment布局中。切换内容也就是切换显示不同颜色小圆点的位置，这个方法同样可以在onPageScrollStateChanged方法中调用。注意一些细节，因为之前为了实现循环滚动而多用了两个Fragment，而显示的小圆点数量不能增加，因此需要调整好对应的序号。代码也不再赘述了。本帖子已过去太久远了，不再提供回复功能。发送私信成功
DevStore用户登录
还没有DevStore帐号？
快捷登录：
您目前的活力值不够下载该资源哦~~
怎么样快速获得活力值？
下载此资源将扣除活力值-20
（只在首次下载扣除活力值，之后可以免费下载）
满足所有需求，助您轻松工作
> 源码详情
android SCViewPager 欢迎页面滑动效果
16:08 && 浏览量（2605） &&
功能分类：特效
支持平台：Android
运行环境：Android
开发语言：Java
开发工具：Android Studio
源码大小：406.51KB
358 人下载
android SCViewPager 欢迎页面滑动效果，支持上下滑动切换页面，页面切换渐变出现下一个页面特效，这充分扩展了ViewPager 的切换页面功能。挺不错的
运行效果图
DevStore所有源码来自用户上传分享，版权问题及牵扯到商业纠纷均与DevStore无关。
package com.dev.sacot41.
import android.app.A
import android.test.ApplicationTestC
public class ApplicationTest extends ApplicationTestCase {
public ApplicationTest() {
super(Application.class);
下载（358）
获取活力值
源码上传作者
资料下载排行
开发者交流群：
DevStore技术交流群2：
运营交流群：
产品交流群：
深圳尺子科技有限公司
深圳市南山区蛇口网谷万海大厦C栋504
Copyright (C) 2015 DevStore. All Rights Reserved当前位置： >
Indicator 取代 tabhost，实现网易顶部tab，新浪微博主页底部tab
时间： 09:16 来源：互联网 作者：源码搜藏 浏览：
源码类别：多页切换TabHost
源码大小：未知
编码格式：不限
授权方式：免费源码
运行环境：Android studio
官方网址：暂无
欢迎加入QQ群讨论学习
ViewPagerIndicator
1. 支持自定义tab样式
2. 支持自定义滑动块样式和位置
3. 支持自定义切换tab的过渡效果
4. 支持子界面的预加载和界面缓存
5. 支持设置界面是否可滑动
6. android:minSdkVersion=&8& android:targetSdkVersion=&25&
7.导入方式
&1&gradle导入
compile 'com.shizhefei:ViewPagerIndicator:1.1.4'
由于用到了v4和recyclerview所以也要导入他们
compile 'com.android.support:support-v4:23.4.0'
compile 'com.android.support:recyclerview-v7:23.4.0'
&2&jar包方式导入
Download Library&JAR
Download sample&Apk
8.历史版本和更新信息
/LuckyJayce/ViewPagerIndicator/releases
使用方法 #
package com.shizhefei.indicator.
import android.os.B
import android.support.v4.app.FragmentA
import android.support.v4.view.ViewP
import android.view.LayoutI
import android.view.V
import android.view.ViewG
import android.view.ViewGroup.LayoutP
import com.shizhefei.indicator.R;
import com.shizhefei.view.indicator.I
import com.shizhefei.view.indicator.IndicatorViewP
import com.shizhefei.view.indicator.IndicatorViewPager.IndicatorPagerA
import com.shizhefei.view.indicator.IndicatorViewPager.IndicatorViewPagerA
public class GuideActivity extends FragmentActivity {
private IndicatorViewPager indicatorViewP
private LayoutI
protected void onCreate(Bundle arg0) {
super.onCreate(arg0);
setContentView(R.layout.activity_guide);
ViewPager viewPager = (ViewPager) findViewById(R.id.guide_viewPager);
Indicator indicator = (Indicator) findViewById(R.id.guide_indicator);
// 将viewPager和indicator使用
indicatorViewPager = new IndicatorViewPager(indicator, viewPager);
inflate = LayoutInflater.from(getApplicationContext());
// 设置indicatorViewPager的适配器
indicatorViewPager.setAdapter(adapter);
private IndicatorPagerAdapter adapter = new IndicatorViewPagerAdapter() {
private int[] images = { R.drawable.p1, R.drawable.p2, R.drawable.p3,
R.drawable.p4 };
public View getViewForTab(int position, View convertView,
ViewGroup container) {
if (convertView == null) {
convertView = inflate.inflate(R.layout.tab_guide, container,
return convertV
* 获取每一个界面
public View getViewForPage(int position, View convertView,
ViewGroup container) {
if (convertView == null) {
convertView = new View(getApplicationContext());
convertView.setLayoutParams(new LayoutParams(
LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
convertView.setBackgroundResource(images[position]);
return convertV
* 获取界面数量
public int getCount() {
return images.
有了该类库你可以实现以下布局
1.ViewPager ##
这个版本以后 android-support-v4 可以用原生的了 没有重写ViewPager。
原先重写的ViewPager的setPrepareNumber 用 Fragment继承于LazyFragment代替实现懒加载
原先setCanScroll 转移到了 ViewPager的子类SViewPager上
2.使用LazyFragment来配合ViewPager的setOffscreenPageLimit进行懒加载界面和防止重新创建界面**
2.Indicator ##
顾名思义是指示器的意思。有点像水平方向的listview 可以自定义item。
setCurrentItem(int item, boolean anim) 设置当前项
setOnTransitionListener(OnTransitionListener onTransitionListener)设置tab过渡动画
setOnItemSelectListener(OnItemSelectedListener onItemSelectedListener)设置tab切换监听
setScrollBar(ScrollBar scrollBar)设置跟随tab滑动的滑动块
1.FixedIndicatorView 主要用于固定大小来平均分配tab的情况。
setSplitMethod(int splitMethod) 设置tab分割方式，平均分割，wrap分割，比重分割
setCenterView(View centerView, ViewGroup.LayoutParams layoutParams)设置显示在tab中心的View，用于实现新浪微博底部+号
getCenterView();
2.ScrollIndicatorView 主要用于多个tab可以进行滑动。
setSplitAuto(boolean splitAuto) 设置是否自动分割，当总tab宽度小于Indicator宽度就平均分割tab，或者比重分割。大于Indicator宽度就wrap分割
setPinnedTabView(boolean isPinnedTabView) 设置是否固定第一个tab
setPinnedShadow(Drawable shadowDrawable, int shadowWidth)设置固定tab的阴影
3.RecyclerIndicatorView 主要用于无数个tab可以进行滑动。
优点适用于tab很多的情况，缺点tab少的时候没有ScrollIndicatorVie的自动分割功能。
3.indicatorViewPager
用于将ViewPager和Indicator 联合使用。
indicatorViewPager.setAdapter(IndicatorPagerAdapter adapter)
// 设置它可以自定义实现在滑动过程中，tab项的字体变化，颜色变化等等过渡效果
indicatorViewPager.setIndicatorOnTransitionListener(onTransitionListener);
// 设置它可以自定义滑动块的样式
indicatorViewPager.setIndicatorScrollBar(scrollBar);
// 设置page是否可滑动切换
indicatorViewPager.setPageCanScroll(false);
* 设置缓存界面的个数，左右两边缓存界面的个数，不会被重新创建。 默认是1，表示左右两边
* 相连的1个界面和当前界面都会被缓存住，比如切换到左边的一个界面，那个界面是不会重新创建的。
indicatorViewPager.setPageOffscreenLimit(1);
* 设置预加载界面的个数。左右两边加载界面的个数 默认是1，表示左右两边 相连的1个界面会和当前界面同时加载
indicatorViewPager.setPagePrepareNumber(1);
// 设置页面切换监听
indicatorViewPager.setOnIndicatorPageChangeListener(onIndicatorPageChangeListener);
// 设置page间的图片的宽度
indicatorViewPager.setPageMargin(1);
// 设置page间的图片
indicatorViewPager.setPageMarginDrawable(d);
4.BannerComponent （无限轮播Banner）
继承于IndicatorViewPager，所以使用方法和IndicatorViewPager一样
setAutoPlayTime(long time) 设置自动播放的间隔时间
startAutoPlay(); 开始播放
stopAutoPlay(); 停止播放
5.IndicatorPagerAdapter
子类IndicatorFragmentPagerAdapter 用于 界面是fragment的形式。 子类IndicatorViewPagerAdapter 用于 界面是View的形式.
indicatorViewPager.setOnIndicatorPageChangeListener(onIndicatorPageChangeListener)设置界面的切换监听。
Indicator 既可以单独使用。也可以通过indicatorViewPager的形式联合viewpager一起使用。
6.ScrollBar
tab的滑动块通过indicatorViewPager.setIndicatorScrollBar(scrollBar);进行设置 子类有
ColorBar 颜色的滑动块
DrawableBar 图片滑动块
LayoutBar 布局滑动块
TextWidthColorBar 大小同tab里的text一样宽的颜色的滑动块
SpringBar 实现拖拽效果的圆形滑动块 该类修改于/chenupt/SpringIndicator
7.OnTransitionListener
OnTransitionTextListener tab的字体颜色变化，和字体大小变化效果
8.LazyFragment 懒加载Fragment
Fragment继承该类实现 显示Framgment的时候才会去创建你自己的界面布局，否则不创建。
1.实现原理：
一开始onCreateView的时候只是加载一个空的FrameLayout
当通过结合onCreateView和setUserVisibleHint两个方法进行判断是否需要加载真正的布局界面，需要的时候把真正的布局界面添加到之前的空的FrameLayout上面
2.回调方法：
onCreateViewLazy 对应 onCreateView
onDestroyViewLazy 对应 onDestroyView
onResumeLazy 对应 onResume
onPauseLazy 对应 onPause
onDestroy 和 onCreate 方法不变
另外添加了onFragmentStartLazy fragment显示的时候调用，在ViewPager界面切换的时候你就可以通过这个判断是否显示
onFragmentStopLazy fragment不显示的时候调用
上面所有有lazy结尾的方法都意味着 真正的布局正在显示
3.使用方法
放心在onCreateViewLazy 的时候创建布局，初始化数据。调用该方法的时候，界面已经要显示啦 在onDestroyViewLazy的方法里面做释放操作
转载请注明出处
源码搜藏网所有源码来自用户上传分享，版权问题及牵扯到商业纠纷均与源码搜藏网无关ul').hide()" onmouseenter="jQuery('.sitegroup>ul').show()">
绔嬪嵆鍏呭}