Показываем изображение в интерфейсе

Этот урок объединяет предыдущие уроки раздела, в нем показано как загружать множество изображений в компоненты ViewPager и GridView, используя отдельные потоки и кэш, затрагивая параллельную работу и изменение конфигурации.

Загрузка изображений в компонент ViewPager

Паттерн свайп отличный выбор для реализации детального просмотра изображений в галерее. Вы конечно можете реализовать данный паттерн, используя компонент ViewPager вместе с компонентом PagerAdapter. Однако, лучше подходит адаптер подкласса FragmentStatePagerAdapter, который автоматически уничтожает и сохраняет состояние фрагментов в компонентеViewPager, как только они скрываются с экрана, снижая расход памяти.

Примечание: если у вас мало картинок и вы уверены, что памяти для них хватит, возможно в этом случае лучше воспользоваться классами PagerAdapter или FragmentPagerAdapter.

Пример реализации ViewPager с дочерними компонентами ImageView. ViewPager и адаптер находятся в главном явлении:

Далее приведена реализация фрагмента, в котором находятся компоненты ImageView. Это может показать разумным, но вы попробуйте найти недостатки реализации. Как это можно улучшить?

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

Любая дополнительная обработка (изменение размеров или загрузка изображений по сети) может выполняться в классе BitmapWorkerTask (который мы создали в прошлых уроках) не причиняя ущербу отзывчивости пользовательского интерфейса. Если в отдельном потоке выполняется что-то большее, чем просто загрузка изображения напрямую с диска, возможно окажется полезным также добавление кэш-памяти или дискового кэша, как мы рассказывали в уроке Кэширование изображений. Пример:

Если вы сделали все, как описывалось в этом и предыдущих уроках раздела, вы получите отличную отзывчивость компонента ViewPager с минимальной задержкой загрузки изображений, а также возможность делать обработку изображений в отдельном потоке по мере необходимости.

Загрузка изображений в компонент GridView

Паттерн сетчатые списки удобен для отображения наборов изображений, и для его реализации может использоваться компонент GridView, в котором несколько изображений показано на экране и еще некоторое количество готово к тому, что пользователь будет листать экран вверх или вниз. При использовании такого подхода вы должны убедиться, что интерфейс остается плавным, расход памяти контролируется, а параллельная работа выполняется корректно. (Помните, что GridView удаляет невидимые дочерние элементы).

Для начала возьмем стандартный GridView с дочерними ImageView элементами, размещенными внутри фрагмента. И снова попробуйте найти подход получше:

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

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

Примечание: данный код может быть легко адаптирован для работы с ListView.

Эта реализация хороша тем, что изображения обрабатываются и загружается не влияя на гладкость работы пользовательского интерфейса. В отдельном потоке вы можете загружать изображения по сети или уменьшать слишком большие изображения с камеры, а после их обработки они отображаются в пользовательском интерфейсе.

Полная реализация и другие концепции обработки изображений находятся в примерах программ Android SDK.

Добавить комментарий