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