Share
Una dintre cele mai importante schimbări ale designului Android a fost introdusă în cadrul conferinței I / O Google 2014, proiectarea materialelor. Chiar dacă Google a introdus un set de linii directoare pentru noua lor filozofie de design, dezvoltatorii au fost responsabili pentru implementarea noilor modele de la zero.
Acest lucru a dus la multe biblioteci de terțe părți care au atins obiectivele de design material cu implementări similare, dar diferite. Pentru a ajuta la atenuarea unei dureri de dezvoltare a designului materialului, Google a introdus biblioteca de suport pentru design în timpul prezentării conferinței Google I / O din 2015.
La fel ca în multe lucruri în dezvoltarea de software, biblioteca de suport a proiectului sa îmbunătățit cu timpul, adăugând suport pentru foile de fund cu versiunea 23.2. În acest articol, învățați să implementați cu ușurință modelul foaie de fund în propriile aplicații. Un exemplu de proiect pentru acest articol poate fi găsit pe GitHub.
Pentru a implementa foaia inferioară, aveți două opțiuni, o vizualizare cu un container BottomSheetBehavior în fișierul de aspect sau a BottomSheetDialogFragment. Pentru a utiliza fie, trebuie să importați biblioteca de suport de proiectare în proiectul dvs., cu o versiune minimă de 23.2. Puteți face acest lucru build.gradle prin includerea liniei de mai jos dependențe:
compile 'com.android.support:design:23.2.0'
Odată ce ați sincronizat proiectul cu biblioteca de suport pentru proiectare, puteți deschide fișierul de aspect care trebuie să includă o foaie inferioară. În exemplul nostru de proiect, folosesc următorul XML, care afișează trei butoane în activity_main.xml.
Când rulează pe un dispozitiv, aspectul arată astfel:
Există câteva puncte-cheie în fișierul de aspect pe care trebuie să le cunoașteți. Pentru a utiliza widgetul pentru foi de fund, trebuie să utilizați a CoordinatorLayout container pentru vizualizări. Spre sfârșitul fișierului, observați că există o a NestedScrollView conținând a TextView. În timp ce orice vizualizare a containerului poate fi utilizată într-o coală de fund, derularea poate avea loc numai dacă utilizați un container care acceptă defilare nested, cum ar fi NestedScrollView sau a RecyclerView.
Pentru ca un container să fie recunoscut de biblioteca suport pentru proiect ca un container de foaie inferioară, trebuie să includeți layout_behavior atribuiți și dați-i o valoare android.support.design.widget.BottomSheetBehavior. Puteți vedea acest lucru folosit mai sus în NestedScrollView.
Un alt atribut cheie care trebuie notat pentru containerul de foaie inferioară este layout_height. Indiferent de dimensiunile pe care le utilizează elementul de container, controlează modul în care este afișată foaia de fund. Există o avertizare care trebuie să fie conștientă de înălțimea colii inferioare. Dacă utilizați CoordinatorLayout, pentru a muta altele Vedere obiecte în jur, cum ar fi cu CollapsingToolbarLayout, apoi se modifică înălțimea foii inferioare. Acest lucru poate provoca un efect nedorit de sărituri.
După ce ați adăugat un container de vizualizare și l-ați setat corect în fișierul de aspect, puteți deschide Activitate sau Fragment care folosește foaia inferioară. În proba de proiect, aceasta este MainActivity.java.
Pentru ca foaia inferioară să fie afișabilă, trebuie să creați o BottomSheetBehavior. Acest lucru este creat prin obținerea unei trimiteri la vizualizarea și apelarea containerului BottomSheetBehavior.from () pe acel container. Pentru această probă, menționați și cele trei butoane din aspect și apel setOnClickListener () pe ei.
private BottomSheetBehavior mBottomSheetBehavior; @Override protejate void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); Vizualizare bottomSheet = findViewById (R.id.bottom_sheet); Buton buton1 = (buton) findViewById (R.id.button_1); Butonul buton2 = (Buton) findViewById (R.id.button_2); Butonul buton3 = (Buton) findViewById (R.id.button_3); button1.setOnClickListener (aceasta); button2.setOnClickListener (aceasta); button3.setOnClickListener (aceasta); mBottomSheetBehavior = BottomSheetBehavior.from (bottomSheet);
Acum că ați creat o BottomSheetBehavior, ultimul lucru pe care trebuie să-l faceți este să arătați foaia de jos Vedere. Puteți face acest lucru prin setarea stării dvs. BottomSheetBehavior la STATE_EXPANDED, pe care o facem în aplicația de probă atunci când este partea de sus Buton este făcută clic pe.
@Override public void onClick (V) switch (v.getId ()) caz R.id.button_1: mBottomSheetBehavior.setState (BottomSheetBehavior.STATE_EXPANDED); pauză;
După ce ați terminat, aplicația dvs. ar trebui să arate astfel:
Pentru a ascunde foaia inferioară, utilizatorul o poate deplasa în jos pentru al ascunde de pe ecran sau puteți seta BottomSheetBehavior la STATE_COLLAPSED.
Este posibil să fi observat în diferite aplicații Android și widget-uri de la Google, cum ar fi Pickerul de locație din API-ul Locații, că modelul de coli inferior este utilizat pentru a afișa o previzualizare a foii inferioare care poate fi extinsă pentru mai multe detalii. Acest lucru poate fi realizat cu foaia inferioară a bibliotecii suport pentru proiectare prin setarea mărimii restrânse a fișierului Vedere cu setPeekHeight () metodă. Dacă doriți să afișați versiunea mai scurtă a foii inferioare, puteți seta BottomSheetBehavior la STATE_COLLAPSED.
mBottomSheetBehavior.setPeekHeight (300); mBottomSheetBehavior.setState (BottomSheetBehavior.STATE_COLLAPSED);
Când faceți clic pe butonul din mijloc, ajungeți la o foaie inferioară în modul de căutare care poate fi extinsă la înălțimea completă prin tragerea acesteia.
Este posibil să observați că atunci când încercați să trageți foaia inferioară în jos, aceasta se prăbușește numai până la mărimea peek. Puteți rezolva acest lucru adăugând a BottomSheetCallback la BottomSheetBehavior, setând dimensiunea pensiunii la zero când utilizatorul prăbușește foaia. În aplicația de exemplu, aceasta se adaugă la sfârșitul secțiunii onCreate ().
mBottomSheetBehavior.setBottomSheetCallback (nou BottomSheetBehavior.ButtomSheetCallback () @Override public void onStateChanged (Vizualizare bottomSheet, int newState) if (newState == BottomSheetBehavior.STATE_COLLAPSED) mBottomSheetBehavior.setPeekHeight (0); @Override public void onSlide bottomSheet, float slideOffset) );
După cum am menționat mai devreme în acest articol, puteți afișa și a BottomSheetDialogFragment în locul a Vedere în foaia inferioară. Pentru a face acest lucru, mai întâi trebuie să creați o clasă nouă care să se extindă BottomSheetDialogFragment.
În cadrul setupDialog () , puteți să umflați un nou fișier de aspect și să îl recuperați BottomSheetBehavior din vizualizarea containerelor din Activitate. După ce ai comportamentul, poți să creezi și să asociezi a BottomSheetCallback cu aceasta pentru a respinge Fragment când foaia este ascunsă.
public class TutsPlusBottomSheetDialogFragment se extinde BottomSheetDialogFragment privat BottomSheetBehavior.BottomSheetCallback mBottomSheetBehaviorCallback = new BottomSheetBehavior.BottomSheetCallback () @ Suprascriere public void onStateChanged (@NonNull View bottomSheet, int newState) if (newState == BottomSheetBehavior.STATE_HIDDEN) respingerea (); @Overide publice void onSlide (@NonNull View bottomSheet, float slideOffset) ; @Override public void setupDialog (Dialog dialog, stil int) super.setupDialog (dialog, stil); Vizualizați contentView = View.inflate (getContext (), R.layout.fragment_bottom_sheet, null); dialog.setContentView (contentView); CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) (Vizualizare) contentView.getParent ()). GetLayoutParams (); CoordonatorLayout.Behavior comportament = params.getBehavior (); dacă (comportament! = null && comportament instanceof BottomSheetBehavior) ((BottomSheetBehavior) comportament) .setBottomSheetCallback (mBottomSheetBehaviorCallback);
În cele din urmă, puteți apela spectacol() pe un exemplu al tău Fragment pentru ao afișa în foaia inferioară.
BottomSheetDialogFragment bottomSheetDialogFragment = nou TutsPlusBottomSheetDialogFragment (); bottomSheetDialogFragment.show (getSupportFragmentManager (), bottomSheetDialogFragment.getTag ());
Utilizarea bibliotecii de suport pentru proiectare pentru a afișa o foaie inferioară este atât versatilă, cât și simplă. Acestea pot fi utilizate pentru a afișa detalii sau pickers fără a obține în cale, precum și să acționeze ca un mare înlocuitor pentru DialogFragment în situația potrivită. Înțelegerea modului în care foaia inferioară poate fi utilizată în aplicația dvs. vă va oferi un instrument suplimentar pentru a crea aplicații grozave.
Accentsconagua