Overview av Android Design Support Library
46
Del
34
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Innledning
Under Google I /O 2015, Google introduserte Design Support Library for Android-utviklere. Dette biblioteket gjør det enkelt for utviklere å implementere flere Material Design konsepter inn i sine søknader, fordi mange viktige elementer var ikke tilgjengelig i utgangspunktet ut av boksen. På toppen av å være enkel å bruke, er Design Support Library bakoverkompatibel til API 7. Design Support Library kan inkluderes i Android prosjekter ved å importere den Gradle avhengighet.
Kompilere 'com.android.support:design:22.2 0,0 '
1. Visual Components
Det er to hovedkategorier av verktøyene i Design Support Library:
visuelle komponenter
bevegelseskomponenter
vil starte med å ta en titt på hva nye visuelle komponenter er tilgjengelige for å finpusse dine apps.
Material -inntastingen
EditText synspunkter har eksistert i Android helt fra starten, og mens de er enkle å bruke, de har egentlig ikke forandret seg mye. Med Design Support Library, har Google lansert en ny container visning kalt TextInputLayout. Denne nye visningen legger til funksjonalitet til standard EditText, for eksempel støtte for feilmeldinger og animerte hint for å gjøre brukergrensesnittet pop.
Som vist i tekstutdraget nedenfor, TextInputLayout kan inkluderes i layouten filen som en wrapper for en standard EditText
< android.support.design.widget.TextInputLayout android. id = "+ id /textinput" android: layout_width = "match_parent" android: layout_height = "wrap_content" > < EditText android: id = "+ id /EditText" android: layout_width = "match_parent" android: layout_height = "wrap_content" android: hint = "Hva er navnet ditt" /> < /android.support.design.widget.TextInputLayout>
Gianluca Segato vil ta en nærmere titt på TextInputLayout komponent i en kommende opplæringen.
Floahandlingsknapper
En av de mest dominerer brukergrensesnittet komponenter i Material Design apps er den flytende handling knapp. Siden introduksjonen, har utviklerne enten måtte lage disse knappene fra bunnen av eller velge en av de mange tredjeparts biblioteker utviklet spesielt rundt disse knappene.
Med Design Support Library, flytende handlingsknapper kan inkluderes i en layout og forankret til en del av skjermen med et par enkle linjer av XML. Hver knapp er lett tilpasses med ikoner og farger. To størrelser er tilgjengelige, standard (56dp) og mini (40dp). En av de største fordelene er at disse knappene vil nå bli støttet av Google som sin design utvikler seg
< android.support.design.widget.FloatingActionButton android. Id = "+ id /fab" android: layout_width = " wrap_content "android: layout_height =" wrap_content "android: layout_gravity =" end | bottom "android: layout_margin =" 16dp "android: src =" @ teikne /ic_fab "/>
Navigasjon Components
Mens ViewPager og DrawerLayout komponenter har vært tilgjengelig en stund gjennom v4 støtte bibliotek, har Google utvidet på dem ved å gi to nye relaterte widgets. Den første er en offisiell versjon av brukte ViewPagerIndicator biblioteket ved Jake Wharton kalt TabLayout. Den andre er NavigationView, som gir støtte for utsikt skuff header.
TabLayout
TabLayout komponenter kan ha innhold som er lagt til dem manuelt i koden gjennom å bruke en av de 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 ViewPager. Dette oppnås ved å ringe setupWithViewPager (), passerer i ViewPager som det første og eneste argument. Dette er en annen måte å endre deler i ViewPager. Det bør bemerkes at getPageTitle () må overstyres ved bruk TabLayout med en ViewPager å gi hver kategori et egennavn.
NavigationView
NavigationView er en ny widget som utvider funksjonaliteten til DrawerLayout. Utviklere kan nå legge til header oppsett til skuffen og merke valgte seksjoner med denne enkle å bruke komponent.
I tillegg til dette, er det nå svært enkelt å lage og underseksjoner i skuffen gjennom menyressursfiler. For å komme i gang, trenger en NavigationView rett og slett å være forbundet med en DrawerLayout i XML
< android.support.v4.widget.DrawerLayout xmlns:. Android = "http://schemas.android.com/apk/res/android "xmlns: app =" http://schemas.android.com/apk/res-auto "android: id =" + id /drawer_layout "android: layout_height =" match_parent "android: layout_width =" match_parent "android: fitsSystemWindows = "true" > < inkluderer layout = "@ layout /innhold" /> < android.support.design.widget.NavigationView android: id = "+ id /nav_view" android: layout_height = "match_parent" android: layout_width = "wrap_content" android: layout_gravity = "Start" android: fitsSystemWindows = "true" app: headerLayout = "@ layout /nav_header" app: menu = "@ meny /drawer_view" /> < /android.support.v4.widget.DrawerLayout>
Forbedret toasts
Mens Toast Meldingen har vært et fast innslag i Android i mange år, et nytt brukergrensesnitt widget kalt Snackbar er tilgjengelig for å gi tilsvarende funksjonalitet med et forbedret utseende. Ikke bare Snackbar presentere informasjon til brukeren for en kort periode, støtter det også en enkelt handling for å legge kontekst basert funksjonalitet til apps og kan sies opp med en swiping gest.
Snackbar er implementert på samme måte til Toast, selv om det skal sies at det å skape en krever en utsikt som kan brukes til å finne bunnen av app displayet.
Snackbar.make (vis, "handling", Snackbar.LENGTH_LONG) .setAction ("Handling! ", ny View.OnClickListener () {Override public void onClick (Vis v) {Log.e (" App "," handling "!);}}) .vis ();
2. Motion Komponenter
Hvordan et brukergrensesnitt oppfører seg og levendegjør er svært viktig i Material Design. Til rette for dette, har Google lansert flere komponenter i Design Support Library som hjelper deg til vanlige bruksmåter. Kerry Perez-Huanca vil ta en nærmere titt på dette aspektet av Design Support Library i en kommende opplæringen.
Reaktivt Visninger
Du har kanskje lagt merke til i forrige eksempel at FloatingActionButton flyttet opp når den Snackbar visningen dukket opp. Dette gjøres ved hjelp av en ny widget kalt CoordinatorLayout, som brytes synspunkter som bør forskjøvet å gjøre plass til andre visninger.
Forbedret rask retur og verktøylinjer
Mange utviklere har bedt om en enklere måte for å vise en parallax image som fungerer med en rask retur design mønster, forsvinner eller dukker opp igjen når brukeren beveger seg. Du kan se denne oppførselen i Play Store for app oppføringer. Å la utviklere gjennomføre dette uten en masse tid å skrive overflødig kode, har Google lansert CollapsingToolBarLayout og AppBarLayout utsikt. Ved hjelp av ulike alternativer innenfor disse widgets, kan utviklere pin utsikt til toppen av skjermen eller angi når disse synspunktene skal bli synlig når brukeren beveger seg.
Konklusjon
Design Support Library har brakt mye etterlengtede verktøy til Android. Når paret med AppCompat biblioteket, blir det mye enklere å legge Material Design til apps samtidig opprettholde bakoverkompatibilitet.
Mange eksempler på hvordan man kan arbeide med disse nye komponentene kan bli funnet på Googles offisielle referanse app, CheeseSquare, og Tuts + vil fortsette å gi inngående tutorials på hvordan å implementere disse nye funksjonene.