Overzicht van de ondersteuningsbibliotheek voor Android-ontwerp

Invoering

Tijdens Google I / O 2015 introduceerde Google de Design Support Library voor Android-ontwikkelaars. Deze bibliotheek maakt het voor ontwikkelaars eenvoudig om meer Material Design-concepten in hun applicaties te implementeren, omdat veel belangrijke elementen aanvankelijk niet uit de doos beschikbaar waren. De Design Support Library is bovendien eenvoudig te gebruiken en is achterwaarts compatibel met API 7. De Design Support Library kan in uw Android-projecten worden opgenomen door de Gradle-afhankelijkheid te importeren.

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

1. Visuele componenten

Er zijn twee hoofdcategorieën tools in de Design Support Library:

  • visuele componenten
  • bewegingscomponenten

We zullen beginnen met een blik op welke nieuwe visuele componenten beschikbaar zijn om uw apps polijst te maken.

Materiële tekstinvoer

Tekst bewerken Er zijn al vanaf het begin al visies in Android en hoewel ze eenvoudig te gebruiken zijn, zijn ze niet echt veel veranderd. Met de Design Support Library heeft Google een nieuwe containerview genaamd TextInputLayout. Deze nieuwe weergave voegt functionaliteit toe aan de standaard Tekst bewerken, zoals ondersteuning voor foutmeldingen en geanimeerde hints om uw gebruikersinterface te laten uitkomen.

Zoals weergegeven in het onderstaande fragment, TextInputLayout kan worden opgenomen in uw lay-outbestand als een wrapper voor een standaard Tekst bewerken.

  

Gianluca Segato zal de TextInputLayout component in een komende tutorial.

Zwevende actieknoppen

Een van de meest overheersende componenten van de gebruikersinterface in Material Design-apps is de zwevende actieknop. Sinds hun introductie moesten ontwikkelaars deze knoppen helemaal zelf maken of een van de vele externe bibliotheken kiezen die speciaal zijn ontworpen rond deze knoppen.

Met de Design Support Library kunnen zwevende actieknoppen worden opgenomen in een lay-out en worden verankerd aan een deel van het scherm met een paar eenvoudige regels XML. Elke knop kan gemakkelijk worden aangepast met pictogrammen en kleuren. Er zijn twee maten beschikbaar, standaard- (56dp) en mini (40dp). Een van de grootste voordelen is dat deze knoppen nu door Google worden ondersteund naarmate hun ontwerp verder evolueert.

Navigatie componenten

Terwijl ViewPager en DrawerLayout componenten zijn al een tijdje beschikbaar via de v4 ondersteuningsbibliotheek, Google heeft ze uitgebreid met twee nieuwe gerelateerde widgets. De eerste is een officiële versie van de veelgebruikte ViewPagerIndicator-bibliotheek van Jake Wharton TabLayout. De tweede is de NavigationView, welke ondersteuning biedt voor ladekopviews.

TabLayout

TabLayout componenten kunnen inhoud handmatig aan hen worden toegevoegd in code via een van de addTab methoden. Bekijk het volgende voorbeeld.

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

Als alternatief kunt u koppelen TabLayout componenten met een ViewPager. Dit wordt bereikt door te bellen setupWithViewPager (), passeren in de ViewPager als het eerste en enige argument. Dit is een andere manier om secties in de te wijzigen ViewPager. het zou genoteerd moeten worden dat getPageTitle () moet worden overschreven tijdens het gebruik TabLayout met een ViewPager om elke tab een eigen naam te geven.

NavigationView

NavigationView is een nieuwe widget die de functionaliteit van de DrawerLayout. Ontwikkelaars kunnen nu koplay-outs toevoegen aan de lade en geselecteerde secties markeren met dit eenvoudig te gebruiken onderdeel.

Daarnaast is het nu heel eenvoudig om secties en subsecties in de lade te maken via menubronbestanden. Om aan de slag te gaan, NavigationView gewoon moet worden geassocieerd met een DrawerLayout in XML.

   

Verbeterde Toasts

Terwijl de Geroosterd brood bericht is al jaren een belangrijk onderdeel van Android, een nieuwe widget voor de gebruikersinterface Snack bar is beschikbaar om soortgelijke functionaliteit te bieden met een verbeterd uiterlijk. Niet alleen de Snack bar informatie voor de gebruiker te presenteren voor een korte periode, het ondersteunt ook een enkele actie voor het toevoegen van contextgebaseerde functionaliteit aan uw apps en kan worden verwijderd met een veegbeweging.

Snack bar is op dezelfde manier geïmplementeerd Geroosterd brood, er moet echter worden opgemerkt dat voor het maken van een weergave een weergave vereist is die kan worden gebruikt om de onderkant van de app-weergave te vinden.

Snackbar.make (weergave, "Actie", Snackbar.LENGTH_LONG) .setAction ("Action!", Nieuwe View.OnClickListener () @Override public void onClick (View v) Log.e ("App", "Action! ");   ) .laten zien();

2. Bewegingscomponenten

Hoe een gebruikersinterface zich gedraagt ​​en animeert, is erg belangrijk in Material Design. Om dit te vergemakkelijken, heeft Google meerdere componenten in de Design Support Library uitgebracht die kunnen helpen bij veelvoorkomende use-cases. Kerry Perez-Huanca zal dit aspect van de Design Support Library in een volgende tutorial nader bekijken.

Reactive Views

U hebt misschien gemerkt in het vorige voorbeeld dat de FloatingActionButton schoof omhoog als het Snack bar weergave verscheen. Dit gebeurt met een nieuwe widget genaamd de CoordinatorLayout, die weergaven omsluit die moeten worden verplaatst om ruimte te maken voor andere weergaven.

Verbeterde Quick Return en Toolbars

Veel ontwikkelaars hebben gevraagd om een ​​eenvoudigere manier om een ​​parallax-afbeelding weer te geven die werkt met een snel terugkerend ontwerppatroon, dat verdwijnt of terugkeert als de gebruiker schuift. Je kunt dit gedrag zien in de Play Store voor app-vermeldingen. Om ontwikkelaars dit te laten implementeren zonder veel tijd te besteden aan het schrijven van overbodige code, heeft Google vrijgegeven CollapsingToolBarLayout en AppBarLayout keer bekeken. Met behulp van verschillende opties binnen deze widgets kunnen ontwikkelaars weergaven bovenin het scherm vastzetten of aangeven wanneer die weergaven zichtbaar moeten worden terwijl de gebruiker scrolt.

Conclusie

De Design Support Library heeft veel langverwachte tools naar Android gebracht. In combinatie met de AppCompat-bibliotheek wordt het een stuk eenvoudiger om Material Design aan apps toe te voegen terwijl de compatibiliteit met eerdere versies behouden blijft.

Veel voorbeelden van hoe met deze nieuwe componenten te werken zijn te vinden in de officiële referentie-app van Google, CheeseSquare, en Tuts + zal doorgaan met het bieden van diepgaande zelfstudies over hoe deze nieuwe functies moeten worden geïmplementeerd..