Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK
Code

Android SDK: Продвинутая галерея для изображений

by
Difficulty:BeginnerLength:LongLanguages:

Russian (Pусский) translation by Alex Grigorovich (you can also view the original English article)

С помощью Android Intents и Gallery View, можно разрешить пользователю выбирать изображения на их устройстве. В этом уроке мы объединим выбор изображений с Gallery View, который мы немного улучшим создав интерактивную функцию для показа выбранных пользователем изображений. Если вы создавали хотя бы одно приложение для Android, вы вполне справитесь со всеми этапами урока.

Приложение, которое мы создадим в этом уроке будет отображать прокручиваемую ленту изображений, с помощью Android Gallery View. Пользователь сможет импортировать изображения нажав на объект в галерее, которые будут взяты из галереи по-умолчанию или с помощью файлового менеджера. Когда изображение выбрано, мы обработаем его до того как показать, поэтому мы не задействуем лишние ресурсы памяти. При нажатии на эскиз, приложение покажет выбранное изображение в увеличенном виде.

Шаг 1: Создание проекта Android

Запустите новый проект в Eclipse. В main Activity классе вашего приложения добавьте в начале следующие операторы импорта, это нужно сделать до объявления класса:

Объявление класса должно быть примерно такое, но с вашим названием Activity:

Внутри класса, до метода «onCreate», который Eclipse должен автоматически включить, добавьте следующие переменные:

Первая переменная - константа, которая используется для идентификации изображения, после того как пользователь его выбрал. Когда пользователь нажимает на эскиз и переходит к выбору изображения, мы будем использовать переменную «currentPic» чтобы отслеживать какие эскиз выбран. Две другие переменные необходимы для элементов пользовательского интерфейса, которые указаны в классе.

В файле манифеста, единственное дополнение, которые вы должны сделать, указать элемент main Activity для вашего приложения:

Это позволит приложению сохранять изображения при смене ориентации устройства. Теперь давайте настроим текстовые строки, которые мы будем использовать в пользовательском интерфейсе. Откройте файл «res/values/strings.xml». Eclipse должен был уже добавить имя вашего приложения, которое вы можете изменить, если захотите. Добавьте следующие строки:

Это все будет использовано в интерфейсе. Теперь вернемся к нашему классу Activity.

Шаг 2: Дизайн приложения

Прежде чем мы напишем функционал на Java, давайте оформим элементы приложения. Откройте «res/layout/main.xml» файл. Мы будем использовать Linear Layout, поэтому добавьте следующие строки в файл XML:

Мы добавим ещё больше элементов в наш Linear Layout. Начнём с Text View как первого элемента в Linear Layout:

Обратите внимание, что мы ссылаемся на строку которую определили в файле XML. Далее добавьте элемент галереи следующим образом:

Мы используем атрибут ID, поэтому мы сможем обратиться к объекту в Java коде. Затем добавим еще один Text View:

Опять, мы используем строку, которую уже определили. Наконец, последним пунктом в нашем Linear Layout будет Image View, который будет показывать увеличенное изображение галереи:

Мы должны будем сослаться на этот View в Java коде, поэтому мы используем атрибут ID. Также, мы используем строку в качестве описания содержимого. Теперь нам нужно определить стиль для галереи. Создайте новый файл в каталоге "res/values", и назовите его "attrs.xml". Напишите следующий код:

Мы собираемся использовать некоторые из ресурсов платформы Android для оформления элементов нашей галереи и будем ссылаться к ним в Java коде.

Теперь вернемся к нашему Activity классу. Внутри метода "onCreate" существующий код должен выглядеть следующим образом:

После этого, добавьте ссылки на два элемента пользовательского интерфейса:

Теперь мы готовы создать галерею и обработать взаимодействия с пользователем.

Шаг 3: Создаём Base Adapter

Чтобы создать Gallery View, мы собираемся создать класс, который расширяет Base Adapter. В вашем классе Activity после метода «onCreate», создайте новый подкласс следующим образом:

Здесь мы задействуем несколько методов, которые понадобятся для Base Adapter и позже добавим несколько методов в приложение. Для начала добавим в класс несколько переменных:

Первая переменная представляет фоновый цвет элемента Android Gallery, на которую мы указываем в нашем "attrs.xml" файле. Context указывает на пользовательский интерфейс при добавлении элементов. Массив Bitmap хранит изображения, которые мы будем отображать в Gallery View. Чтобы начать с чего-то, мы будем использовать изображение "заглушку", в качестве элементов галереи, которые пользователь ещё не выбрал.

Пойдём дальше и и создадим метод конструктора для нашего нового класса PicAdapter, после переменных:

Мы добавим больше кода в метод конструктора позже. Сначала мы создадим переменные массивы Context и Bitmap - мы собираемся показать галерею с 10 объектами в ней, но вы можете изменить эту величину, если хотите. Для демонстрации мы используем стандартную иконку проекта в Eclipse, в качестве "заглушки" изображения, но вы конечно же можете создать свою. Если вы хотите использовать ваше изображение, сохраните его в папках drawable и измените значение строки "decodeResource" в соответствии с новым именем.

Теперь мы можем назначить "заглушку" изображения для каждой позиции в массиве, так что все эскизы галереи первоначально будут отображать её - находясь еще внутри метода-конструктора:

Чтобы завершить метод конструктора, мы установим фоновое изображение для элемента галереи:

Здесь мы указываем на содержание нашего "attrs.xml" файла.

Теперь нам нужно задействовать несколько стандартных методов, расширяя класс Base Adapter. Для начала подключим метод "getCount", после метода конструктора:

Этот метод возвращает количество объектов в галерее. После этого метода добавьте стандартный метод "getItem":

Далее добавим метод "getItemId":

Вам не нужно слишком беспокоиться о содержании этих методов, поскольку они являются стандартными. Теперь мы добавим немного более сложный метод, необходимый для класса:

В методе "getView" мы определяем, что мы хотим показать в каждом элементе галереи. Наш массив Bitmap будет содержать изображения, в каждой позиции с индексом массива Bitmap, соответствующий его позиции в галерее. Также как при создании View, мы устанавливаем Bitmap для отображения, вместе с некоторыми свойствами. Также мы установим фоновый цвет элемента, который мы упоминали ранее. При желании вы можете изменить размер эскизов. Каждый эскиз будет отображаться отцентрированным, если его размер меньше, чем объект View - вы можете выбрать другую опцию, к примеру, растянуть изображение, чтобы соответствовать размеру поля, изменив параметр "ScaleType".

Теперь вернёмся к началу класса main Activity вашего приложения. Добавим новую переменную, представляющую объект нового класса, который вы только что создали:

Теперь в методе "onCreate" после кода, который вы добавили, задействуйте переменную Base Adapter и установите его в качестве адаптера для галереи:

При первоначальном запуске приложения, всё должно выглядеть примерно так:

Pic Select Launch

Теперь мы готовы обрабатывать взаимодействия с пользователем.

Шаг 4: Разрешаем пользователю выбрать изображения

Чтобы выбрать изображения для галереи, пользователь должен нажать на эскиз. В методе "onCreate" после существующего кода, добавьте следующий обработчик события для каждого элемента в Gallery View:

Мы создаем новый обработчик "OnItemLongClickListener" с методом "onItemLongClick" внутри него. Добавьте следующий код внутри метода:

Найдите минутку и взгляните на то, что получилось. Сначала, мы записываем выбранный элемент, теперь мы знаем, какой элемент в галерее выбран. Затем код сообщает приложению, что необходимо дать пользователю выбрать приложение для выбора изображения, это может быть Галерея Android или файловый менеджер. Указав "ACTION_GET_CONTENT", мы даём задание приложению вернуть результат выбора пользователя. Поскольку мы запускаем событие выбора с помощью "startActivityForResult", мы сможем обработать возвращаемые изображения в Activity метода "onActivityResult".

То, что произойдёт, когда событие выбора изображения запущено будет зависеть от того какие приложения установил пользователь. На моем устройстве я могу выбрать из двух приложений:

Image Chooser App Choice

Файл изображения который я выберу в любом из этих приложений будет возвращён в приложение.

Шаг 5: Управление полученными изображениями

Когда пользователь выбирает изображение из галереи или файлового менеджера приложения, данные будут возвращены в метод "onActivityResult". Добавьте метод к классу Activity, используя следующую структуру:

Здесь мы проверяем, что мы получили корректные данные и что данные вернулись после события выбора. Мы вызовем метод суперкласса в конце метода. Внутри второго оператора "if" мы добавим весь код который нужен для импорта выбранного изображения, начиная с URI изображения:

Нам нужно немного больше чтобы импортировать изображение. Начнём с объявления нескольких переменных:

Теперь, давайте, попытаемся получить путь изображения:

Теперь мы получим данные изображения, затем отправим запрос используя курсор, передадим URI изображения выбранного пользователем. Условия "if" и "else" обрабатывают выбор изображения пользователем через стандартную галерею или с помощью файлового менеджера. Конечным результатом кода будет путь к выбранному изображению.

Шаг 6: Отображение обработанных изображений для снижения нагрузки на использование памяти

Вместо того, чтобы просто показать выбранные пользователем изображения, мы должны свести к минимуму количество памяти которое будет использовать наше приложение. В большинстве случаев изображения на устройстве будут гораздо больше, чем мы можем отобразить в приложении. По этой причине нам нужно обработать изображения перед его отображением в приложении. Находясь внутри второго оператора "if" в "onActivityResult" добавьте следующее:

Внутри этого выражения мы обработаем и импортируем изображение. Начнём с определения необходимой ширины и высоты для изображений, это будет самый большой размер для отображения изображения:

Теперь нам нужно настроить объект Bitmap чтобы декодировать изображение:

Сначала узнаем больше о размере изображения:

Теперь передадим настройки Bitmap для обработки размеров изображения, но не самого изображения. Мы будем использовать эту информацию для определения подходящего размера для импорта изображения, и начнём с задействования переменной которую сохраним:

Теперь вычислим размер образца, и если необходимый размер меньше, чем размер изображения по-умолчанию:

Теперь мы можем установить размер образца Bitmap:

Теперь нам нужно настроить параметры Bitmap для того, чтобы декодировать само содержимое файла, а не только его размеры:

Наконец мы можем обработать Bitmap используя наши настройки:

Теперь переменная "pic" содержит Bitmap изображения, которое мы будем использовать в приложении.

Шаг 7: Добавляем выбранные изображения в галерею

Теперь у нас есть выбранное пользователем изображение, и мы можем добавить его в массив Gallery. Для этого нам нужно добавить метод в класс Base Adapter. Внутри класса "PicAdapter" добавьте следующий метод после "getView":

Теперь вернёмся к "onActivityResult", и после строки, в которой мы обработали файл изображения и сохранили результат в переменной "pic", добавьте следующее:

Сначала мы вызовем новый метод, чтобы добавить новое изображение в массив Gallery, а затем мы установим Adapter так, что новое изображение мгновенно появится в Gallery View.

Шаг 8: Показываем большое изображение

Наконец, мы покажем одно изображение большего размера. Изображение будет показано в larger Image View в момент импорта в приложение и затем когда пользователь выбирает его в галерее. Для начала, настроим показ изображения большего размера, когда пользователь импортирует его. В методе "onActivityResult", после строк в которой мы вызывали "setAdapter", добавьте следующее:

У нас есть переменная, содержащая увеличенное изображение, поэтому можно просто объединить их вместе с параметрами обработки. Теперь давайте обработаем показ увеличенного изображения, когда пользователь нажимает на эскиз. В классе "PicAdapter" добавьте еще один метод после "addPic":

Этот метод просто возвращает изображение в указанную позицию. Теперь перейдём к Activity методу "onCreate". После того как вы добавили обработчик нажатия, добавьте обработчик для каждого объекта Gallery View. 

Метод "onItemClick" будет срабатывать каждый раз когда пользователь будет нажимать на эскиз в галерее. Теперь мы вызываем новый метод "getPic", который добавили в класс "PicAdapter" чтобы получить Bitmap выбранной позиции, и устанавливаем в качестве Image View Bitmap для его отображения в увеличенном размере.

Заключение

Итак, мы создали наше приложение галерею. Протестируйте его на вашем устройстве, импортируйте изображения нажимая на эскизы и при нажатии на каждый эскиз, в свою очередь, просматривайте увеличенное изображение. Когда пользователь выбирает несколько изображений, приложение должно выглядеть примерно следующим образом:

Gallery with Selected Images

Конечно, вы можете улучшить приложение в соответствии с вашими потребностями, например внести дополнительные действия для изображения. Исходный код можно скачать по ссылке, поэтому вы сможете проверить, всё ли у вас правильно.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.