android界面操作引导项

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

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

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

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

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

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

分析：

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

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

---

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

<?xml version="1.0" encoding="utf-8"?>

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

就是一个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(viewnull){
  return;
  }
  String guide_flag=mGuideView_SP.getString(“Guide”, null);
  if(guide_flagmActivity.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

转载：https://blog.csdn.net/qq_16177199/article/details/65934723