devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

android 给自己的app编写 用户引导（UserGuider）_产品的user_guide怎么做

作者：我家自动化 | 2024-02-24 23:22:34

赞

踩

产品的user_guide怎么做

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

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

     先来图吧，有图有真相！

 

 

 

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

  1. boolean firstLogin = PreferenceManager.getDefaultSharedPreferences(this).getBoolean(FLAG_FIRST_LOGIN, true);
  2.     if (firstLogin) {
  3.         startActivity(new Intent("com.xyz.guider.GuiderActivity"));
  4.     }


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

  1. SharedPreferences sp = PreferenceManager
  2.         .getDefaultSharedPreferences(mContext);
  3.     Editor edit = sp.edit();
  4.     edit.putBoolean(FLAG_FIRST_LOGIN, false);
  5.     edit.commit();


    下面来贴关键代码。

    用户引导布局：

  1. <?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>



    首先继承个Gallery的类如XyzGallery：

  1. 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. }


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

  1. 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. }


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

  1. 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(4, 0, 4, 0);
  34.             }
  35.             addView(iv);
  36.         }
  37.     }
  38. }


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

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

     ~~完~~


声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/136723?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号