Android App使用指南的开发

在用户正式使用APP之前，通常会做一个使用指南，提示用户在应该怎么操作或者增加了什么新功能，请看QQ通讯录的使用指南： 

     用手指滑动切换图片 
     下方的点将改变颜色 
     暗示当前的图片在整组图片的位置.

 

 

 

 

 

 

我的解决办法:往ViewFlipper组件里面填充图片,在切换图片的时候，记录当前位置，默认从0开始,切换到下一张就加1,到上一张就减1,改变对应位置的ImageView的样式

首先准备5张已经制作好的帮助图，另外还有2张圆点图，一张是橙色,表示选中，一张是灰色,表示未被选中.

以下部分关键代码,配有注释： 

布局文件：

View Code

<? xml version="1.0" encoding="utf-8" ?> 
< FrameLayout  xmlns:android ="http://schemas.android.com/apk/res/android%22
    android:layout_width=" fill_parent" 
    android:layout_height ="fill_parent"  
    android:gravity ="center"   >

     < ViewFlipper 
         android:id ="@+id/viewFlipper"  
        android:layout_width ="fill_parent"  
        android:layout_height ="fill_parent"  
        android:flipInterval ="1000"  
        android:gravity ="center"  
        android:persistentDrawingCache ="animation"   > 
     </ ViewFlipper >

     < LinearLayout 
         android:id ="@+id/layout_point"  
        android:layout_width ="fill_parent"  
        android:layout_height ="wrap_content"  
        android:layout_gravity ="bottom"  
        android:layout_marginBottom ="110dp"  
        android:gravity ="center"  
        android:orientation ="horizontal"   > 
     </ LinearLayout >

</ FrameLayout >

这些图片可能在发布新版本后要更换，而且数量也可能会改变，于是采取动态的创建ImageView的办法，JAVA代码：

自定义的圆点ImageView:

View Code

class PointImage  extends ImageView {
        LinearLayout.LayoutParams margins =  new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);

         public PointImage(Context context) {
             super(context);
            margins.setMargins(20, 0, 0, 0);
            setLayoutParams(margins);
            normal();
        
        }

         public  void choose() {
            setBackgroundResource(R.drawable.app_tips_point_choose);
        }

         public  void normal() {
            setBackgroundResource(R.drawable.app_tips_point_normal);
        }

    }

自定义的指南图ImageView:

View Code

class GuideImage  extends ImageView {

         public GuideImage(Context context, Integer resId) {
             super(context);
            setImageResource(resId);
            setScaleType(ScaleType.FIT_XY);
        }

    }

初始化activity的视图信息

View Code

private  void initView() {
        mGestureDetector =  new GestureDetector( this);
        viewFlipper = (ViewFlipper) findViewById(R.id.viewFlipper);
        layout_point = (LinearLayout) findViewById(R.id.layout_point);
        context = getApplicationContext();

         for ( int i = 0; i < guideId.length; i++) {
            PointImage pointImage =  new PointImage(context);
            GuideImage guideImage =  new GuideImage(context, guideId[i]);
             if (i == 0) {
                pointImage.choose();
            }
            layout_point.addView(pointImage);
            viewFlipper.addView(guideImage);

        }
    }

实现OnGestureListener接口里面的onFling方法，执行滑动手势事件

View Code

    @Override
     public  boolean onFling(MotionEvent e1, MotionEvent e2,  float velocityX,  float velocityY) {
        Log.i("kcl", "counter=" + counter);
         if (e1.getX() - e2.getX() > 80) {
            viewFlipper.setInAnimation(AnimationUtils.loadAnimation( this, R.anim.push_left_in));
            viewFlipper.setOutAnimation(AnimationUtils.loadAnimation( this, R.anim.push_left_out));
             if (counter < guideId.length-1) {
                viewFlipper.showNext();
                counter++;  // 记录位置
                setPointChoose();
            }  else {
                startActivity( new Intent(getApplication(), MainNavTab. class));
                 this.finish();
            }
             return  true;
        }  else  if (e1.getX() - e2.getX() < -80) {
            viewFlipper.setInAnimation(AnimationUtils.loadAnimation( this, R.anim.push_right_in));
            viewFlipper.setOutAnimation(AnimationUtils.loadAnimation( this, R.anim.push_right_out));
             if (counter > 0) {
                viewFlipper.showPrevious();
                counter--;
            }
            setPointChoose();
             return  true;
        }
         return  false;
    }