Share
Una delle modifiche più significative apportate al design di Android è stata introdotta durante la conferenza Google I / O del 2014, design dei materiali. Anche se Google aveva introdotto una serie di linee guida per la loro nuova filosofia di progettazione, gli sviluppatori erano responsabili dell'implementazione dei nuovi modelli da zero.
Ciò ha portato a molte librerie di terze parti che hanno raggiunto gli obiettivi del design dei materiali con implementazioni simili ma diverse. Per contribuire ad alleviare alcuni dei problemi di sviluppo del material design, Google ha introdotto la libreria di supporto del design durante la nota chiave della conferenza Google I / O 2015.
Come per molte cose nello sviluppo del software, la libreria di supporto del design è migliorata nel tempo, aggiungendo il supporto per i fogli di fondo con la versione 23.2. In questo articolo, si impara come implementare facilmente il modello del foglio di base nelle proprie app. Un progetto di esempio per questo articolo può essere trovato su GitHub.
Per implementare il foglio inferiore, hai due opzioni, una vista contenitore con a BottomSheetBehavior nel file di layout o a BottomSheetDialogFragment. Per utilizzare entrambi, è necessario importare la libreria di supporto di progettazione nel progetto, con una versione minima di 23.2. Puoi farlo in build.gradle includendo la seguente riga sotto dipendenze:
compila "com.android.support:design:23.2.0"
Dopo aver sincronizzato il progetto con la libreria del supporto di progettazione, è possibile aprire il file di layout che deve includere un foglio inferiore. Nel nostro progetto di esempio, utilizzo il seguente XML, che visualizza tre pulsanti in activity_main.xml.
Quando si esegue su un dispositivo, il layout è simile al seguente:
Ci sono alcuni punti chiave all'interno del file di layout di cui devi essere a conoscenza. Per utilizzare il widget di fogli di fondo, è necessario utilizzare a CoordinatorLayout contenitore per le viste. Verso la fine del file, si nota che c'è un NestedScrollView contenente a TextView. Mentre è possibile utilizzare qualsiasi vista contenitore in un foglio inferiore, lo scorrimento può avvenire correttamente solo se si utilizza un contenitore che supporta lo scorrimento annidato, ad esempio NestedScrollView o a RecyclerView.
Affinché un contenitore venga riconosciuto dalla libreria di supporto del progetto come contenitore del foglio di base, è necessario includere il file layout_behavior attributo e dargli un valore di android.support.design.widget.BottomSheetBehavior. Potete vedere questo usato sopra nel NestedScrollView.
Un altro attributo chiave da notare per il contenitore del foglio di fondo è il layout_height. Qualunque dimensione usi il tuo oggetto contenitore, controlla come viene visualizzato il foglio inferiore. C'è un avvertimento da tenere presente con l'altezza del foglio inferiore. Se usi il CoordinatorLayout, per spostare altro vista oggetti in giro, come con a CollapsingToolbarLayout, quindi l'altezza del foglio di fondo cambia. Ciò può causare un effetto di salto indesiderato.
Una volta aggiunto un contenitore di viste e configurato correttamente all'interno del file di layout, è possibile aprire il Attività o Frammento che usa il foglio inferiore. Nel progetto di esempio, questo è MainActivity.java.
Perché il tuo foglio di base sia visualizzabile, devi creare un BottomSheetBehavior. Questo viene creato ottenendo un riferimento alla vista del contenitore e alla chiamata BottomSheetBehavior.from () su quel contenitore Per questo esempio, si fa riferimento anche ai tre pulsanti del layout e della chiamata setOnClickListener () su di essi.
private BottomSheetBehavior mBottomSheetBehavior; @Override protected void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); Visualizza bottomSheet = findViewById (R.id.bottom_sheet); Button button1 = (Button) findViewById (R.id.button_1); Button button2 = (Button) findViewById (R.id.button_2); Button button3 = (Button) findViewById (R.id.button_3); button1.setOnClickListener (questo); button2.setOnClickListener (questo); button3.setOnClickListener (questo); mBottomSheetBehavior = BottomSheetBehavior.from (bottomSheet);
Ora che hai creato a BottomSheetBehavior, l'ultima cosa che devi fare è mostrare il tuo foglio inferiore vista. Puoi farlo impostando lo stato del tuo BottomSheetBehavior a STATE_EXPANDED, che facciamo nell'app di esempio quando la parte superiore Pulsante è cliccato.
@Override public void onClick (View v) switch (v.getId ()) case R.id.button_1: mBottomSheetBehavior.setState (BottomSheetBehavior.STATE_EXPANDED); rompere;
Al termine, la tua app dovrebbe avere questo aspetto:
Per nascondere il foglio inferiore, l'utente può scorrere verso il basso per nasconderlo dallo schermo o è possibile impostare il BottomSheetBehavior a STATE_COLLAPSED.
Potresti aver notato in varie app e widget Android di Google, come il Selettore dei luoghi dell'API Places, che il modello del foglio inferiore viene utilizzato per visualizzare un'anteprima del foglio inferiore che può essere espanso per ulteriori dettagli. Questo può essere ottenuto con il bottom sheet della libreria di supporto di progettazione impostando la dimensione compressa di vista con il setPeekHeight () metodo. Se si desidera mostrare la versione più corta del foglio inferiore, è possibile impostare il BottomSheetBehavior a STATE_COLLAPSED.
mBottomSheetBehavior.setPeekHeight (300); mBottomSheetBehavior.setState (BottomSheetBehavior.STATE_COLLAPSED);
Quando si fa clic sul pulsante centrale, si finisce con un foglio di sotto in modalità Peek che può essere espanso fino alla sua altezza completa trascinandolo verso l'alto.
Si può notare che quando si tenta di trascinare il foglio inferiore verso il basso, si riduce solo alla sua dimensione di sbirciatina. Puoi risolvere questo aggiungendo un BottomSheetCallback al BottomSheetBehavior, impostando la dimensione del peek su zero quando l'utente collassa il foglio. Nell'app di esempio, questa viene aggiunta alla fine di onCreate ().
mBottomSheetBehavior.setBottomSheetCallback (new BottomSheetBehavior.BottomSheetCallback () @Override public void onStateChanged (Visualizza bottomSheet, int newState) if (newState == BottomSheetBehavior.STATE_COLLAPSED) mBottomSheetBehavior.setPeekHeight (0); @Override public void onSlide (Visualizza bottomSheet, float slideOffset) );
Come accennato in precedenza in questo articolo, puoi anche visualizzare a BottomSheetDialogFragment al posto di a vista nel foglio inferiore. Per fare ciò, devi prima creare una nuova classe che si estenda BottomSheetDialogFragment.
All'interno del setupDialog () metodo, è possibile gonfiare un nuovo file di layout e recuperare il file BottomSheetBehavior della vista del contenitore nel tuo Attività. Una volta che hai il comportamento, puoi creare e associare un BottomSheetCallback con esso per respingere il Frammento quando il foglio è nascosto.
public class TutsPlusBottomSheetDialogFragment extends BottomSheetDialogFragment private BottomSheetBehavior.BottomSheetCallback mBottomSheetBehaviorCallback = new BottomSheetBehavior.BottomSheetCallback () @Override public void onStateChanged (@NonNull Visualizza bottomSheet, int newState) if (newState == BottomSheetBehavior.STATE_HIDDEN) dismiss (); @Override public void onSlide (@NonNull Visualizza bottomSheet, float slideOffset) ; @Override public void setupDialog (Dialog dialog, int style) super.setupDialog (dialog, style); Visualizza contentView = View.inflate (getContext (), R.layout.fragment_bottom_sheet, null); dialog.setContentView (contentView); CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) ((Visualizza) contentView.getParent ()). GetLayoutParams (); CoordinatorLayout.Behavior behavior = params.getBehavior (); if (comportamento! = null && comportamento instanceof BottomSheetBehavior) ((BottomSheetBehavior) comportamento) .setBottomSheetCallback (mBottomSheetBehaviorCallback);
Finalmente puoi chiamare mostrare() su un'istanza del tuo Frammento per visualizzarlo nel foglio inferiore.
BottomSheetDialogFragment bottomSheetDialogFragment = new TutsPlusBottomSheetDialogFragment (); bottomSheetDialogFragment.show (getSupportFragmentManager (), bottomSheetDialogFragment.getTag ());
L'utilizzo della libreria di supporto di progettazione per visualizzare un foglio inferiore è sia versatile che semplice. Possono essere usati per mostrare dettagli o raccoglitori senza intralciarli, oltre a fungere da ottimo sostituto per il DialogFragment nella giusta situazione. Capire come il foglio di base può essere utilizzato nella tua app ti darà uno strumento aggiuntivo per realizzare app fantastiche.
Accentsconagua