android高亮引导页

最近项目需求是实现高亮功能引导页的效果，查了很多资料Android确实没有类似iOS的抠图的现成控件，并且看了一些github上的效果没有扩展性也不是很强。所以将重点转移到代替效果上来。

这是一个非常简单易行的方法，扩展性很强可以将任何View 作为目标view，其功能演变的出发点是activity截图。

思路：1.将需高亮View A转换成bitmap。

   2.获取A的坐标以及大小。

   3.将A的坐标以及大小设置在BView上。

暂时引导功能页面代码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.guide1.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

activity代码：

public class MainActivity extends Activity implements View.OnClickListener{

    private TextView tv_guide;
    private TextView tv_btn;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        tv_guide = (TextView) findViewById(R.id.tv_guide);
        tv_btn = (TextView) findViewById(R.id.tv_btn);

        tv_btn.setOnClickListener( this );
    }


    @Override
    public void onClick(View v) {
        GuideDalog.showGuideDialog( this, tv_guide);
    }
}

更容易理解我们这里使用dialog展示提示功能：

public class GuideDalog {


    public static Dialog DetemainDialog;



    public static void showGuideDialog(Activity activity, View view ) {



        if (activity != null && !activity.isFinishing() ) {
            if (DetemainDialog == null) {
                DetemainDialog = new Dialog(activity, R.style.common_dialog);
                View v = LayoutInflater.from(activity).inflate(R.layout.dialog_guidedalog, null);
                RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT);
                DetemainDialog.addContentView(v, params);
                Window window = DetemainDialog.getWindow();
                WindowManager.LayoutParams lp = window.getAttributes();
                lp.dimAmount = 0.6f;
                window.setAttributes(lp);
                window.addFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);

                RelativeLayout rl_dialog = (RelativeLayout) v.findViewById(R.id.rl_dialog);
                final ImageView tv_plan_name = (ImageView) v.findViewById(R.id.tv_plan_name);
                ImageView tv_plan_remind = (ImageView) v.findViewById(R.id.tv_plan_remind);

                tv_plan_remind.setImageResource(R.mipmap.ic_plan_name);

                tv_plan_name.setImageBitmap(ViewUtil.getViewBitmap(view));

                int[] location = ViewUtil.getViewLocation(view);

                int height = view.getHeight();
                int width= view.getWidth();


                ViewUtil.setViewSize(tv_plan_name, height,width);
                ViewUtil.setViewLocation(tv_plan_name, location[0], 0,location[1]- ViewUtil.dip2px(activity, 20), 0);

            }
            if (DetemainDialog != null && activity != null && !activity.isFinishing() && !DetemainDialog.isShowing()) {
                DetemainDialog.show();
            }
        }
    }

    public static void dismissDialog() {


        if (DetemainDialog != null) {
            DetemainDialog.dismiss();
            DetemainDialog = null;
        }


    }

}

dialog_guidedialog.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rl_dialog"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#96000000">

    <ImageView
        android:id="@+id/tv_plan_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <ImageView
        android:id="@+id/tv_plan_remind"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dip"
        android:layout_below="@+id/tv_plan_name"
        android:layout_centerHorizontal="true"/>

</RelativeLayout>

<!-- 自定义的Dialog -->
<style name="common_dialog">
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:backgroundDimEnabled">false</item>
    <item name="@android:windowEnterAnimation">@anim/bottom_enter</item>
    <item name="@android:windowExitAnimation">@anim/bottom_exit</item>

</style>

bg_5dip

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="@android:color/white" />

    <stroke
        android:dashGap="0dp"
        android:dashWidth="15dp"
        android:width="0.4dp"
        android:color="@android:color/white" />

    <corners android:radius="5dip"/>

</shape>

viewUtils

public class ViewUtil {

    /**
     * 获取控件的大小
     * @param view
     * @return
     */
    public static int[] getViewLocation(View view){

        int[] position = new int[2];
//        view.getLocationOnScreen(position);//相对屏幕
        view.getLocationInWindow(position);//相对activity
        return position;
    }

    /**
     * 获取控件的高
     * @param view
     * @return
     */
    public static int getViewHeight(View view){

        if( view == null ) return 0;

        int height = view.getHeight();
        return height;
    }

    /**
     * 获取控件的款
     * @param view
     * @return
     */
    public static int getVieWidth(View view){
        if( view == null ) return 0;
        int width = view.getWidth();
        return  width;
    }

    public static void setViewLocation(View view, int left, int right, int top, int bottom ){
        RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams)view.getLayoutParams();
        params.setMargins(left, top, right, bottom);// 通过自定义坐标来放置你的控件
        view .setLayoutParams(params);
    }
    public static void setViewSize(View view, int height, int width ){
        RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams)view.getLayoutParams();
        params.height = height;
        params.width = width;
        view .setLayoutParams(params);
    }
    public static void setViewHeight(View view, int height){
        RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams)view.getLayoutParams();
        params.height = height;
        view .setLayoutParams(params);
    }

    /**
     * * 将View 转换成bitmap
    * @param view
    * @return
            */
    public static android.graphics.Bitmap getViewBitmap(View view) {
        android.graphics.Bitmap bitmap = android.graphics.Bitmap.createBitmap(view.getWidth(), view.getHeight(), android.graphics.Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        view.draw(canvas);
        return bitmap;
    }

    /**
     * 根据dip转换成像素
     *
     * @param context
     * @param dipValue
     * @return
     */
    public static int dip2px(Context context, float dipValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dipValue * scale + 0.5f);
    }

未启动

已启动

下载地址：http://download.csdn.net/detail/haileijingshi/9679387