Share
En av de viktigaste förändringarna i Android-design infördes under 2014-konferensen för Google I / O, materialdesign. Även om Google hade infört en uppsättning riktlinjer för sin nya designfilosofi, var utvecklarna ansvariga för att implementera de nya mönstren från början.
Detta ledde till många tredje partsbibliotek som uppnådde målen för materialdesign med liknande men olika implementeringar. För att hjälpa till att lindra en del av utvecklings smärtan av materialdesign introducerade Google designbiblioteket under huvudtalet för Google I / O-konferensen 2015.
Som med många saker i mjukvaruutveckling, förbättrades Design Support-biblioteket med tiden, vilket gav stöd för bottenark med 23.2-utgåvan. I den här artikeln lär du dig hur du enkelt implementerar det undre arkmönstret i dina egna appar. Ett provprojekt för denna artikel finns på GitHub.
För att implementera bottenarket har du två alternativ, en behållarvy med a BottomSheetBehavior i layoutfilen eller a BottomSheetDialogFragment. För att använda antingen måste du importera Design Support-biblioteket till ditt projekt, med en minsta version av 23,2. Du kan göra det här build.gradle genom att inkludera följande rad under beroenden:
kompilera 'com.android.support:design:23.2.0'
När du har synkroniserat ditt projekt med Design support-biblioteket kan du öppna layoutfilen som behöver inkludera ett nedre ark. I vårt provprojekt använder jag följande XML, som visar tre knappar i activity_main.xml.
När du kör på en enhet ser layouten ut så här:
Det finns några viktiga punkter inom layoutfilen som du måste vara medveten om. Om du vill använda widgeten med nedre ark måste du använda a CoordinatorLayout behållare för utsikten. Mot slutet av filen märker du att det finns en NestedScrollView innehållande a Textview. Medan behållarvyn kan användas i ett nedre ark kan rullning bara ske korrekt om du använder en behållare som stöder kapslad rullning, t.ex. NestedScrollView eller a RecyclerView.
För att en behållare ska kunna identifieras av Design Support-biblioteket som en bottenplåtbehållare, måste du inkludera layout_behavior attribut och ge det ett värde av android.support.design.widget.BottomSheetBehavior. Du kan se detta som används ovan i NestedScrollView.
En annan viktig egenskap att märka för den nedre arkbehållaren är layout_height. Oavsett vilka dimensioner ditt behållarobjekt använder, kontrollerar hur bottenarket visas. Det finns ett försök att vara medveten om med bottenplåtets höjd. Om du använder CoordinatorLayout, att flytta andra Se objekt runt, som med a CollapsingToolbarLayout, då ändras höjden på ditt nedre ark. Detta kan orsaka en oönskad hoppningseffekt.
När du väl har lagt till en bildbehållare och korrekt ställt in den i din layoutfil kan du öppna Aktivitet eller Fragment som använder bottenarket. I provprojektet är detta MainActivity.java.
För att ditt nedre ark ska kunna visas kan du skapa en BottomSheetBehavior. Detta skapas genom att få en hänvisning till behållarvyn och anrop BottomSheetBehavior.from () på den behållaren. För detta exempel hänvisar du också till de tre knapparna från layouten och samtalet setOnClickListener () på dem.
privat BottomSheetBehavior mBottomSheetBehavior; @Override protected void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); Visa bottomSheet = findViewById (R.id.bottom_sheet); Knappknapp1 = (Knapp) findViewById (R.id.button_1); Knapp button2 = (Button) findViewById (R.id.button_2); Knapp button3 = (Button) findViewById (R.id.button_3); button1.setOnClickListener (detta); button2.setOnClickListener (detta); button3.setOnClickListener (detta); mBottomSheetBehavior = BottomSheetBehavior.from (bottomSheet);
Nu när du har skapat en BottomSheetBehavior, Det sista du behöver göra är att visa ditt bottenark Se. Du kan göra det genom att ställa in ditt tillstånd BottomSheetBehavior till STATE_EXPANDED, som vi gör i provappen när toppen Knapp är klickat.
@Override public void onClick (Visa v) switch (v.getId ()) fall R.id.button_1: mBottomSheetBehavior.setState (BottomSheetBehavior.STATE_EXPANDED); ha sönder;
När det här är klart bör din app se så här ut:
För att dölja bottenarket kan användaren dra ner det för att dölja det från skärmen eller du kan ställa in BottomSheetBehavior till STATE_COLLAPSED.
Du kanske har märkt i olika Android-appar och widgets från Google, till exempel Place Picker från Places API, att det nedre arkmönstret används för att visa en förhandsvisning av det undre arket som kan utökas för mer information. Detta kan uppnås med bottenplattan Design Support Library genom att ställa in den sammanlagda storleken på Se med setPeekHeight () metod. Om du vill visa den kortare versionen av det undre arket, kan du ställa in BottomSheetBehavior till STATE_COLLAPSED.
mBottomSheetBehavior.setPeekHeight (300); mBottomSheetBehavior.setState (BottomSheetBehavior.STATE_COLLAPSED);
När mittenknappen är klickad hamnar du med ett bottenark i tittläge som kan utökas till sin fulla höjd genom att dra upp det.
Du kanske märker att när du försöker dra det nedre arket ned, kollapsar det bara ner till kikstorleken. Du kan lösa detta genom att lägga till en BottomSheetCallback till BottomSheetBehavior, ställer käftstorleken till noll när användaren kollapsar arket. I exemplet app läggs detta till i slutet av onCreate ().
mBottomSheetBehavior.setBottomSheetCallback (new BottomSheetBehavior.BottomSheetCallback () @Override public void onStateChanged (Se bottomSheet, int newState) om (newState == BottomSheetBehavior.STATE_COLLAPSED) mBottomSheetBehavior.setPeekHeight (0); @Override public void onSlide bottomSheet, float slideOffset) );
Som jag nämnde tidigare i den här artikeln kan du också visa en BottomSheetDialogFragment i stället för a Se i bottenplattan. För att göra detta måste du först skapa en ny klass som sträcker sig BottomSheetDialogFragment.
Inom setupDialog () metod kan du blåsa upp en ny layoutfil och hämta BottomSheetBehavior av behållarens vy i din Aktivitet. När du har beteendet kan du skapa och associera en BottomSheetCallback med att avvisa Fragment när arket är gömt.
public class TutsPlusBottomSheetDialogFragment utökar BottomSheetDialogFragment privat BottomSheetBehavior.BottomSheetCallback mBottomSheetBehaviorCallback = ny BottomSheetBehavior.BottomSheetCallback () @Override public void onStateChanged (@NonNull Visa bottomSheet, int newState) if (newState == BottomSheetBehavior.STATE_HIDDEN) avvisa @Override public void onSlide (@NonNull View bottomSheet, float slideOffset) ; @Override public void setupDialog (Dialog dialog, int style) super.setupDialog (dialog, stil); Visa contentView = View.inflate (getContext (), R.layout.fragment_bottom_sheet, null); dialog.setContentView (contentView); CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) ((Visa) contentView.getParent ()). GetLayoutParams (); KoordinatorLayout.Behavior behavior = params.getBehavior (); om (beteende! = null && beteende instans av BottomSheetBehavior) ((BottomSheetBehavior) beteende) .setBottomSheetCallback (mBottomSheetBehaviorCallback);
Slutligen kan du ringa show() på ett exempel av din Fragment för att visa den i bottenarket.
BottomSheetDialogFragment bottomSheetDialogFragment = nya TutsPlusBottomSheetDialogFragment (); bottomSheetDialogFragment.show (getSupportFragmentManager (), bottomSheetDialogFragment.getTag ());
Genom att använda Design support-biblioteket för att visa ett nedre ark är både mångsidigt och enkelt. De kan användas för att visa detaljer eller plockare utan att komma i vägen, samt fungera som en stor ersättning för DialogFragment i rätt läge. Förstå hur bottenarket kan användas i din app ger dig ett extra verktyg för att göra bra apps.
Accentsconagua