В этом уроке мы разберем основы использования WebView для отображения изображений в вашем приложении, настройки автоматических элементов управления взаимодействием из вашего Java-кода. Мы также рассмотрим различные варианты импорта изображений в WebView, включая загрузку изображений из веб-расположений, из галереи устройства и из структуры каталогов приложения.
Шаг 1. Создайте проект Android
Если у вас еще нет приложения, с которым вы работаете, запустите новый проект Android в Eclipse. В главном классе Activity вашего приложения или в любом Activity, в которой вы хотите отобразить изображения, добавьте следующие операторы импорта перед строкой открытия объявления класса:
|
01
02
03
04
05
06
07
08
09
10
|
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;
|
Вам может не понадобиться все это в зависимости от того, как вы планируете загружать свои изображения. Если вы планируете загружать изображения через Интернет, вам необходимо добавить разрешение для Интернета в свой проект Manifest. Откройте Manifest и добавьте следующую строку в любом месте внутри родительского элемента manifest:
|
1
|
<uses-permission android:name=»android.permission.INTERNET» />
|
Шаг 2. Создание макета приложения
Мы собираемся использовать один WebView внутри линейного макета для изучения отображения изображений. Внутри основного XML-файла макета вашего проекта, или того, который вы хотите использовать для рассматриваемой операции, добавьте следующую схему макета:
|
1
2
3
4
5
6
|
<LinearLayout xmlns:android=»http://schemas.android.com/apk/res/android»
android:orientation=»vertical»
android:layout_width=»fill_parent»
android:layout_height=»fill_parent»>
</LinearLayout>
|
Внутри этого основного линейного макета сначала добавьте свой WebView следующим образом:
|
1
2
3
4
5
|
<WebView android:id=»@+id/pic_view»
android:layout_width=»fill_parent»
android:layout_height=»0dp»
android:layout_weight=»1″ >
</WebView>
|
Мы будем использовать атрибут ID для идентификации WebView в Java. Поскольку макет будет включать другие элементы, мы указываем вес вместе с общими свойствами макета. Чтобы продемонстрировать загрузку изображений из трех разных мест, мы также добавим три кнопки. Если вы планируете использовать только один из методов загрузки, не стесняйтесь изменить это. После того, как WebView все еще находится внутри основного линейного макета, добавьте следующий дополнительный линейный макет:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
<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>
|
Здесь мы включаем три кнопки во второй линейный макет с атрибутами ID, чтобы мы могли реализовывать нажатия кнопок в Java. Вам также необходимо добавить следующее в ваш XML-файл Strings, который вы должны найти в каталоге «res / values» приложения:
|
1
2
3
|
<string name=»pick»>Gallery</string>
<string name=»load»>Web</string>
<string name=»local»>App</string>
|
Шаг 3. Подготовка к загрузке изображений
В классе Activity вашего приложения измените строку объявления начального класса, чтобы реализовать прослушиватели кликов следующим образом:
|
1
|
public class PictureViewerActivity extends Activity implements OnClickListener {
|
Измените имя класса в соответствии со своим. Теперь добавьте следующее внутри объявления класса перед методом «onCreate»:
|
1
|
private WebView picView;
|
Ваш метод onCreate уже должен быть там, но если нет, добавьте его следующим образом:
|
1
2
3
4
5
6
|
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
|
Это стандартный код для создания Activity. Внутри этого метода, после существующего кода, получите ссылку на ваш WebView и измените его цвет отображения следующим образом:
|
1
2
|
picView = (WebView)findViewById(R.id.pic_view);
picView.setBackgroundColor(0);
|
Это позволит нам загружать изображения в WebView во время работы приложения. По умолчанию WebView отображается с белым фоном, который мы здесь переопределяем. После того, как метод «onCreate» все еще находится внутри объявления класса, добавьте схему вашего метода «onClick» следующим образом:
|
1
2
3
|
public void onClick(View v) {
}
|
Мы добавим код для обработки каждого нажатия кнопки внутри этого метода.
Шаг 4. Загрузите изображение из галереи
Давайте начнем с того, что позволим пользователю загрузить изображение из Галереи на собственное устройство. Сначала добавьте переменную экземпляра в объявление класса, но перед методом «onCreate»:
|
1
|
private final int IMG_PICK = 1;
|
Это позволит нам ответить пользователю, возвращающемуся из Галереи после выбора изображения. Внутри метода «onCreate» после существующего кода добавьте следующее, чтобы получить ссылку на кнопку «выбрать» и назначить ей прослушиватель щелчков:
|
1
2
|
Button pickBtn = (Button)findViewById(R.id.pick_btn);
pickBtn.setOnClickListener(this);
|
Теперь мы можем реагировать на нажатия кнопок. Внутри метода «onClick» добавьте следующее:
|
1
2
3
4
5
6
7
|
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);
}
|
Это приведет пользователя к другому приложению для выбора изображения. В зависимости от того, какие приложения они установили, им может понадобиться выбрать приложение из списка. Например, на моем устройстве я получаю два варианта нажатия кнопки «выбрать»:
Когда пользователь выбирает изображение, он возвращается в приложение и срабатывает метод «onActivityResult». Добавьте его в объявление класса следующим образом:
|
1
2
3
4
5
|
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
if (resultCode == RESULT_OK) {
}
}
|
Внутри оператора «if» добавьте следующее, чтобы убедиться, что пользователь возвращается из намерения, которое мы начали, чтобы он выбрал изображение:
|
1
2
3
|
if (requestCode == IMG_PICK) {
}
|
Внутри этого оператора if мы можем получить данные, возвращенные из приложения Gallery, которые будут URI изображения, выбранного пользователем:
|
1
|
Uri pickedUri = data.getData();
|
Мы создадим строку, представляющую путь для изображения, который нам нужен для загрузки изображения в WebView. Мы используем ту же технику, более подробно рассмотренную в разделе « Отображение изображений в расширенной галерее» . Добавьте следующий код:
|
01
02
03
04
05
06
07
08
09
10
|
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();
|
Теперь у нас есть ссылка на местоположение изображения и мы можем загрузить его в WebView:
|
1
|
picView.loadUrl(«file:///»+imagePath);
|
Вы можете запустить свое приложение сейчас, чтобы протестировать его, загружая изображение галереи — вам может потребоваться запустить его на реальном устройстве, поскольку на эмуляторе обычно не хранятся изображения.
Далее мы будем обрабатывать загрузку из Интернета и каталога приложения, прежде чем исследовать параметры конфигурации для WebView.
Шаг 5. Загрузите изображение из Интернета.
Теперь для более простого варианта. Чтобы загрузить изображение из Интернета, нам просто нужен URL. Во-первых, вернувшись к методу «onCreate», реализуйте нажатия кнопки «Загрузить» следующим образом:
|
1
2
|
Button loadBtn = (Button)findViewById(R.id.load_btn);
loadBtn.setOnClickListener(this);
|
В методе «onClick» после оператора «if», в котором мы обработали кнопку «pick», добавьте следующее, изменив его в соответствии с вашим собственным URL-адресом изображения:
|
1
2
|
else if(v.getId() == R.id.load_btn) {
picView.loadUrl(«http://developer.android.com/images/brand/google_play_logo_450.png»);
|
Здесь мы просто загружаем один из ресурсов изображений Google Play для Android для демонстрации, но вы, конечно, можете изменить его так, чтобы он отражал изображение по вашему выбору. Если вы хотите, чтобы пользователь вводил выбранное изображение, вы можете добавить редактируемое текстовое поле, чтобы захватить это. Изображение будет загружено при условии, что на устройстве функционирует интернет-соединение:
Шаг 6. Загрузите изображение из структуры каталогов приложения.
В вашем приложении могут быть изображения, которые вы хотите отобразить в WebView. Мы рассмотрим два возможных пути достижения этого. Во-первых, вернемся к вашему методу onCreate, обработайте нажатия кнопок:
|
1
2
|
Button appBtn = (Button)findViewById(R.id.app_btn);
appBtn.setOnClickListener(this);
|
Добавьте еще одну ветвь к операторам «if» и «else» в вашем методе «onClick» следующим образом:
|
1
2
3
|
else if(v.getId() == R.id.app_btn) {
}
|
Чтобы отобразить только изображение в WebView, вы можете просто указать его URL:
|
1
|
picView.loadUrl(«file:///android_asset/mypicture.jpg»);
|
Это загружает файл изображения JPEG, сохраненный в папке «assets» приложения и названный «mypicture.jpg».
WebView, естественно, предназначен для отображения содержимого HTML, поэтому вам может потребоваться отобразить изображение в виде HTML-элемента «img» вместе с другой веб-разметкой. Для этого вы можете сохранить файл HTML в папке «assets» приложения с элементом img внутри него, например:
|
1
2
3
4
5
6
7
|
<html>
<head>
</head>
<body>
<img src=»file:///android_asset/mypicture.jpg»/>
</body>
</html>
|
Вы можете включить другое HTML-содержимое в этот файл, если хотите, чтобы оно отображалось в вашем WebView вместе с изображением. Чтобы загрузить HTML, измените строку «loadURL» следующим образом:
|
1
|
picView.loadUrl(«file:///android_asset/imagepage.html»);
|
Это работает для файла HTML, сохраненного как «imagepage.html» в папке «assets», поэтому измените его в соответствии с именем вашего собственного файла. Этот код — все, что вам нужно для загрузки изображения в HTML-файл.
Шаг 7. Настройка взаимодействия изображений WebView
Вы можете установить некоторые детали того, как пользователь взаимодействует с вашим изображением в WebView из вашего кода Java Activity. В методе «onCreate» после кода слушателя кнопки добавьте следующее:
|
1
2
|
picView.getSettings().setBuiltInZoomControls(true);
picView.getSettings().setUseWideViewPort(true);
|
Это указывает приложению использовать стандартные элементы управления масштабированием и широкий порт просмотра для вашего WebView. Есть и другие варианты, которые вы можете изучить здесь, например, установка уровня масштабирования по умолчанию. Теперь, когда пользователь взаимодействует с вашим WebView, он может дважды нажать и ущипнуть, чтобы увеличить, а также использовать кнопки и скольжение для прокрутки / панорамирования:
Вывод
Использование стандартных ресурсов Android, таких как WebView, позволяет быстро использовать модели взаимодействия, с которыми ваши пользователи уже знакомы, а также позволяет сосредоточиться на уникальных аспектах ваших приложений. WebView отображает HTML-страницы, поэтому вы также можете улучшить свои приложения с помощью веб-технологий, таких как CSS и JavaScript. Как видно из приведенного выше примера, вы можете эффективно интегрировать WebView с другими элементами пользовательского интерфейса Android.