●實作練習：預期畫面
●補充說明
(一)WebView
=>離線的時候也能用webview，這是連到android本機端的網頁
=>所以可以把網站都丟到這個asset資料夾中，就能在離線的狀況下看網站:這叫hybrid的作法
1.使用webview先在AndroidManifest.xml中設定權限
<uses-permission android:name="android.permission.INTERNET"/>
2.拉出一個webview，給id
3.在app下面new一個assets folder，放在main下面=>確定
4.再到assets folder new一個file=>named index.html，加上<h1>和<p>
5.把程式碼修改為連到這個網址，注意這邊的android_asset不加s
wv.loadUrl("file:///android_asset/index.html");
6.設定第二頁，在index.html中加上可以跳到下一頁的連結
<p><a href="page2.html">前往第二頁</a></p>
7.在java code加上下面兩行，才能正確連結到下一頁，因為android 8以後有改strictMode，應該是因為安全性設定的問題，不能直接用file:///開檔案，要用fileprovider，這兩個的用法是建立一個VmPolicy物件(模擬器規則物件)，讓這個程式可以不用被app的規則限制住而是用模擬器規則(因為只是用來做測試的，所以不需要很多規則)，這不是一個好的做法，但暫時先這樣做=>在api22以前沒有這個問題
StrictMode.VmPolicy.Builder builder =
new StrictMode.VmPolicy.Builder();
StrictMode.setVmPolicy(builder.build());
(二)如何回上一頁=>做完上面，會發現跳到第二頁以後無法返回上一頁，因為如果直接按back button會跳出app，這是因為我們的app只有一個activity，android的back buttong功能是離開activity，這邊因為page2也在同一個activity中所以無法回上一頁，這邊就要使用onBackPressed()
public void onBackPressed(){
if(wv.getUrl().contains("index.html")){
super.onBackPressed();
}else{
wv.goBack();
}
}
(三)如果在第二頁加上javascript程式碼，要記得在javacode加上
wv.getSettings().setJavaScriptEnabled(true);
●程式--html
(一)index.html
<h1>Hello World!</h1>
<p>i am the index</p>
<p><a href="page2.html">前往第二頁</a></p>
(二)page2.html
<h1>this is page 2</h1>
<script>
function calc(){
var q1=document.getElementById("q1").value;
var q2=document.getElementById("q2").value;
var ans=eval(q1)+eval(q2);
var spanans=document.getElementById("ans");
spanans.innerHTML=ans;
}
</script>
<input type="text" id="q1"/>+
<input type="text" id="q2"/>
<input type="button" value="=" onclick="calc()">
<span id="ans"></span>
●程式--java code
WebView wv;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
wv=(WebView)findViewById(R.id.wv);
//要設定javascript可以運作
wv.getSettings().setJavaScriptEnabled(true);
//一定要設定WebViewClient，否則找不到page2.html
wv.setWebViewClient(new WebViewClient());
//android_asset不加s
wv.loadUrl("file:///android_asset/index.html");
//加上這個就可以開檔案，因為android 8以後有改strictMode，
//不能直接用file:///開檔案，要用fileprovider來做
StrictMode.VmPolicy.Builder builder = new StrictMode.VmPolicy.Builder();
StrictMode.setVmPolicy(builder.build());
}
//當按下手機的back button時的method
public void onBackPressed(){
//取得url以後檢查url中有沒有index.html，
//如果有就跳出activity，沒有就回上一頁
if(wv.getUrl().contains("index.html")){
//呼叫父類別的onBackPressed()會直接離開activity，
//但是不可以將此功能註解掉
super.onBackPressed();
}else{
//回上一頁
wv.goBack();
}
}
●程式參考(GitHub)：Webview Load html from Assets
文章標籤
全站熱搜
留言列表
繪圖軟體練習 (2)
