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

Ствараем дадатак "прагноз надвор'я" на Android

Difficulty:IntermediateLength:MediumLanguages:

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

Final product image
What You'll Be Creating

Многія папулярныя дадатки прагнозу надвор'я ў Google Play альбо ўтрымліваюць шмат рэкламы, альбо патрабуюць занадта вялікай колькасці дазволаў, альбо ўтрымліваюць функцыянал, які большасць з нас ніколі не выкарыстоўваюць. Было б выдатна, калі б мы маглі стварыць ўласнае прыкладанне надвор'я з нуля?

У гэтым уроку я пакажу вам, як гэта зрабіць. Наш дадатак будзе мець просты і мінімалістычны карыстацкі інтэрфейс, які паказвае карыстачу менавіта тое, што яму трэба ведаць аб бягучых умовах надвор'я. Давайце пачнем.

1. Падрыхтоўка

Перш чым працягваць, двойчы праверце, што ў вас ўстаноўлены наступныя кампаненты:

  • Eclipse ADT Bundle: вы можаце спампаваць яго на вэб-сайце распрацоўніка Android.
  • Ключ API OpenWeatherMap: гэта не абавязкова для выканання нашай задачы, але гэта бясплатна. Вы можаце атрымаць яго, зарэгістраваўшыся на сайце OpenWeatherMap.
  • Значки: Я рэкамендую вам спампаваць шрыфт weather icons font, створаны Эрыкам Флорсом. Вам нужно загрузить файл TTF, потому что мы будем использовать его в нативном приложении. Мы будем использовать этот шрифт чтобы показывать различные значки в зависимости от погодных условий.

2. Створым новы праект

Я збіраюся назваць гэта дадатак SimpleWeather, але вы можаце даць яму любое імя, якое вам спадабаецца. Калі ласка, увядзіце унікальнае імя пакета, ўсталюйце мінімальны неабходны SDK на Android 2.2 і ўсталюйце мэтавай SDK на Android 4.4. Вы можаце пакінуць тэму Holo Dark.

Create a new Android Application

Гэта дадатак будзе мець толькі адно Activity, і яно будзе заснавана на шаблоне Blank Activity, як паказана ніжэй.

Create a new activity

Назавіце актыўнасць WeatherActivity. Мы будзем выкарыстоўваць Fragment ўнутры гэтага Activity. Макет, звязаны з Activity называецца activity_weather.xml. Макет, звязаны з Fragment называецца fragment _weather.xml.

The Activity details screen

3. Дададзим карыстацкі шрыфт

Скапіруйце weathericons-regular-webfont.ttf ў каталог assets / fonts вашага праекта і пераназавіце яго ў weather.ttf.

4. Адрэдагуем файл маніфесту

Адзіны дазвол, якое патрабуецца гэтаму дадатку - гэта android.permission.INTERNET.


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

5. Адрэдагуем макет Activity

У activity_weather.xml змен не так шмат. Ён павінен ужо ўключаць у сябе FrameLayout. Дадайце дадатковую ўласцівасць, каб змяніць колер фону на #FF0099CC.

6. Адрэдагуем макет Fragment

Зменіце файл fragment_weather.xml, дадаўшы пяць тэгаў TextView, каб адлюстраваць наступную інфармацыю:

  • горад і краіна
  • бягучая тэмпература
  • значок, які паказвае бягучае ўмовы надвор'я
  • адзнака часу, якая ўказвае карыстальніку, калі было атрымана апошняе абнаўленне інфармацыя пра надвор'е
  • больш падрабязная інфармацыя аб бягучай надвор'і, напрыклад, апісанне і вільготнасць

Выкарыстоўвайце RelativeLayout для размяшчэння тэкставых уяўленняў. Вы можаце наладзіць textSize для розных прылад.

7. Зменім strings.xml

Гэты файл утрымлівае радкі, якія выкарыстоўваюцца ў нашым дадатку, а таксама коды сімвалаў Юнікода, якія мы будзем выкарыстоўваць для адлюстравання значкоў надвор'я. Дазваляе прыкладанням адлюстроўваць восем розных тыпаў умоў надвор'я. Калі вам трэба больш, ўжыеце наступную хітрасць. Дадайце наступныя значэнні ў файл values/strings.xml:

8. Дадзим пункт меню

Карыстальнік павінен мець магчымасць выбіраць горад, чыю надвор'е яны хочуць бачыць. Змяніце файл menu/weather.xml і дадайце элемент для гэтай опцыі.

Цяпер, калі ўсе XML-файлы гатовыя да выкарыстання, давайце пяройдзем да запыту на API OpenWeatherMap для атрымання дадзеных аб надвор'і.

9. Атрымліваем дадзеныя з OpenWeatherMap

Мы можам атрымаць бягучыя дадзеныя аб надвор'і ў любым горадзе, у фармаце JSON, з дапамогай API OpenWeatherMap. У радку запыту мы перадаем імя горада і сістэму вымярэння, у якой павінны быць вынікі.

Напрыклад, каб атрымаць бягучую інфармацыю пра надвор'е ў Канберре, выкарыстоўваючы метрычную сістэму, мы адпраўляем запыт на http://api.openweathermap.org/data/2.5/weather?q=Canberra&units=metric

Адказ, які мы атрымліваем праз API, выглядае так:

Стварыце новы клас Java і назавіце яго RemoteFetch.java. Гэты клас адказвае за атрыманне дадзеных аб надвор'і праз API OpenWeatherMap.

Мы выкарыстоўваем клас HttpURLConnection для выканання аддаленага запыту. API OpenWeatherMap чакае ключ API ў HTTP-загалоўку з імем x-api-key. Гэта вызначана ў нашым запыце з выкарыстаннем метаду setRequestProperty.

Мы выкарыстоўваем BufferedReader для чытання адказу API ў StringBuffer. Калі мы атрымаем поўны адказ, мы преобразуем яго ў аб'ект JSONObject.

Як відаць з прыведзенага вышэй адказу, дадзеныя JSON ўтрымліваюць поле з імем cod. Яго значэнне роўна 200, калі запыт быў паспяховым. Мы выкарыстоўваем гэта значэнне, каб праверыць, ці мае адказ JSON бягучую інфармацыю пра надвор'е ці не.

Клас RemoteFetch.java павінен выглядаць наступным чынам:

10. Захаваем горад у настройках

Пользователь не павінен паказваць імя горада кожны раз, калі захоча выкарыстаць прыкладанне. Дадатак павінен запомніць апошні горад, які шукаў карыстальнік. Мы робім гэта, выкарыстоўваючы SharedPreferences. Аднак замест прамога доступу да гэтых налад з нашага класа Activity, для гэтага лепш стварыць асобны класс.

Стварыце новы клас Java і назавіце яго CityPreference.java. Каб захаваць і атрымаць імя горада, стварыце два метаду setCity і getCity. Аб'ект SharedPreferences ініцыялізуецца у канструктару. Клас CityPreference.java павінен выглядаць наступным чынам:

11. Створым Fragment

Стварыце новы клас Java і назавіце яго WeatherFragment.java. У гэтым фрагменце ў якасці макета выкарыстоўваецца fragment_weather.xml. Абвясьцеце пяць аб'ектаў TextView і ініцыялізуецца іх у метадзе onCreateView. Абвясьцеце новы аб'ект Typeface з імем weatherFont. Аб'ект TypeFace паказвае на вэб-шрыфт, які вы загрузілі і захавалі ў тэчцы assets/fonts.

Мы будзем выкарыстоўваць асобны паток для асінхроннага атрымання дадзеных праз API OpenWeatherMap. Мы не можам абнавіць карыстацкі інтэрфейс з падобнага фонавага патоку. Таму нам патрэбны аб'ект Handler, які мы ініцыялізуюем у канструктару класа WeatherFragment.

Ініцыялізуюем аб'ект weatherFont, выклікаючы createFromAsset у класе Typeface.  Мы таксама выклікаем метад updateWeatherData ў onCreate.

У updateWeatherData, мы запускаем новы паток і выклікаем getJSON у класе RemoteFetch. Калі значэнне, якое вяртаецца getJSON, роўна null, мы выводзім паведамленне пра памылку карыстальніку. Калі гэта не так, мы выклікаем метад renderWeather.

Толькі асноўны паток дазваляе абнаўляць карыстацкі інтэрфейс прыкладання для Android. Выклік Toast або renderWeather прама з фонавага патоку прывядзе да памылкі выканання. Вось чаму мы выклікаем гэтыя метады з выкарыстаннем метаду post-апрацоўшчыка.

Метад renderWeather выкарыстоўвае дадзеныя JSON для абнаўлення аб'ектаў TextView. Пагодны вузел адказу JSON ўяўляе сабой масіў дадзеных. У гэтым уроку мы будзем выкарыстоўваць толькі першы элемент масіва метэаралагічных дадзеных.

У канцы метаду renderWeather мы выклікаем setWeatherIcon з ідэнтыфікатарам бягучага надвор'я, а таксама часам усходу і заходу сонца. Настройка значка надвор'я трохі складаная, таму што API OpenWeatherMap падтрымлівае больш умоў надвор'я, чым мы можам адлюстраваць з дапамогай выкарыстоўванага вэб-шрыфта. На шчасце, ідэнтыфікатары надвор'я вынікаюць шаблону, пра які вы можаце даведацца больш на вэб-сайце OpenWeatherMap.

Так мы будзем супастаўляць ідэнтыфікатар надвор'я з абразком:

  • коды надвор'я ў дыяпазоне 200 пазначаюць навальніцу, што азначае, што мы можам выкарыстоўваць R .string.weather_thunder для іх
  • коды надвор'я ў дыяпазоне 300 звязаныя з морасю, і мы выкарыстоўваем R.string.weather_drizzle
  • коды надвор'я у дыяпазоне 500 азначаюць дождж, і мы выкарыстоўваем R.string.weather_rain
  • і гэтак далей ...

Мы выкарыстоўваем час усходу і заходу сонца, каб адлюстраваць сонца або месяц, у залежнасці ад бягучага часу сутак і толькі ў тым выпадку, калі надвор'е ясная.

Вядома, вы можаце апрацоўваць больш умоў надвор'я, адпаведна змяняючы метад setWeatherIcon.

Нарэшце, дадамо метад changeCity да фрагмента, каб карыстальнік мог абнавіць бягучы горад. Метад changeCity будзе выклікацца толькі з асноўнага класа Activity.

12. Рэдагуем Activity

В плыні налады праекта, Eclipse запаўняе WeatherActivity.java некаторым шаблонным кодам. Заменіце стандартную рэалізацыю метаду onCreate на прыведзеную ніжэй, у якой мы выкарыстоўваем WeatherFragment. Метад onCreate павінен выглядаць наступным чынам:

Затым адрэдагуйце метад onOptionsItemSelected і апрацуйце адзіны параметр меню, які ў нас ёсць. Усё, што вам трэба зрабіць, гэта выклікаць метад showInputDialog.

У метадзе showInputDialog мы выкарыстоўваем AlertDialog.Builder для стварэння аб'екта Dialog, які прапануе карыстачу ўвесці імя горада. Гэтая інфармацыя перадаецца метаду changeCity, які захоўвае імя горада з выкарыстаннем класа CityPreference і выклікае метад changeCity ў фрагменце.

Цяпер ваш дадатак для надвор'я гатовы. Збярыце праект і устанвоите яго на Android-прыладзе для тэставання.

The app running on a tablet

Заключение

Зараз у вас ёсць поўнафункцыянальны дадатак прагнозу надвор'я. Вывучайце API OpenWeatherMap для далейшага развіцця вашага дадатку. Вы таксама можаце выкарыстоўваць больш значкоў надвор'я, так як у дадатку мы выкарыстоўваем толькі нешматлікія з іх.

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.