Share
En av de viktigste endringene i Android-design ble introdusert i løpet av 2014 I / O-konferansen i Google, materiell design. Selv om Google hadde innført et sett med retningslinjer for sin nye designfilosofi, var utviklerne ansvarlige for å implementere de nye mønstrene fra bunnen av.
Dette førte til mange tredjepartsbiblioteker som oppnådde målene med materialdesign med lignende, men forskjellige, implementeringer. For å bidra til å lindre noen av utviklingssmerter av materialdesign, introduserte Google Design Support-biblioteket under hovedtemaet for Google I / O-konferansen i 2015.
Som med mange ting i programvareutvikling, forbedret Design Support-biblioteket med tiden, og legger til støtte for bunnplater med 23.2-utgivelsen. I denne artikkelen lærer du hvordan du enkelt implementerer det nederste arkmønsteret i dine egne apper. Et prøveprosjekt for denne artikkelen finnes på GitHub.
For å implementere bunnarket har du to alternativer, en beholdervisning med a BottomSheetBehavior i oppsettfilen eller a BottomSheetDialogFragment. For å bruke enten må du importere Design Support-biblioteket til prosjektet ditt, med en minimumsversjon av 23,2. Du kan gjøre dette i build.gradle ved å inkludere følgende linje under avhengig:
kompilere 'com.android.support:design:23.2.0'
Når du har synkronisert prosjektet med Design Support-biblioteket, kan du åpne layoutfilen som må inkludere et nederst ark. I vårt utvalgsprosjekt bruker jeg følgende XML, som viser tre knapper i activity_main.xml.
Når du kjører på en enhet, ser layoutet slik ut:
Det er noen viktige punkter i layoutfilen du må være oppmerksom på. For å bruke den nederste ark-widgeten må du bruke a CoordinatorLayout beholder for visningene. Mot bunnen av filen ser du at det er en NestedScrollView inneholder a TextView. Mens en hvilken som helst beholdervisning kan brukes i et nederst ark, kan rulling bare skje riktig hvis du bruker en beholder som støtter nestet rulling, for eksempel NestedScrollView eller a RecyclerView.
For at en beholder skal gjenkjennes av Design Support-biblioteket som en bunnplatebeholder, må du inkludere layout_behavior Tilskrive og gi det en verdi av android.support.design.widget.BottomSheetBehavior. Du kan se dette brukt ovenfor i NestedScrollView.
En annen viktig egenskap for å legge merke til den nederste arkbeholderen er layout_height. Uansett hvilke dimensjoner containerelementet ditt bruker, styrer hvordan det nederste arket ditt vises. Det er en advarsel å være oppmerksom på med den nederste arkhøyden. Hvis du bruker CoordinatorLayout, å flytte andre Utsikt gjenstander rundt, som med a CollapsingToolbarLayout, da endres høyden på bunnarket. Dette kan forårsake en uønsket hoppeffekt.
Når du har lagt til en visningsbeholder og riktig satt opp i layoutfilen din, kan du åpne Aktivitet eller Fragment som bruker bunnarket. I prøveprosjektet er dette MainActivity.java.
For at bunnarket ditt skal kunne vises, må du opprette en BottomSheetBehavior. Dette er opprettet ved å få en referanse til containervisningen og ringer BottomSheetBehavior.from () på den beholderen. For denne prøven refererer du også de tre knappene fra oppsettet og samtalen setOnClickListener () på dem.
privat BottomSheetBehavior mBottomSheetBehavior; @Override protected void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); Se bottomSheet = findViewById (R.id.bottom_sheet); Button button1 = (Button) findViewById (R.id.button_1); Button button2 = (Button) findViewById (R.id.button_2); Knapp button3 = (Button) findViewById (R.id.button_3); button1.setOnClickListener (this); button2.setOnClickListener (this); button3.setOnClickListener (this); mBottomSheetBehavior = BottomSheetBehavior.from (bottomSheet);
Nå som du har opprettet en BottomSheetBehavior, Det siste du må gjøre er å vise bunnarket ditt Utsikt. Du kan gjøre dette ved å sette tilstanden til din BottomSheetBehavior til STATE_EXPANDED, som vi gjør i prøven app når toppen Knapp er klikket.
@Override public void onClick (Vis v) switch (v.getId ()) tilfelle R.id.button_1: mBottomSheetBehavior.setState (BottomSheetBehavior.STATE_EXPANDED); gå i stykker;
Når dette er gjort, bør appen din se slik ut:
For å skjule det nederste arket kan brukeren sveipe det ned for å skjule det fra skjermen, eller du kan stille inn BottomSheetBehavior til STATE_COLLAPSED.
Du har kanskje lagt merke til i forskjellige Android-apper og -programmer fra Google, for eksempel Place Picker fra Steds-API, at det nederste arkmønsteret brukes til å vise en forhåndsvisning av det nederste arket som kan utvides for mer informasjon. Dette kan oppnås med designbibliotekets nederste ark ved å angi den kollapsede størrelsen på Utsikt med setPeekHeight () metode. Hvis du vil vise den kortere versjonen av bunnarket, kan du stille inn BottomSheetBehavior til STATE_COLLAPSED.
mBottomSheetBehavior.setPeekHeight (300); mBottomSheetBehavior.setState (BottomSheetBehavior.STATE_COLLAPSED);
Når den midtre knappen klikkes, ender du med et bunnark i tittemodus som kan utvides til full høyde ved å dra den opp.
Du kan legge merke til at når du prøver å dra nederste arket ned, kollapses det bare ned til kikkstørrelsen. Du kan løse dette ved å legge til en BottomSheetCallback til BottomSheetBehavior, setter kikkstørrelsen til null når brukeren kollapser arket. I eksempelappen legges dette til på slutten av onCreate ().
mBottomSheetBehavior.setBottomSheetCallback (ny BottomSheetBehavior.BottomSheetCallback () @Override public void onStateChanged (Se bottomSheet, int newState) if (newState == BottomSheetBehavior.STATE_COLLAPSED) mBottomSheetBehavior.setPeekHeight (0); @Override public void onSlide bottomSheet, float slideOffset) );
Som jeg tidligere nevnte i denne artikkelen, kan du også vise en BottomSheetDialogFragment i stedet for a Utsikt i bunnplaten. For å gjøre dette må du først opprette en ny klasse som strekker seg BottomSheetDialogFragment.
Innen setupDialog () Metode, du kan blåse opp en ny layoutfil og hente BottomSheetBehavior av beholdervisningen i din Aktivitet. Når du har oppførelsen, kan du opprette og knytte en BottomSheetCallback med det å avvise Fragment når arket er skjult.
offentlig klasse TutsPlusBottomSheetDialogFragment utvider BottomSheetDialogFragment private BottomSheetBehavior.BottomSheetCallback mBottomSheetBehaviorCallback = ny BottomSheetBehavior.BottomSheetCallback () @Override public void onStateChanged (@NonNull View bottomSheet, int newState) if (newState == BottomSheetBehavior.STATE_HIDDEN) avvis @Override public void onSlide (@NonNull View bottomSheet, float slideOffset) ; @Override public void setupDialog (Dialog dialog, int style) super.setupDialog (dialog, stil); Se contentView = View.inflate (getContext (), R.layout.fragment_bottom_sheet, null); dialog.setContentView (contentView); CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) ((Vis) contentView.getParent ()). GetLayoutParams (); KoordinatorLayout.Behavior behavior = params.getBehavior (); hvis (oppførsel! = null && oppførsel av BottomSheetBehavior) ((BottomSheetBehavior) oppførsel) .setBottomSheetCallback (mBottomSheetBehaviorCallback);
Til slutt kan du ringe vise fram() på en forekomst av din Fragment for å vise det i det nederste arket.
BottomSheetDialogFragment bottomSheetDialogFragment = nye TutsPlusBottomSheetDialogFragment (); bottomSheetDialogFragment.show (getSupportFragmentManager (), bottomSheetDialogFragment.getTag ());
Bruke Design Support-biblioteket til å vise et nederst ark er både allsidig og enkel. De kan brukes til å vise detaljer eller plukkere uten å komme i veien, samt fungere som en flott erstatning for DialogFragment i riktig situasjon. Å forstå hvordan bunnarket kan brukes i appen din, gir deg et ekstra verktøy for å lage gode apps.
Accentsconagua