Tilpasse listevisninger i Android-appene dine

Etter å ha jobbet som ingeniør i mer enn et tiår, har jeg lært at ofte den vanskeligste delen av å løse et problem kommer i gang. Dette var tilfelle da markedsføringsteamet vårt henvendte meg til å variere noen av fargene i Android-applikasjonen vår for bedre å matche bedriftens merkevareskjema.

Det viste seg at det å være borte fra standard "Android-oransje" når du jobber med listevisninger, viste seg å være en hodepine. Ironisk nok, når jobben var fullført, var det veldig lite kode involvert, og absolutt ingen av kodene var sammensatte. Det var bare et tilfelle av å kjemme Android-dokumentasjonen, forskjellige Android-relaterte fora, og rikelig med prøving og feiling. I motsetning til oberst og hans berømte stekte kylling, synes jeg å dele den "hemmelige oppskriften" er god forretning. Åpenhet er det som skiller Android på mobilområdet.

Hvis du har vært på jakt etter en digital sammenkokning for å gi listevisningene dine litt ekstra zing, må du ikke lete lenger. Denne veiledningen vil lede deg gjennom prosessen i noen få enkle trinn. Hvis du heller vil importere hele prosjektet til Eclipse, kan du få koden her. La oss komme i gang!

1. Start et nytt prosjekt i Eclipse. Målplattformer 1.6 og høyere. Hvis du bruker en nyere versjon av ADT, kan det være lurt å endre navnet på standardaktiviteten som veiviseren oppretter for deg til Main.java for å gjøre det lettere å følge med i denne opplæringen.

2. Lag en / tegnbar mappe i / res katalogen. Mappen / tegnbar vil inneholde bakgrunnsbildet vi ønsker for individuelle listeelementer. Det er et par ting du må huske på her. Først bruker jeg XML for å tegne bakgrunnsformen og skyggen som former dynamisk, men du kan også bruke en 9-PNG (NinePatch) her. For det andre bruker jeg den samme bakgrunnen for både de valgte og pressede tilstandene, men du kan ødelegge dem med to separate bilder hvis du vil ha en mer kompleks animasjon.

 pressed.xml 

"1.0" encoding = "utf-8" ?>

"http://schemas.android.com/apk/res/android">

android: startColor = "#ffffff"

android: endColor = "# 181818"

android: vinkel = "270" />

"0dp" />

3. Under katalogen / res, bør du opprette en mappe med tittelen / xml. Det er her du vil legge til vår tilpassede listevalg.

 my_list_selector.xml 

"http://schemas.android.com/apk/res/android">

"ekte"

android: drawable = "@ drawable / pressed" />

"ekte"

android: drawable = "@ drawable / pressed" />

"ekte"

android: drawable = "@ drawable / pressed" />

"@android: farge / hvit" />

4. Lag de to / layoutfilene: en for aktiviteten og en for å definere listevisningsradene. I layoutet main.xml må du legge merke til fargehintet til cachen og den transparente bakgrunnen. disse er nødvendige når du bruker tilpassede bakgrunner i individuelle radelister.

 main.xml 

"1.0" encoding = "utf-8" ?>

http://schemas.android.com/apk/res/android

android: layout_width = "fill_parent"

android: layout_height = "fill_parent"

android: orientering = "vertikal"

android: bakgrunn = "#ffffff" >

android: id = "@ + id / android: list"

android: layout_width = "fill_parent"

android: layout_height = "wrap_content"

android: dividerHeight = "1 dip"

android: layout_gravity = "sentrum"

android: bakgrunn = "@android: farge / gjennomsiktig"

android: cacheColorHint = "# 0000"

android: layout_margin = "8dip"

android: gravitasjon = "sentrum"

android: focusable = "falsk" />

list_item.xml

"1.0" encoding = "utf-8" ?>

http://schemas.android.com/apk/res/android

android: layout_width = "fill_parent"

android: layout_height = "wrap_content"

android: polstring = "6dip"

android: fokuserbar = "falsk"

android: background = "@ xml / my_list_selector" >

android: id = "@ + id / label"

android: layout_height = "wrap_content"

android: layout_width = "fill_parent"

android: textSize = "16sp"

android: textColor = "# 0000ff"

android: polstring = "2dip" />

5. Legg Main.java-filen til katalogen / src. Bortsett fra å lage et standard utvalg av strenger å bruke, og peke adapteren vår til listevareoppsettet, gjør rammen kombinert med XML-filene alt arbeidet bak kulissene.

 Main.java- pakke com.authorwjf.customlistviews; 
 import com.authorwjf.customlistviews.R; import android.app.ListActivity; import android.os.Bundle; import android.widget.ArrayAdapter; 
 public class Main utvider ListActivity { 
 privat streng  mFruits = {"eple", "appelsin", "bannana", "pære", "kiwi", "druer", "jordbær" 
 }; 
 @Override offentlig tomrom onCreate (Bundle savedInstanceState) { super .onCreate (savedInstanceState); 

setContentView (R.layout. main );

setListAdapter ( ny ArrayAdapter ( dette, R.layout. list_item, R.id. label, mFruits));

}

}
Hvis du vil se før og etter ( figur A og figur B ), kan du fjerne linjen android: background = "@ xml / my_list_selector" fra filen list_item.xml før du sammenstiller og kjører APK på en enhet eller emulator. Figur A

Standard Android List Selector
Figur B

Tilpasset Android Listevalg

Som jeg sa da vi startet, det er ingenting spesielt vanskelig når det gjelder å tilpasse en listevisning fra et teknisk perspektiv. Nå som du har en fot i døra, overlater jeg deg til det.

© Copyright 2021 | pepebotifarra.com