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

Стварэнне карыстацкага Clock Widget: Гадзіннік Дызайн

by
Difficulty:BeginnerLength:LongLanguages:

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

Распрацоўка віджэтаў для Android платформы ўключае ў сябе некалькі іншы набор задач, чым стандартныя распрацоўкі прыкладанняў. У гэтай серыі навучальных дапаможнікаў, мы будзем працаваць у рамках працэсу распрацоўкі наладжвальны аналагавы віджэт гадзін. Гадзіннік будуць заснаваныя на класе Android AnalogClock і настроены з вашай уласнай графікай.


Агляд серыі

У гэтай серыі кіраўніцтваў мы распрацоўваем наладжвальны Android аналагавыя гадзіны віджэт, выкарыстоўваючы графіку класа AnalogClock і прыстасаваныя. У першай частцы гэтай серыі, мы ствараем праект, рыхтуючы файл маніфеста і іншыя рэсурсы. У гэтай частцы, мы будзем працаваць над дызайнам фішкі. Гэта будзе ўключаць у сябе стварэнне графікі для цыферблата і рук, а таксама рэалізацыі макета ў фармаце XML. Мы будзем ствараць графіку для розных шчыльнасцяў прылад. У заключнай частцы серыі, мы збіраемся рэалізаваць дазваляючы карыстачу выбіраць з выбару канструкцый для гадзін, таму мы створым тры варыянты дызайну тут.

Гэта частка 2 з нашай серыі на пабудову Наладжвальны Android Analog Clock Widget на чатыры навучальныя дапаможнікі:

Віджэт Android AnalogClock выкарыстоўвае тры малюнка: цыферблат гадзін, хвілінная і гадзіннікавая стрэлка. Такім чынам, мы створым тры элемента дызайну для кожнай версіі фішкі гадзін, мы хочам, каб карыстальнікі маглі выбіраць паміж імі. Мы таксама будзем ствараць альтэрнатыўныя варыянты дызайну з цыферблатам, гадзіны, і хвіліны. Для рэалізацыі гэтага праекта нам неабходна будзе прызначацца розныя шчыльнасці экрана прылады, для якіх мы будзем ствараць файлы малюнкаў у чатырох розных маштабах.


Крок 1: Стварэнне малюнкаў для цыферблата гадзін

Мы збіраемся стварыць тры варыянты дызайну гадзін, кожны з цыферблатам, хвіліннай стрэлкі і гадзіннікавая стрэлка. Вядома, вы можаце выкарыстоўваць свае ўласныя праекты замест гэтага, але вы можаце выкарыстоўваць файлы малюнкаў, якія мы выкарыстоўваем тут, каб пачаць працу. Файлы малюнкаў для кожнага праекта ў кожнай шчыльнасці ўключаны ў спасылцы загрузкі для гэтага ўроку, а таксама будуць уключаны ў загрузцы для частцы 4.

Спачатку гэта цыферблат гадзін. Нагадаем, што мы вызначылі віджэт як дзве ячэйкі у шырыню і дзве клеткі з высокім, у выніку чаго максімальны памер 146dp (не залежныя ад шчыльнасці пікселяў). Для дадзенага кіраўніцтва мы створым чатыры версіі кожнага малюнка ў адпаведнасці з чатырма катэгорый шчыльнасці.

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

Гэта прасцей, калі вы пачынаеце з шчыльнасцю асяроддзя, якая павінна быць максімум 146px па абедзвюх восях. Вось гадзіны па змаўчанні цыферблатам мы выкарыстоўваем пры сярэдняй шчыльнасці, якія можна выкарыстоўваць альбо ў якасці асновы для вашых уласных канструкцый або, калі вы не хочаце, каб стварыць свой уласны пазней:

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

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

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

  • Нізкая шчыльнасць: 110px
  • Сярэдняя шчыльнасць: 146px
  • Высокая шчыльнасць: 220px
  • Звышвысокая шчыльнасць: 292px

Калі ў вас ёсць файлы малюнка для кожнага дызайну цыферблата вы хочаце выкарыстоўваць (і версію для кожнай шчыльнасці ў выпадку неабходнасці), капіяваць іх у рисуемых тэчкі ў Android працоўнага прасторы фішкі праекта. Eclipse, як правіла, стварыць тэчку для кожнай катэгорыі шчыльнасці аўтаматычна, але, калі вы выкарыстоўваеце толькі адно малюнка для ўсіх шчыльнасцяў, вы можаце стварыць тэчку з імем проста «малюе» і змясціць туды малюнак. Папкі для кожнага ўзроўню шчыльнасці з'яўляюцца:

  • Нізкая: малюем-lpdi
  • Medium: малюем-mpdi
  • Высокая: малюем-HPDI
  • Звышвысокая: малюем-xhpdi

Android AVD Manager дазволіць пратэставаць гатовы праект віджэтаў на кожнай з гэтых шчыльнасцяў. Пасля таго, як у вас ёсць выявы, захаваныя ў розную рисуемых тэчку пераканайцеся, што вы выкарыстоўвалі адны і тыя ж імёны ў кожным з іх. Напрыклад, адзін з праектаў набору мы выкарыстоўваем называюцца «clock_dial_stone» -гэта чынам файла для каменя цыферблата у кожнай тэчцы шчыльнасці, хоць змест кожнай версіі адрозніваецца, калі толькі ў памерах. Калі вы ўсё яшчэ сумняваецеся ў тым, як гэта павінна працаваць, проста загрузіць файлы малюнкаў, выкарыстоўваючы спасылку для загрузкі ў верхняй частцы гэтага ўроку і праглядаць папкі, каб атрымаць уяўленне.


Крок 2: Стварэнне гадзін рукі Выявы

Затым стварыце малюнак для вашага гадзіны віджэт гадзіну і хвіліну рукі, уключаючы малюнка для кожнага праекта і кожнай шчыльнасці вы арыентуецеся. Вось нашы сярэдняя шчыльнасць хвілінныя стрэлкі для кожнай канструкцыі:

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

Наступная дыяграма паказвае поўную гаму ручных малюнкаў з хвіліннай стрэлкай на дванаццаць і гадзінную стрэлку на тры (гадзінную стрэлка была павернутая на 90 градусаў па гадзіннікавай стрэлцы на яго цэнтральнай кропцы):

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

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

Прынцып тут такі ж, як і для хвілінных стрэлак, за выключэннем таго, што рукі гадзіну звычайна павінны быць карацей. Стварыце свой гадзіну руку, які паказвае на 12 гадзін і падрыхтаваць версіі для кожнай шчыльнасці, капіюючы іх у свае рисуемых тэчкі, як вы рабілі для хвілінных стрэлак.


Крок 3: Вызначэнне фішкі Поля

Дызайн фішкі збіраецца выкарыстоўваць некаторыя дадзеныя, мы ўключаем у наш праект "каштоўнасці" тэчкі. На Android API 14 і далей, сістэма аўтаматычна ўключае полі паміж фішкамі, як яны з'яўляюцца на працоўным стале карыстальніка. Аднак у папярэдніх версіях API гэта было не так. Па гэтай прычыне мы хочам паказаць запас ўключыць вакол віджэт гадзін на прыладах пад кіраваннем Android ўзроўні менш, чым 14. Гэта той выпадак, калі мы можам выкарыстоўваць той факт, што ў нас ёсць каштоўнасці тэчкі з таргетынг гэтыя дзве катэгорыі узроўняў карыстацкага API.

Мы вызначым поле ў нашым файле макета XML, звяртаючыся да памернасці рэсурсу. У каталогу «значэнне», стварыце новы файл з імем «dimensions.xml» - выберыце «значэнне» тэчку ў Eclipse, і пстрыкніце правую кнопку мышы ці выберыце «Файл», затым «Новы», «File» і ўвядзіце імя файла.

Пры націску на кнопку «Гатова», Eclipse будзе стварыць і адкрыць файл. Абярыце ўкладку «dimensions.xml» для рэдагавання кода. Калі ласка, увядзіце наступныя дадзеныя:

Гэты код проста выводзіць значэнне памеру, выкарыстоўваючы не залежныя ад шчыльнасці пікселяў нароўні з імем, так што мы можам спасылацца на яго ў іншым месцы.

Захавайце яго. Цяпер скапіруйце яго, пстрыкнуўшы правай кнопкай мышы ў тэчцы "каштоўнасці" або выбраўшы яго і выбраўшы «Edit» - выберыце «Капіяваць». Устаўце яго ў тэчку «значэння-V14» мы стварылі ў мінулы раз - пстрыкніце правай кнопкай мышы або абярыце тэчку і выберыце «Рэдагаваць», затым выберыце «Уставіць». Файл з'явіцца ў «значэння-V14» тэчку, якая арыентавана на ўзроўні API ад 14 і далей. Адкрыць новую копію файла і змяніць значэнне памеру, каб паказаць запас нуля наступным чынам:

Цяпер, калі размяшчэнне XML-ставіцца да гэтага значэння вымярэння, выкарыстоўваючы сваё імя, значэнне, роўнае нулю, будзе выкарыстоўвацца на прыладах, якія працуюць пад кіраваннем API-14 плюс і значэнне 8dp будзе выкарыстоўвацца ў адваротным выпадку.


Крок 4: Рэалізацыя віджэтаў Layout

Зараз давайце вызначым наш віджэт ў XML. Памятаеце, што мы вызначылі пачатковы макет для фішкі ў файле XML, у якім мы вызначылі яе асноўныя ўласцівасці. Кампаноўка мы казалі там быў «clock_widget_layout» такім чынам, стварыць гэты файл. Пстрыкніце правай кнопкай мышы або абярыце тэчку «макет» і выберыце «Файл», затым «Новы», «Файл». Увядзіце «clock_widget_layout.xml» у якасці імя файла і націсніце кнопку «Гатова».

Абярыце ўкладку «clock_widget_layout.xml», калі Eclipse, адкрывае файл, так што вы можаце рэдагаваць XML. Мы выкарыстоўваем Relative Layout для нашага віджэту - калі вы хочаце выкарыстоўваць іншы дызайн, вы можаце альтэрнатыўна выкарыстоўваць або лінейны або макет кадра, так як яны з'яўляюцца адзінымі, падтрымоўванымі фішкамі. Каб выкарыстоўваць Relative Layout, дадайце наступную схему ў файл макета XML:

Тут мы паказваем ідэнтыфікатар для фішкі, які мы будзем выкарыстоўваць для рэалізацыі пстрычкі на ім у нашым Java код у частцы 4. Звярніце ўвагу, што код таксама ставіцца да значэння вымярэння, які мы стварылі, выкарыстоўваючы стандартны сінтаксіс - імя «памераў .xml » файл на самай справе не мае значэння, трэба проста пералічыць" элемент Dimen "у файле значэнняў, каб спасылацца на яго такім чынам.

Ўнутры Relative Layout, дадайце AnalogClock віджэт наступным чынам:

Гэта стандартны Android Analog Clock элемент, які дазваляе наладзіць дысплей. Мы выкарыстоўваем атрыбут ID, так што мы можам спасылацца на віджэт ў Java. Апошнія тры атрыбутаў вызначаюць Drawable рэсурсаў, якія мы стварылі для набору, хвілінных і гадзінных стрэлак. Калі вы захавалі вашы з рознымі імёнамі файлаў, змяніць гэты код, каб адлюстраваць іх. Android падбярэ Drawable файл з адпаведнай папкі шчыльнасці на кожным карыстацкім прыладзе.

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

Зноў жа, змяніць Drawable імёны, каб адлюстраваць імёны для цыферблатаў, хвіліны і гадзіннікавая стрэлка малюнкаў для кожнага з вашых канструкцый. Вы можаце ўключаць у сябе больш за тры канструкцый, калі вы хочаце - пераканацца, што ўсе, акрамя аднаго з іх мае бачнасць ўсталяваць нябачны, так што толькі адна канструкцыя (па змаўчанні) з'яўляецца на пачатковым этапе. Мы зможам ажыццявіць выбар карыстальніка паміж гэтымі канструкцыямі ў Java з выкарыстаннем элемента Analog Clock атрыбуты ID, якія ўсё сканчаюцца цэлымі лікамі, пачынаючы з нуля і Инкрементирование з кожнай канструкцыі. Захавайце яго макета.

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


Наступным разам

Гэта працэс праектавання для нашых гадзін фішкі ў камплекце. Калі вы не хочаце, каб стварыць свой уласны дызайн выявы на дадзеным этапе, проста выкарыстоўваць выявы ў тэчцы загрузкі на першы. У наступным ўроку мы будзем выкарыстоўваць клас AppWidgetProvider рэалізаваць наш віджэт ў Java. У заключнай частцы серыі мы будзем ажыццяўляць, калі карыстальнік націскае на віджэт, які ўяўляе выбар паміж дызайнам і абнаўленне карыстацкіх налад, каб бесперапынна адлюстроўваць абраны імі варыянт.

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.