I tidligere layout tutorials, har vi sett på LinearLayout og RelativeLayout. En vanlig bruk sak i Android, skjønt, er at du har en liste over elementer å vise, som du ønsker at brukeren skal kunne klikke på. Ett alternativ til dette er en Listview (som omtalt i denne opplæringen). En annen, og det er flott hvis listen er best representert med bilder, er Gridview. Dette, som du kanskje forventer, legger ut listen som en rulle rutenett av bilder. Les videre for et eksempel på hvordan du setter opp en Gridview med en liste over bildene, som når du klikker på et bilde, lanserer en nettside knyttet til den.
En av fordelene med en Gridview er at, som en Listview, bare trenger det for å holde i minnet bildene som er synlige til enhver tid. Når du blar, kan den minne og ressurser brukes for bildene rulle utenfor siden gjenbrukes for de som ruller på. Men du fortsatt trenger å sørge for at bildefilene er en passende størrelse. (A 1024x768 bilde fortsatt tar opp like mye minne når den vises i en 200x150-boksen.) Lag små miniatyrbilder dersom bildefilene er store, for å unngå Android VM kjører ut av minnet.
En Gridlayout er også tilgjengelig fra API 14. Dette er et oppsett hvis barn blir plassert i et rektangulært rutenett. Barna er definert som opptar en bestemt celle eller celler i layout, som gjør spesielle oppsett enklere å administrere og å arrangere attraktivt. Hvis du bruker andre oppsett og finner deg selv prøver å hekke dem til flere nivåer, kan det være verdt å se nærmere ved hjelp av en Gridlayout i stedet; og det er kanskje lettere å lære hvis du starter fra scratch enn noen av de andre oppsett. Det er en hendig online tutorial tilgjengelig for Gridlayout.
Sette opp Gridview
Først oppretter en ny Android-prosjektet, GridViewTest. For bildene dine skal være tilgjengelig, må du lagre dem i res /teikne (med tanke på note ovenfor om filstørrelser). Nå opprette din layout fil, i res /layout /activity_grid_view_test.xml:
< Gridview xmlns: android = "http://schemas.android.com/apk/res/android" android: id = " + id /Gridview "android: layout_width =" match_parent "android: layout_height =" match_parent "android: vekt =" center "android: stretchMode =" columnWidth "Android: numColumns =" auto_fit "android: paddingBottom =" @ dimen /activity_vertical_margin "android: paddingLeft =" @ dimen /activity_horizontal_margin "android: paddingRight =" @ dimen /activity_horizontal_margin "android: paddingTop =" @ dimen /activity_vertical_margin "/>Du vil se at Gridview er en layout av seg selv; det trenger ikke å bli pakket inn i en RelativeLayout eller LinearLayout, med mindre du ønsker å legge til andre elementer (som knapper) rundt rutenettet. De fleste av de attributter bør være forholdsvis selvforklarende. Det er to som det er verdt å betale spesielt oppmerksom på:
android: stretchMode = "columnWidth" - definerer hvordan kolonnene skal strekke til å fylle tomrommet. columnWidth betyr at hver kolonne er strukket like
android: numColumns = "auto_fit" - dette passer så mange kolonner som mulig inn i rommet.. Du kan angi et nummer i stedet, men dette kan ikke fungere riktig på alle enheter.
Deretter må vi skrive en adapter for å håndtere grensesnittet mellom bildelisten og utsikten :
public class GridAdapter strekker BaseAdapter {private Kontekst sammenheng; private Integer [] imageIds = {R.drawable.file1, R.drawable.file2, R.drawable.file3, R.drawable.file4}; offentlig GridAdapter (Context c) {sammenheng = c; } Public int getCount () {return imageIds.length; } Public Object getItem (int posisjon) {return imageIds [posisjon]; } Public lang getItemId (int posisjon) {return 0; } Public Vis getView (int posisjon, Utsikt visning, ViewGroup forelder) {Imageview iView; if (vis == null) {iView = new Imageview (sammenheng); iview.setLayoutParams (nye GridView.LayoutParams (150,200)); iview.setScaleType (ImageView.ScaleType.CENTER_CROP); iview.setPadding (5, 5, 5, 5); } Else {iView = (Imageview) view; } Iview.setImageResource (imageIds [posisjon]); returnere iView; }}Bildene (eller, referanser til sitt ressurs IDer) blir holdt i imageIds. De fleste av metodene er forholdsvis selvforklarende. Her trenger vi ikke riktig implementere getItemId () fordi det er først og fremst nyttig hvis kortet ditt er å snakke med en SQL-database, og du vil være i stand til å få direkte tilgang til et element ID.
getView () gjør mesteparten av arbeid - det setter opp en visning for hvert enkelt element. __iview.setLayoutParams () __ setter bredden og høyden av den oppfatning (ganske liten, så vi vil ha flere av dem til en skjerm), og __setScaleType () __ gir deg en mulighet for ulike måter å sentrere og skalere bildet. Merk at du bare sette alle disse hvis Imageview er foreløpig null. Fordi Gridview reuses sine ressurser der det er mulig, noen ganger den "nye" syn vil faktisk være en 'gamle' syn, med alle disse verdiene som allerede er satt. Når Imageview er satt opp, knytter vi et bestemt bilde med det og returnere det
Til slutt satt opp hovedaktiviteten, GridViewTestActivity.
pakken com.example.gridviewtest; public class GridViewTestActivity strekker Aktivitet {beskyttet void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); setContentView (R.layout.activity_grid_view_test); Gridview Gridview = (Gridview) findViewById (R.id.gridview); endelig GridAdapter gridadapter = new GridAdapter (denne); gridview.setAdapter (gridadapter)); gridView.setOnItemClickListener (ny onItemClickListener () {public void onItemClick (AdapterView <? > forelder, Utsikt v, int posisjon, lang id) {//gjør noe her (se neste avsnitt)}}); }}Denne koden setter innholdsfilen som vi først opprettet, og kobler deretter aktiviteten og utsikten sammen ved hjelp av vår nye GridAdapter klasse. Dette vil automatisk håndtere trekke bildene inn i nettet, ved hjelp __getView () __. Den __setOnItemClickListener () __ er satt opp her, men vi skal skrive kroppen av det i neste avsnitt.
Hvis du nå kjøre koden din, bør det fungere og vise deg bildene i en ryddig rutenett.
Ved å klikke på et element
Et rutenett er hyggelig å vise bilder, men i de fleste tilfeller vil være i stand til å klikke på dem. I dette tilfellet vil vi knytte våre bilder med en URL, og lansere en nettleser for å se på nettadressen når en bruker klikker på bildet. Det er mange måter du kan gjøre dette, men her er ett alternativ. Først oppretter en ImageWithUrl klasse i GridAdapter, og tilpasse GridAdapter tilsvarende:
privat ImageWithUrl [] imageIds = {nye ImageWithUrl (R.drawable.file1, "http://example.com/link1.html") , ny ImageWithUrl (R.drawable.file2, "http://example.com/link2.html"), //og resten}; offentlig ImageWithUrl getItem (int posisjon) {return imageIds [posisjon];} public Vis getView (int posisjon, Utsikt visning, ViewGroup forelder) {//meste av dette er like før iview.setImageResource (imageIds [posisjon] .getImageId ()); returnere iView;} beskyttet klasse ImageWithUrl strekker Object {private int imageId; private String imageUrlString; ImageWithUrl (int id, String url) {imageId = id; imageUrlString = url; } Public int getImageId () {return imageId; } Public String getImageUrlString () {return imageUrlString; }}Vårt utvalg av ressurser er nå en rekke ImageWithUrl stedene. Det betyr at vi må endre getItem () slik at den gir en ImageWithUrl, og redigere __getView () __ slik at vi får en referanse til bildet delen av ImageWithUrl. Den ImageWithUrl klasse i seg selv er grei
Til slutt må vi skrive den OnItemClickListener () i GridViewTestActivity.
gridview.setOnItemClickListener (ny OnItemClickListener () {public void onItemClick (AdapterView forelder, Utsikt v, int stilling, lang id) {Intent i = new Intent (Intent.ACTION_VIEW); i.setData (Uri.parse (gridadapter.getItem (stilling) .getImageUrlString ())); startActivity (i);}});Dette skaper en ny intensjonsavtale, med URL festet fra den spesifikke grid elementet klikket på. Den Intent blir så brukt til å starte en aktivitet - så det vil se etter den foretrukne nettleser app på telefonen og starte nettadressen i det. (For mer om aktiviteter og hensikter, se forrige tutorial på Android grunnleggende.) Du har din klikkbar rutenettet i aksjon!