/assets/mypage.html, it will be loaded in our WebView, to perform the main function.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<script>
var p1;
var p2;
function init(){
p1 = document.getElementById('p1');
p2 = document.getElementById('p2');
p1.innerHTML=navigator.userAgent;
var canvas = document.getElementById('myCanvas');
var canvasOffsetX = canvas.getBoundingClientRect().left;
var canvasOffsetY = canvas.getBoundingClientRect().top;
canvas.width = window.innerWidth - (2 * canvasOffsetX);
canvas.height = window.innerHeight - canvasOffsetY - 100;
canvas.fillStyle="#a0a0a0";
canvas.addEventListener('touchstart', touchstartListener, false);
canvas.addEventListener('touchmove', touchmoveListener, false);
canvas.addEventListener('touchend', touchendListener, false);
canvas.addEventListener('touchenter', touchenterListener, false);
canvas.addEventListener('touchleave', touchleaveListener, false);
canvas.addEventListener('touchcancel', touchcancelListener, false);
}
function touchstartListener(event){
p2.innerHTML= "touchstart - <br/>"
+ event.changedTouches[0].pageX + ":" + event.changedTouches[0].pageY;
event.preventDefault();
}
function touchmoveListener(event){
p2.innerHTML= "touchmove - <br/>"
+ event.changedTouches[0].pageX + ":" + event.changedTouches[0].pageY;
event.preventDefault();
}
function touchendListener(event){
p2.innerHTML= "touchend - <br/>"
+ event.changedTouches[0].pageX + ":" + event.changedTouches[0].pageY;
event.preventDefault();
}
function touchenterListener(event){
p2.innerHTML= "touchenter - <br/>"
+ event.changedTouches[0].pageX + ":" + event.changedTouches[0].pageY;
event.preventDefault();
}
function touchleaveListener(event){
p2.innerHTML= "touchleave - <br/>"
+ event.changedTouches[0].pageX + ":" + event.changedTouches[0].pageY;
event.preventDefault();
}
function touchcancelListener(event){
p2.innerHTML= "touchcancel - <br/>"
+ event.changedTouches[0].pageX + ":" + event.changedTouches[0].pageY;
event.preventDefault();
}
</script>
</HEAD>
<BODY onload="init()" style="border:5px solid #000000;">
<p id='p1'>un-init</p>
<canvas id='myCanvas' style="border:1px solid #FF0000;">
Canvas not support!
</canvas>
<p id='p2'></p>
</BODY>
</HTML>
/res/layout/activity_main.xml, with <WebView>.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:orientation="vertical"
android:background="@android:color/background_dark"
tools:context="com.example.androidhybridwebview.MainActivity" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:autoLink="web"
android:text="http://android-er.blogspot.com/"
android:textStyle="bold" />
<WebView
android:id="@+id/mybrowser"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</LinearLayout>
package com.example.androidhybridwebview;
import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;
public class MainActivity extends Activity {
WebView myBrowser;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
myBrowser = (WebView) findViewById(R.id.mybrowser);
myBrowser.getSettings().setJavaScriptEnabled(true);
myBrowser.loadUrl("file:///android_asset/mypage.html");
}
}
Next:
- Detect touch and draw circle on Android WebView with Javascript
No comments:
Post a Comment