Giới thiệu
Sau nhiều bài giới thiệu về View trong Android thì những bài tiếp theo mình sẽ mang đến cho các bạn một View khá là mạnh mẻ trong Android có tên là WebView. Chắc hẳn đa số chúng ta đề biết HTML và CSS nó là thành phần phía font-end của một website. Và đôi khi chúng ta cần render HTML hay nói cách khác là hiển thị HTML trên ứng dụng của chúng ta. Khi đó chúng ta cần tới WebView. Hãy cùng mình đi tìm hiểu cách sử dụng Master WebView nào.
Vì sao chúng ta sử dụng WebView
Lý do tại sao mình lại đặt câu hỏi là tại sao chúng ta nên sử dụng WebView trong ứng dụng của chúng ta. Mình đặt trường hợp là 1 màn hình thiết kế quá phức tạp bạn cần rất nhiều ViewGroup (FrameLayout, RelativeLayout, LinearLayout) hay những view cơ bản khác như TextView, ImageView thì lúc đó chúng ta có thể suy nghĩ là viết nó với HTML sử dụng trong ứng dụng của chúng ta và đó cũng là một giải pháp tốt. Hoặc một trường hợp khác bạn có một website bây giờ bạn muốn mang website đó lên moblie. Thay vì người phải vào trình duyệt để gõ đường dẫn website của bạn khá là mất thời gian thì bây bạn có thể mang đến tiện dụng cho ngừoi dùng là có thể mở ngay ứng dụng của chúng ta với nội dung tương tự hay nói chác khá là nhứng website vào ứng dụng.
Với những yêu cần trên thì chúng ta hoàn toàn có thể sử dụng WebView. Vì vậy mà WebView cũng là một View cũng được sử dụng khá nhiều trong Android.
Trong bài viết hôm nay mình sẽ hướng dẫn cho các bạn cách mà WebView sẽ render HTML từ một file (local) và load HTML từ một đường dẫn mà chúng ta chỉ định.
Load một file HTML vào WebView
Cũng như những cách sử dụng những view khác chúng ta phải viết layout bằng XML hoặc sử dụng các phương thức trên Java như addView và removeView để tạo Layout động.
Mình ví dụ tạo layout sử dụng Webview với xml
File main_activity.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
tools:context="com.modandroid.demowebview.MainActivity">
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
Và một file index.html nằm trong thư mục assets của Androidb Project với nội dung như sau:
<!DOCTYPE html>
<html>
<head>
<title>Master WebView in Android (Part 1)</title>
<style type="text/css">
body{
background-color: #1abc9c;
}
h1{
color: #ffffff;
font-size: 32px;
text-align: center;
}
</style>
</head>
<body>
<h1>Cộng Đồng Mod Android Trên Facebook</h1>
</body>
</html>
Và để load nội dung html lên WebView chúng ta phải sử dụng phương thức loadUrl của WebView.
package com.modandroid.demowebview;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.webkit.WebView;
public class MainActivity extends AppCompatActivity {
private static final String TAG = "MainActivity";
private WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = (WebView)findViewById(R.id.webview);
//load local html with path specific
webView.loadUrl("file:///android_asset/index.html");
}
}
Nếu trong html của các bạn có sử dụng mã Javascript thì chúng ta phải enable Javascript của webview lê sử dụng lệnh
webView.getSettings().(true);
Load một trang web vào WebView
Cũng giống như các load html từ file local thì load một trang web sử dụng WebView cũng hoàn toàn tưng tự. Vì load trên đường mạng nên ứng dụng có sử dụng Internet vì vậy phải khai báo quyền truy cập INTERNET trong file AndroidManifest.xml
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
Và load với đường dẫn website. Ở đây mình sử dụng Blog Cộng Đồng Mod luôn
package com.modandoid.demowebview;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.webkit.WebView;
public class MainActivity extends AppCompatActivity {
private static final String TAG = "MainActivity";
private static final String EITGUIDE_URL = "http://copecute.blogspot.com/";
private WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = (WebView)findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl(EITGUIDE_URL);
}
}
Thử chạy thử hai cách trên chúng ta thấy kết quả như dưới đây:
Load Html local
Load Webpage
Ở những bài viết về Webview tiếp theo mình sẽ nói tới cách mà chúng ta sẽ load một trang web chi tiết hơn và handle các trường (Start Loading, Visible Page, Finished Loading, Recieve Error trong khi loading) khi chúng load url thông qua network. Hẹn gặp lại các bạn ở bài viết sau.
