这里只是一个简单的demo，先看效果图，第一张图片，背景是半透明的，在Button位置是全透明，点击任意位置后，该引导页消失，用户看到第二张图片。
TeachActivity是该页面的Activity，半透明弹窗使用的是PopupWindow，其背景设置为半透明,做了简单的淡入淡出效果。这种效果的关键点有两个：
自定义了EarseView，重写了OnDraw函数，使其背景全透明。 找准位置。在上述例子中，我是将按钮居中，PopupWindow中的EarseView也是居中。实际过程中，可能想要展示的控件位置并不固定，比如界面在一个SrollView之中，有部分View是动态加载的，这就需要对其位置进行测量，然后让ScrollView滑动到合适位置，这种实现方式在适配不同的机型时，会遇到一些坑，我将在下篇文章中进行下总结。
import android.app.Activity;import android.content.Context;import android.os.Bundle;import android.os.Handler;import android.view.Gravity;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.Button;import android.widget.FrameLayout;import android.widget.PopupWindow;import butterknife.Bind;import butterknife.ButterKnife;/*** Created by Anna on /5/14.*/public class TeachActivity extends Activity {@Bind(R.id.btn_connect)Button btnConnect;Handler mHandler = new Handler();Context mContext;PopupWindow mPopWindow;Runnable showPopupWindow = new Runnable() {@Overridepublic void run() {View popView = LayoutInflater.from( mContext).inflate(R.layout.activity_teach_1,null,false);FrameLayout frameLayout = (FrameLayout) popView.findViewById(R.id.fl_teach_1);popView.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {mPopWindow.dismiss();}});mPopWindow = new PopupWindow(popView, ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT);mPopWindow.setAnimationStyle(R.style.popwin_anim_style);mPopWindow.showAtLocation(btnConnect, Gravity.CENTER, 0, 0);}};@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_teach);ButterKnife.bind(this);mContext = this;mHandler.postDelayed(showPopupWindow,300);}@Overrideprotected void onResume() {super.onResume();}}
activity_teach.xml
<pre name="code" class="html"><?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="/apk/res/android"xmlns:tools="/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"><TextView android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Hello world"android:layout_centerHorizontal="true"android:layout_marginTop="30dp"></TextView><Button android:id="@+id/btn_connect"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerHorizontal="true"android:layout_centerVertical="true"android:text="Hello" /></RelativeLayout>
activity_teach_1.xml
<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="/apk/res/android"xmlns:tools="/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"android:background="#86000000"android:id="@+id/fl_teach_1"><TextView android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Here is a button!"android:layout_gravity="center"android:layout_marginBottom="50dp"android:textColor="#FFFFFF"></TextView><com.qwe.anna.test.view.EarseView android:id="@+id/btn_connect"android:layout_width="80dp"android:layout_height="35dp"android:layout_gravity="center"/></FrameLayout>
EarseView.java
import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.PorterDuff;import android.util.AttributeSet;import android.view.View;/*** Created by anna on /5/14.*/public class EarseView extends View {public EarseView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);}public EarseView(Context context, AttributeSet attrs) {super(context, attrs);}public EarseView(Context context) {super(context);}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);}}
