Краткое описание: я хочу прекратить гудение, когда я касаюсь своего веб-просмотра в приложении для Android.Я хочу, чтобы не было никакой задержки, когда я впервые прикасаюсь к веб-представлению и сделаю прикосновение максимально отзывчивым.
Редактировать: Мне удалось избавиться от ажиотажа.Это называется тактильной обратной связью.Вы можете удалить это, поместив следующую строку кода в конец моей функции onCreate: webview.setHapticFeedbackEnabled(false);.
Редактировать 2: Теперь я обнаружил, что дляпервое касание, чтобы проверить масштабирование и прочее.Это можно отключить, добавив в раздел <head> файла html следующее: <meta name="viewport" content="width=device-width, user-scalable=no" />.
Таким образом, на этот вопрос дан ответ, если никто не знает других советов.
У меня очень простое приложение для Android.Вы можете создать его в Android Studio, используя «Пустое действие», используя только Java.Затем обновите полученный код, как показано ниже.
Примечание. По сути, это веб-просмотр, где файл index.html содержится в папке assets/www.
Синие капли будут реагировать на ваши прикосновения.,Когда вы нажимаете их, они окрашиваются в голубой цвет в зависимости от того, с какой стороны каждого круга вы касаетесь.(Одна - это кнопка влево / вправо, а другая - вверх / вниз.)
Проблема 1: При первом касании экрана и прикоснитесь снова, отпустив все пальцы.Как я могу удалить это в коде Android, только для этого приложения?
Проблема 2: Также я хочу сделать касание максимально отзывчивым.Есть ли что-нибудь еще, что я могу сделать?Первый раз, когда я касаюсь синей кнопки, кажется, что задержка.Когда я перемещаю палец влево и вправо по синей кнопке, ответ кажется нормальным.
Важный HTML:
<!DOCTYPE html>
<html>
<head>
<title>Test Touch Screen</title>
</head>
<body onload="MyOnLoad();" style="width:100%; height: 100%; padding: 0 0 0 0; margin: 0 0 0 0; overflow: hidden;">
<div id="divMain" style="display: none;">
<br /><br /><br />
<button onclick="MyButton();" style="font-size:xx-large">Click</button>
</div>
<div id="divCanvas" style="display: block; width: 100%; height: 100%; min-height: 100vh; overflow-x: hidden; overflow-y: hidden;
margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<canvas id="mycanvas" oncontextmenu="return false;"></canvas>
</div>
<!-- JQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<script type="text/javascript">
var g_StopTouchAndMouseFiringTwice = true;
var g_PosUpDownX = 0;
var g_PosUpDownY = 0;
var g_PosLeftRightX = 0;
var g_PosLeftRightY = 0;
var g_PosReturnX = 0;
var g_PosReturnY = 0;
var g_Radius = 0;
var g_UpDown = 0; // -1, 0, 1
var g_LeftRight = 0; // -1, 0, 1
var g_TouchPoints = [];
function MyOnLoad() {
// The Resize code - need to add early due to maximize
addEventListener("resize", MyWindowResize, false);
if ((canv = document.getElementById("mycanvas")) !== null && typeof (canv) !== "undefined") {
canv.addEventListener("mousemove", mycanvasOnMouseMove, false);
canv.addEventListener("mousedown", mycanvasOnMouseDown, false);
canv.addEventListener("mouseup", mycanvasOnMouseUp, false);
canv.addEventListener("touchstart", mycanvasOnTouchStart, false);
canv.addEventListener("touchmove", mycanvasOnTouchMove, false);
canv.addEventListener("touchend", mycanvasOnTouchEnd, false);
canv.addEventListener("touchcancel", mycanvasOnTouchCancel, false);
}
// Prevent scrolling when touching the canvas
// Stops all mouse events as well
document.body.addEventListener("touchstart", function (e) {
if (g_StopTouchAndMouseFiringTwice && e.target.id === "mycanvas") {
e.preventDefault();
}
}, false);
document.body.addEventListener("touchend", function (e) {
if (g_StopTouchAndMouseFiringTwice && e.target.id === "mycanvas") {
e.preventDefault();
}
}, false);
document.body.addEventListener("touchmove", function (e) {
if (g_StopTouchAndMouseFiringTwice && e.target.id == "mycanvas") {
e.preventDefault();
}
}, false);
Layout();
setTimeout("Animate();", 50);
}
function Layout() {
var width, height;
width = $(window).width();
height = $(window).height();
var widthDoc = $(document).width(), heightDoc = $(document).height();
$("#divCanvas").css("overflow-x", "hidden");
$("#divCanvas").css("overflow-y", "hidden");
$("#divCanvas").width(width);
$("#divCanvas").height(height);
$("#mycanvas").css("overflow-x", "hidden");
$("#mycanvas").css("overflow-y", "hidden");
$("#mycanvas").width(width);
$("#mycanvas").height(height);
mycanvas.width = width;
mycanvas.height = height;
var buffer;
g_Radius = Math.floor(0.2 * Math.min(width, height));
buffer = Math.floor(1.1 * g_Radius);
g_PosUpDownX = width - buffer;
g_PosUpDownY = height - buffer;
g_PosLeftRightX = buffer;
g_PosLeftRightY = height - buffer;
g_PosReturnX = buffer;
g_PosReturnY = buffer;
}
function Animate() {
var border = 20, borderX2 = 2 * border, piX2 = 2 * Math.PI;
var i, start;
var width, height;
var c = document.getElementById("mycanvas");
var ctx = c.getContext("2d");
width = c.width;
height = c.height;
SetUpDownLeftRight();
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, width, height);
ctx.fillStyle = "#00FF00";
ctx.fillRect(border, border, width - borderX2, height - borderX2);
for (i = 0; i < 2; i++) {
start = i === 0 ? 0 : Math.PI;
ctx.fillStyle = ((i === 0 && g_UpDown < 0) || (i === 1 && g_UpDown > 0)) ? (Math.abs(g_UpDown) > 1 ? "#FFFFFF" : "#00FFFF") : "#0000FF";
ctx.beginPath();
ctx.arc(g_PosUpDownX, g_PosUpDownY, g_Radius, start, start + Math.PI);
ctx.closePath();
ctx.fill();
//ctx.closePath();
}
for (i = 0; i < 2; i++) {
start = i === 0 ? (0.5 * Math.PI) : (1.5 * Math.PI);
ctx.fillStyle = ((i === 0 && g_LeftRight < 0) || (i === 1 && g_LeftRight > 0)) ? (Math.abs(g_LeftRight) > 1 ? "#FFFFFF" : "#00FFFF") : "#0000FF";
ctx.beginPath();
ctx.arc(g_PosLeftRightX, g_PosLeftRightY, g_Radius, start, start + Math.PI);
ctx.closePath();
ctx.fill();
//ctx.closePath();
}
//ctx.fillStyle = "#0000FF";
//ctx.beginPath();
//ctx.arc(g_PosReturnX, g_PosReturnY, g_Radius, 0, 2 * Math.PI);
//ctx.closePath();
//ctx.fill();
////ctx.closePath();
setTimeout("Animate();", 50);
};
function SetUpDownLeftRight() {
var i, len, xDist, yDist, rXr;
g_LeftRight = 0
g_UpDown = 0;
rXr = g_Radius * g_Radius;
for (i = 0, len = g_TouchPoints.length; i < len; i++) {
xDist = g_TouchPoints[i].clientX - g_PosUpDownX;
yDist = g_TouchPoints[i].clientY - g_PosUpDownY;
if ((xDist * xDist + yDist * yDist) < rXr) {
// Do the + so see if multiple ones
g_UpDown += yDist < 0 ? 1 : -1; // Up is in the negative y direction
}
xDist = g_TouchPoints[i].clientX - g_PosLeftRightX;
yDist = g_TouchPoints[i].clientY - g_PosLeftRightY;
if ((xDist * xDist + yDist * yDist) < rXr) {
// Do the + so see if multiple ones
g_LeftRight += xDist > 0 ? 1 : -1;
}
}
}
function MyWindowResize(e) {
Layout();
};
function MyButton() {
var el;
if ((el = document.getElementById("divMain")) !== null && typeof (el) !== "undefined") {
el.style.display = "none";
}
if ((el = document.getElementById("divCanvas")) !== null && typeof (el) !== "undefined") {
el.style.display = "block";
Layout();
}
}
function mycanvasOnMouseMove(e) {
var found;
var i, len = g_TouchPoints.length;
//// Only add it if it is already there
//for (i = len - 1, found = false; i >= 0; i--) {
// if (g_TouchPoints[i].identifier === -1) {
// if (!found) {
// found = true;
// g_TouchPoints[i].clientX = e.clientX;
// g_TouchPoints[i].clientY = e.clientY;
// } else {
// g_TouchPoints.splice(i, 1);
// }
// }
//}
//if (!found) g_TouchPoints.push({ identifier: -1, clientX: 0, clientY: 0 });
// Only update it if it is already there
for (i = len - 1, found = false; i >= 0; i--) {
if (g_TouchPoints[i].identifier === -1) {
if (!found) {
found = true;
g_TouchPoints[i].clientX = e.clientX;
g_TouchPoints[i].clientY = e.clientY;
} else {
g_TouchPoints.splice(i, 1);
}
}
}
};
function mycanvasOnMouseDown(e) {
var i, len = g_TouchPoints.length;
// Remove any previous
for (i = len - 1; i >= 0; i--) {
if (g_TouchPoints[i].id === -1) {
g_TouchPoints.splice(i, 1);
}
}
g_TouchPoints.push({ identifier: -1, clientX: e.clientX, clientY: e.clientY });
};
function mycanvasOnMouseUp(e) {
var i, len = g_TouchPoints.length;
for (i = len - 1; i >= 0; i--) {
if (g_TouchPoints[i].identifier === -1) {
g_TouchPoints.splice(i, 1);
}
}
};
function touchesRedo(e) {
var i, len;
g_TouchPoints.length = 0; // Also gets rid of mouse ones
for (i = 0, len = e.touches.length; i < len; i++) {
g_TouchPoints.push({ identifier: e.touches[i].identifier, clientX: e.touches[i].clientX, clientY: e.touches[i].clientY });
}
}
function mycanvasOnTouchStart(e) {
touchesRedo(e);
};
function mycanvasOnTouchMove(e) {
touchesRedo(e);
};
function mycanvasOnTouchEnd(e) {
touchesRedo(e);
};
function mycanvasOnTouchCancel(e) {
touchesRedo(e);
};
</script>
</body>
</html>
MainActivity.java
package touchscreen.com.touchscreentest;
import android.os.Build;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.WindowManager;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
WebView webview = (WebView) findViewById(R.id.webView);
WebSettings settings = webview.getSettings();
settings.setJavaScriptEnabled(true);
webview.setWebChromeClient(new WebChromeClient());
webview.loadUrl("file:///android_asset/www/index.html?IsAndroidWebview=true"); // This is a cheat to tell the html we are calling in AndroidApp
// These things allegedly make it faster
settings.setLoadWithOverviewMode(true);
settings.setUseWideViewPort(true);
settings.setSupportZoom(true);
settings.setBuiltInZoomControls(false);
//settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
settings.setCacheMode(WebSettings.LOAD_NO_CACHE);
settings.setDomStorageEnabled(true);
webview.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
webview.setScrollbarFadingEnabled(true);
// NEW FOR Sound
settings.setAllowFileAccess(true);
if (Build.VERSION.SDK_INT > 17) {
settings.setMediaPlaybackRequiresUserGesture(false);
}
// NEW FOR Sound
settings.setAllowContentAccess(true);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
webview.setLayerType(View.LAYER_TYPE_HARDWARE, null);
} else {
webview.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}
}
}
AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="touchscreen.com.touchscreentest">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
/* The android:configChanges="orientation|screenSize"
is needed to stop the program from reloading on an orientation change */
<activity android:name=".MainActivity" android:configChanges="orientation|screenSize">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>