Un tutorial pentru dezvoltatorii aspiranți ai Google Glass: construiți prima dvs. aplicație Glass
Publicat: 2022-03-11Google Glass este o tehnologie futuristă care promite să revoluționeze modul în care ne folosim dispozitivele pentru a interacționa cu lumea. Dar din punctul de vedere al dezvoltatorului, ce este atât de special în dezvoltarea pentru sticlă? Răspunsul este „Nimic!” De fapt, din perspectiva unui dezvoltator Android cu experiență, Google Glass este doar un alt dispozitiv Android cu un ecran foarte mic și funcții limitate!
Faptul că oricine are cunoștințe de dezvoltare Android poate deveni membru al acestei comunități „de elită” a evangheliștilor futuriști ai tehnologiei purtabile face parte din ceea ce face ca Google Glass să fie atât de minunat. Sigur, va trebui să înveți câteva lucruri noi, cum ar fi diferența dintre „Immersion” și „Active Card”, dar după cum vei vedea, curba de învățare nu este abruptă.
Scopul acestui tutorial Google Glass este de a pune bazele dezvoltării oricărei aplicații Glass, prin crearea unei aplicații simple care să cuprindă toți pașii comuni. Scopul meu este să vă economisesc timp în cercetare și încercări și erori și să vă permit să rulați prima aplicație Glass cât mai curând posibil.
În acest tutorial, vom discuta mai întâi despre cum să configurați mediul de dezvoltare și să vă conectați Google Glass la computer. Apoi vom crea o aplicație simplă „Hello World” Glass, care va include comenzi vocale personalizate și integrare cu meniul de pornire Glass. Odată ce ați dezvoltat prima aplicație și rulează pe Glass, veți învăța elementele de bază ale navigării în aplicațiile Glass, meniurile activate prin voce și crearea de conținut dinamic.
Cum să intri la bord
Sticla este încă într-un fel de fază de „testare beta”, pentru care Google a inventat termenul „Program Explorer”. Oricum ai spune, Glass nu este încă ceva pe care să-l poți obține în magazin ca un smartphone. Din păcate, instrumentele de dezvoltare Android încă nu au un emulator pe care să-l puteți folosi pentru a vă dezvolta aplicația fără hardware real.
Astfel, pentru a rula și a depana aplicația dvs., va trebui să puneți mâna pe un Google Glass real prin programul Explorer. Pentru a vă alătura programului, vizitați pagina de înscriere și înscrieți-vă pentru acces. Odată aprobat, pregătiți-vă cardul de credit și așteptați ca paharul să fie livrat. Versiunea Explorer de Glass costă în prezent 1.500 USD, dar prețul este de așteptat să scadă semnificativ înainte ca dispozitivul să ajungă în magazine.
Pentru cei fără sticlă
Din cauza lipsei oricărui emulator, este necesar să aveți hardware Google Glass real pentru a dezvolta aplicația în acest tutorial (sau orice aplicație Glass), dar dacă obținerea unuia este în afara bugetului dvs., nu vă simțiți descurajat - este va fi demn de urmat oricum. Ceea ce va deveni evident în tutorial este că dezvoltarea pentru Glass este aproape aceeași cu dezvoltarea pentru orice altă platformă Android!
Dacă încă nu ați folosit Google Glass, dar sunteți la fel de entuziasmat ca și mine, aruncați o privire la aceste două videoclipuri, deoarece ar trebui să vă ofere suficientă contribuție pentru a înțelege elementele de bază ale interfeței cu utilizatorul.
- Introducere în Google Glass
- Instrucțiuni Google Glass: Noțiuni introductive
Există și mai multe videoclipuri utile pentru configurare și navigare aici și multe mai multe detalii despre interfața cu utilizatorul aici.
Reguli de implicare
Acest tutorial pentru dezvoltatori Google Glass face următoarele presupuneri:
- Presupun că înțelegeți elementele de bază ale navigării și setării Glass. Dacă nu ați folosit niciodată Glass, aruncați o privire la videoclipurile de mai sus.
- Presupun că înțelegeți elementele de bază ale dezvoltării Android: structura fișierelor de proiect, configurarea aplicațiilor Android etc.
- Voi folosi Android Studio, dar instrucțiunile ar trebui să se traducă în aproape orice mediu de dezvoltare Android. Android Studio este încă în „beta”, dar și Glass. Nu vă speriați să începeți să îl utilizați - este într-adevăr un produs grozav. Android Studio este disponibil pentru descărcare aici.
Configurarea Google Glass
Bine, să începem!
Primul lucru pe care trebuie să-l faceți este să activați modul de depanare pe Glass. Trebuie să faceți așa ceva pe fiecare dispozitiv Android pe care îl utilizați pentru dezvoltarea aplicațiilor dvs., astfel încât acest lucru ar putea fi familiar. Pentru a activa depanarea, glisați la „ Setări ” -> „ Informații despre dispozitiv ” și apoi atingeți pentru a deschide meniul dispozitivului. Selectați „ Activați depanarea ” și va fi activat.
În continuare, trebuie să vă pregătiți mediul de dezvoltare. Versiunea actuală de Google Glass necesită să utilizați versiunea API 19, așa că asigurați-vă că este instalată. De asemenea, trebuie să aveți instalat kit-ul de dezvoltare de sticlă. Utilizați Managerul SDK Android pentru a instala aceste două pachete dacă nu ați făcut-o deja.
Salut Lume!
Deci, să facem prima noastră bucată de „Sticlărie”. (Da, Google a inventat un alt termen! „Glassware” este numele oricărei aplicații care rulează pe Google Glass). Vom începe prin a dezvolta un vechi „Hello World!” aplicarea. La fel ca majoritatea mediilor de dezvoltare Android majore, Android Studio populează automat noile aplicații cu un șablon pentru a afișa această frază celebră. Drept urmare, obțineți „Hello World!” funcționarea este doar un exercițiu de implementare fundamentală a aplicației.
În Android Studio, faceți clic pe „ Proiect nou ” și completați formularul de proiect. Puteți folosi ceva similar cu acesta:
Când selectați factorii de formă și API, asigurați-vă că selectați „ Sticlă ” și API 19
Selectați „ Activitate de imersie ” ca activitate de pornire.
Îți amintești că am menționat că va trebui să înveți diferența dintre Immersion și Live Card? Articolul Google User Interface explică diferitele tipuri de ecrane din sticlă. Iată un rezumat rapid:
Cardurile live sunt adăugate la cronologia Glass și afișează informații în timp real despre ceva prin actualizări de înaltă frecvență. Acestea rulează în mod constant în fundal chiar și atunci când utilizatorii interacționează cu diferite carduri. Acest lucru permite utilizatorilor să efectueze mai multe sarcini cu acces constant la diferite tipuri de informații în timp real.
Imersiunile sunt ecrane complet personalizabile care rulează în afara experienței cronologice. Acestea vă permit să vă proiectați propria interfață de utilizare și să procesați intrarea utilizatorului așa cum credeți de cuviință. Acesta este ceea ce vom folosi!
În următorul ecran al expertului, lăsați valorile implicite pentru „ Nume ” și „ Titlu ” și faceți clic pe „ Terminare ”.
După ce Gradle se ocupă de dependențele dvs. și vă pregătește proiectul, este timpul să îl conectați la Glass. Acum, aceasta este o dezvoltare futuristă!
Presupunând că toate driverele Android ADB sunt la locul lor și că Glass este recunoscut de sistemul dvs., ar trebui să includeți Glass în lista de dispozitive.
Dacă este prima dată când vă conectați dispozitivul la un computer, Glass va solicita stabilirea aprobării/încrederii. Doar atingeți sticla pentru a permite conectarea și ar trebui să fiți gata.
Faceți clic pe „ Executare ” și implementați „APK-ul implicit” cu „MainActivity” ca activitate de pornire pentru lansare pe dispozitivul „USB”.
După câteva secunde, ar trebui să vedeți ceva de genul acesta pe ecranul Glass:
Ura! Aplicația dvs. rulează pe Glass! Și tot ce trebuia să faceți este să completați câteva valori implicite când ați creat aplicația!
Deoarece nu am specificat altfel, Glass va afișa aplicația dvs. sub numele „Afișați demonstrația”. Dacă glisați înapoi la ecranul de pornire și apoi atingeți pentru a deschide meniul aplicației, îl veți vedea afișat astfel:
Puțin polonez
Ok, l-ai pornit, dar aceasta nu arată ca o aplicație Glass reală și nu vrei ca aplicația să fie pornită de „Afișează demo”.
În acest tutorial, îl vom modifica puțin pentru a obține sentimentul real.
Setarea temei
În primul rând, nu doriți să ocupați niciunul din micul ecran de sticlă cu acest antet urât „Hello World Immersion” bara de titlu a activității și cu siguranță nu doriți ca ecranul dvs. să fie gri cu font negru. Pentru a remedia acest lucru, trebuie doar să comutăm tema pe Android-ul nostru și să lăsăm Glass OS să se ocupe de aceasta.
Deschide res/values/styles.xml
pentru editare. Ar trebui să aibă următorul conținut:
<?xml version="1.0" encoding="utf-8"?> <resources> <style name="AppTheme" parent="android:Theme.Holo.Light"> </style> </resources>
Doar schimbați android:Theme.Holo.Light
în android:Theme.DeviceDefault
. Acest lucru ar trebui să aibă grijă de aspectul aplicației și de culorile automat, folosind tema implicită Glass.
Definirea aspectului meniului
Ok, următorul lucru pe care vrem să-l facem în acest tutorial de dezvoltare Glass este configurarea aplicației noastre pentru a avea un nume propriu și o pornire plăcută controlată prin voce. Deschideți Manifestul Android ( AndroidManifest.xml
) și adăugați eticheta <application…
de mai sus:
<uses-permission android:name="com.google.android.glass.permission.DEVELOPMENT" />
Motivul pentru care doriți să utilizați permisiunile DEVELOPMENT
este pentru a vă putea juca cu comenzi vocale personalizate. Google este destul de strict în ceea ce privește comenzile vocale permise în aplicațiile Glass aprobate și toate comenzile noi trebuie să fie aprobate. Deoarece acest tutorial este în scop de învățare și nu veți trimite această aplicație la magazinul oficial de sticlărie, nu ar trebui să vă faceți griji. Doar activați permisiunile DEVELOPMENT
și veți avea acces la „comenzi vocale nelistate”. Pentru mai multe informații despre aceasta, vă rugăm să citiți această pagină GDK.
Deschideți voice_trigger.xml
pentru editare. Aici este definită comanda vocală pentru pornirea aplicației. Ar trebui să fie localizat în folderul res/xml/
. Ar trebui să obțineți conținut similar cu acesta:
<trigger command="SHOW_ME_A_DEMO" />
În loc să spuneți „Afișați-mi o demonstrație” pentru a porni aplicația noastră, să spunem doar numele aplicației. Schimbați conținutul fișierului în:
<trigger keyword="@string/app_name" />
Dacă reveniți la fișierul manifest, este posibil să observați că android:label="@string/app_name"
a fost actualizat automat pentru a utiliza și șirul de resurse @string/app_name
în loc de valoarea Hello Glass
codificată ca înainte. . Dacă această setare nu a fost actualizată, asigurați-vă că setați valoarea la android:label="@string/app_name"
.
Și care este numele aplicației tale, exact? Dacă deschideți res/values/strings.xml
, numele app_name
dvs. ar trebui să fie afișat ca:
<string name="app_name">Hello Glass</string>
Acest lucru ar trebui să încheie lucrurile pentru prima ta aplicație Hello Glass. Să vedem cum funcționează acum!
Din ecranul Start, puteți spune „ok sticla” pentru a afișa meniul vocal. Aplicația dvs. se află acum în lista comenzilor activate vocal.
Cu acest tutorial pentru a vă ghida, așa arată acum ecranul de pornire al aplicației Glass.
Dacă spuneți „ Bună sticlă ”, aplicația dvs. ar trebui să înceapă și ar trebui să obțineți o experiență standardizată cu Glass:
Dacă nu doriți să vă folosiți vocea pentru a activa aplicația, puteți doar să atingeți ecranul Start și veți vedea că aplicația dvs. este disponibilă în meniu:
Voce sau atingere? Folosiți ambele!
Este foarte important să acordați o atenție deosebită interfeței aplicației dvs. și interacțiunii utilizatorilor dvs. cu aceasta. Amintiți-vă că utilizatorii dvs. nu sunt întotdeauna în măsură să-și folosească vocea - de exemplu, în timp ce urmăresc o prelegere sau o prezentare. Ca alternativă, ei pot avea mâinile pline și nu pot folosi atingerea. Vă sugerez să oferiți atât interacțiunea meniului tactil, cât și vocal ori de câte ori este posibil, permițând utilizatorilor să navigheze prin aplicația dvs. folosind vocea și touchpadul în paralel.
O aplicație reală - Toptal Finder
Acum că vă simțiți confortabil cu dezvoltarea Glass și ați creat Hello Glass, este timpul să creați o aplicație reală care va pune în funcțiune noile funcții Glass. Să construim o aplicație care vă permite să răsfoiți profilurile dezvoltatorilor Toptal de top pe baza platformei de dezvoltare.
Structura exemplului nostru de aplicație Glass va fi simplă:
- Dorim ca ecranul nostru de pornire să aibă logo-ul Toptal cu o voce și să atingem meniul activat care ne permite să selectăm platforma de dezvoltare pentru care avem nevoie de un dezvoltator.
- După selectarea unei platforme, dorim să obținem o listă de dezvoltatori cu poza și numele lor. Profilurile de dezvoltator vor fi prezentate sub forma unei liste care pot fi derulate cu carduri personale.
- Când vizualizam un profil de dezvoltator, dorim să-l putem adăuga la favorite sau să trimitem o cerere de închiriere.
Cele elementare
Să recapitulăm rapid ceea ce ai adăugat deja pe lângă cunoștințele tale Android:
- Cum să vă configurați mediul de dezvoltare pentru a construi Glassware.
- Cum să vă configurați aplicația pentru a utiliza tema standard Glassware GUI.
- Cum să porniți aplicația folosind comenzi vocale personalizate și nume de meniu.
Folosind aceste cunoștințe, puneți-vă noua aplicație în funcțiune. Puteți fie să actualizați aplicația Hello Glass de sus, fie să porniți o nouă aplicație urmând aceiași pași. Denumiți această aplicație „ Top Finder ” și faceți ca fișierul voice_trigger.xml
să arate astfel.
<?xml version="1.0" encoding="utf-8"?> <trigger keyword="@string/app_name" > <constraints network="true" /> </trigger>
Constrângerea network="true"
îi spune sticlei să verifice conectivitatea la rețea la pornirea acestei aplicații, pe care va trebui să o conectăm la listele de dezvoltatori Toptal. Dacă nu există nicio conexiune, Glass va afișa un mesaj de avertizare.
Ecranul de start
Să facem ca ecranul de pornire al aplicației noastre să arate cam așa:
Când vedeți mesajul „ok sticla” pe ecran înseamnă că aplicația are meniu activat vocal în acel loc. Rostirea expresiei „ok sticla” aici activează meniul vocal pentru această locație. Această expresie este predefinită de Glass și nu o puteți schimba.
Vă puteți gândi la „ok glass” ca la un „meniu de aplicații”, la fel cum ați folosit în dezvoltarea smartphone-ului/tabletei și are exact același rol. Deoarece ați „atinge” „pictograma meniului de aplicație” de pe ecran (de multe ori 3 puncte sau linii) pentru a deschide un meniu de aplicație Android, trebuie să spuneți „ok sticla” pentru a deschide meniul activat vocal în aplicația Glassware.
Pentru a activa meniul „ok glass” , trebuie să solicitați FEATURE_VOICE_COMMANDS
din API. Pentru a face acest lucru, adăugați următoarea linie în handler-ul onCreate
din MainActivity
:
getWindow().requestFeature(WindowUtils.FEATURE_VOICE_COMMANDS);
Fiecare activitate care are această caracteristică inclusă va fi redată cu text „ok sticla” în partea de jos în centru.
Următorul lucru pe care trebuie să-l faceți este să creați un meniu pentru ecranul principal. În folderul res/menu
, creați o nouă definiție de meniu XML numită main.xml
. Pentru a simplifica lucrurile, vom activa doar trei platforme pentru dezvoltatori Toptal, dar nu ezitați să faceți modificările după cum doriți.
Ar trebui să aibă următorul conținut:
<?xml version="1.0" encoding="utf-8"?> <menu xmlns:andro> <item android: android:title="Top Android developer" /> <item android: android:title="Top JavaScript developer" /> <item android: android:title="Top iOS developer" /> </menu>
S-ar putea să vă întrebați de ce am ales titluri de meniu destul de lungi în loc de pur și simplu Android, JavaScript și iOS. Ei bine, motivul este foarte simplu. Băieții din echipa de dezvoltare Glass încă îmbunătățesc recunoașterea vocii. Este recomandat să folosiți două sau trei cuvinte în meniuri, astfel încât Glass să le recunoască mai ușor.

Am menționat deja că meniul „ok glass” nu este diferit de meniul standard al aplicației Android. Atașarea unui meniu unei activități este practic la fel. Doar suprascrieți handlerul onCreatePanelMenu
din MainActivity
și umflați meniul principal pe care tocmai l-ați creat:
@Override public boolean onCreatePanelMenu(int featureId, Menu menu){ if (featureId == WindowUtils.FEATURE_VOICE_COMMANDS || featureId == Window.FEATURE_OPTIONS_PANEL) { getMenuInflater().inflate(R.menu.main, menu); return true; } return super.onCreatePanelMenu(featureId, menu); }
Acum trebuie să adăugăm un handler de meniu. Înainte de a face asta, creați o metodă goală numită findDevelopers
. Vom reveni la asta mai târziu pentru a începe o căutare și a arăta rezultatele. După aceea, puteți suprascrie gestionarea meniului.
public void findDevelopers(String platform){ } @Override public boolean onMenuItemSelected(int featureId, MenuItem item) { if (featureId == WindowUtils.FEATURE_VOICE_COMMANDS || featureId == Window.FEATURE_OPTIONS_PANEL) { switch (item.getItemId()) { case R.id.find_android: findDevelopers("Android"); break; case R.id.find_javascript: findDevelopers("Java Script"); break; case R.id.find_ios: findDevelopers("iOS"); break; } return true; } return super.onMenuItemSelected(featureId, item); }
Acum este timpul să facem frumos ecranul de pornire al aplicației Google Glass. Importați o siglă Toptal în aplicația dvs. ca res/drawable/logo.png
. Am folosit aceasta imagine:
În clasa MainActivity
, faceți următoarele modificări.
Asigurați-vă că următoarele variabile private sunt declarate la începutul clasei:
private CardScrollView mCardScroller; private View mView; private GestureDetector mGestureDetector;
Schimbați metoda buildView
pentru a personaliza aspectul cardului:
private View buildView() { Card card = new Card(this); card.setText(R.string.app_name); card.setImageLayout(Card.ImageLayout.LEFT); card.addImage(R.drawable.logo); return card.getView(); }
Și schimbați-vă handlerul onCreate
pentru a fi astfel:
protected void onCreate(Bundle bundle) { super.onCreate(bundle); getWindow().addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON); getWindow().requestFeature(WindowUtils.FEATURE_VOICE_COMMANDS); mView = buildView(); mCardScroller = new CardScrollView(this); mCardScroller.setAdapter(new CardScrollAdapter() { @Override public int getCount() { return 1; } @Override public Object getItem(int position) { return mView; } @Override public View getView(int position, View convertView, ViewGroup parent) { return mView; } @Override public int getPosition(Object item) { if (mView.equals(item)) { return 0; } return AdapterView.INVALID_POSITION; } }); // Handle the TAP event. mCardScroller.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { openOptionsMenu(); } }); mGestureDetector = createGestureDetector(this); setContentView(mCardScroller); }
După cum am spus mai devreme, vrem să includem meniul activat prin atingere împreună cu „ok sticla” , așa că doar activați gesturile așa cum ați face în aplicația dvs. Android. Adăugați următoarele metode în clasa MainActivity
:
private GestureDetector createGestureDetector(Context context) { GestureDetector gestureDetector = new GestureDetector(context); //Create a base listener for generic gestures gestureDetector.setBaseListener( new GestureDetector.BaseListener() { @Override public boolean onGesture(Gesture gesture) { if (gesture == Gesture.TAP) { openOptionsMenu(); return true; } else if (gesture == Gesture.TWO_TAP) { // do something on two finger tap return true; } else if (gesture == Gesture.SWIPE_RIGHT) { // do something on right (forward) swipe return true; } else if (gesture == Gesture.SWIPE_LEFT) { // do something on left (backwards) swipe return true; } else if (gesture == Gesture.SWIPE_DOWN){ finish(); } return false; } }); gestureDetector.setFingerListener(new GestureDetector.FingerListener() { @Override public void onFingerCountChanged(int previousCount, int currentCount) { // do something on finger count changes } }); gestureDetector.setScrollListener(new GestureDetector.ScrollListener() { @Override public boolean onScroll(float displacement, float delta, float velocity) { // do something on scrolling return true; } }); return gestureDetector; } @Override public boolean onGenericMotionEvent(MotionEvent event) { if (mGestureDetector != null) { return mGestureDetector.onMotionEvent(event); } return false; }
Asta ar trebui să fie! Acum puteți porni aplicația și încerca ambele metode de activare a meniului. Dacă spuneți „ok sticla”, veți primi trei elemente de meniu afișate pe ecran, iar dacă atingeți sticla, se va deschide un meniu care poate fi derulat. Pentru a naviga prin elementele din meniu, puteți glisa înapoi și înainte.
Iată cum arată meniul vocal:
Și iată meniul de gesturi:
Dacă selectați un element de meniu, nu se va întâmpla nimic, deoarece metoda dvs. findDevelopers
nu a fost încă implementată.
Ecrane pentru dezvoltatori
Vom continua să folosim aspectul implicit al Glass Card, cu o imagine în partea stângă, text în dreapta și câteva informații de subsol. Pentru mai multe informații despre cele mai bune practici pentru proiectarea cardurilor, consultați ghidul de stil Google Glass.
Profilul nostru de dezvoltator este definit de proprietăți simple:
- Nume
- Imagine
- Platforma de dezvoltare
Deci, să ne asigurăm că avem structura adecvată a claselor în aplicația noastră. Creați o nouă clasă numită DeveloperModel.java
în folderul dvs. java/models
. Dorim ca această clasă să fie serializabilă, deoarece va conține profiluri care se află într-o listă.
public class DeveloperModel implements Serializable { private String name; public String getName(){ return name; } public void setName(String name){ this.name=name; } private String platform; public String getPlatform(){ return platform; } public void setPlatform(String platform){ this.platform=platform; } private String image; public String getImage(){ return image; } public void setImage(String image){ this.image=image; } }
Dorim ca cardurile noastre să fie strâns legate de datele noastre de profil de dezvoltator. Deoarece CardScrollAdapter
implicit este puțin generic în ceea ce privește modelul său de date, trebuie să-l extindem și să-l facem al nostru. Creați DeveloperAdapter.java
în folderul dvs. java/adapters
:
public class DeveloperAdapter extends CardScrollAdapter { private List<Card> mCards; private List<DeveloperModel> mData; public DeveloperAdapter(List<Card> cards){ this.mCards = cards; } @Override public int getCount() { return mCards.size(); } @Override public Object getItem(int i) { return mCards.get(i); } @Override public View getView(int i, View view, ViewGroup viewGroup) { return mCards.get(i).getView(); } @Override public int getPosition(Object o) { return this.mCards.indexOf(o); } }
Nu dorim ca rezultatele căutării noastre să fie adăugate pe ecranul de start al aplicației, așa că vom crea o activitate nouă care va face căutarea și va afișa rezultatele. Creați o activitate nouă, ResultsActivity
, lângă MainActivity
(probabil în java/com.helloglass
).
Asigurați-vă că extends Activity
.
Apoi, trebuie să specificăm un meniu pentru cardurile noastre de profil de dezvoltator. Creați un meniu nou, developer.xml
, cu următorul conținut:
<?xml version="1.0" encoding="utf-8"?> <menu xmlns:andro> <item android: android:title="Add to favorites" /> <item android: android:title="Hire" /> <item android: android:title="Go back" /> </menu>
Pentru a activa trecerea parametrilor între ResultsActivity
și MainActivity
adăugați următoarele linii la începutul clasei ResultsActivity
:
public static final String SEARCH = "search"; private String mPlatform="Android";
Asigurați-vă că adăugați noua activitate în fișierul manifest:
<activity android:name=".ResultsActivity" android:immersive="true" android:icon="@drawable/ic_launcher" android:label="@string/title_activityresults" android:parentActivityName=".MainActivity"> <meta-data android:name="android.support.PARENT_ACTIVITY" android:value="com.eloptico.MainActivity" /> </activity>
Configurarea ecranului inițial al ResultsActivity
și configurarea cardurilor este foarte asemănătoare cu ceea ce am făcut pe MainActivity
. Mai întâi verificați dacă aveți cărțile și scrollerul definite la început:
private CardScrollView mCardScroller; private List<Card> mCards; private GestureDetector mGestureDetector;
Creați o metodă de căutare temporară la care vom reveni mai târziu pentru a o implementa. Adăugarea de carduri noi la lista de profil este la fel de simplă ca și adăugarea de elemente într-o matrice. Vom numi și această metodă findDevelopers
, dar aceasta aparține ResultsActivity
:
private void findDevelopers(String platform){ for (int i=1; i<=10; i++){ Card card = new Card(this); card.setText(platform+" "+Integer.toString(i)); card.setTimestamp(platform); card.setImageLayout(Card.ImageLayout.LEFT); card.addImage(R.drawable.ic_person_50); mCards.add(card); } mCardScroller.setSelection(0); }
Acum reveniți la MainActivity
și actualizați findDevelopers
acolo pentru a începe ResultsActivity
și treceți în proprietatea platform
:
public void findDevelopers(String platform){ Intent resultsIntent = new Intent(this, ResultsActivity.class); resultsIntent.putExtra(ResultsActivity.SEARCH, platform); startActivity(resultsIntent); }
Atașați meniul de dezvoltator la ResultsActivity
. Veți putea deschide meniul la orice card de profil.
@Override public boolean onCreatePanelMenu(int featureId, Menu menu){ if (featureId == WindowUtils.FEATURE_VOICE_COMMANDS || featureId == Window.FEATURE_OPTIONS_PANEL) { getMenuInflater().inflate(R.menu.developer, menu); return true; } return super.onCreatePanelMenu(featureId, menu); }
La fel ca mai devreme, activați gesturile pentru a gestiona touchpad-ul de pe Glass atunci când este afișată ResultsActivity
. Pentru a face asta, trebuie doar să apelați openOptionsMenu()
în metoda dvs. onGesture(Gesture gesture)
:
private GestureDetector createGestureDetector(Context context) { // … @Override public boolean onGesture(Gesture gesture) { if (gesture == Gesture.TAP) { openOptionsMenu(); return true; } else if // …
De asemenea, adăugați un handler de meniu la acțiunile legate de dezvoltator. Vom lăsa mesaje simple Toast pentru moment.
@Override public boolean onMenuItemSelected(int featureId, MenuItem item) { if (featureId == WindowUtils.FEATURE_VOICE_COMMANDS || featureId == Window.FEATURE_OPTIONS_PANEL) { switch (item.getItemId()) { case R.id.developer_fav: Toast.makeText(getApplicationContext(), "Favorite", Toast.LENGTH_LONG).show(); break; case R.id.developer_hire: Toast.makeText(getApplicationContext(), "Message", Toast.LENGTH_LONG).show(); break; case R.id.go_back: break; } return true; } return super.onMenuItemSelected(featureId, item); }
Fiecare aplicație ar trebui să folosească niște elemente vizuale frumoase, pictograme etc. Echipa Google Glass a oferit un set foarte mare de pictograme standardizate comune care sunt gratuite pentru dezvoltatorii Glass pentru a le utiliza în aplicațiile lor. Puteți găsi un set complet de pictograme standard Glass, precum și fonturi în biblioteca lor
Pentru moment, aveți nevoie doar de o pictogramă ic_person_50.png
, așa că continuați și descărcați-o în folderul res\drawable
. Vom folosi această pictogramă în loc să descarcăm o imagine a dezvoltatorului.
Ultimul lucru care a rămas în tutorialul nostru de dezvoltare a aplicației Glass pentru moment este să suprascriem handler-ul nostru onCreate
pe ResultsActivity
, unde vom verifica ce platformă de dezvoltare a fost redirecționată de la MainActivity
și vom popula lista noastră.
@Override protected void onCreate(Bundle bundle) { super.onCreate(bundle); getWindow().addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON); getWindow().requestFeature(WindowUtils.FEATURE_VOICE_COMMANDS); mCardScroller = new CardScrollView(this); mCards = new ArrayList<Card>(); if(getIntent().hasExtra(SEARCH)){ mPlatform = getIntent().getStringExtra(SEARCH); } findDevelopers(mPlatform); mCardScroller.setAdapter(new DeveloperAdapter(mCards)); // Handle the TAP event. mCardScroller.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { openOptionsMenu(); } }); mGestureDetector = createGestureDetector(this); setContentView(mCardScroller); }
Puteți lăsa metodele onResume
și onPause
la fel ca în MainActivity
.
Dacă începeți aplicația acum, puteți verifica modul în care profilurile dvs. de dezvoltator sunt create din mers pe baza meniului selectat în MainActivity
. Din nou, aveți opțiunea de a vă afișa meniul folosind „ok sticla” sau atingând touchpad-ul sau utilizând activarea vocală. Iată cum arată profilul „al 10-lea dezvoltator Android” în acest moment:
Atingerea afișează meniul tactil:
Și rostind „ok pahar” va apărea meniul vocal:
Glisați în jos din listă pentru a reveni la ecranul de pornire al aplicației dvs.
Obținerea de profiluri de pe Internet
Pentru a încheia lucrurile, haideți să umplem meniul cu informații reale pentru primii 10 dezvoltatori Toptal pentru JavaScript, Android și iOS.
Va trebui să descărcați fotografiile lor de profil și să le faceți disponibile prin HTTP, sau doar să utilizați adrese URL direct de pe toptal.com.
Deoarece construirea unui crawler web doar pentru a obține numele dezvoltatorilor de top în Toptal ar putea fi o ocolire prea mare pentru acest articol, am creat fișiere JSON pe care să le utilizați pentru Android, JavaScript și iOS.
În aplicația dvs., primul lucru pe care trebuie să-l faceți este să solicitați acces la internet de la sistemul de operare Android. Adăugați următoarea linie în fișierul dvs. Manifest
<uses-permission android:name="com.google.android.glass.permission.INTERNET"/>
Rețineți că Glass nu vă va permite să blocați firul principal utilizând direct solicitări HTTP. Va trebui să gestionați descărcările JSON și imaginile individuale într-un mod asincron. Puteți utiliza o sarcină asincronă, vă puteți crea propriul serviciu sau intenție de descărcare sau orice doriți în munca de zi cu zi.
Crearea acestei funcționalități nu este specifică Google Glass, așa că voi sări peste fragmente de cod. Dacă mergeți mai departe și obțineți acest ultim bit de funcționalitate să funcționeze, cardurile dvs. de profil ar trebui să arate astfel:
Încheierea tutorialului
Sper că v-ați distrat urmând acest tutorial de dezvoltare Google Glass și construind prima dvs. aplicație Glassware. Până acum, ar trebui să vă simțiți confortabil cu ideea că scrierea de aplicații pentru Glass nu este cu mult diferită de orice altă platformă Android.
În acest moment, ați învățat cum să extindeți ecranul de pornire activat prin voce Google Glass, cum să vă creați propriile meniuri activate prin voce și cum să combinați comenzile vocale cu gesturi tactile. De asemenea, ar trebui să înțelegeți conceptele și blocurile de bază pentru interfața de utilizare Glass, cum ar fi cardurile, machetele și elementele. Ați văzut cum să creați dinamic carduri și cum să navigați între diferite activități.
Pentru a explora mai profund, accesați resursele pentru dezvoltatori Google la developers.google.com/glass. Când începeți să construiți aplicații mai complexe, se va dovedi a fi o resursă foarte utilă.
Vă rugăm să rețineți că Glass este încă în faza de dezvoltare și probabil că sunt multe îmbunătățiri care urmează să fie implementate înainte de a ajunge pe piața de consum. Având în vedere acest lucru, am o notă importantă pentru tine:
Mai este destul de mult de lucru în ceea ce privește recunoașterea vocii și s-ar putea să te surprinzi strigând la prietenul tău imaginar în timp ce încerci să-ți începi activitatea sau să completezi unele informații. Nu vă faceți griji acolo - toți cei care încearcă dezvoltarea Google Glass simt la fel, așa că nu sunteți singuri.
Tehnologia se va îmbunătăți, iar sticla va fi gata de vânzare cu amănuntul în cel mai scurt timp. Cu siguranță va face valuri mari odată ce va ajunge în magazine, așa că sper că sunteți la fel de încântați ca și mine de a fi unul dintre primii care sunt în fruntea acestei tehnologii interesante!
Strigați : Capturile de ecran din acest articol sunt realizate folosind Droid@Screen.