当前位置：首页 > web >正文

【有内鬼，终止交易】手机壁纸Android客户端创意实现

web 2025/7/2 2:26:53

创意来源

前几天刷抖音时，看到一款壁纸，显示的是诺基亚时代的键盘机样式，昏黄的屏幕显示着【有内鬼，终止交易】的消息内容。感觉很有创意，记忆一下飘到十年前，那时候手机没有微信，没有QQ，没有抖音~蛮荒时代，大家都是通过短信聊天儿，一条信息一毛钱，偶尔通过移动梦网上网充个浪，一不小心用掉3、5M流量然后电话就欠费停机了，哈哈哈哈。

既然那么有时代感，那么能引起我们共同的追忆，想着如果能做一款应用，它不仅仅是一款壁纸，而且可以点击按键，甚至可以收发短信，拨打电话，岂不是很酷。光说不练假把式，说干就干，接下来就看我们如何实现它！
在这里插入图片描述

实现思路

先给大家看一下效果图：
在这里插入图片描述

看似复杂，实际上整个应用就由一个主activity架起，activity布局上半部分是Android原生的两个ImageView（MyNokia 图标及模拟屏幕效果），布局下半部分即键盘处是一个WebView内嵌一个本地页面，键盘效果由本地HTML网页渲染得到，通话及短信都是调用的系统界面。

该应用的难点在于如何准确的在一张图片上的各个部位绑定监听事件，例如数字键、星号键、确认键等等。网上有各种实现思路，但尝试后发现都不太理想，要么过于复杂、要么在不同设备上适配性不佳，监听点击位置不准确。
后来转变思路，尝试将该图片切割为不同的小模块，然后为每一个模块View绑定监听事件，最后将各个子模块合并在一起，从视觉效果上就像一张完整的图片。

比较幸运的是之前有一定的PS使用经验，在PS里面有一个非常好用的工具可以帮助我们快速完成上述切割步骤。该工具叫【切片工具】，使用切片工具将目标图片划分为一个一个小模块后，然后选择【文件】→【导出】→【存储为web格式】，PS自动会将图片切割为一个一个的小模块（item）然后组合在一起生成一个HTML文件，该HTML打开后渲染出切割前的完整图片样式。切割完成后我们在应用中直接嵌入该HTML，同时为HTML中的每一个item绑定监听事件，并将点击事件透传给原生activity进行处理即可。
在这里插入图片描述

详细代码

Github 源码

layout布局文件
两个ImageView分别显示NOKIA Logo和屏幕效果，三个TextView分别对应着【销毁】按钮和【退出】按钮以及屏幕中央正文显示，一个Web用于加载本地HTML渲染出键盘效果。

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:app="http://schemas.android.com/apk/res-auto"><android.support.constraint.ConstraintLayout......android:layout_width="match_parent"android:layout_height="match_parent"><ImageView......android:id="@+id/imageView"android:layout_width="match_parent"android:layout_height="wrap_content"/><ImageView......android:id="@+id/imageView2"android:layout_width="match_parent"android:layout_height="0dp"android:src="@drawable/screen"/><TextView......android:id="@+id/input"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="讯息：\n\n有内鬼，终止交易!"/><TextView......android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="销毁"/><TextView......android:layout_width="wrap_content"android:layout_height="wrap_content"android:padding="24dp"android:text="退出"/><WebView......android:id="@+id/webview_keyboard"android:layout_width="0dp"android:layout_height="0dp"/></android.support.constraint.ConstraintLayout>
</layout>

拨打电话

private void callPhone(String number) {if (TextUtils.isEmpty(number)) {showToastMessage("请输入手机号");}else {Intent intent = new Intent();intent.setAction(Intent.ACTION_CALL);Uri data = Uri.parse("tel:" + number);intent.setData(data);startActivity(intent);}
}

跳转至短信列表

private void toSMSList(){try{Intent intent4 = new Intent();intent4.setClassName("com.android.mms","com.android.mms.ui.ConversationList");startActivity(intent4);}catch (Exception e){showToastMessage("打开短信失败");}}

打开通讯录

private void toAddressList(){try{Intent intent = new Intent(Intent.ACTION_VIEW, ContactsContract.Contacts.CONTENT_URI);startActivityForResult(intent, 0);}catch (Exception e){showToastMessage("打开通讯录失败");}
}

加载键盘布局及监听JS点击事件

binding.webviewKeyboard.loadUrl("file:///android_asset/15694580471773267.html");
binding.webviewKeyboard.addJavascriptInterface(new MainActivityJS(), "jsObj");