Share
Een van de belangrijkste wijzigingen in Android-ontwerp is geïntroduceerd tijdens de Google I / O-conferentie van 2014, materiaal ontwerp. Hoewel Google een aantal richtlijnen had geïntroduceerd voor hun nieuwe ontwerpfilosofie, waren ontwikkelaars verantwoordelijk voor de implementatie van de nieuwe patronen vanaf het begin.
Dit leidde tot vele externe bibliotheken die de doelen van materiaalontwerp bereikten met vergelijkbare, maar verschillende, implementaties. Om de ontwikkelpijn bij het ontwerpen van materialen enigszins te verlichten, introduceerde Google de Design-ondersteuningsbibliotheek tijdens de keynote van de 2015 Google I / O-conferentie.
Zoals met veel dingen in de ontwikkeling van software, verbeterde de Design-ondersteuningsbibliotheek in de loop van de tijd, en voegde ondersteuning voor onderbladen toe met de 23.2-release. In dit artikel leert u hoe u het onderste bladpatroon eenvoudig kunt implementeren in uw eigen apps. Een voorbeeldproject voor dit artikel is te vinden op GitHub.
Om het onderste blad te implementeren, hebt u twee opties, een containerview met een BottomSheetBehavior in het lay-outbestand of een BottomSheetDialogFragment. Om een van beide te gebruiken, moet u de Design-ondersteuningsbibliotheek importeren in uw project, met een minimale versie van 23.2. U kunt dit doen in build.gradle door de volgende regel hieronder op te nemen afhankelijkheden:
compileer 'com.android.support:design:23.2.0'
Nadat u uw project hebt gesynchroniseerd met de Design-ondersteuningsbibliotheek, kunt u het lay-outbestand openen dat een onderblad moet bevatten. In ons voorbeeldproject gebruik ik de volgende XML, waarin drie knoppen worden weergegeven activity_main.xml.
Wanneer het wordt uitgevoerd op een apparaat, ziet de lay-out er als volgt uit:
Er zijn een paar belangrijke punten in het lay-outbestand waarvan u op de hoogte moet zijn. Als u de widget voor de onderste vellen wilt gebruiken, moet u a gebruiken CoordinatorLayout container voor de weergaven. Naar de onderkant van het bestand merk je dat er een is NestedScrollView met een Tekstweergave. Hoewel elke containermodus kan worden gebruikt in een onderblad, kan scrollen alleen correct plaatsvinden als u een container gebruikt die geneste scrollen ondersteunt, zoals de NestedScrollView of a RecyclerView.
Om een container door de Design-ondersteuningsbibliotheek als onderste bladcontainer te herkennen, moet u de layout_behavior attribuut en geef het een waarde van android.support.design.widget.BottomSheetBehavior. Je kunt het bovenstaande hierboven zien in de NestedScrollView.
Een ander belangrijk attribuut om op te merken voor de onderste sheetcontainer is de layout_height. Welke dimensie uw containeritem ook gebruikt, bepaalt hoe uw onderste blad wordt weergegeven. Er is een voorbehoud bij de hoogte van het onderste blad. Als u de CoordinatorLayout, om andere te verplaatsen Uitzicht objecten rondom, zoals met een CollapsingToolbarLayout, dan verandert de hoogte van je onderlaken. Dit kan een ongewenst springeffect veroorzaken.
Nadat u een weergavecontainer hebt toegevoegd en deze correct hebt ingesteld in uw lay-outbestand, kunt u de Activiteit of Fragment die het onderste blad gebruikt. In het voorbeeldproject is dit MainActivity.java.
Om uw onderste blad zichtbaar te maken, moet u een BottomSheetBehavior. Dit wordt gemaakt door een verwijzing naar de containermodus te krijgen en te bellen BottomSheetBehavior.from () op die container. Voor dit voorbeeld raadpleeg je ook de drie knoppen uit de lay-out en oproep setOnClickListener () op hen.
private BottomSheetBehavior mBottomSheetBehavior; @Override protected void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); Bekijk bottomSheet = findViewById (R.id.bottom_sheet); Knop button1 = (Knop) findViewById (R.id.button_1); Knop button2 = (Knop) findViewById (R.id.button_2); Knop button3 = (Knop) findViewById (R.id.button_3); button1.setOnClickListener (deze); button2.setOnClickListener (deze); button3.setOnClickListener (deze); mBottomSheetBehavior = BottomSheetBehavior.from (bottomSheet);
Nu dat je een hebt gemaakt BottomSheetBehavior, het laatste dat je hoeft te doen is je onderste blad laten zien Uitzicht. U kunt dit doen door de staat van uw in te stellen BottomSheetBehavior naar STATE_EXPANDED, wat we doen in de voorbeeldapp wanneer de top Knop is geklikt.
@Override public void onClick (View v) switch (v.getId ()) case R.id.button_1: mBottomSheetBehavior.setState (BottomSheetBehavior.STATE_EXPANDED); breken;
Wanneer dit is gebeurd, ziet uw app er als volgt uit:
Om het onderste blad te verbergen, kan de gebruiker het naar beneden vegen om het van het scherm te verbergen of u kunt het instellen BottomSheetBehavior naar STATE_COLLAPSED.
Het is je misschien opgevallen in verschillende Android-apps en widgets van Google, zoals de Place Picker van de Places API, dat het onderste bladpatroon wordt gebruikt om een voorbeeld van het onderste blad weer te geven dat kan worden uitgebreid voor meer details. Dit kan worden bereikt met het onderste blad van de Design-ondersteuningsbibliotheek door de samengevouwen grootte van de Uitzicht met de setPeekHeight () methode. Als u de kortere versie van het onderste blad wilt weergeven, kunt u de BottomSheetBehavior naar STATE_COLLAPSED.
mBottomSheetBehavior.setPeekHeight (300); mBottomSheetBehavior.setState (BottomSheetBehavior.STATE_COLLAPSED);
Wanneer op de middelste knop wordt geklikt, krijgt u in de kiekmodus een onderste blad dat u naar de volledige hoogte kunt slepen door het naar boven te slepen.
Het kan je opvallen dat wanneer je probeert het onderste vel naar beneden te slepen, het alleen naar beneden valt naar zijn peekgrootte. U kunt dit oplossen door een BottomSheetCallback naar de BottomSheetBehavior, instellen van de peekgrootte op nul wanneer de gebruiker het blad samenvouwt. In de voorbeeld-app wordt dit aan het einde van onCreate ().
mBottomSheetBehavior.setBottomSheetCallback (new BottomSheetBehavior.BottomSheetCallback () @Override public void onStateChanged (View bottomSheet, int newState) if (newState == BottomSheetBehavior.STATE_COLLAPSED) mBottomSheetBehavior.setPeekHeight (0); @Override public void onSlide (Bekijken bottomSheet, float slideOffset) );
Zoals ik eerder in dit artikel al zei, kunt u ook een BottomSheetDialogFragment in plaats van een Uitzicht in het onderste blad. Hiervoor moet u eerst een nieuwe klasse maken die wordt uitgebreid BottomSheetDialogFragment.
Binnen de setupDialog () methode, kunt u een nieuw lay-outbestand opblazen en het BottomSheetBehavior van de containerweergave in uw Activiteit. Zodra u het gedrag hebt, kunt u een maken en associëren BottomSheetCallback ermee om de Fragment wanneer het blad is verborgen.
public class TutsPlusBottomSheetDialogFragment breidt BottomSheetDialogFragment private BottomSheetBehavior.BottomSheetCallback mBottomSheetBehaviorCallback = new BottomSheetBehavior.BottomSheetCallback () @Override public void onStateChanged (@NonNull View bottomSheet, int newState) if (newState == BottomSheetBehavior.STATE_HIDDEN) dismiss (); @Override public void onSlide (@NonNull View bottomSheet, float slideOffset) ; @Override public void setupDialog (Dialoogvenster dialoog, int stijl) super.setupDialog (dialoogvenster, stijl); Bekijk contentView = View.inflate (getContext (), R.layout.fragment_bottom_sheet, null); dialog.setContentView (contentView); CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) ((View) contentView.getParent ()). GetLayoutParams (); CoordinatorLayout.Behavior behaviour = params.getBehavior (); if (behaviour! = null &&& exemplaar instance van BottomSheetBehavior) ((BottomSheetBehavior) -gedrag) .setBottomSheetCallback (mBottomSheetBehaviorCallback);
Eindelijk kunt u bellen laten zien() op een instantie van uw Fragment om het in het onderste blad weer te geven.
BottomSheetDialogFragment bottomSheetDialogFragment = new TutsPlusBottomSheetDialogFragment (); bottomSheetDialogFragment.show (getSupportFragmentManager (), bottomSheetDialogFragment.getTag ());
Het gebruik van de Design-ondersteuningsbibliotheek om een onderste blad weer te geven, is zowel veelzijdig als eenvoudig. Ze kunnen worden gebruikt om details of pickers weer te geven zonder in de weg te zitten, maar ook als een geweldige vervanging voor de DialogFragment in de juiste situatie. Als u begrijpt hoe het onderste blad in uw app kan worden gebruikt, krijgt u een extra hulpmiddel om geweldige apps te maken.
Accentsconagua