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

最新推荐文章于 2019-07-19 21:44:37 发布

最新推荐文章于 2019-07-19 21:44:37 发布 · 167 阅读

文章标签：

#移动开发 #java

本文介绍了一种利用Android中的ViewPager组件实现应用引导界面的方法。通过示例代码展示了如何创建平滑切换的指引页面，并实现底部指示器的动态更新。

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

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

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

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

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

main.xml源码：

 
<?xmlversion="1.0"encoding="utf-8"?> 

<FrameLayoutxmlns:android="http://schemas.android.com/apk/res/android" 

android:layout_width="fill_parent" 

android:layout_height="fill_parent" 

android:orientation="vertical"> 



<android.support.v4.view.ViewPager 

android:id="@+id/guidePages" 

android:layout_width="fill_parent" 

android:layout_height="wrap_content"/> 

 

<RelativeLayout 

android:layout_width="fill_parent" 

android:layout_height="wrap_content" 

android:orientation="vertical"> 

<LinearLayout 

android:id="@+id/viewGroup" 

android:layout_width="fill_parent" 

android:layout_height="wrap_content" 

android:layout_alignParentBottom="true" 

android:layout_marginBottom="30dp" 

android:gravity="center_horizontal" 

android:orientation="horizontal"> 

</LinearLayout> 

</RelativeLayout> 



</FrameLayout>

item01.xml源码：

 
<?xmlversion="1.0"encoding="utf-8"?> 

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android" 

android:layout_width="fill_parent" 

android:layout_height="fill_parent" 

android:orientation="vertical"> 

 

<ImageView 

android:layout_width="fill_parent" 

android:layout_height="fill_parent" 

android:background="@drawable/feature_guide_0"> 

</ImageView> 

 

</LinearLayout>

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

GuideViewDemoActivity.java 源码：

 
packagecom.andyidea.guidedemo; 



importjava.util.ArrayList; 



importandroid.app.Activity; 

importandroid.os.Bundle; 

importandroid.os.Parcelable; 

importandroid.support.v4.view.PagerAdapter; 

importandroid.support.v4.view.ViewPager; 

importandroid.support.v4.view.ViewPager.OnPageChangeListener; 

importandroid.view.LayoutInflater; 

importandroid.view.View; 

importandroid.view.ViewGroup; 

importandroid.view.ViewGroup.LayoutParams; 

importandroid.view.Window; 

importandroid.widget.ImageView; 



publicclassGuideViewDemoActivityextendsActivity { 

 

privateViewPager viewPager; 

privateArrayList<View> pageViews; 

privateViewGroup main, group; 

privateImageView imageView; 

privateImageView[] imageViews; 

 

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

@Override 

publicvoidonCreate(Bundle savedInstanceState) { 

super.onCreate(savedInstanceState); 

this.requestWindowFeature(Window.FEATURE_NO_TITLE); 

 

LayoutInflater inflater = getLayoutInflater(); 

pageViews =newArrayList<View>(); 

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

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

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

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

 

imageViews =newImageView[pageViews.size()]; 

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

 

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

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

 

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

 

for(inti =0; i < pageViews.size(); i++) { 

imageView =newImageView(GuideViewDemoActivity.this); 

imageView.setLayoutParams(newLayoutParams(20,20)); 

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

imageViews[i] = imageView; 

if(i ==0) { 

//默认选中第一张图片 

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

}else{ 

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

} 

group.addView(imageViews[i]); 

} 

 

setContentView(main); 

 

viewPager.setAdapter(newGuidePageAdapter()); 

viewPager.setOnPageChangeListener(newGuidePageChangeListener()); 

} 

 

/** 指引页面Adapter */ 

classGuidePageAdapterextendsPagerAdapter { 

 

@Override 

publicintgetCount() { 

returnpageViews.size(); 

} 

 

@Override 

publicbooleanisViewFromObject(View arg0, Object arg1) { 

returnarg0 == arg1; 

} 

 

@Override 

publicintgetItemPosition(Object object) { 

// TODO Auto-generated method stub 

returnsuper.getItemPosition(object); 

} 

 

@Override 

publicvoiddestroyItem(View arg0,intarg1, Object arg2) { 

// TODO Auto-generated method stub 

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

} 

 

@Override 

publicObject instantiateItem(View arg0,intarg1) { 

// TODO Auto-generated method stub 

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

returnpageViews.get(arg1); 

} 

 

@Override 

publicvoidrestoreState(Parcelable arg0, ClassLoader arg1) { 

// TODO Auto-generated method stub 

 

} 

 

@Override 

publicParcelable saveState() { 

// TODO Auto-generated method stub 

returnnull; 

} 

 

@Override 

publicvoidstartUpdate(View arg0) { 

// TODO Auto-generated method stub 

 

} 

 

@Override 

publicvoidfinishUpdate(View arg0) { 

// TODO Auto-generated method stub 

 

} 

} 

 

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

classGuidePageChangeListenerimplementsOnPageChangeListener { 

 

@Override 

publicvoidonPageScrollStateChanged(intarg0) { 

// TODO Auto-generated method stub 

 

} 

 

@Override 

publicvoidonPageScrolled(intarg0,floatarg1,intarg2) { 

// TODO Auto-generated method stub 

 

} 

 

@Override 

publicvoidonPageSelected(intarg0) { 

for(inti =0; i < imageViews.length; i++) { 

imageViews[arg0] 

.setBackgroundResource(R.drawable.page_indicator_focused); 

if(arg0 != i) { 

imageViews[i] 

.setBackgroundResource(R.drawable.page_indicator); 

} 

} 

 

} 

 

} 

 

}