android界面操作引导

     经常我们在app中如果有比较复杂的界面，通常会有一个操作的指导，这样不仅能够体现人性化，而且能够体现一定的美观感受，很多人其实并不知道怎么去做这么一件事情，或者有了想法，实现起来比较的困难。

 

  下面。我先给一张图给大家看看效果，我们首先分析下应该如何实现这个效果。这是一张微博的引导操作引导界面。

  就这张图看起来，觉得这个app还可以的。那么我们现在分析下，如何实现这种效果，首先我在准备这个的时候，我也不知道该如何去实现。那么我首先去一些群啊，贴吧去寻找了下答案，发现这些答案不能让我满意，我自己也想了下大概归纳为有三种方案去实现。

第一种：使用对话框dialog或者popupwindow。

第二种：在布局中提前加入framelayout，然后操作引导图片与主要内容界面并存。

第三种：寻找activity的跟视图，在跟视图中添加图片，制作引导图。

分析：

很明显，我选择第三种，因为第一种首先你的dialog和popupwindow你需要自定义，并且位置他们现实的位置也不一样，这样做屏幕适配还有坐标计算都是不小的工作量，显然这种做法是非常不合理的。第二种，是可以实现的这种效果的，直接在framelayout中添加图片，点击图片切换显示的点，但是无缘无故的加了一层布局的嵌套，如果布局比较复杂，这样加大手机GPU及cpu的运算压力，导致app的性能偏低，这样也是不可取的。

    第三种的主要优势在于，如果你知道在我们的avtivity中的跟视图（relativelayout、Linerayout)这些的上一层是framelayout的话，那就好办了，我们不需要增加额外的图层，而是直接根据子图层，获取上一层图层，直接在父图层中添加图片，岂不是美哉。

这是一个非常普通的视图，看下代码

xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.huhai.myappguide.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:id="@+id/textView"/>

RelativeLayout>

就是一个relativelayout嵌套了一个textview，那么大家知道relativelayout的父布局是什么类型的么？

不急，我带着大家接着看。

点进去之后，就能够看到界面的布局详细情况。

再进去就能看到了布局情况了，我们发现主界面的父布局就是framelayout

这样就好办了，我们直接获取该布局在布局中添加图片然后进行切换，请看activity的代码：（说明：这篇博客是参考了前人的经验，我在此基础上优化更符合实际项目需求）

package com.huhai.myappguide;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity
        extends AppCompatActivity
{
    private GuideViewUtil mGuideViewUtil;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mGuideViewUtil=new GuideViewUtil(this, R.drawable.xinshou1);
    }


    @Override
    protected void onDestroy() {
        super.onDestroy();
        finish();
    }
}

添加图层指导的工具类

package com.huhai.myappguide;

import android.app.Activity;
import android.content.Context;
import android.content.SharedPreferences;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;

/**
 * @author ghl
 * @category 设置浮层引导页工具类
 */
public class GuideViewUtil {
private SharedPreferences mGuideView_SP;
private Activity mActivity;
private int mimageViewId;
private  int count=0;
private ImageView mimageView;
public GuideViewUtil(Activity mActivity, int mimageViewId) {
   super();
   this.mActivity=mActivity;
   this.mimageViewId = mimageViewId;
   mGuideView_SP=mActivity.getSharedPreferences(mActivity.getClass().getName()+"GuideView", Context.MODE_PRIVATE);
   setGuideView();
}
   
/**
 * @return  返回内容区域根视图
 */
public View getRootView() {
   return (ViewGroup)mActivity.findViewById(android.R.id.content);
}
/**
 *  设置浮层引导页
 */
public void setGuideView() {
   View view=getRootView();
   if(view==null){
      return;
   }
   String guide_flag=mGuideView_SP.getString("Guide", null);
   if(guide_flag==mActivity.getClass().getName()){
      return;
   }
   final FrameLayout frameLayout=(FrameLayout)view;
   FrameLayout.LayoutParams layoutParams=new FrameLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
    mimageView=new ImageView(mActivity);
   mimageView.setImageResource(mimageViewId);
   mimageView.setScaleType(ScaleType.FIT_XY);
   mimageView.setLayoutParams(layoutParams);
   mimageView.setOnClickListener(new OnClickListener() {
      
      @Override
      public void onClick(View v) {
         // TODO Auto-generated method stub
        count++;

         switch (count){
            case 0:
               mimageView.setImageResource(R.drawable.xinshou1);
               break;
            case 1:
               mimageView.setImageResource(R.drawable.xinshou3);
               break;
            case 2:
               mimageView.setImageResource(R.drawable.xinshou5);

               mGuideView_SP.edit().putString("Guide", mActivity.getClass().getName()).commit();
               break;
            default:
               frameLayout.removeView(mimageView);
               return;

         }

      }
   });
   frameLayout.addView(mimageView);
   
}
/**
 *  移除浮层引导页
 */
public void CancleGuideView(){
   String guide_flag=mGuideView_SP.getString("Guide", null);
   if(guide_flag!=mActivity.getClass().getName()){
      return;
   }
   FrameLayout view=(FrameLayout)getRootView();
   if(view==null){
      return;
   }
   view.removeView(mimageView);
   
}
}

最后的结果：

好了，谢谢大家哈，后续会在内存优化上面多研究下，继续更新文章，感谢支持。

代码会放在个人的下载区域上。

http://download.csdn.net/user/qq_16177199