现在很多Android应用在首次安装完都会有指引如何使用该应用的某些功能的指引界面,这样会获得很好的用户体验,能够帮助用户更好使用应用的某些功 能。其实该功能和Android主界面的 luncher 的功能完全一样的效果,可以实现左右拖动。
下面结合 ViewPager 的实例来展示如何实现该功能,先看下该Demo的结构图:
注: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" > |
07 | < android.support.v4.view.ViewPager |
08 | android:id = "@+id/guidePages" |
09 | android:layout_width = "fill_parent" |
10 | android:layout_height = "wrap_content" /> |
13 | android:layout_width = "fill_parent" |
14 | android:layout_height = "wrap_content" |
15 | android:orientation = "vertical" > |
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" > |
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" > |
08 | android:layout_width = "fill_parent" |
09 | android:layout_height = "fill_parent" |
10 | android:background = "@drawable/feature_guide_0" > |
其中item02.xml,item03.xml,item04.xml布局文件的源码和item01.xml布局文件一样,只是 ImageView 中的 android:background 属性的背景图片不同而已。
GuideViewDemoActivity.java 源码:
001 | package com.andyidea.guidedemo; |
003 | import java.util.ArrayList; |
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; |
018 | public class GuideViewDemoActivity extends Activity { |
020 | private ViewPager viewPager; |
021 | private ArrayList<View> pageViews; |
022 | private ViewGroup main, group; |
023 | private ImageView imageView; |
024 | private ImageView[] imageViews; |
026 | /** Called when the activity is first created. */ |
028 | public void onCreate(Bundle savedInstanceState) { |
029 | super .onCreate(savedInstanceState); |
030 | this .requestWindowFeature(Window.FEATURE_NO_TITLE); |
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 )); |
039 | imageViews = new ImageView[pageViews.size()]; |
040 | main = (ViewGroup)inflater.inflate(R.layout.main, null ); |
043 | group = (ViewGroup)main.findViewById(R.id.viewGroup); |
045 | viewPager = (ViewPager)main.findViewById(R.id.guidePages); |
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; |
054 | imageViews[i].setBackgroundResource(R.drawable.page_indicator_focused); |
056 | imageViews[i].setBackgroundResource(R.drawable.page_indicator); |
058 | group.addView(imageViews[i]); |
061 | setContentView(main); |
063 | viewPager.setAdapter( new GuidePageAdapter()); |
064 | viewPager.setOnPageChangeListener( new GuidePageChangeListener()); |
068 | class GuidePageAdapter extends PagerAdapter { |
071 | public int getCount() { |
072 | return pageViews.size(); |
076 | public boolean isViewFromObject(View arg0, Object arg1) { |
081 | public int getItemPosition(Object object) { |
083 | return super .getItemPosition(object); |
087 | public void destroyItem(View arg0, int arg1, Object arg2) { |
089 | ((ViewPager) arg0).removeView(pageViews.get(arg1)); |
093 | public Object instantiateItem(View arg0, int arg1) { |
095 | ((ViewPager) arg0).addView(pageViews.get(arg1)); |
096 | return pageViews.get(arg1); |
100 | public void restoreState(Parcelable arg0, ClassLoader arg1) { |
106 | public Parcelable saveState() { |
112 | public void startUpdate(View arg0) { |
118 | public void finishUpdate(View arg0) { |
125 | class GuidePageChangeListener implements OnPageChangeListener { |
128 | public void onPageScrollStateChanged( int arg0) { |
134 | public void onPageScrolled( int arg0, float arg1, int arg2) { |
140 | public void onPageSelected( int arg0) { |
141 | for ( int i = 0 ; i < imageViews.length; i++) { |
143 | .setBackgroundResource(R.drawable.page_indicator_focused); |
146 | .setBackgroundResource(R.drawable.page_indicator); |
运行上面的程序,效果截图如下:
至此大功告成,已经采用ViewPager组件实现了左右滑动(拖动)效果。本文为[Andy.Chen]原创,转载请注明出处,谢谢。
转自:http://www.open-open.com/lib/view/open1333238063514.html