Hiển Thị Và Tương Tác ảnh Với Android WebView - Techmaster

Nếu bạn muốn trở thành một lập trình viên Android, hãy tham gia khóa học "Lập trình Android qua 10 ứng dụng thực tế" từ chuyên gia Nguyễn Bá Thành, CEO WePlay.,JSC - 5 năm khởi nghiệp lập trình mobile - Nổi tiếng với game Bắt Chữ (10 triệu lượt tải - 2014), Ứng dụng Lịch số 1 Việt Nam: Lịch Vạn Niên (5 triệu lượt tải).

Trong bài hướng dẫn này, chúng ta sẽ trải nghiệm các sử dụng một WebView để hiển thị hình ảnh trong ứng dụng của bạn, cấu hình điều khiển tương tác tự động từ bên trong mã Java. Chúng ta cũng sẽ khám phá các tùy chọn khác nhau để nhập hình ảnh vào WebView, bao gồm cả hình ảnh tải từ địa điểm Web, từ Gallery thiết bị, và từ bên trong cấu trúc thư mục của ứng dụng.

Bước 1: Tạo một dự án Android

Bắt đầu một dự án Android mới trong Eclipse. Trong lớp Activity chính của ứng dụng của bạn, hoặc bất cứ Activity nào bạn muốn hiển ảnh trong đó, hãy import các thư viện như sau: import android.app.Activity; import android.content.Intent; import android.database.Cursor; import android.net.Uri; import android.os.Bundle; import android.provider.MediaStore; import android.view.View; import android.view.View.OnClickListener; import android.webkit.WebView; import android.widget.Button;

Bạn có thể không import tất cả, tùy thuộc bạn muốn load ảnh thế nào. Nếu bạn dự kiến load ảnh từ web, bạn cần thêm “internet permission” vào Manifest ứng dụng của bạn. Mở Manifast và thêm dòng code sau trong thẻ cha của “manifest” <uses-permission android:name=”android.permission.INTERNET” />

Bước 2: Tạo giao diện ứng dụng

Chúng ta sẽ sử dụng một WebView duy nhất bên trong một giao diện để hiển thị ảnh.. Bên trong tập tin chính của dự án bố trí XML, hoặc bất cứ nơi bào bạn muốn dùng Activity trong truy vấn, hãy thêm đoạn mã xml để layout sau đây: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> </LinearLayout>

Trong layout main này, hãy thêm một WebView như sau đây: <WebView android:id="@+id/pic_view" android:layout_width="fill_parent" android:layout_height="0dp" android:layout_weight="1" > </WebView>

Chúng ta sẽ sử dụng thuộc tính ID để xác định các WebView. Vì layout sẽ bao gồm các thành phần khác, chúng ta xác định layout_weight. Ngoài ra để minh họa việc load ảnh từ các nguồn khác nhau, chúng ta cũng sẽ thêm vào 3 nút. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="3dp"> <Button android:id="@+id/pick_btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/pick" /> <Button android:id="@+id/load_btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/load" /> <Button android:id="@+id/app_btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/local" /> </LinearLayout>

Ở đây chúng ta include ba nút bên trong Layout tuyến tính thứ hai, với các thuộc tính ID để chúng ta có thể thực hiện các nhấp chuột vào nút. Bạn cũng sẽ cần phải thêm dòng sau vào tập tin các XML trong thư mục của ứng dụng “res / giá trị”: <string name="pick">Gallery</string> <string name="load">Web</string> <string name="local">App</string>

Bước 3: Chuẩn bị cho việc tải hình ảnh

Trong lớp Activty ứng dụng của bạn, thay đổi dòngkhai báo lớp để implement click listener như sau đây:

public class PictureViewerActivity extends Activity implements OnClickListener {

Thay đổi tên lớp cho phù hợp. Bây giờ thêm bên trong khai báo lớp, trước khi phương thức “onCreate”:

public class PictureViewerActivity extends Activity implements OnClickListener {

Phương thức “OnCreate” đã có rồi, nếu không thêm vào như sau đây: @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); }

Đây là mã chuẩn để tạo Activity. Bên trong phương thức này, sau đoạn mã đã tồn tại, lấy mọt tham chiếu đến WebView của bạn và thay đổi màu sắc hiển thị của nó như sau: picView = (WebView)findViewById(R.id.pic_view); picView.setBackgroundColor(0);

Điều này sẽ cho phép chúng ta tải hình ảnh vào WebView khi ứng dụng chạy. Mặc định, WebView hiển thị cùng với một nền trắng, mà chúng ta override ở đây. Sau phương thức “onCreate”, thêm phác thảo phương thức của bạn “onClick” như sau: public void onClick(View v) { }

Chúng ta sẽ bổ sung thêm mã để xử lý mỗi nút bấm bên trong phương thức này.

Bước 4: Tải một hình ảnh từ gallery

Hãy bắt đầu bằng cách cho phép người dùng tải một hình ảnh từ Gallery trên thiết bị của họ. Đầu tiên, thêm một biến bên trong khai báo lớp của bạn, trước khi phương thức “onCreate”: private final int IMG_PICK = 1;

Điều này sẽ cho phép chương trình phản hồi khi người sử dụng trở về từ Gallary sau khi chọn một hình ảnh. Bên trong phương thức “onCreate”, sau mã hiện có, thêm đoạn mã sau để lấy một tham chiếu đến nút “chọn” và chỉ định một người biết lắng nghe nhấp chuột vào nó: Button pickBtn = (Button)findViewById(R.id.pick_btn); pickBtn.setOnClickListener(this);

Bây giờ chương trình có thể hồi đáp lại sự kiện ấn nút. Bên trong phương thức “onClick”, thêm vào mã sau: if (v.getId() == R.id.pick_btn) { Intent pickIntent = new Intent(); pickIntent.setType("image/*"); pickIntent.setAction(Intent.ACTION_GET_CONTENT); //we will handle the returned data in onActivityResult startActivityForResult(Intent.createChooser(pickIntent, "Select Picture"), IMG_PICK); }

Điều này sẽ đưa người tới ứng dụng khác để chọn một hình ảnh. Tùy thuộc vào các ứng dụng mà họ đã cài đặt, họ có thể cần phải chọn một ứng dụng từ danh sách. Ví dụ, trên thiết bị của tôi, tôi nhận được

Khi người dùng chọn một hình ảnh, họ sẽ trở về ứng dụng chúng ta và phương thức “onActivityResult” sẽ chạy. Thêm nó vào khai báo lớp như sau: protected void onActivityResult(int requestCode, int resultCode, Intent data) { if (resultCode == RESULT_OK) { } }

Bên trong câu lệnh if, thêm đoạn mã sau để kiểm tra xem người dùng đang trở về từ chương trình chúng ta dự định cho họ chọn ảnh? if (requestCode == IMG_PICK) { }

Bên trong lệnh if này, chúng ta lấy dữ liệu trả về từ ứng dụng Galley, nó sẽ là URI của ảnh người dùng chọn:Uri pickedUri = data.getData ();Chúng ta sẽ tạo chuỗi lưu đường dẫn các hình ảnh, mà chúng ta cần dùng để tải các hình ảnh vào WebView. Thêm đoạn code sau: String imagePath = ""; String[] imgData = { MediaStore.Images.Media.DATA }; Cursor imgCursor = managedQuery(pickedUri, imgData, null, null, null); if(imgCursor!=null) { int index = imgCursor.getColumnIndexOrThrow(MediaStore.Images.Media.DATA); imgCursor.moveToFirst(); imagePath = imgCursor.getString(index); } else imagePath = pickedUri.getPath(); //Bây giờ chúng ta có một tham chiếu đến vị trí ảnh và có thể tải nó vào WebView: picView.loadUrl ("file :/ / /" + ImagePath);

Bạn có thể chạy ứng dụng của bạn để kiểm tra nó tải thư viện ảnh – bạn có thể cần phải chạy nó trên một thiết bị thực tế nếu ứng dụng giả lập không có hình ảnh được lưu trữ trên đó.

Tiếp theo chúng ta sẽ xử lý việc tải từ các trang web và thư mục ứng dụng, trước khi khám phá các tùy chọn cấu hình cho WebView.

Bước 5: Tải một hình ảnh từ trang web

Để đơn giản hơn, hãy tải một ảnh từ web, chúng ta chỉ cần một URL. Đầu tiên, trở lại phương thức “onCreate”, thực hiện các nút bấm chuột vào nút “tải” như sau: Button loadBtn = (Button)findViewById(R.id.load_btn); loadBtn.setOnClickListener(this);

Trong phương thức “onClick”, sau khi câu lệnh “nếu” trong đó chúng ta xử lý nút “pick”, thêm vào đoạn code sau, thay đổi nó để phù hợp với hình ảnh của URL của bạn: else if(v.getId() == R.id.load_btn) { picView.loadUrl("http://developer.android.com/images/brand/google_play_logo_450.png");

Ở đây chúng ta chỉ đơn giản là tải một trong các tài nguyên ảnh Android Google Play để minh họa, nhưng tất nhiên bạn có thể chọn ảnh tùy ý. Nếu bạn muốn người dùng nhập ảnh lựa chọn của họ bạn có thể thêm một trường text. Ảnh sẽ load cung cấp cho thiết bị có internet:

Bước 6: Tải một hình ảnh từ cấu trúc thư mục App

Bạn có thể để hình ảnh trong gói ứng dụng của bạn mà bạn muốn hiển thị trong WebView. Chúng ta sẽ tìm hiểu hai cách có thể để đạt được điều này. Đầu tiên, trở lại trong phương thức của bạn “onCreate, xử lý các nhấp chuột vào nút: Button appBtn = (Button)findViewById(R.id.app_btn); appBtn.setOnClickListener(this);

Thêm một nhánh lệnh “if” và “else” trong phương thức “onClick” như sau: else if(v.getId() == R.id.app_btn) { }

Để chỉ hiển thị một hình ảnh trong các WebView, bạn đơn giản có thể chỉ định URL của nó: picView.loadUrl("file:///android_asset/mypicture.jpg");

Việc này sẽ tài một file ảnh JPEG được lưu trữ trong thư mục của ứng dụng “assets” và được đặt tên “mypicture.jpg”.

WebView được thiết kế để hiển thị nội dung HTML, vì vậy bạn có thể muốn hiển thị hình ảnh như là một phần tử HTML “img” cùng với các thẻ đánh dấu Web khác. Để làm như vậy, bạn có thể lưu một tập tin HTML trong thư mục của ứng dụng “assets” với một phần tử “img” bên trong nó, ví dụ: <html> <head> </head> <body> <img src="file:///android_asset/mypicture.jpg"/> </body> </html>

Bạn có thể include các nội dung HTML trong tập tin này nếu bạn muốn nó hiển thị trong WebView của bạn cùng với hình ảnh. Để tải các HTML, thay đổi dòng “loadURL” như sau: picView.loadUrl("file:///android_asset/imagepage.html");

Điều này chạy tốt với một tập tin HTML được lưu là “imagepage.html” trong thư mục “assets”,

Bước 7: Cấu hình WebView hình ảnh

Bạn có thể thiết lập một số các chi tiết về cách người dùng tương tác với hình ảnh của bạn bên trong WebView từ mã Java Activity. Trong phương thức “onCreate”, sau mã listener nút của bạn, thêm những vào: picView.getSettings().setBuiltInZoomControls(true); picView.getSettings().setUseWideViewPort(true);

Điều này hướng dẫn sử dụng sử dụng điều khiển zoom tiêu chuẩn và View Port rộng cho WebView của bạn. Có những lựa chọn khác bạn có thể khám phá ở đây, chẳng hạn như thiết lập mức độ phóng to mặc định. Bây giờ, khi người dùng tương tác với WebView của bạn, họ có thể tăng gấp đôi, sử dụng thao tác pinch để phóng to, cũng như sử dụng các nút và trượt để di chuyển / pan: