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

Android SDK: Прадвiнутая галерэя для малюнкаў

by
Difficulty:BeginnerLength:LongLanguages:

Belarusian (беларуская мова) translation by Alex Grigorovich (you can also view the original English article)

З дапамогай Android Intents і Gallery View, можна дазволіць карыстачу выбраць малюнак на яго прыладзе.  У гэтым уроку мы аб'яднаем выбар малюнкаў з Gallery View, які мы крыху палепшым стварыўшы інтэрактыўную функцыю для паказу выбраных карыстальнікам малюнкаў. Калі вы стваралі хоць бы адзiн дадатак для Android, вы цалкам справіцеся з усімі этапамі ўрока.

Дадатак, якi мы створым у гэтым уроку будзе адлюстроўваць пракручваю стужку малюнкаў, з дапамогай Android Gallery View. Карыстальнік зможа імпартаваць малюнкi націснуўшы на аб'ект у галерэі, якія будуць узяты з галерэі па-змаўчанні або з дапамогай файлавага мэнэджара. Калі малюнак абран, мы апрацум яго да таго як паказаць, таму мы не задзейнічаем лішнія рэсурсы памяці. Пры націску на эскіз, дадатак пакажа выбраны малюнак у павялічаным выглядзе.

Крок 1: Стварэнне праекта Android

Запусціце новы праект у Eclipse. У main Activity класе вашага дадатку задаiце ў пачатку наступныя аператары імпарту, гэта трэба зрабіць да абвяшчэння класа:

Аб'яву класа павінна быць прыкладна такоi, але з вашай назвай Activity:

Унутры класа, да метаду «onCreate», які Eclipse павінен аўтаматычна ўключыць, дадайце наступныя зменныя:

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

У файле маніфесту, адзіны дадатак, якія вы павінны зрабіць, пазначыць элемент main Activity вашага дадатку:

Гэта дазволіць дадатку захоўваць малюнкi пры змене арыентацыі прылады.  Зараз давайце наладзім тэкставыя радкі, якія мы будзем выкарыстоўваць у карыстацкім інтэрфейсе.  Адкрыйце файл "res/values/strings.xml".  Eclipse павінен быў ужо дадаць імя вашага дадатку, якое вы можаце змяніць, калі захочаце. Дадайце наступныя радкі:

Гэта ўсё будзе выкарыстана ў інтэрфейсе.  Цяпер вернемся да нашага класу Activity.

Крок 2: Дызайн прыкладання

Перш чым мы напішам функцыянал на Java, давайце аформім элементы дадатку. Адкрыйце "res/layout/main.xml" файл. Мы будзем выкарыстоўваць Linear Layout, таму дадайце наступныя радкі ў файл XML:

Мы дадаздiм яшчэ больш элементаў у наш Linear layout.  Пачнем з Text View як першага элемента ў Linear Layout:

Звярніце ўвагу, што мы спасылаемся на радок якую вызначылі ў файле XML. Далей дадайце элемент галерэі наступным чынам:

Мы выкарыстоўваем атрыбут ID, таму мы зможам звярнуцца да аб'екта ў Java кодзе. Затым дададзiм яшчэ адзін 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 і пазней дадамо некалькі метадаў у дадатак.  Для пачатку зробiм ў класе некалькі зменных:

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

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

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

Цяпер мы можам прызначыць "заглушку" малюнкі для кожнай пазіцыі ў масіве, так што ўсе эскізы галерэі першапачаткова будуць адлюстроўваць яе - знаходзячыся яшчэ ўнутры метаду-канструктара:

Каб завяршыць метад канструктара, мы ўсталюем фонавы малюнак для элемента галерэі:

Тут мы паказваем на змест нашага "attrs.xml" файла.

Цяпер нам трэба задзейнічаць некалькі стандартных метадаў, пашыраючы клас Base Adapter.  Для пачатку падключым метад "getCount", пасля метаду канструктара:

Гэты метад вяртае колькасць аб'ектаў у галерэі.  Пасля гэтага метаду дадайце стандартны метад "getItem":

Далей дадаiце метад "getItemId":

Вам не трэба занадта турбавацца пра змест гэтых метадаў, паколькі яны з'яўляюцца стандартнымі.  Цяпер мы дадамо трохі больш складаны метад, неабходны для класа:

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

Цяпер вернемся да пачатку класа main Activity вашага прыкладання.  Дададiм новую зменную, якая прадстаўляе аб'ект новага класа, які вы толькі што стварылі:

Цяпер у метадзе "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.