一.效果图
二.简单实现的思路
就是在我们需要提示的页面上方覆盖一个半透明的activity,首先获取需要提示的位置坐标,然后传给上方覆盖的activity.最后在activity上面相应的位置画出指引内容.然后点击可关闭上方的提示页,从而取消提示.三.代码实现
首先实现蒙版activitypublic class TipsActivity extends Activity { private static final String TAG = "TipsActivity"; private int[] mLocs; @BindView(R.id.tips_rootview) RelativeLayout mRlRootView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE);//取消title setContentView(R.layout.activity_tips); Intent intent = getIntent(); mLocs = intent.getIntArrayExtra("loc");//获取坐标 ButterKnife.bind(this); initView(); } private void initView() { PrintLog.d(TAG,"initView"); TipsView tipsView = new TipsView(this);//将坐标传给自定义view tipsView.setCircleLocation(mLocs); RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT); mRlRootView.addView(tipsView, layoutParams); } @OnClick(R.id.tips_rootview) public void clickClose() { finish(); overridePendingTransition(0, 0); //取消动画效果 } @Override public boolean onKeyDown(int keyCode, KeyEvent event) { if (keyCode == KeyEvent.KEYCODE_BACK) { finish(); overridePendingTransition(0, 0); return true; } return super.onKeyDown(keyCode, event); }}
R.layout.activity_tips
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:clickable="true" android:id="@+id/tips_rootview" android:layout_width="match_parent" android:layout_height="match_parent">RelativeLayout>
Manifest
<activity android:name=".module.guide.masking.TipsActivity" android:theme="@style/ThemeTips" />
ThemeTips
<style name="ThemeTips" parent="@android:style/Theme.Translucent.NoTitleBar"> <item name="android:windowAnimationStyle">@style/Animationitem>style> <style name="Animation"> <item name="android:activityOpenEnterAnimation">@nullitem> <item name="android:activityOpenExitAnimation">@nullitem> <item name="android:activityCloseEnterAnimation">@nullitem> <item name="android:activityCloseExitAnimation">@nullitem> <item name="android:taskOpenEnterAnimation">@nullitem> <item name="android:taskOpenExitAnimation">@nullitem> <item name="android:taskCloseEnterAnimation">@nullitem> <item name="android:taskCloseExitAnimation">@nullitem> <item name="android:taskToFrontEnterAnimation">@nullitem> <item name="android:taskToFrontExitAnimation">@nullitem> <item name="android:taskToBackEnterAnimation">@nullitem> <item name="android:taskToBackExitAnimation">@nullitem>style>
TipsView
public class TipsView extends FrameLayout { private final Context mContext; private int[] mCircleLocation; public TipsView(Context context) { this(context, null); } public TipsView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public TipsView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); this.mContext = context; initView(); } private void initView() { setBackgroundColor(Color.parseColor("#7f000000"));//半透明底色 } public void setCircleLocation(int[] location) { this.mCircleLocation = location; invalidate(); //重新绘画 } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if (mCircleLocation != null) { //掏空一个圆形 Paint paintarc = new Paint(Paint.ANTI_ALIAS_FLAG); PorterDuffXfermode porterDuffXfermode = new PorterDuffXfermode(PorterDuff.Mode.CLEAR); paintarc.setXfermode(porterDuffXfermode); paintarc.setAntiAlias(true); RectF rectF = new RectF(mCircleLocation[0], mCircleLocation[1], mCircleLocation[2], mCircleLocation[3]); canvas.drawArc(rectF, 0, 360, true, paintarc); //画虚线 Paint paintdashed = new Paint(Paint.ANTI_ALIAS_FLAG); paintdashed.setStyle(Paint.Style.STROKE); paintdashed.setColor(Color.WHITE); paintdashed.setStrokeWidth(1); PathEffect pathEffect = new DashPathEffect(new float[]{10, 10}, 0); paintdashed.setPathEffect(pathEffect); canvas.drawArc(rectF, 0, 360, true, paintdashed); //画指引图片 Paint paintImage = new Paint(Paint.ANTI_ALIAS_FLAG); Bitmap bitmap = BitmapFactory.decodeResource(UIUtils.getResources(), R.drawable.contact); int width = bitmap.getWidth(); int height = bitmap.getHeight(); int def = UIUtils.dip2px(20); int left = mCircleLocation[0] - width+def; int top = mCircleLocation[1] - height; canvas.drawBitmap(bitmap, left, top, paintImage); } }}
蒙版的activity实现后 以下就是调用蒙版activity使其显示在需要提示页面的上层 MaskingActivity是需要提示的页面
public class MaskingActivity extends AppCompatActivity { private static final String TAG = "MaskingActivity"; @BindView(R.id.mask_bt) AppCompatButton mBtMasking; private int mHeight; @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_masking); setTitle("蒙版"); ButterKnife.bind(this); showMask(); } @Override protected void onResume() { super.onResume(); } @Override public void onWindowFocusChanged(boolean hasFocus) { super.onWindowFocusChanged(hasFocus); } //onCreat中直接去测量view的大小是测不出来的 所以在这个demo中我延时500ms去测量 //实际使用一般在网络加载完成后去测量view的大小然后去显示蒙版 private void showMask() { mBtMasking.postDelayed(new Runnable() { @Override public void run() { runOnUiThread(new Runnable() { @Override public void run() { mHeight = getSupportActionBar().getHeight(); int left = mBtMasking.getLeft(); int right = mBtMasking.getRight(); int top = mBtMasking.getTop()+mHeight; int bottom = mBtMasking.getBottom()+mHeight; int loc[] = {left,top,right,bottom}; Intent intent = new Intent(MaskingActivity.this,TipsActivity.class); intent.putExtra("loc",loc); startActivity(intent); } }); } },500); }
R.layout.activity_masking
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/cardview_shadow_end_color"> <FrameLayout android:background="@color/colorPrimary" android:layout_alignParentBottom="true" android:layout_width="match_parent" android:layout_height="120dp"/> <android.support.v7.widget.AppCompatButton android:background="@drawable/kf" android:layout_marginRight="10dp" android:layout_marginBottom="10dp" android:layout_alignParentRight="true" android:layout_alignParentBottom="true" android:id="@+id/mask_bt" android:layout_width="80dp" android:layout_height="80dp" />RelativeLayout>
这里主要提供思路
到这里就结束啦.
往期精彩回顾:
Android实现短信验证码自动填充功能
Android仿echo精美弹幕功能
Android实现头像重叠排列功能
Android仿QQ个性标签功能
Android仿QQ侧滑删除的功能