Android-tilpasning: Hvordan lage en brukergrensesnittkomponent som gjør det du vil ha

4. Kan tilpasses i hjertet

Siden komponenten som er ansvarlig for visning av individuelle dager, er GridView, er et bra sted å tilpasse hvordan dager vises Adapter, siden den er ansvarlig for å holde dataene og blåse visningene for individuelle rutenettceller.

For dette eksemplet vil vi kreve følgende fra CalendearView:

• Nåværende dag skal være ifet blå tekst.
• Dager utenfor nåværende måned bør værenedtonet.
• Dager med et arrangement skal vise et spesielt ikon.
• Kalenderoverskriften skal endre farger avhengig av sesong (sommer, høst, vinter, vår).

De tre første kravene er enkle å oppnå ved å endre tekstattributter og bakgrunnsressurser. La oss implementere et CalendarAdapter å utføre denne oppgaven. Det er enkelt nok at det kan være en medlemsklasse i CalendarView. Ved å overstyre getView() funksjon, kan vi oppnå kravene ovenfor:

Det endelige designkravet krever litt mer arbeid. La oss først legge til fargene for de fire sesongene i /res/values/colors.xml:

La oss deretter bruke en matrise for å definere sesongen for hver måned (forutsatt at den er nordlige halvkule, for enkelhetens skyld, beklager Australia!). I CalendarView vi legger til følgende medlemsvariabler:

På denne måten gjøres det å velge en passende farge ved å velge riktig sesong (monthSeason[currentMonth]) og deretter velge den tilsvarende fargen (rainbow[monthSeason[currentMonth]), og dette legges til updateCalendar() for å sikre at riktig farge er valgt når kalenderen endres.

Med det får vi følgende resultat:

Topptekstfarge endres etter sesong.

Viktig notat på grunn av veien HashSet sammenligner objekter, sjekket ovenfor eventDays.contains(date) i updateCalendar() vil ikke gi sant for datoobjekter med mindre de er nøyaktig identiske. Den utfører ingen spesielle kontroller for Date data-type. For å omgå dette erstattes denne sjekken med følgende kode:

5. Det ser stygt ut i designtiden

Androids valg for plassholdere i designtid kan være tvilsomt. Heldigvis Android oppretter faktisk komponenten vår for å gjengi den i UI-designeren, og vi kan utnytte dette ved å ringe updateCalendar() i komponentkonstruktøren. På denne måten vil komponenten faktisk være fornuftig i designtiden.

Hvis initialisering av komponenten krever mye behandling eller laster inn masse data, kan det påvirke ytelsen til IDE. I dette tilfellet gir Android en fin funksjon kalt isInEditMode() som kan brukes til å begrense datamengden som brukes når komponenten faktisk instantieres i UI-designeren. For eksempel, hvis det er mange hendelser som skal lastes inn i CalendarView, kan vi bruke isInEditMode() inne i updateCalendar() funksjon for å gi en tom / begrenset hendelsesliste i designmodus, og last inn den virkelige ellers.

6. Påkalle komponenten

Komponenten kan inkluderes i XML-oppsettfiler (et eksempel på bruk finner du i activity_main.xml):

Og hentet for å samhandle med når oppsettet er lastet:

Ovennevnte kode skaper et CalendarView av hendelser, legger den gjeldende dagen til den, og sender den til CalendarView. Som et resultat, CalendarView vil vise gjeldende dag med fet skrift og også sette hendelsesmarkøren på den:

CalendarView viser en hendelse

7. Legge til attributter

Et annet anlegg fra Android er å tildele attributter til en tilpasset komponent. Dette tillater Android-utviklere ved å bruke komponenten til å velge innstillinger via XML-oppsettet og se resultatet umiddelbart i UI-designeren, i motsetning til å måtte vente og se hvordan dateFormat ser ut som i kjøretid. La oss legge til muligheten til å endre datoformatvisningen i komponenten, for eksempel for å stave ut hele navnet på måneden i stedet for forkortelsen på tre bokstaver.

For å gjøre dette er følgende trinn nødvendig:

• Erklær attributtet. La oss kalle det string og gi den /res/values/attrs.xml data-type. Legg den til 'MMMM yyyy':

• Bruk attributtet i layoutet som bruker komponenten, og gi den verdien CalendarView:

• Til slutt, la komponenten bruke attributtverdien:

] Bygg prosjektet, og du vil legge merke til de viste datoendringene i UI-designer å bruke det fulle navnet på måneden, som “juli 2015”. Prøv å oppgi forskjellige verdier og se hva som skjer.

Endrer // long-pressing a day grid.setOnItemLongClickListener(new AdapterView.OnItemLongClickListener() { @Override public boolean onItemLongClick(AdapterView view, View cell, int position, long id) { // handle long-press if (eventHandler == null) return false; Date date = view.getItemAtPosition(position); eventHandler.onDayLongPress(date); return true; } }); attributter.

8. Samhandle med komponenten

Har du prøvd å trykke på en bestemt dag? De indre UI-elementene i komponenten vår oppfører seg fortsatt på den vanlige forventede måten og vil skyte hendelser som svar på brukerhandlinger. Så hvordan håndterer vi disse hendelsene?

Svaret består av to deler:

• Fang hendelser inne i komponenten, og
• Rapporter hendelser til komponentens overordnede (kan være en eventHandler, en CalendarView eller til og med en annen komponent).

Den første delen er ganske grei. For eksempel, for å håndtere nettpresser med lang trykk, tildeler vi en tilsvarende lytter i komponentklassen vår:

Det er flere metoder for rapportering av hendelser. En direkte og enkel er å kopiere slik Android gjør det: det gir et grensesnitt til komponentens hendelser som er implementert av komponentens overordnede (setEventHandler() i kodebiten ovenfor).

Grensesnittets funksjoner kan overføres alle data som er relevante for applikasjonen. I vårt tilfelle må grensesnittet eksponere en hendelsesbehandler, som passerer datoen for den pressede dagen. Følgende grensesnitt er definert i @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); HashSet events = new HashSet(); events.add(new Date()); CalendarView cv = ((CalendarView)findViewById(R.id.calendar_view)); cv.updateCalendar(events); // assign event handler cv.setEventHandler(new CalendarView.EventHandler() { @Override public void onDayLongPress(Date date) { // show returned day DateFormat df = SimpleDateFormat.getDateInstance(); Toast.makeText(MainActivity.this, df.format(date), LENGTH_SHORT).show(); } }); } :

Implementeringen fra foreldrene kan leveres til kalendervisningen via onDayLongPress(). Her er eksempler på bruk fra `MainActivity.java ':

Langt trykk på en dag vil avfyre ​​en langpress-hendelse som blir fanget opp og håndtert av BroadcastReceivers og rapportert ved å ringe Activity i den medfølgende implementeringen, som igjen viser datoen for den pressede dagen på skjermen:

En annen, mer avansert måte å håndtere dette på er å bruke Android’s Service og Activity . Dette er spesielt nyttig når flere komponenter må varsles om kalenderens begivenhet. For eksempel hvis det å trykke på en dag i kalenderen krever at en tekst vises i et EventHandler og en fil som skal lastes ned med bakgrunn Service.

Å bruke den forrige tilnærmingen vil kreve Intent å gi en Activity til komponenten, håndtere hendelsen og deretter overføre den til Service. I stedet får komponenten en BroadcastReceivers og både Activity og Service aksepterer det via sine egne isInEditMode() ikke bare gjør livet lettere, men hjelper også med å koble

|_+_|

|_+_|

Konklusjon

Så dette er hvordan du lager din egen tilpassede komponent i noen få enkle trinn:

• Lag XML-oppsettet og stil det etter dine behov.
• Utled komponentklassen din fra den aktuelle overordnede komponenten, i henhold til XML-oppsettet.
• Legg til komponentens forretningslogikk.
• Bruk attributter for å gjøre det mulig for brukere å endre komponentens atferd.
• For å gjøre det enklere å bruke komponenten i UI-designeren, bruk Android’s

  |_+_|

  funksjon.

I denne artikkelen opprettet vi en kalendervisning som et eksempel, hovedsakelig fordi aksjekalendervisningen på mange måter mangler. Men du er på ingen måte begrenset til hva slags komponenter du kan lage. Du kan bruke den samme teknikken til å lage alt du trenger, himmelen er grensen!

Takk for at du leser denne guiden. Jeg ønsker deg lykke til i kodingen din!