Oversikt over Android Design Support Library

Introduksjon

Under Google I / O 2015 introduserte Google Design Support Library for Android-utviklere. Dette biblioteket gjør det enkelt for utviklere å implementere flere Material Design-konsepter i deres applikasjoner, fordi mange viktige elementer ikke var tilgjengelige i utgangspunktet ut av boksen. Utover at det er enkelt å bruke, er Design Support Library baklengs kompatibelt med API 7. Design Support Library kan inkluderes i Android-prosjektene dine ved å importere Gradle-avhengigheten.

kompilere 'com.android.support:design:22.2.0'

1. Visuelle komponenter

Det finnes to hovedkategorier av verktøy i Design Support Library:

  • visuelle komponenter
  • bevegelseskomponenter

Vi starter med å se på hvilke nye visuelle komponenter som er tilgjengelige for å legge til polish i appene dine.

Materiell tekstinngang

EditText Visninger har eksistert i Android siden begynnelsen, og mens de er enkle å bruke, har de egentlig ikke forandret seg mye. Med Design Support Library har Google introdusert en ny containervisning som heter TextInputLayout. Denne nye visningen legger til funksjonalitet til standarden EditText, for eksempel støtte for feilmeldinger og animerte tips for å gjøre brukergrensesnittet ditt pop.

Som vist i utsnittet nedenfor, TextInputLayout kan inkluderes i layoutfilen din som en wrapper for en standard EditText.

  

Gianluca Segato vil ta en nærmere titt på TextInputLayout komponent i en kommende opplæring.

Flytende handlingsknapper

En av de mest overordnede brukergrensesnittkomponentene i Material Design apps er den flytende handlingsknappen. Siden introduksjonen har utviklerne enten måtte lage disse knappene fra bunnen av eller velge en av de mange tredjepartsbiblioteker som er designet spesielt rundt disse knappene.

Med Design Support Library, kan flytende handlingsknapper bli inkludert i et layout og forankret til en del av skjermen med noen enkle XML-linjer. Hver knapp er lett tilpassbar med ikoner og farger. To størrelser er tilgjengelige, standard (56 dp) og mini (40dp). En av de største fordelene er at disse knappene nå skal støttes av Google når designen utvikler seg.

Navigasjonskomponenter

Samtidig som ViewPager og DrawerLayout komponenter har vært tilgjengelig en stund gjennom v4 støtte bibliotek, Google har utvidet seg på dem ved å tilby to nye relaterte widgets. Den første er en offisiell versjon av det ofte brukte ViewPagerIndicator-biblioteket av Jake Wharton TabLayout. Den andre er NavigationView, som gir støtte for skuffens topptekst.

TabLayout

TabLayout Komponenter kan ha innhold lagt til manuelt i kode ved å bruke en av addTab metoder. Ta en titt på følgende eksempel.

tabLayout.addTab (tabLayout.newTab (). setText ("Tab 1")); tabLayout.addTab (tabLayout.newTab (). setText ("Tab 2")); tabLayout.addTab (tabLayout.newTab (). setText ("Tab 3"));

Alternativt kan du knytte TabLayout komponenter med a ViewPager. Dette oppnås ved å ringe setupWithViewPager (), passerer i ViewPager som det første og eneste argumentet. Dette er en annen måte å endre seksjoner i ViewPager. Det er verdt å merke seg at getPageTitle () må overstyres når du bruker TabLayout med en ViewPager å gi hver kategori et riktig navn.

NavigationView

NavigationView er en ny widget som utvider funksjonaliteten til DrawerLayout. Utviklere kan nå legge til topptekstlayouter til skuffen og markere valgte seksjoner med denne brukervennlige komponenten.

I tillegg til dette er det nå veldig greit å lage seksjoner og delseksjoner i skuffen gjennom menyen ressursfiler. For å komme i gang, a NavigationView bare trenger å være assosiert med a DrawerLayout i XML.

   

Forbedret toasts

Mens Skål meldingen har vært en stift av Android i mange år, en ny brukergrensesnitt widget kalt snackbar er tilgjengelig for å gi lignende funksjonalitet med et forbedret utseende. Ikke bare gjør snackbar presentere informasjon til brukeren i en kort periode, støtter den også en enkelt handling for å legge til kontekstbasert funksjonalitet til appene dine og kan bli avvist med en swiping-gestus.

snackbar er implementert på samme måte som Skål, selv om det bør bemerkes at å lage en krever en visning som kan brukes til å finne bunnen av appvisningen.

Snackbar.make (se "Action", Snackbar.LENGTH_LONG) .setAction ("Action!", Ny View.OnClickListener () @Override public void onClick (Vis v) Log.e ("App", "Action! ");   ) .vise fram();

2. bevegelseskomponenter

Hvordan et brukergrensesnitt oppfører seg og animerer er svært viktig i Material Design. For å lette dette har Google gitt ut flere komponenter i Design Support Library som hjelper til med vanlig bruk. Kerry Perez-Huanca vil se nærmere på dette aspektet av Design Support Library i en kommende opplæring.

Reaktive visninger

Du har kanskje lagt merke til i forrige eksempel at FloatingActionButton flyttet opp når snackbar Visningen dukket opp. Dette er gjort ved hjelp av en ny widget kalt CoordinatorLayout, som bryter opp visninger som skal flyttes for å gi plass til andre synspunkter.

Forbedret rask retur og verktøylinjer

Mange utviklere har bedt om en enklere måte å vise et parallaxbilde som fungerer med et raskt returdesignmønster, forsvinner eller vises som brukeren ruller. Du kan se denne oppførselen i Play-butikken for appoppføringer. For å la utviklere implementere dette uten mye tid på å skrive redundant kode, har Google utgitt CollapsingToolBarLayout og AppBarLayout utsikt. Ved hjelp av ulike alternativer i disse widgetene, kan utviklere knytte visninger til toppen av skjermen eller angi når disse visningene skal bli synlige ettersom brukeren ruller.

Konklusjon

Designstøttebiblioteket har brakt mange etterlengtede verktøy til Android. Når det er sammenkoblet med AppCompat-biblioteket, blir det mye enklere å legge til Material Design til apps, samtidig som du opprettholder bakoverkompatibilitet.

Mange eksempler på hvordan du arbeider med disse nye komponentene finner du i Googles offisielle referanseprogram, CheeseSquare og Tuts + vil fortsette å gi grundige veiledninger om hvordan du implementerer disse nye funksjonene.