Share
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.
In deze tutorialserie ontwikkelen we een aanpasbare Android-analoge klok widget met behulp van de klasse AnalogClock en aangepaste afbeeldingen. In het eerste deel van de serie maken we het project, het voorbereiden van het manifest en andere bronnen. In dit deel werken we aan het ontwerp van de widget. Dit omvat het maken van afbeeldingen voor de wijzerplaat en wijzers, evenals de uitvoering van de lay-out in XML. We zullen afbeeldingen maken voor verschillende apparaatdichtheden. In het laatste deel van de serie gaan we implementeren en de gebruiker laten kiezen uit een selectie ontwerpen voor de klok, dus we zullen hier drie ontwerpopties creëren.
Dit is deel 2 van onze serie over het bouwen van een aanpasbare Android analoge klok Widget over vier tutorials:
De Android AnalogClock-widget gebruikt drie afbeeldingen: de klokknop, de minutenwijzer en de urenwijzer. We zullen daarom drie ontwerpelementen maken voor elke versie van de klokwidget waarvan we willen dat gebruikers er tussen kunnen kiezen. We zullen ook alternatieve ontwerpopties creëren met wijzer-, uur- en minutenwijzers. Voor dit project moeten we verschillende schermdensiteiten van het apparaat targeten, waarvoor we beeldbestanden op vier verschillende schalen zullen maken.
We gaan drie klokontwerpen maken, elk met een wijzerplaat, minutenwijzer en uurwijzer. Je kunt natuurlijk je eigen ontwerpen gebruiken, maar voel je vrij om de afbeeldingsbestanden te gebruiken die we hier gebruiken om aan de slag te gaan. De afbeeldingsbestanden voor elk ontwerp bij elke dichtheid zijn opgenomen in de downloadlink voor deze zelfstudie en worden ook opgenomen in de download voor deel 4.
De eerste is de klokknop. Vergeet niet dat we de widget hebben gespecificeerd als zijnde twee cellen breed en twee cellen hoog, resulterend in een maximale grootte van 146dp (dichtheid-onafhankelijke pixels). Voor deze zelfstudiereeks maken we vier versies van elke afbeelding die passen bij de vier dichtheidscategorieën.
In plaats van afbeeldingen voor elke dichtheid te maken, kunt u ook NinePatch-afbeeldingen gebruiken. Dit zijn bitmaps die op en neer kunnen worden geschaald om te voldoen aan de apparaatdensiteit, zodat u één afbeelding voor elk ontwerp kunt maken. De haalbaarheid van het gebruik van NinePatch hangt gedeeltelijk af van de inhoud van de ontwerpen die u gebruikt, maar er zijn hulpmiddelen om u te helpen deze te maken als u dat wenst.
Het is het gemakkelijkst als je begint met de gemiddelde dichtheid, die op beide assen maximaal 146 px moet zijn. Dit is de standaard wijzerplaat die we gebruiken bij gemiddelde dichtheid, die je kunt gebruiken als een referentie voor je eigen ontwerpen of als je je eigen wilt ontwerpen tot later:
In dit geval is het beeld 146px op beide assen, maar u kunt het kleiner maken als u dat wenst. We zullen een marge specificeren voor apparaten met Android API's van minder dan 14, maar zullen geen marge leveren voor apparaten op 14-plus, omdat op de meer recente API-niveaus een automatische marge tussen widgets wordt geplaatst. Je kunt vrijwel elk ontwerp gebruiken dat je leuk vindt - je klok hoeft zelfs niet cirkelvormig te zijn. Het opnemen van cijfers of cijfers die de uren op de knop aangeven, is raadzaam vanuit het oogpunt van bruikbaarheid, hoewel dit niet essentieel is.
Hier zijn de twee alternatieve wijzerplaatontwerpen die we zullen gebruiken, een stenen stijl en de andere metalen, hier weergegeven met gemiddelde dichtheid:
Nadat u de wijzerplaten voor de klok hebt ontworpen, kunt u alternatieve versies van elke afbeelding voor de verschillende dichtheden maken. Afhankelijk van uw ontwerpen is dit misschien niet nodig, maar we zullen aangepaste versies van elke afbeelding voor de ontwerpen in deze zelfstudie opnemen. Het volgende geeft de maximale grootte aan die we gebruiken voor onze widget op zowel de X- als de Y-as bij elke dichtheid:
Als u afbeeldingsbestanden hebt voor elk ontwerp van de klokwijzer die u wilt gebruiken (en versies voor elke dichtheid, indien van toepassing), kopieert u ze naar de zichtbare mappen in de werkruimte van uw Android-widgetproject. Eclipse maakt normaal gesproken automatisch een map voor elke dichtheidscategorie, maar als u slechts één afbeelding voor alle dichtheden gebruikt, kunt u een map maken met de naam "tekenbaar" en de afbeelding daar plaatsen. De mappen voor elk densiteitniveau zijn:
Met Android AVD Manager kunt u uw voltooide widgetproject testen op elk van deze dichtheden. Nadat u uw afbeeldingen in de verschillende aantrekbare mappen hebt opgeslagen, moet u ervoor zorgen dat u in elk ervan dezelfde namen hebt gebruikt. Een van de wijzerplaatontwerpen die we gebruiken, heeft bijvoorbeeld de naam "clock_dial_stone" - dit is de afbeeldingsbestandsnaam voor de stone dial in elke density-map, hoewel de inhoud van elke versie anders is, alleen in grootte. Als je nog steeds twijfelt over hoe dit zou moeten werken, download dan gewoon de beeldbestanden via de downloadlink bovenaan deze tutorial en blader door de mappen om het idee te krijgen.
Maak vervolgens een afbeelding voor de uren en minutenwijzers van uw klok-widget, inclusief afbeeldingen voor elk ontwerp en elke dichtheid die u target. Dit zijn onze middeldichte minutenwijzers voor elk ontwerp:
Nogmaals, voel je vrij om deze te gebruiken om mee te beginnen of om er zelf een uit te werken. Merk op dat deze afbeeldingsbestanden transparante ruimte rondom de hand bevatten. U moet elk van uw handafbeeldingen ontwerpen met de volledige hoogte van de klokknop waarmee ze zullen worden gebruikt. Elke hand moet in de exacte positie zijn waarin deze zich zou bevinden als hij naar twaalf wijst, over de klok gelegd afbeelding en halverwege. De hand moet ook horizontaal in het midden van het afbeeldingsbestand staan, omdat deze tijdens het weergeven van de tijd vanaf het centrale punt wordt geroteerd. De lengte van de handen in het beeldbestand is echt aan jou, zolang de volledige hoogte van het beeld hetzelfde is als de hoogte van het afbeeldingplaatje.
Het volgende diagram toont de volledige schaal van de handafbeeldingen met de minutenwijzer op twaalf en de urenwijzer op drie (de uurwijzer is 90 graden met de klok mee gedraaid op het middelpunt):
Zodra u uw minutieuze handontwerpen hebt gesorteerd, kunt u er voor elke dichtheid opnieuw een opslaan, waarbij u ze telkens op en neer laat schalen zodat ze overeenkomen met de hoogte van de wijzerplaat. Kopieer ze opnieuw naar uw mappen die kunnen worden getekend en gebruik dezelfde naam voor elk ontwerp in de dichtheidsmappen, net als bij de afbeeldingen op de schaal.
Voer vervolgens hetzelfde proces uit voor uw urenwijzers. Dit zijn de urenwijzers voor de drie ontwerpen die we gebruiken:
Het principe is hier hetzelfde als voor de minutenwijzers, behalve dat de urenwijzers doorgaans korter moeten zijn. Ontwerp je wijzers wijzend naar 12 uur en maak versies voor elke dichtheid, kopieer ze naar je mappen, net zoals je deed voor de minutenwijzers.
Het ontwerp van de widget gaat enkele gegevens gebruiken die we zullen opnemen in onze project "waarden" -mappen. Op Android API 14 en later bevat het systeem automatisch marges tussen widgets zoals deze worden weergegeven op het startscherm van de gebruiker. Op eerdere API-versies was dit echter niet het geval. Om deze reden willen we een marge specificeren om een 24-uurs widget op apparaten met Android-niveaus van minder dan 14 op te nemen. Dit is een geval waarin we kunnen profiteren van het feit dat we waardenmappen hebben die zijn gericht op deze twee categorieën gebruikers-API-niveaus.
We zullen de marges in ons XML-lay-outbestand definiëren door te verwijzen naar een dimensiebron. Maak in de directory "values" een nieuw bestand met de naam "dimensions.xml" - selecteer de map "values" in Eclipse en klik met de rechtermuisknop of kies "File", dan "New", "File" en voer de bestandsnaam in.
Wanneer u op de knop "Finish" klikt, maakt Eclipse het bestand en opent het. Selecteer het tabblad "dimensions.xml" om de code te bewerken. Vul het volgende in:
8DP
Deze code vermeldt eenvoudigweg een dimensiewaarde met behulp van dichtheid-onafhankelijke pixels samen met een naam, zodat we ernaar elders kunnen verwijzen.
Sla het bestand op. Kopieer het nu door er met de rechtermuisknop op te klikken in de map "waarden" of het te selecteren en "Bewerken" te kiezen - en vervolgens "Kopiëren" te selecteren. Plak het in de map "values-v14" die we de laatste keer hebben gemaakt - klik met de rechtermuisknop of selecteer de map en kies "Bewerken" en selecteer vervolgens "Plakken". Het bestand verschijnt in de map "values-v14", die vanaf 14 niveaus API-niveaus target. Open deze nieuwe kopie van het bestand en bewerk de dimensiewaarde om als volgt een marge van nul aan te geven:
0DP
Wanneer de XML-lay-out naar deze dimensiewaarde verwijst met behulp van de naam, wordt een waarde van nul gebruikt op apparaten met API 14 plus en wordt een waarde van 8 dp gebruikt.
Laten we nu onze widget in XML definiëren. Vergeet niet dat we een eerste lay-out voor de widget hebben opgegeven in het XML-bestand waarin we de basiseigenschappen hebben gedefinieerd. De lay-out die we daar noemden was "clock_widget_layout" dus maak dit bestand nu. Klik met de rechtermuisknop of selecteer uw "lay-out" -map en kies "Bestand" en vervolgens "Nieuw", "Bestand". Voer "clock_widget_layout.xml" in als de bestandsnaam en klik op "Finish".
Selecteer het tabblad "clock_widget_layout.xml" wanneer Eclipse het bestand opent, zodat u de XML kunt bewerken. We gebruiken een relatieve lay-out voor onze widget - als u een ander ontwerp wilt gebruiken, kunt u ook een lineaire of framelay-out gebruiken, omdat dit de enige zijn die door widgets worden ondersteund. Om de relatieve lay-out te gebruiken, voegt u de volgende omtrek toe aan uw XML-lay-outbestand:
Hier specificeren we een ID voor de widget, die we zullen gebruiken om klikken in onze Java-code in Deel 4 te implementeren. Merk op dat de code ook verwijst naar de dimensiewaarde die we hebben gemaakt, met behulp van de standaardsyntaxis - de naam van de "dimensies .xml "-bestand doet er niet toe, u hoeft alleen maar een" dimen "-element in een waardenbestand op te nemen om er zo naar te verwijzen.
Voeg in de relatieve lay-out uw AnalogClock-widget als volgt toe:
Dit is het standaard Android Analog Clock-element, waarmee we het display kunnen aanpassen. We gebruiken een ID-kenmerk, zodat we naar de widget in Java kunnen verwijzen. De laatste drie attributen specificeren de rekbare bronnen die we hebben gemaakt voor de wijzerplaten, minuten en uren. Als u de uwe met verschillende bestandsnamen hebt opgeslagen, wijzigt u deze code om ze weer te geven. Android selecteert het drawable-bestand uit de relevante density-map op elk gebruikersapparaat.
Omdat we gebruikers toestaan een ontwerp te kiezen, gaan we eigenlijk alle drie de ontwerpen in onze XML opnemen, en alle behalve één instellen om aanvankelijk onzichtbaar te zijn. Zorg ervoor dat het eerste ontwerp dat u opneemt, degene is die u standaard wilt weergeven en voeg vervolgens de andere als volgt toe:
Verander opnieuw de aantrekbare namen om de namen weer te geven van de wijzerplaten, minuten en urenhandafbeeldingen voor elk van uw ontwerpen. U kunt desgewenst meer dan drie motieven opnemen. Zorg ervoor dat alle zichtbaar zijn ingesteld op onzichtbaar, zodat in eerste instantie slechts één ontwerp (de standaardoptie) wordt weergegeven. We kunnen de gebruikerskeuze tussen deze ontwerpen in Java implementeren met behulp van de Analog Clock-element-ID-kenmerken, die allemaal eindigen met gehele getallen die bij nul beginnen en met elk ontwerp toenemen. Sla je lay-outbestand op.
Hier zijn screengrabs van hoe elk van onze ontwerpen eruit zal zien als de widget compleet is:
Dat is het ontwerpproces voor onze complete klokwidget. Als u in dit stadium geen eigen ontwerpafbeeldingen wilt maken, gebruikt u de afbeeldingen eerst in de downloadmap. In de volgende zelfstudie gebruiken we de klasse AppWidgetProvider om onze widget in Java te implementeren. In het laatste deel van de serie zullen we gebruikersklikken op de widget implementeren, een keuze presenteren tussen de ontwerpen en de gebruikersvoorkeuren bijwerken om hun gekozen optie continu weer te geven.
Accentsconagua