Android App user guide development

Before a user officially uses the APP, a user guide is usually provided, prompting the user how to operate or add new features. Please refer to the QQ address book user guide:

Slide the image with your fingers
The point below will change the color
It indicates the position of the current image in the whole group.
 
 
 
My solution: Fill in the image in the ViewFlipper component. When switching the image, record the current position. The default value starts from 0. When switching to the next one, add 1 to the previous one and subtract 1 from the next one, change the Image view style at the corresponding position
 

First, prepare five help charts that have been created, and two dot charts. One is orange, indicating that the image is selected, and the other is gray, indicating that the image is not selected.
The following key code is annotated:
Layout file:
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>
 
These images may change after the new version is released, and the number of images may change. Therefore, the dynamic ImageView creation method is adopted. JAVA code:
Custom dot 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 );
}

}
 
Custom guide image ImageView:
View Code
 
Class GuideImage extends ImageView {

Public GuideImage (Context context, Integer resId ){
Super (context );
SetImageResource (resId );
SetScaleType (ScaleType. FIT_XY );
}

}
 
Initialize the view information of the 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 );

}
}
 
Implement the onFling method in the OnGestureListener interface and execute the sliding gesture event.
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 ++; // record location
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;
}
 
 
Click to download the complete project file: http://www.bkjia.com/uploadfile/2012/0529/20120529113622662.rar
 

 

From the cabbage party