在用户正式使用APP之前，通常会做一个使用指南，提示用户在应该怎么操作或者增加了什么新功能，请看QQ通讯录的使用指南：
下方的点将改变颜色
暗示当前的图片在整组图片的位置.
我的解决办法:往ViewFlipper组件里面填充图片,在切换图片的时候，记录当前位置，默认从0开始,切换到下一张就加1,到上一张就减1,改变对应位置的ImageView的样式
首先准备5张已经制作好的帮助图，另外还有2张圆点图，一张是橙色,表示选中，一张是灰色,表示未被选中.
以下部分关键代码,配有注释：
布局文件：
View Code
<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
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
public GuideImage(Context context, Integer resId) {
super(context);
setImageResource(resId);
setScaleType(ScaleType.FIT_XY);
}
}
初始化activity的视图信息
View Code
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
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;
}
点击下载完整工程文件
相关文章
