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'
Er zijn twee hoofdcategorieën tools in de Design Support Library:
We zullen beginnen met een blik op welke nieuwe visuele componenten beschikbaar zijn om uw apps polijst te maken.
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.
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.
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.
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();
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.
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.
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.
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..