Android中处理Touch Icon的方案

Android中处理Touch Icon的方案

苹果的Touch Icon相对我们都比较熟悉，是苹果为了支持网络应用（或者说网页）添加到桌面需要的图标，有了这些Touch Icon的网页链接更加和Native应用更相像了。由于苹果设备IPod，IPhone,IPad等设备广泛，很多网页都提供了touch icon这种图标资源。由于Android中并没有及早的有一份这样的标准，当我们想把网页添加到桌面时，仍然需要使用苹果的Touch Icon。

Touch Icon

当我们想让一个网页比较完美地添加到桌面，通常情况下我们需要设置一个png图片文件作为apple-touch-icon。比如

<link rel="apple-touch-icon" href="/custom_icon.png">

如果想支持IPhone和IPad，我们需要使用sizes属性来制定多个图片，默认sizes的值为60 x 60。

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

在IOS7之前，苹果系统会对添加到桌面的图标进行圆角化等视觉上的处理，为了不让其处理，我们可以使用apple-touch-icon-precomposed来作为rel的值实现。

更多关于Touch Icon的信息，可以访问水果开发者网站了解更多。

Android中有缺陷的实现
在Android WebView提供了处理Touch Icon的回调，onReceivedTouchIconUrl(WebView view, String url,boolean precomposed)该方法返回了对我们有用的touch icon的url，和是否为预组合（在IOS中不需要进行视觉处理）。虽然有这些数据，我们可以进行处理，但是这其中是有问题的，就是我们不好确定文件的大小，来选择适合的图片。

举个例子,如下一个网页的源码，其中sizes的顺序不规律

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="l");
  }
 
   
  private class JsObject {
       
      @JavascriptInterface
      public void onReceivedTouchIcons(String url, String json) {
          Log.i(LOGTAG, "onReceivedTouchIcons url=" + url + ";json=" + json);
      }
  }
   
  private String getTouchIconJsCode() {
      StringBuilder total = new StringBuilder();
      InputStream inputStream = null;
      BufferedReader bufferReader = null;
      try {
          inputStream = getAssets().open("touchicon.js");
          bufferReader = new BufferedReader(new InputStreamReader(inputStream));
          String line;
          while ((line = bufferReader.readLine()) != null) {
              total.append(line);
          }
      } catch (FileNotFoundException e) {
          e.printStackTrace();
      } catch (IOException e) {
          e.printStackTrace();
      } finally {
          if (null != inputStream) {
              try {
                  inputStream.close();
              } catch (IOException e) {
                  e.printStackTrace();
              }
          }
      }
      return total.toString();
  }
}

返回的JSON数据

[
  {
      "sizes":"72x72",
      "rel":"apple-touch-icon-precomposed",
      "href":"l",
  "display": "standalone",
  "orientation": "landscape"
}

但是由于目前，这种标准实施率相对比较低，所以我们还是需要使用苹果的touch icon。

源码下载：

------------------------------------------分割线------------------------------------------

免费下载地址在 http://linux.bkjia.com/

用户名与密码都是www.bkjia.com

具体下载目录在 /2015年资料/1月/28日/Android中处理Touch Icon的方案/

下载方法见

------------------------------------------分割线------------------------------------------