Android中如何使用ViewPager实现类似laucher左右拖动效果

Bertha 。 2022-03-27 01:01 263阅读 0赞

现在很多Android应用在首次安装完都会有指引如何使用该应用的某些功能的指引界面，这样会获得很好的用户体验，能够帮助用户更好使用应用的某些功 能。其实该功能和Android主界面的 luncher 的功能完全一样的效果，可以实现左右拖动。

下面结合 ViewPager 的实例来展示如何实现该功能，先看下该Demo的结构图：

![Android中如何使用ViewPager实现类似laucher左右拖动效果][Android_ViewPager_laucher]

注：ViewPager类是实现左右两个屏幕平滑地切换的一个类，是由Google 提供的， 使用ViewPager首先需要引入android-support-v4.jar这个jar包。其中工程项目中的 libs 文件夹下存放着 android-support-v4.jar这个jar包。drawable文件夹下包含有图片资源文件。

以下是工程中各个文件的源码：

main.xml源码：

`01`  
`<?``xml` `version``=``"1.0"` `encoding``=``"utf-8"``?>`

`02`  
`<``FrameLayout` `xmlns:android``=``"http://schemas.android.com/apk/res/android"`

`03`  
```android:layout_width``=``"fill_parent"`

`04`  
```android:layout_height``=``"fill_parent"`

`05`  
```android:orientation``=``"vertical"` `>`

`06`

`07`  
```<``android.support.v4.view.ViewPager`

`08`  
```android:id``=``"@+id/guidePages"`

`09`  
```android:layout_width``=``"fill_parent"`

`10`  
```android:layout_height``=``"wrap_content"``/>`

`11`  
``

`12`  
```<``RelativeLayout`

`13`  
```android:layout_width``=``"fill_parent"`

`14`  
```android:layout_height``=``"wrap_content"`

`15`  
```android:orientation``=``"vertical"` `>`

`16`  
```<``LinearLayout`

`17`  
```android:id``=``"@+id/viewGroup"`

`18`  
```android:layout_width``=``"fill_parent"`

`19`  
```android:layout_height``=``"wrap_content"`

`20`  
```android:layout_alignParentBottom``=``"true"`

`21`  
```android:layout_marginBottom``=``"30dp"`

`22`  
```android:gravity``=``"center_horizontal"`

`23`  
```android:orientation``=``"horizontal"` `>`

`24`  
```</``LinearLayout``>`

`25`  
```</``RelativeLayout``>`

`26`

`27`  
`</``FrameLayout``>`

item01.xml源码：

`01`  
`<?``xml` `version``=``"1.0"` `encoding``=``"utf-8"``?>`

`02`  
`<``LinearLayout` `xmlns:android``=``"http://schemas.android.com/apk/res/android"`

`03`  
```android:layout_width``=``"fill_parent"`

`04`  
```android:layout_height``=``"fill_parent"`

`05`  
```android:orientation``=``"vertical"` `>`

`06`  
``

`07`  
```<``ImageView`

`08`  
```android:layout_width``=``"fill_parent"`

`09`  
```android:layout_height``=``"fill_parent"`

`10`  
```android:background``=``"@drawable/feature_guide_0"` `>`

`11`  
```</``ImageView``>`

`12`  
``

`13`  
`</``LinearLayout``>`

其中item02.xml,item03.xml,item04.xml布局文件的源码和item01.xml布局文件一样，只是 ImageView 中的 android:background 属性的背景图片不同而已。

GuideViewDemoActivity.java 源码：

`001`  
`package` `com.andyidea.guidedemo;`

`002`

`003`  
`import` `java.util.ArrayList;`

`004`

`005`  
`import` `android.app.Activity;`

`006`  
`import` `android.os.Bundle;`

`007`  
`import` `android.os.Parcelable;`

`008`  
`import` `android.support.v4.view.PagerAdapter;`

`009`  
`import` `android.support.v4.view.ViewPager;`

`010`  
`import` `android.support.v4.view.ViewPager.OnPageChangeListener;`

`011`  
`import` `android.view.LayoutInflater;`

`012`  
`import` `android.view.View;`

`013`  
`import` `android.view.ViewGroup;`

`014`  
`import` `android.view.ViewGroup.LayoutParams;`

`015`  
`import` `android.view.Window;`

`016`  
`import` `android.widget.ImageView;`

`017`

`018`  
`public` `class` `GuideViewDemoActivity``extends` `Activity {`

`019`  
``

`020`  
```private` `ViewPager viewPager;`

`021`  
```private` `ArrayList<View> pageViews;`

`022`  
```private` `ViewGroup main, group;`

`023`  
```private` `ImageView imageView;`

`024`  
```private` `ImageView[] imageViews;`

`025`  
``

`026`  
```/** Called when the activity is first created. */`

`027`  
```@Override`

`028`  
```public` `void` `onCreate(Bundle savedInstanceState) {`

`029`  
```super``.onCreate(savedInstanceState);`

`030`  
```this``.requestWindowFeature(Window.FEATURE_NO_TITLE);`

`031`  
``

`032`  
```LayoutInflater inflater = getLayoutInflater();`

`033`  
```pageViews =``new` `ArrayList<View>();`

`034`  
```pageViews.add(inflater.inflate(R.layout.item01,``null``));`

`035`  
```pageViews.add(inflater.inflate(R.layout.item02,``null``));`

`036`  
```pageViews.add(inflater.inflate(R.layout.item03,``null``));`

`037`  
```pageViews.add(inflater.inflate(R.layout.item04,``null``));`

`038`  
``

`039`  
```imageViews =``new` `ImageView[pageViews.size()];`

`040`  
```main = (ViewGroup)inflater.inflate(R.layout.main,``null``);`

`041`  
``

`042`  
```// group是R.layou.main中的负责包裹小圆点的LinearLayout.`

`043`  
```group = (ViewGroup)main.findViewById(R.id.viewGroup);`

`044`  
``

`045`  
```viewPager = (ViewPager)main.findViewById(R.id.guidePages);`

`046`  
``

`047`  
```for` `(``int` `i =``0``; i < pageViews.size(); i++) {`

`048`  
```imageView =``new` `ImageView(GuideViewDemoActivity.``this``);`

`049`  
```imageView.setLayoutParams(``new` `LayoutParams(``20``,``20``));`

`050`  
```imageView.setPadding(``20``,``0``,``20``,``0``);`

`051`  
```imageViews[i] = imageView;`

`052`  
```if` `(i ==``0``) {`

`053`  
```//默认选中第一张图片`

`054`  
```imageViews[i].setBackgroundResource(R.drawable.page_indicator_focused);`

`055`  
```}``else` `{`

`056`  
```imageViews[i].setBackgroundResource(R.drawable.page_indicator);`

`057`  
```}`

`058`  
```group.addView(imageViews[i]);`

`059`  
```}`

`060`  
``

`061`  
```setContentView(main);`

`062`  
``

`063`  
```viewPager.setAdapter(``new` `GuidePageAdapter());`

`064`  
```viewPager.setOnPageChangeListener(``new` `GuidePageChangeListener());`

`065`  
```}`

`066`  
``

`067`  
```/** 指引页面Adapter */`

`068`  
```class` `GuidePageAdapter``extends` `PagerAdapter {`

`069`  
``

`070`  
```@Override`

`071`  
```public` `int` `getCount() {`

`072`  
```return` `pageViews.size();`

`073`  
```}`

`074`  
``

`075`  
```@Override`

`076`  
```public` `boolean` `isViewFromObject(View arg0, Object arg1) {`

`077`  
```return` `arg0 == arg1;`

`078`  
```}`

`079`  
``

`080`  
```@Override`

`081`  
```public` `int` `getItemPosition(Object object) {`

`082`  
```// TODO Auto-generated method stub`

`083`  
```return` `super``.getItemPosition(object);`

`084`  
```}`

`085`  
``

`086`  
```@Override`

`087`  
```public` `void` `destroyItem(View arg0,``int` `arg1, Object arg2) {`

`088`  
```// TODO Auto-generated method stub`

`089`  
```((ViewPager) arg0).removeView(pageViews.get(arg1));`

`090`  
```}`

`091`  
``

`092`  
```@Override`

`093`  
```public` `Object instantiateItem(View arg0,``int` `arg1) {`

`094`  
```// TODO Auto-generated method stub`

`095`  
```((ViewPager) arg0).addView(pageViews.get(arg1));`

`096`  
```return` `pageViews.get(arg1);`

`097`  
```}`

`098`  
``

`099`  
```@Override`

`100`  
```public` `void` `restoreState(Parcelable arg0, ClassLoader arg1) {`

`101`  
```// TODO Auto-generated method stub`

`102`  
``

`103`  
```}`

`104`  
``

`105`  
```@Override`

`106`  
```public` `Parcelable saveState() {`

`107`  
```// TODO Auto-generated method stub`

`108`  
```return` `null``;`

`109`  
```}`

`110`  
``

`111`  
```@Override`

`112`  
```public` `void` `startUpdate(View arg0) {`

`113`  
```// TODO Auto-generated method stub`

`114`  
``

`115`  
```}`

`116`  
``

`117`  
```@Override`

`118`  
```public` `void` `finishUpdate(View arg0) {`

`119`  
```// TODO Auto-generated method stub`

`120`  
``

`121`  
```}`

`122`  
```}`

`123`  
``

`124`  
```/** 指引页面改监听器 */`

`125`  
```class` `GuidePageChangeListener``implements` `OnPageChangeListener {`

`126`  
``

`127`  
```@Override`

`128`  
```public` `void` `onPageScrollStateChanged(``int` `arg0) {`

`129`  
```// TODO Auto-generated method stub`

`130`  
``

`131`  
```}`

`132`  
``

`133`  
```@Override`

`134`  
```public` `void` `onPageScrolled(``int` `arg0,``float` `arg1,``int` `arg2) {`

`135`  
```// TODO Auto-generated method stub`

`136`  
``

`137`  
```}`

`138`  
``

`139`  
```@Override`

`140`  
```public` `void` `onPageSelected(``int` `arg0) {`

`141`  
```for` `(``int` `i =``0``; i < imageViews.length; i++) {`

`142`  
```imageViews[arg0]`

`143`  
```.setBackgroundResource(R.drawable.page_indicator_focused);`

`144`  
```if` `(arg0 != i) {`

`145`  
```imageViews[i]`

`146`  
```.setBackgroundResource(R.drawable.page_indicator);`

`147`  
```}`

`148`  
```}`

`149`  
``

`150`  
```}`

`151`  
``

`152`  
```}`

`153`  
``

`154`  
`}`

运行上面的程序，效果截图如下：  
![Android中如何使用ViewPager实现类似laucher左右拖动效果][Android_ViewPager_laucher 1]![Android中如何使用ViewPager实现类似laucher左右拖动效果][Android_ViewPager_laucher 2]![Android中如何使用ViewPager实现类似laucher左右拖动效果][Android_ViewPager_laucher 3]![Android中如何使用ViewPager实现类似laucher左右拖动效果][Android_ViewPager_laucher 4]  
至此大功告成，已经采用ViewPager组件实现了左右滑动(拖动)效果。本文为\[Andy.Chen\]原创，转载请注明出处，谢谢。

[Android_ViewPager_laucher]: /images/20220327/305f2ff9a7fd49779d8a4647d1ce2d9a.png
[Android_ViewPager_laucher 1]: http://static.open-open.com/lib/uploadImg/20120401/20120401081108_518.png
[Android_ViewPager_laucher 2]: http://static.open-open.com/lib/uploadImg/20120401/20120401081109_392.png
[Android_ViewPager_laucher 3]: http://static.open-open.com/lib/uploadImg/20120401/20120401081109_860.png
[Android_ViewPager_laucher 4]: /images/20220327/769afe5b84fa42dbb68ded812352cfff.png