Bouw een aangepaste klok Widget ontvangen van updates en lancering

Het ontwikkelen van widgets voor het Android-platform omvat een iets andere reeks taken dan standaard app-ontwikkeling. In deze reeks zelfstudies werken we aan het ontwikkelen van een aanpasbare analoge klokwidget. De klok is gebaseerd op de Android AnalogClock-klasse en aangepast met uw eigen grafische afbeeldingen.

Tot nu toe hebben we in deze serie over het ontwikkelen van een aangepaste analoge klok widget voor Android het project opgezet en de belangrijkste ontwerpelementen gemaakt. In dit deel zullen we de Java-widgetklasse implementeren, updates verwerken en ook de app starten. We zullen werken aan twee Java-klassen, een uitbreiding van de klasse AppWidgetProvider en de andere een klasse Activiteit die wordt gestart als de gebruiker probeert de app te starten. We zullen ook werken aan het lay-outbestand voor de startactiviteit. Na deze zelfstudie hebt u een werkende klokwidget die voortdurend wordt bijgewerkt om de huidige tijd weer te geven.

In het laatste deel van de serie laten we de gebruiker een keuze maken uit de selectie van klokontwerpen die we de vorige keer hebben gemaakt.

Dit is deel 3 van onze serie over het bouwen van een aanpasbare Android Analog Clock Widget over vier tutorials:

  • Installatie van het Android Widget-project
  • De klok ontwerpen
  • Updates en lancering ontvangen
  • Gebruikersconfiguratie implementeren

Widget-apps breiden de klasse AppWidgetProvider uit in Android, dus dat is wat we hier zullen doen. In deze klasse kunt u verwerkingsstappen bieden voor het bijwerken van uw widget op de startpagina van de gebruiker. Onze launcher-activiteit gebruikt het XML-lay-outbestand om een ​​String-resource weer te geven die we in de eerste zelfstudie hebben gedefinieerd. In deze zelfstudie bespreken we ook de pictogrammen van de launcher (en optioneel de preview) voor onze widget-app.


Stap 1: Implementeer de Launcher-activiteit

Mogelijk herinnert u zich dat in de eerste zelfstudie we besloten om een ​​Launcher-activiteit op te nemen in de widget-app. Dit is geen noodzaak, maar biedt een aantal voordelen. Gebruikers die niet weten hoe een widget-app moet worden gestart, zien instructies over het starten ervan. Apparaten met Android 4.0 bevatten soms ook geen nieuwe widget-apps in het menu, maar het aanbieden van een startactiviteit lijkt dit probleem te omzeilen.

Wanneer u uw project in Eclipse hebt gemaakt en een beginactiviteit voor de app hebt opgegeven, moet Eclipse hiervoor een Java-klasse hebben gemaakt. Als u de standaardstappen uit Deel 1 gebruikt, moet u een Java-klasse hebben in uw projectpakket met de naam "CustomClockWidgetActivity" of een alternatieve naam als u deze hebt gewijzigd. Open dit in Eclipse - het zou de volgende schets moeten bevatten:

 // pakketnaam import android.app.Activity; import android.os.Bundle; public class CustomClockWidgetActivity breidt activiteit uit / ** Wordt gebeld wanneer de activiteit voor het eerst wordt gemaakt. * / @Override public void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); setContentView (R.layout.main); 

Als Eclipse de klasse niet heeft gemaakt, maakt u deze nu en voegt u de code toe, zo nodig wijzigt u de klassennaam. We kunnen het standaardgedrag van deze hoofdactiviteitsklasse daadwerkelijk gebruiken en de code laten zoals deze is. Merk op dat de code de XML-hoofdlay-out voor de inhoudsweergave specificeert. We zullen het hoofd XML-lay-outbestand aanpassen, naast de details van onze widget-app.

De activiteit zou als volgt al moeten worden opgenomen in het Manifest-bestand van uw project:

      

Hier geven we aan dat deze activiteit moet starten wanneer de app wordt gestart. Dit is de manier waarop een launcher-activiteit wordt vermeld in het manifest voor een standaard (niet-widget) app. Hoewel onze widget over het algemeen wordt uitgevoerd door aan het startscherm van de gebruiker te worden toegevoegd, bieden we een opstartactiviteit aan om de bovengenoemde redenen.


Stap 2: wijzig de hoofd XML-lay-out

Open het XML-lay-outbestand: "res / layout / main.xml". Eclipse zou dit bestand moeten hebben gemaakt toen u het project aanmaakte. Het grootste deel van dit bestand kan worden achtergelaten met de standaardcode, maar we willen het volgende kenmerk toevoegen aan het TextView-element voor verbeterde leesbaarheid:

 android: padding = "10dp"

Uw hoofd XML-lay-outbestand zou nu als volgt moeten verschijnen:

   

De lay-out toont eenvoudig de tekst "Hallo" -tekst die we in deel 1 van deze serie hebben bewerkt. De string geeft de gebruiker instructies over het toevoegen van de widget aan hun startscherm. Vergeet niet dat we twee versies van de tekenreeks hebben opgenomen, één in de map 'values' en één in de map 'values-v14', zodat we de instructies konden aanpassen aan de versie van Android die de gebruiker heeft geïnstalleerd.


Stap 3: Maak een Launcher-pictogram

Met een widget-app wordt het startpictogram weergegeven in app-vermeldingen. In ons geval wordt deze ook weergegeven in het hoofdgebruikersapparaatmenu omdat we een startactiviteit hebben opgegeven. U kunt desgewenst een voorbeeldafbeelding voor uw widget maken, maar als u dat niet doet, wordt het pictogram van het opstartprogramma weergegeven in widgetvoorbeelden. Voor gebruikers met Android 4.0 en hoger worden widgets toegevoegd vanaf het tabblad Widget in het apparaatmenu. In dit gedeelte van het menu wordt de voorbeeldafbeelding weergegeven of wordt het pictogram van het opstartprogramma weergegeven als er geen voorbeeld is weergegeven. Op eerdere API-niveaus verschijnt het voorbeeld of het pictogram in de widgetkiezer, na lang op het startscherm te hebben gedrukt.

Voor onze klokwidget gebruiken we een lanceerpictogram, dus maak nu de jouwe aan - je kunt de volgende set gebruiken als je de jouwe nog niet wilt ontwerpen:


Gebruik de volgende gids voor de maximale grootte voor uw pictogrammen bij elke dichtheid:

  • laag - 36px
  • medium - 48 px
  • hoog - 72 px
  • extra hoog - 96 px

Als u de bestandsnaam "ic_launcher" voor uw opstartpictogram gebruikt, hoeft u de code niet te wijzigen omdat de gereedschappen standaard op deze naam staan. Controleer of uw project inderdaad deze naam gebruikt door het manifestbestand te openen en het pictogramattribuut van het toepassingselement te controleren, dat als volgt moet verschijnen:

 android: icon = "@ betekenbare / ic_launcher"

Als het niet op deze manier wordt weergegeven, wijzigt u de code zodat deze overeenkomt met de naam die u wilt gebruiken voor uw launcher-pictogram. Bewaar uw exemplaren van het pictogram in elke tekenbare map en onthoud dat u dezelfde naam in elke map gebruikt (maar beeldinhoud met verschillende grootten voor elke dichtheid). Als u uw eigen startpictogrammen maakt, moet u ervoor zorgen dat deze het uiterlijk en de functie van uw klokwidget weerspiegelen, zodat gebruikers intuïtief de koppeling maken tussen het pictogram en de widget.

Tip: Voorbeeldafbeeldingen maken met de Android Emulator

Als u voorbeeldafbeeldingen voor uw widget-apps wilt maken, kunt u de toepassing Widget Preview gebruiken. Voer een widget-app uit op een AVD in Eclipse (voor de klok-widget kunt u dit aan het einde van deze zelfstudie of de volgende doen) - zorg ervoor dat uw AVD een SD-kaartopslag toegewezen heeft gekregen. Open het menu van het emulatorapparaat en selecteer de Widget Preview-app. Kies je widget in de lijst. Zodra de afbeelding van uw widget verschijnt, klikt u op "Snapshot maken" om een ​​voorbeeld te maken.

U kunt het voorbeeld vervolgens rechtstreeks vanuit Eclipse op uw computer opslaan. Open hiervoor het DDMS-perspectief, selecteer uw emulator in de Apparatenweergave en blader naar de afbeelding in de Verkenner-weergave (kijk in de downloadmap op de SD-kaart). Selecteer het voorbeeldbestand en klik op de knop "Pull a File from the Device" om de afbeelding op te slaan in uw lokale bestandssysteem.

Zodra u de voorbeeldafbeelding hebt, kopieert u deze naar uw project drawable map (pen) en vermeldt u de naam in uw "res / xml" widget eigenschappenbestand "appwidget-provider" element, naast de dimensies, update periode en initiële lay-outwaarden, met behulp van het volgende kenmerk:

 android: previewImage = "@ betekenbare / clock_preview"

Dit zou van toepassing zijn op een beeldbestand met de naam "clock_preview.png" dat in elke relevante tekenbare map is opgeslagen.


Stap 4: Implementeer de Widget-klasse

Laten we nu kijken naar de Java-klasse voor onze klokwidget. Onthoud dat we in het Manifest-project een ontvangerelement hebben opgenomen dat een klasse aanduidt met de naam "ClockWidget" - we zullen dit volgende creëren. Neem even de tijd om terug te kijken naar het Manifest voordat je je les implementeert. Merk op dat het ontvangerelement de actie "APPWIDGET_UPDATE" bevat en meta-gegevens specificeert die het XML-bestand "clock_widget" bevatten waarin we de elementaire widget-eigenschappen hebben gedefinieerd.

Maak nu uw widgetklasse door met de rechtermuisknop te klikken of het hoofdapp-pakket in de map "src" te selecteren en "Bestand" en vervolgens "Nieuw", "Klasse" te kiezen - voer "ClockWidget" in om overeen te komen met de naam in het manifest. Eclipse zou je nieuwe klassenbestand moeten openen. Verleng de openingsklasse declaratie lijn als volgt:

 public class ClockWidget breidt AppWidgetProvider uit 

U moet de volgende importinstructie boven deze regel bovenaan de klas toevoegen:

 importeer android.appwidget.AppWidgetProvider;

Voeg als volgt een instantievariabele toe aan de klassendeclaratie:

 RemoteViews-weergaven;

Hiermee kunnen we verwijzen naar de gebruikersinterface / zichtbare elementen voor de widget, waarvoor een iets ander proces in widget-klassen vereist is dan in Activiteitsklassen. De Remote Views laten ons verwijzen naar de widget-layout en de views erin. Dit is essentieel bij het bijwerken en aanbieden van interactieve functies voor de widget. U hebt nog een importverklaring nodig:

 import android.widget.RemoteViews;

Voeg vervolgens als volgt de "onReceive" methode-overzicht in de klas toe:

 public void onReceive (Context context, Intent intent) 

De AppWidgetProvider neemt deze methode over van de klasse BroadcastReceiver. In de volgende zelfstudie gebruiken we deze methode om klikken op de klokwidget af te handelen. Voorlopig hoeven we Android alleen maar te instrueren om het uiterlijk van de widget bij te werken wanneer de methode wordt uitgevoerd. Voeg eerst de volgende importinstructies toe:

 importeer android.content.Context; importeer android.content.Intent;

Voer in de methode "onReceive" een voorwaardelijke test in om te controleren of de methode wordt uitgevoerd omdat de widget moet worden bijgewerkt:

 // ontdek de actie String action = intent.getAction (); // is het tijd om te updaten als (AppWidgetManager.ACTION_APPWIDGET_UPDATE.equals (actie)) 

Voeg nog een import statement toe:

 importeer android.appwidget.AppWidgetManager;

Zoek in de "if" -instructie de Remote Views-weergave voor onze widgetlay-out op, waarbij u de instantievariant die we als volgt hebben gemaakt, instantieert:

 weergaven = nieuwe RemoteViews (context.getPackageName (), R.layout.clock_widget_layout);

Merk op dat we het Context-object dat is doorgegeven aan de "onReceive" -methode gebruiken om de pakketnaam op te halen. We specificeren het klok widget lay-outbestand waar we aan gewerkt hebben in de laatste tutorial - als je een andere bestandsnaam gebruikte, verander deze code dan om het weer te geven. Update nu de widget door de volgende code toe te voegen, nog steeds in de "if" -instructie:

 AppWidgetManager.getInstance (context) .updateAppWidget (intent.getIntArrayExtra (appWidgetManager.EXTRA_APPWIDGET_IDS), weergaven);

Hier gebruiken we AppWidgetManager om de update aan te roepen, waarbij het Remote Views-object als een referentie wordt doorgegeven. U kunt nu uw widget-app uitvoeren om het standaard uiterlijk en gedrag ervan te bekijken. Wanneer de app voor het eerst wordt geïnstalleerd / gestart, voert de opstartactiviteit uit:


De opstartactiviteit is louter informatief, dus het is in het algemeen het beste om het eenvoudig te houden, tenzij u er een ander doel voor in gedachten hebt. Buiten dat voel je je vrij om het uiterlijk te veranderen zoals jij dat wilt. De volgende schermafbeeldingen tonen de widget die wordt toegevoegd vanuit het gebruikersapparaatmenu op Ice Cream Sandwich:


Merk op dat het startpictogram in het Widget-menu wordt weergegeven - als u een voorbeeldafbeelding opneemt en deze in uw widget-XML vermeldt, wordt deze hier weergegeven. Ten slotte wordt de klokwidget gebruikt met het standaardontwerp:



De volgende keer

De basiselementen van de widget Analoge klok zijn nu voltooid. In het volgende en laatste deel van de tutorialserie zullen we implementeren zodat de gebruiker een klokontwerp kan kiezen. Het standaard klokontwerp wordt momenteel weergegeven omdat we in de laatste zelfstudie de andere ontwerpen onzichtbaar hebben gemaakt. We zullen gebruikersklikken op de widget afhandelen door functionaliteit aan de widgetklasse toe te voegen. We zullen ook een nieuwe activiteit gebruiken om de selectie van klokontwerpen voor de gebruiker weer te geven, waarbij hij detecteert welke hij kiest en de weergave van de widget overeenkomstig bijwerkt. Ten slotte zullen we de toepassing Gedeelde voorkeuren gebruiken om een ​​record op te slaan van welk widgetontwerp de gebruiker heeft geselecteerd, waardoor het kan worden aangepast.