'Skære hjørner' på Android's standardlistevisnings-widget

At designe brugergrænseflader er en vanskelig forretning. Folk kan lide, hvad de kan lide. Du kan være en stor fan af Apples afrundede knapper og boble-lignende widgets, eller du foretrækker måske de skarpe skarpe kanter af Metro UI, der kører på Windows Phone 7. Jeg er ikke en GUI-fyr. Jeg skar tænderne på pc'er tilbage i den dag, hvor kommandolinjen var konge, og jeg er ikke særlig gift med nogen tankegang, når det kommer til brugergrænseflader. Så da jeg blev kontaktet om at sætte afrundede hjørner på Android's standardlistevisnings widget, duver jeg lige i.

Efter et par falske starter havde jeg til sidst en listevisning med både afrundede hjørner og en flot gradientbaggrund. Jeg besluttede at dele kildekoden med dig, for da jeg stakede rundt i forskellige Android-udviklingsrelaterede fora, der søgte efter ledetråde, stødte jeg på mange ufuldstændige svar og endda lidt fjendtlighed. Det ser ud til, at der er nogle udviklere, der mener, at hvis du nogensinde føler trangen til at runde hjørnerne på en widget, skal du straks tage din Google-telefon tilbage til den butik, du købte den fra, og bede om en iPhone.

Jeg er helhjertet enig i, at konsistens på tværs af en platform, især hvad angår brugergrænsefladen, bare giver god mening. På samme tid er jeg ikke naiv nok til at tro, at det at gøre noget lidt anderledes aldrig er det “rigtige” designvalg. Mobiludviklere skaber noget, der skal bemærkes i et hav af apps (på Googles platform er dette antal mere end 200.000 og tæller). Hvis tilføjelse af en lille "bling" til dit brugergrænseflade får brugere begejstret for din app, siger jeg mere magt til dig.

Den følgende tutorial kan bygges mod version 1.6 og nyere af Android SDK. Alternativt kan du downloade det komplette projekt her og bare importere det til Eclipse. Uanset hvad, håber jeg, at du vil tage et par minutter at se på koden, se, hvordan den fungerer, og tilføje noget viden til dit programmeringsarsenal. Og husk, uanset om du foretrækker firkantede hjørner på dine lister eller afrundede, er vi alle nørder på indersiden. Lev og lad live - det er mit motto!

1. Opret et nyt Android-projekt i Eclipse.

2. Opret en ny mappe kaldet / xml i mappen / res.

3. Vi tilføjer fire xml-filer, alt sammen små variationer af den første. Dette er for at gøre demoen alt inklusive. I et rigtigt projekt ville du sandsynligvis bare gå med en enkelt baggrundsressource.

rec.xml "1.0" kodning = "UTF-8" ?>

"Http://schemas.android.com/apk/res/android"

android: form = "rektangel" >

android: color = "#ffffff" />

faded_rec.xml "1.0" kodning = "UTF-8" ?>

xmlns: android = "http://schemas.android.com/apk/res/android"

android: form = "rektangel" >

"#Ffffff"

android: endColor = "# 666666"

android: vinkel = "270" />

rounded_rec.xml "1.0" kodning = "UTF-8" ?>

xmlns: android = "http://schemas.android.com/apk/res/android"

android: form = "rektangel" >

android: color = "#ffffff" />

android: bottomRightRadius = "15dp"

android: bottomLeftRadius = "15dp"

android: topLeftRadius = "15dp"

android: topRightRadius = "15dp" />

faded_rounded_rec.xml

"1.0" kodning = "UTF-8" ?>

xmlns: android = "http://schemas.android.com/apk/res/android"

android: form = "rektangel" >

android: startColor = "#ffffff"

android: endColor = "# 666666"

android: vinkel = "270" />

android: bottomRightRadius = "15dp"

android: bottomLeftRadius = "15dp"

android: topLeftRadius = "15dp"

android: topRightRadius = "15dp" />

4. Nu hvor vi har de udformede former, bliver vi nødt til at tilføje et layout til vores hovedaktivitet i mappen / res / layout. Den ser lang ud, men for det meste består den af ​​standardlistevisningen og en tekstvisning og et par afkrydsningsfelter. Det eneste, der er usædvanligt, er den indre linearlayout, der er vært for listevisningen.

main.xml "1.0" encoding = "utf-8" ?>

"Http://schemas.android.com/apk/res/android"

android: orientering = "lodret"

android: layout_width = "fill_parent"

android: layout_height = "fill_parent"

android: tyngdekraft = "center"

android: layout_gravity = "center"

android: layout_margin = "10dip" >

android: layout_width = "fill_parent"

android: layout_height = "wrap_content"

android: text = "Hjørner og baggrunde-demo"

android: textColor = "#ffffff"

android: textSize = "18sp"

android: tyngdekraft = "center" />

"@ + id / cut_the_corners"

android: layout_width = "fill_parent"

android: layout_height = "wrap_content"

android: paddingBottom = "6dip"

android: layout_marginTop = "4dip"

android: text = "Klip hjørnerne."

android: textColor = "#ffffff"

android: textSize = "15sp" />

"@ + Id / fade_the_bg"

android: layout_width = "fill_parent"

android: layout_height = "wrap_content"

android: paddingBottom = "6dip"

android: layout_marginTop = "4dip"

android: text = "Bleg baggrunden."

android: textColor = "#ffffff"

android: textSize = "15sp" />

android: id = "@ + id / list_bg"

android: orientering = "lodret"

android: layout_width = "fill_parent"

android: layout_height = "wrap_content"

android: tyngdekraft = "center"

android: layout_gravity = "center"

android: baggrund = "@ xml / rec"

android: polstring = "4dip" >

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

android: layout_width = "fill_parent"

android: layout_height = "wrap_content"

android: dividerHeight = "1dip"

android: layout_gravity = "center"

android: baggrund = "@android: farve / gennemsigtig"

android: cacheColorHint = "# 0000"

android: layout_margin = "8dip"

android: tyngdekraft = "center"

android: focusable = "falsk" />

GOTCHA - Bemærk, at vi har indstillet egenskaben Android: cacheColorHint til gennemsigtig. Intet sted i dokumentationen så jeg dette klart forklaret, men når du prøver at placere en listevisning oven på enhver baggrund, skal du indstille denne egenskab og på denne måde. Hvis du ikke når som helst ruller listen, vil din brugerdefinerede baggrund "blinke" ind og ud.

5. Endnu en layoutfil, og så kan vi komme til koden. Vi har brug for en simpel tekstvisning defineret i layoutmappen til vores linjeposter i listevisning.

list_view_row.xml "1.0" encoding = "utf-8" ?>

xmlns: android = "http://schemas.android.com/apk/res/android"

android: layout_width = "fill_parent"

android: layout_height = "fill_parent"

android: polstring = "10dp"

android: textSize = "16sp"

android: textColor = "# 000000" >

6. Lad os gå til mappen / src nu og vores Main.java-klasse. Vi starter med at udvide en listeaktivitet og oprette en statisk liste for at udfylde vores listevisning. Brug gjerne din egen statiske liste over tekststrenge, hvis du ikke kan lide min!

Main.java public class Main udvider ListeAktivitetsredskaber OnCheckedChangeListener {

/ * top femten grunde til at jeg boede i sidste weekend * /

statisk endelig streng EPISODES = ny streng {

"All Our Yesterdays",

"Amok Time",

"Arena",

"Corbomite Maneuver",

"Duvens dag",

"Dommedagsmaskine",

"Fjende indenfor",

"Enterprise Incident",

"Errand of Mercy",

"Rejse til Babel",

"Spejl spejl",

"Space Seed",

"Denne side af paradiset",

"Tholian Web",

"Trouble with Tribbles"

};

}

7. Herefter skal vi tilsidesætte OnCreate. Dette er standard Android GUI-udvikling. Jeg tildeler bare layoutet til klassen, kobler arrayet af strenge til listevisningsadapteren og tilslutter til sidst ledere til afkrydsningsfelterne.

/ ** Ringes op, når aktiviteten først oprettes. * /

@Override

offentligt tomrum onCreate (Bundle gemtInstanceState) {

super .onCreate (gemtInstanceState);

setContentView (R.layout. main );

setListAdapter ( ny ArrayAdapter ( dette, R.layout. list_view_row, EPISODES ));

CheckBox cb = (CheckBox) findViewById (R.id. Fade_the_bg );

cb.setOnCheckedChangeListener ( dette );

cb = (CheckBox) findViewById (R.id. cut_the_corners );

cb.setOnCheckedChangeListener ( dette );

}

8. Sidst, men ikke mindst, er vi nødt til at tilføje logikken til håndtering af udveksling af baggrundsressourcefiler.

@Override

public void onCheckedChanged (CompoundButton buttonView, boolean isChecked) {

LinearLayout l = (LinearLayout) findViewById (R.id. List_bg );

CheckBox falmet = (CheckBox) findViewById (R.id. Fade_the_bg );

CheckBox afrundet = (CheckBox) findViewById (R.id. Cut_the_corners );

if (! faded.isChecked () &&! rounded.isChecked ()) {

l.setBackgroundResource (R.xml. rec );

} andet hvis (! faded.isChecked () && rounded.isChecked ()) {

l.setBackgroundResource (R.xml. afrundet_rec );

} andet hvis (faded.isChecked () && (! rounded.isChecked ())) {

l.setBackgroundResource (R.xml. faded_rec );

} andet hvis (faded.isChecked () && rounded.isChecked ()) {

l.setBackgroundResource (R.xml. faded_rounded_rec );

}

}

Det er det. Der er virkelig ikke meget kode, fordi størstedelen af ​​arbejdet ligger foran i vores layout. Afbryd appen op på en emulator eller din faktiske enhed, og beslutt selv, hvilket brugergrænseflade der fungerer for dig. Skærer jeg hjørner eller udjævner de ru kanter? Du er dommeren.

En firkantet listevisning. En afrundet listevisning. Afrundet listevisning med en gradient.

© Copyright 2021 | pepebotifarra.com