Android 巧妙编码引导提示UI

开篇

  本篇说说如何编写引导提示UI视图。下面通过一个示例来做详细讲解。

要达到的效果

图标： ico_waiting_tip_bg.png
icon_machine_open_eye.png

以下是三种实施方案：

方案一

  整体切图，作为一个图片来使用，最简单不过了。

缺点：不同的提示文字需要重新切图，增加了APK包体积。

方案二

xml布局。这种方式也很简单。

优点：可以动态适配不同的提示文字，解决了方案一中的缺点。
缺点：提示文字很难居中在白色框内，增加layout布局的层次，消耗了一定的UI性能。当然，我们也可以叫UED把白色的倒三角单独切图，这也不失为一种方法。

方案三

Canvas画图，生成Bitmap。实现code:

   private Bitmap drawWaitingPicture() {
        int space = getResources().getDimensionPixelSize(R.dimen.space_8);
        String tips = "小影正在为您切换识别镜头，请稍等";
        Bitmap tipBg = BitmapFactory.decodeResource(getResources(), R.drawable.ico_waiting_tip_bg);
        Bitmap pig = BitmapFactory.decodeResource(getResources(), R.drawable.icon_machine_open_eye);
        //根据计算，创建特定大小的画布
        Bitmap bitmap = Bitmap.createBitmap(tipBg.getWidth(), tipBg.getHeight() + space + pig.getHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        //画提示文字的背景图片
        canvas.drawBitmap(tipBg, 0, 0, null);
        //画提示文字
        TextPaint paint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
        float textSize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 14, getResources().getDisplayMetrics());
        paint.setTextSize(textSize);
        paint.setColor(0xFF444444);
        Rect rect = new Rect();
        paint.getTextBounds(tips, 0, tips.length(), rect);
        Paint.FontMetrics fontMetrics = paint.getFontMetrics();
        float startX = (tipBg.getWidth() - rect.width()) / 2.0f;
        //这里的.75f是我们根据设计图自己计算出倒三角形上面部分占提示文字背景的比例。然后计算出文字的高度，做到文字居中的效果。
        float basicY = tipBg.getHeight() * .75f / 2;
        float baseLine = basicY - rect.height() / 2.0f + (rect.height() - fontMetrics.bottom + fontMetrics.top) / 2 - fontMetrics.top;
        canvas.drawText(tips, startX, baseLine, paint);
        //画下面的小猪🐖
        float translateX = (tipBg.getWidth() - pig.getWidth()) / 2.0f;
        float translateY = tipBg.getHeight() + space;
        canvas.translate(translateX, translateY);
        canvas.drawBitmap(pig, 0, 0, null);
        canvas.translate(-translateX, -translateY);
        //释放资源图片
        tipBg.recycle();
        tipBg = null;
        pig.recycle();
        pig = null;
        return bitmap;
    }

文字竖直居中的计算：
basicY——画布中文字区域的竖直方向中心线。
baseLine——文字的baseLine

float baseLine = basicY - rect.height() / 2.0f + (rect.height() - fontMetrics.bottom + fontMetrics.top) / 2 - fontMetrics.top;

缺点：code稍微多点。
优点：我们消耗很小的cpu计算来解决了方案一、二中存在的问题。

不要脸的说明

  这只是通过一个简单的示例告诉我们一种解决问题的方案。你得知道你学到了什么。

篇尾

  之前的博文里面都附有本人的QQ联系方式，但很少使用QQ，在以后的博文里只提供本人的微信联系方式。微信：eoy9527。

人的活动如果没有理想的鼓舞，就会变得空虚而渺小。 —— 车尔尼雪夫斯基