有些第三方应用(如QQ,微信等),安装后第一次使用都有个用户引导,提示用户怎么用及版本升级后新功能介绍。用 Hierarchy Viewer 工具看用户引导 是用哪些layout组成的。常见的QQ,微信 用的 Gallery,百度输入法用的是 FrameLayout。

    下面就以 Gallery 实现用户引导为例。

     先来图吧,有图有真相!

 

 

 

 

    这个熟悉吧,仿微信当前最新版的欢迎页。安装后第一次启动这个用户引导,本例用读写SharedPrefences判断是否第一次进(代码片段):

 

[java] view plaincopy
 
  1. <span xmlns="http://www.w3.org/1999/xhtml">boolean firstLogin = PreferenceManager.getDefaultSharedPreferences(this).getBoolean(FLAG_FIRST_LOGIN, true);  
  2.     if (firstLogin) {  
  3.         startActivity(new Intent("com.xyz.guider.GuiderActivity"));  
  4.     }</span>  


 

 

    完成用户引导后把键值 first 写 false:

 

[java] view plaincopy
 
  1. <span xmlns="http://www.w3.org/1999/xhtml">SharedPreferences sp = PreferenceManager  
  2.         .getDefaultSharedPreferences(mContext);  
  3.     Editor edit = sp.edit();  
  4.     edit.putBoolean(FLAG_FIRST_LOGIN, false);  
  5.     edit.commit();</span>  


 

    下面来贴关键代码。

 

    用户引导布局:

 

[java] view plaincopy
 
  1. <span xmlns="http://www.w3.org/1999/xhtml"><?xml version="1.0" encoding="utf-8"?>  
  2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:id="@+id/main_layout"  
  4.     android:layout_width="fill_parent"  
  5.     android:layout_height="fill_parent"  
  6.     android:background="@drawable/background_holo_dark" >  
  7.   
  8.     <com.xyz.guider.XyzGallery  
  9.         android:id="@+id/what_news_gallery"  
  10.         android:layout_width="fill_parent"  
  11.         android:layout_height="fill_parent"  
  12.         android:clickable="true"  
  13.         android:focusable="true"  
  14.         android:spacing="0.0dip"  
  15.         android:unselectedAlpha="1.2" />  
  16.   
  17.     <LinearLayout  
  18.         android:layout_width="fill_parent"  
  19.         android:layout_height="fill_parent"  
  20.         android:layout_gravity="center"  
  21.         android:background="@null" >  
  22.   
  23.         <com.xyz.guider.PageControlView  
  24.             android:id="@+id/what_news_page_control"  
  25.             android:layout_width="fill_parent"  
  26.             android:layout_height="fill_parent"  
  27.             android:layout_marginBottom="17.5dip"  
  28.             android:background="@null"  
  29.             android:gravity="bottom|center" />  
  30.     </LinearLayout>  
  31.   
  32.     <RelativeLayout  
  33.         xmlns:android="http://schemas.android.com/apk/res/android"  
  34.         android:id="@+id/mm_door"  
  35.         android:layout_width="fill_parent"  
  36.         android:layout_height="fill_parent"  
  37.         android:background="@drawable/background_holo_dark"  
  38.         android:orientation="horizontal"  
  39.         android:visibility="gone" >  
  40.   
  41.         <ImageView  
  42.             android:id="@+id/mm_left"  
  43.             android:layout_width="wrap_content"  
  44.             android:layout_height="wrap_content"  
  45.             android:layout_centerInParent="true"  
  46.             android:adjustViewBounds="true"  
  47.             android:scaleType="fitEnd"  
  48.             android:src="@drawable/whatsnew_08_01" />  
  49.   
  50.         <ImageView  
  51.             android:id="@+id/mm_right"  
  52.             android:layout_width="wrap_content"  
  53.             android:layout_height="wrap_content"  
  54.             android:layout_centerInParent="true"  
  55.             android:adjustViewBounds="true"  
  56.             android:scaleType="fitEnd"  
  57.             android:src="@drawable/whatsnew_08_02" />  
  58.     </RelativeLayout>  
  59.   
  60. </FrameLayout></span>  


 

 

 

 

    首先继承个Gallery的类如XyzGallery:

 

[java] view plaincopy
 
  1. <span xmlns="http://www.w3.org/1999/xhtml">package com.xyz.guider;  
  2.   
  3. import android.content.Context;  
  4. import android.util.AttributeSet;  
  5. import android.view.KeyEvent;  
  6. import android.view.MotionEvent;  
  7. import android.widget.Gallery;  
  8.   
  9. public class XyzGallery extends Gallery {  
  10.   
  11.     public XyzGallery(Context context) {  
  12.         super(context);  
  13.         // TODO Auto-generated constructor stub  
  14.         setStaticTransformationsEnabled(true);  
  15.     }  
  16.   
  17.     public XyzGallery(Context context, AttributeSet attrs) {  
  18.         super(context, attrs);  
  19.         // TODO Auto-generated constructor stub  
  20.         setStaticTransformationsEnabled(true);  
  21.     }  
  22.   
  23.     public XyzGallery(Context context, AttributeSet attrs, int defStyle) {  
  24.         super(context, attrs, defStyle);  
  25.         // TODO Auto-generated constructor stub  
  26.         setStaticTransformationsEnabled(true);  
  27.     }  
  28.   
  29.     @Override  
  30.     public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,  
  31.             float velocityY) {  
  32.         // TODO Auto-generated method stub  
  33.         if (velocityX > 0) {  
  34.             onKeyDown(KeyEvent.KEYCODE_DPAD_LEFT, null);  
  35.         } else {  
  36.             onKeyDown(KeyEvent.KEYCODE_DPAD_RIGHT, null);  
  37.         }  
  38.         return true;  
  39.     }  
  40. }  
  41. </span>  


 

 

    有了Gallery,还要个Gallery的适配器,作为GuiderActivity的内部类,GuiderActivity主要作用是呈现并控制 用户引导 界面:

 

[java] view plaincopy
 
  1. <span xmlns="http://www.w3.org/1999/xhtml">package com.xyz.guider;  
  2.   
  3. import android.app.Activity;  
  4. import android.content.Context;  
  5. import android.content.Intent;  
  6. import android.content.SharedPreferences;  
  7. import android.content.SharedPreferences.Editor;  
  8. import android.os.Bundle;  
  9. import android.preference.PreferenceManager;  
  10. import android.view.LayoutInflater;  
  11. import android.view.View;  
  12. import android.view.ViewGroup;  
  13. import android.view.View.OnClickListener;  
  14. import android.view.WindowManager;  
  15. import android.view.animation.Animation;  
  16. import android.view.animation.Animation.AnimationListener;  
  17. import android.view.animation.AnimationUtils;  
  18. import android.widget.AdapterView;  
  19. import android.widget.AdapterView.OnItemSelectedListener;  
  20. import android.widget.BaseAdapter;  
  21. import android.widget.Button;  
  22. import android.widget.ImageView;  
  23.   
  24. public class GuiderActivity extends Activity implements OnItemSelectedListener {  
  25.   
  26.     private View mViewDoor = null;  
  27.     private ImageView mImageLeft = null;  
  28.     private ImageView mImageRight = null;  
  29.     private XyzGallery mGallery = null;  
  30.     private GalleryAdapter mAdapter = null;  
  31.     private PageControlView mIndicateView = null;  
  32.   
  33.     private static final String FLAG_FIRST_LOGIN = "first";  
  34.   
  35.     @Override  
  36.     protected void onCreate(Bundle savedInstanceState) {  
  37.         // TODO Auto-generated method stub  
  38.         super.onCreate(savedInstanceState);  
  39.         setContentView(R.layout.whats_news);  
  40.   
  41.         mGallery = (XyzGallery) findViewById(R.id.what_news_gallery);  
  42.         mAdapter = new GalleryAdapter(this);  
  43.         mGallery.setFadingEdgeLength(0);  
  44.         mGallery.setSpacing(-1);  
  45.         mGallery.setAdapter(mAdapter);  
  46.         mGallery.setOnItemSelectedListener(this);  
  47.   
  48.         mIndicateView = (PageControlView) findViewById(R.id.what_news_page_control);  
  49.         mIndicateView.setIndication(mGallery.getCount(), 0);  
  50.         mViewDoor = findViewById(R.id.mm_door);  
  51.         mImageLeft = (ImageView) findViewById(R.id.mm_left);  
  52.         mImageRight = (ImageView) findViewById(R.id.mm_right);  
  53.     }  
  54.   
  55.     private class GalleryAdapter extends BaseAdapter implements  
  56.             OnClickListener, AnimationListener {  
  57.   
  58.         private Context mContext;  
  59.         private LayoutInflater mInfater = null;  
  60.   
  61.         private int[] mLayouts = new int[] {  
  62.                 R.layout.whats_news_gallery_fornew_one,  
  63.                 R.layout.whats_news_gallery_fornew_two,  
  64.                 R.layout.whats_news_gallery_fornew_three,  
  65.                 R.layout.whats_news_gallery_fornew_four };  
  66.   
  67.         public GalleryAdapter(Context ctx) {  
  68.             mContext = ctx;  
  69.             mInfater = (LayoutInflater) mContext  
  70.                     .getSystemService(Context.LAYOUT_INFLATER_SERVICE);  
  71.         }  
  72.   
  73.         @Override  
  74.         public int getCount() {  
  75.             // TODO Auto-generated method stub  
  76.             return mLayouts.length;  
  77.         }  
  78.   
  79.         @Override  
  80.         public Object getItem(int position) {  
  81.             // TODO Auto-generated method stub  
  82.             return Integer.valueOf(position);  
  83.         }  
  84.   
  85.         @Override  
  86.         public long getItemId(int position) {  
  87.             // TODO Auto-generated method stub  
  88.             return position;  
  89.         }  
  90.   
  91.         @Override  
  92.         public View getView(int position, View convertView, ViewGroup parent) {  
  93.             // TODO Auto-generated method stub  
  94.             if (convertView == null) {  
  95.                 convertView = mInfater.inflate(mLayouts[position], null);  
  96.                 if (position == 3) {  
  97.                     Button btn = (Button) convertView  
  98.                             .findViewById(R.id.whats_new_start_btn);  
  99.                     btn.setOnClickListener(this);  
  100.                 }  
  101.             }  
  102.             return convertView;  
  103.         }  
  104.   
  105.         @Override  
  106.         public void onClick(View v) {  
  107.             // TODO Auto-generated method stub  
  108.             mViewDoor.setVisibility(View.VISIBLE);  
  109.             mImageLeft.startAnimation(setAnimation(R.anim.slide_left));  
  110.             mImageRight.startAnimation(setAnimation(R.anim.slide_right));  
  111.         }  
  112.   
  113.         private Animation setAnimation(int resId) {  
  114.             Animation anim = AnimationUtils.loadAnimation(mContext, resId);  
  115.             anim.setAnimationListener(this);  
  116.             return anim;  
  117.         }  
  118.   
  119.         @Override  
  120.         public void onAnimationStart(Animation animation) {  
  121.             // TODO Auto-generated method stub  
  122.   
  123.         }  
  124.   
  125.         @Override  
  126.         public void onAnimationEnd(Animation animation) {  
  127.             // TODO Auto-generated method stub  
  128.             mImageLeft.setVisibility(View.GONE);  
  129.             mImageRight.setVisibility(View.GONE);  
  130.             SharedPreferences sp = PreferenceManager  
  131.                     .getDefaultSharedPreferences(mContext);  
  132.             Editor edit = sp.edit();  
  133.             edit.putBoolean(FLAG_FIRST_LOGIN, false);  
  134.             edit.commit();  
  135.             GuiderActivity.this.finish();  
  136.         }  
  137.   
  138.         @Override  
  139.         public void onAnimationRepeat(Animation animation) {  
  140.             // TODO Auto-generated method stub  
  141.         }  
  142.     }  
  143.   
  144.     @Override  
  145.     public void onItemSelected(AdapterView<?> parent, View view, int position,  
  146.             long id) {  
  147.         // TODO Auto-generated method stub  
  148.         if (mIndicateView != null) {  
  149.             mIndicateView.setIndication(parent.getCount(), position);  
  150.         }  
  151.     }  
  152.   
  153.     @Override  
  154.     public void onNothingSelected(AdapterView<?> parent) {  
  155.         // TODO Auto-generated method stub  
  156.   
  157.     }  
  158.   
  159. }  
  160. </span>  


 

 

    还有个就是 用户引导 的指示器,共有几页,当前是那一页,实现起来很简单:

 

[java] view plaincopy
 
  1. <span xmlns="http://www.w3.org/1999/xhtml">package com.xyz.guider;  
  2.   
  3. import android.content.Context;  
  4. import android.util.AttributeSet;  
  5. import android.widget.ImageView;  
  6. import android.widget.LinearLayout;  
  7.   
  8. public class PageControlView extends LinearLayout {  
  9.   
  10.     private Context mContext;  
  11.   
  12.     public PageControlView(Context ctx) {  
  13.         super(ctx);  
  14.         // TODO Auto-generated constructor stub  
  15.         mContext = ctx;  
  16.     }  
  17.   
  18.     public PageControlView(Context ctx, AttributeSet attrs) {  
  19.         super(ctx, attrs);  
  20.         // TODO Auto-generated constructor stub  
  21.         mContext = ctx;  
  22.     }  
  23.   
  24.     public void setIndication(int cnt, int index) {  
  25.         if (index < 0 || index > cnt)   
  26.             index = 0;  
  27.         removeAllViews();  
  28.         for (int i = 0; i < cnt; i++) {  
  29.             ImageView iv = new ImageView(mContext);  
  30.             iv.setImageResource(index == i ? R.drawable.page_indicator_focused  
  31.                     : R.drawable.page_indicator_unfocused);  
  32.             if (i != 0 || i != cnt - 1) {  
  33.                 iv.setPadding(4040);  
  34.             }  
  35.             addView(iv);  
  36.         }  
  37.     }  
  38. }  
  39. </span>  


 

     剩下的就是些xml文件,就不贴啦。

 

   免分下载原码路径:http://download.csdn.net/detail/zhouyuanjing/4866714

來源:

http://blog.csdn.net/zhouyuanjing/article/details/8242690

 

arrow
arrow
    全站熱搜

    戮克 發表在 痞客邦 留言(0) 人氣()