Android实现触摸校正功能

当我第一次听到这个需求的时候，内心是迷茫的。触摸校正是个什么鬼，这个术语好像好多年之前才会有。想了想应该是电阻屏时代吧。然后又查资料知道了Android不是电容屏吗，是不需要触摸校正的，而只有当年的电阻屏才需要触摸校正。这下我懵了，因为网上各种关于android触摸校正的资料都很少，还有很多是需要在源码环境改源码的，或者是通过aidl方式去做。（当时为了弄出来一个IWindowManager可是各种入坑啊！）好了，废话不多说，进入正题：

进入正题之前先给效果图吧，因为我为人比较厚道。

这一版触摸校正功能只用到了一个CalibrationActivity，onCreate里首先获取到了当前屏幕的宽高，

dpy = ((WindowManager) getSystemService(WINDOW_SERVICE)).getDefaultDisplay();
X_RES = dpy.getWidth();
Y_RES = dpy.getHeight();

然后会有一个初始化要触摸点的坐标的方法：

// TopLeft-->TopRight-->BottomRight-->BottomLeft-->Center
// For 240 * 320 resolution, we use 50 pixel as edge gap
private boolean initScreenPoints() {
    cal.xfb[TOP_LEFT] = EDGE_GAP;                // TopLeft
    cal.yfb[TOP_LEFT] = EDGE_GAP;

    cal.xfb[TOP_RIGHT] = X_RES - EDGE_GAP;        // TopRight
    cal.yfb[TOP_RIGHT] = EDGE_GAP;

    cal.xfb[BOTTOM_RIGHT] = X_RES - EDGE_GAP;    // BottomRight
    cal.yfb[BOTTOM_RIGHT] = Y_RES - EDGE_GAP;

    cal.xfb[BOTTOM_LEFT] = EDGE_GAP;            // BottomLeft
    cal.yfb[BOTTOM_LEFT] = Y_RES - EDGE_GAP;

    cal.xfb[CENTER] = X_RES / 2;                // Center
    cal.yfb[CENTER] = Y_RES / 2;
    return true;
}

接着就开始布局了，是new的一个自定义View：

setContentView(new MyView(this));

构造函数如下：

public MyView(Context c) {
    super(c);
    // set full screen and no title
    requestWindowFeature(Window.FEATURE_NO_TITLE);
    getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
            WindowManager.LayoutParams.FLAG_FULLSCREEN);

    mContext = c;
    paint = new Paint();
    paint.setDither(true);
    paint.setAntiAlias(true); ////抗锯齿，如果没有调用这个方法，写上去的字不饱满，不美观，看地不太清楚
    paint.setStrokeWidth(2); //设置空心线宽
    paint.setColor(Color.WHITE);
    paint.setStyle(Paint.Style.STROKE); //设置画笔风格，空心或者实心。
    bmp = Bitmap.createBitmap(X_RES, Y_RES, Bitmap.Config.ARGB_8888);
    cv = new Canvas(bmp);
    screen_pos = 0;
    drawCalibrationCross(screen_pos);
}

接下来我要说的重点：是在onDraw方法里，因为原本这个触摸校正是没有界面的，只有5个触摸点，还是自己绘制的，所以我想在原有基础上不妨碍正常功能的同时，又能增加一个界面，之前试过几次，界面是弄出来了，但是会把原来的触摸点给遮住，就是空有其表，功能完全不能实现了，因此尝试过不少方法后，还是选择了canvas来绘制出我想要的效果：

前方高能预警，修改界面核心onDraw方法如下：

canvas.drawColor(Color.BLACK);
canvas.drawBitmap(bmp, 0, 0, null);

//“欢迎”字体大小
float txt_welcome_size = 60;
//“欢迎”字数
float txt_welcome_count = 2;
//"请按住光标……"字体大小
float txt_content_size = 36;
//"请按住十字光标以校准"字数
float txt_content1_count = 10;
//"你的屏幕"字数
float txt_content2_count = 4;

//"欢迎"
Paint p = new Paint();
p.setTextSize(txt_welcome_size);
p.setFakeBoldText(true);
p.setColor(getResources().getColor(R.color.text_Welcome));
canvas.drawText("欢迎",
        (X_RES / 2) - (txt_welcome_size / 2) - txt_welcome_size / 2,
        Y_RES / 2 - txt_welcome_size - 30,
        p);

//"请按住光标中央以校准"
p.setFakeBoldText(false);
p.setColor(getResources().getColor(R.color.text_content1));
p.setTextSize(txt_content_size);
//参数2（X_RES / 2 - (txt_content_size / 2 * txt_content1_count)）：当前屏幕宽度的一半减去字数
canvas.drawText("请按住十字光标以校准",
        X_RES / 2 - (txt_content_size / 2 * txt_content1_count),
        Y_RES / 2 + 150,
        p);

//"你的屏幕"
p.setColor(getResources().getColor(R.color.text_content1));
p.setTextSize(txt_content_size);
canvas.drawText("你的屏幕",
        X_RES / 2 - txt_content_size / 2 * txt_content2_count,
        Y_RES / 2 + 200,
        p);

//线,渐变效果!!!
Shader shader = new LinearGradient((X_RES / 2) - (txt_welcome_size / 2) - txt_welcome_size * 2,
        (Y_RES / 2) - txt_welcome_size,
        X_RES / 2,
        (Y_RES / 2) - txt_welcome_size,
        new int[]{Color.WHITE, Color.GREEN},
        null,
        Shader.TileMode.MIRROR);
p.setShader(shader);

canvas.drawLine((X_RES / 2) - (txt_welcome_size / 2) - txt_welcome_size * 2,
        (Y_RES / 2) - txt_welcome_size,
        (X_RES / 2) + (txt_welcome_size / 2) + txt_welcome_size * 2,
        (Y_RES / 2) - txt_welcome_size,
        p);

此处主要是结合了坐标系，才能把你想要的效果摆放到正确的位置中去，因为居中显示其实在xml是很容易实现的，一个gravity=center就行，但是在代码里，特别现在还是在onDraw里，就不能这么干了，因为试了好多次都不能居中显示。

首先确定好要显示的字数，然后setTextSize，确定好字体大小，接着就调用canvas.drawText进行绘制了,

canvas.drawText("你的屏幕",
        X_RES / 2 - txt_content_size / 2 * txt_content2_count,
        Y_RES / 2 + 200,
        p);

参数1为x轴坐标点，参数2位y轴坐标点，参数3为画笔的实例p。

如果想要居中，就是要自己算字数和字体大小，然后用屏幕宽度一减就ok了，算法不难，可以自己试试。

然后因为原本xml中是一个横线的图片作为分隔，很好看，但是这里onDraw里面不好弄图片（也许是我不知道），我就自己画了一条线，并且还弄出了渐变的效果，虽不及原图，但也六七不离八了。

CalibrationActivity.Java 代码如下：

要点解释：BaseActivity里面主要就写了两个方法，一个是将所有Activity添加进一个Activity的list，命名为ActivityCollector，这样是为了当校正完成跳转到第二个Activity后，点击确定能关闭所有Activity直接退出程序；第二个是remove掉Activity，使其finish。ActivityCollector里面分别有：

public static void addActivity(Activity activity) {
    activities.add(activity);
}

public static void removeActivity(Activity activity) {
    activities.remove(activity);
}

public static void finishAll() {
    for (Activity activity : activities) {
        if (!activity.isFinishing()) {
            activity.finish();
        }
    }
}

这三个方法。

目测我写的代码还是很好懂的，触摸校正的具体算法代码是参照网上的，针对当前触摸校正功能的界面以及其他的一些细节是我修改的。有写的不对或有更好方法实现的话，还请大神们不吝赐教，本人将虚心接受，在撸码的道路上越走越远！