Android

Master WebView trong Android (Phần 1)

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.

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

Và một file index.html nằm trong thư mục assets của Androidb Project với nội dung như sau:

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.

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

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

Và load với đường dẫn website. Ở đây mình sử dụng website của mình luôn

Thử chạy thử hai cách trên chúng ta thấy kết quả như dưới đây:

Load Html local

master_webview_android_part1_ss1

Load Webpage

master_webview_android_part1_ss2

Ở 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.

1 thought on “Master WebView trong Android (Phần 1)”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.