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;
    }
 
 
點擊下載完整工程文件:http://up.aiwalls.com/2012/0529/20120529113622662.rar
 

 

摘自 白菜黨

 

發佈留言