23

Sto lavorando nel design di materiale Android api & desidera visualizzare alcuni dati in formato griglia. Ho provato sia GridLayout e StaggeredGridlayout ed entrambi hanno lo stesso aspetto. Per informazioni generali, voglio chiedere qual è la differenza tra Gridlayout e StaggeredGridlayout?

Grazie.Android - Differenza tra Gridlayout e Gridlayout Stagger

+4

GridView è simmetrica e GridView sfalsati è asimmetrico .. –

risposta

43

Visualizzazione griglia: È un ViewGroup che visualizza gli elementi in una griglia scorrevole bidimensionale. In questo ogni griglia è della stessa dimensione (altezza e larghezza). Visualizzazione griglia mostra elementi simmetrici in vista.

Grid View

sfalsati Grid View: Si tratta essenzialmente di una proroga per Grid View ma in questo ogni Grid è di varie dimensioni (altezza e larghezza). La visualizzazione a griglia sfalsata mostra elementi asimmetrici in vista.

staggered grid view

Tutorial per implementare sfalsati Grid View:

  1. Staggered Grid View
  2. Pinterest Masonry layout Staggered Grid View
0

Un sfalsati layout griglia include più colonne con più righe di varie dimensioni.

Consente una vista colonna/riga flessibile con un'intestazione e un piè di pagina e sembra abbastanza facile da implementare, sebbene gli utenti di Gradle avranno un tempo più semplice rispetto a quelli che funzionano con Eclipse e Ant. Ecco come appare la vista nello Etsy Github app per cui è stata sviluppata.

Mentre uno GridLayout è un layout che posiziona i suoi figli in una griglia rettangolare.

È stato introdotto nel livello API 14 ed è stato recentemente sostituito nella libreria di supporto. Il suo scopo principale è quello di risolvere problemi di allineamento e prestazioni in altri layout. Dai un'occhiata a this tutorial se vuoi saperne di più su GridLayout.

1

StaggeredGridlayout

  1. Questo espone i bambini in una griglia sfalsata.
  2. Supporta il layout verticale orizzontale & e la possibilità di impaginare i bambini al contrario.
  3. Le griglie sfalsate possono avere spazi vuoti ai bordi del layout.
  4. Per evitare gli spazi vuoti, StaggeredGridLayoutManager può compensare gli spazi in modo indipendente o spostare gli elementi tra gli intervalli. È possibile controllare questo comportamento tramite setGapStrategy(int).

GridLayout

  1. Questo espone i suoi figli in una griglia rettangolare.
  2. La griglia è composta da un insieme di linee infinitamente sottili che separano l'area di visualizzazione in celle.
  3. I bambini occupano una o più celle contigue, come definito dai rispettivi parametri di layout rowSpec e columnSpec.

Example of GridLayout

+3

l'immagine non è StaggeredGridLayout, è personalizzato da GridLayout https://github.com/felipecsl/AsymmetricGridView –

1

a griglia (Livello API 14): Un layout che colloca i suoi figli in una griglia rettangolare. Il numero di righe e colonne all'interno della griglia può essere dichiarato utilizzando le proprietà android:rowCount e android:columnCount. In genere, tuttavia, se viene dichiarato il numero di colonne, GridLayout dedurrà il numero di righe in base al numero di celle occupate rendendo inutile l'uso della proprietà rowCount. Analogamente, l'orientamento di GridLayout può essere facoltativamente definito tramite la proprietà android:orientation.

Penso che non ci sia StaggeredGridLayout separato. Qui ci sono le cose noi abbiamo

StaggeredGridLayoutManager: E 'uno dei manager un layout utilizzato in Recyclerview.A LayoutManager che espone i bambini in una formazione della griglia sfalsata. Supporta il layout verticale orizzontale & e la possibilità di impaginare i bambini al contrario.

sfalsati GridView: Lo StaggeredGridView permette all'utente di creare un GridView con filari irregolari simili a come Pinterest sembra. Include il proprio OnItemClickListener e OnItemLongClickListener, il selettore e il ripristino della posizione fissa. Consultare this esempio.

2

Il mio tempo presso Oodles Technologies mi ha insegnato a scaglionare. Lo condividerò.

StaggeredGridLayout è un LayoutManager, è proprio come una griglia ma in questa griglia ogni vista ha le proprie dimensioni (altezza e larghezza). Supporta sia layout verticali che orizzontali.

seguito sono riportati alcuni passaggi fondamentali per la creazione di un grid sfalsati

1) Creare una visualizzazione.

Come sappiamo, barcollare non è una vista diretta, è un gestore di layout che espone i bambini in una griglia sfalsata. Usiamo RecyclerView come vista per la griglia sfalsata. qui è il nostro recyclerview in Layout-

<relativelayout android:layout_height="match_parent" android:layout_width="match_parent" android:paddingtop="@dimen/activity_vertical_margin" tools:context="com.deepanshu.staggered_gridlayout.MainActivity" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"> 

    <android.support.v7.widget.recyclerview android:id="@+id/favPlaces" android:layout_height="match_parent" android:layout_width="match_parent"> 
</android.support.v7.widget.recyclerview></relativelayout> 

2) Set StaggeredGridLayout LayoutManager.

Una volta che la nostra vista è pronta, usiamo Layoutmanager per creare griglie sulla vista.

RecyclerView favPlaces = (RecyclerView) findViewById(R.id.favPlaces); 
     StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL); 
     layoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE); 
     favPlaces.setLayoutManager(layoutManager); 
     favPlaces.setHasFixedSize(true); 

3) Adattatore per gonfiare i punti di vista staggeredgrid.

per gonfiare i dati in forma di griglia di prima abbiamo bisogno di un layout di che rappresenterà che data.We stanno usando CardView per questo e il layout è-

<android.support.v7.widget.cardview android:layout_height="wrap_content" android:layout_width="match_parent" app:cardcornerradius="4dp" app:cardusecompatpadding="true"> 
    <linearlayout android:background="@color/colorPrimary" android:layout_height="match_parent" android:layout_width="match_parent" android:orientation="vertical"> 



    <imageview android:adjustviewbounds="true" android:id="@+id/placePic" android:layout_height="match_parent" android:layout_width="match_parent" android:scaletype="fitXY"> 

      <textview android:gravity="center" android:id="@+id/placeName" android:layout_height="wrap_content" android:layout_width="match_parent" android:textsize="16sp"> 


    </textview></imageview></linearlayout> 
</android.support.v7.widget.cardview> 

</linearlayout> 

Poi abbiamo impostato il nostro tutti i passaggi di base, è il momento di completare la nostra attività principale. qui è il codice completo di attività- principale

public class MainActivity extends AppCompatActivity { 

    int placeImage[]= {R.drawable.agattia_airport_lakshadweep,R.drawable.nainital,R.drawable.goa, 
      R.drawable.lotus_temple,R.drawable.valley_of_flowers,R.drawable.ranikhet,R.drawable.dehradun,R.drawable.nainital1}; 

    String placeName[]= {"Lakshadweep, India","Nainital, India","Goa, India","Lotus-Temple, India","Valley-Of-Flowers, India","Ranikhet, India", 
    "Dehradun, India","Nainital, India"}; 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_main); 
     RecyclerView favPlaces = (RecyclerView) findViewById(R.id.favPlaces); 
     StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL); 
     layoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE); 
     favPlaces.setLayoutManager(layoutManager); 
     favPlaces.setHasFixedSize(true); 
     ArrayList<PlaceDetails> placeList = getPlaces(); 

     StaggeredAdapter staggeredAdapter = new StaggeredAdapter(placeList); 
     favPlaces.setAdapter(staggeredAdapter); 
    } 

    private ArrayList<PlaceDetails> getPlaces() { 
     ArrayList<PlaceDetails> details = new ArrayList<>(); 
     for (int index=0; index<placeImage.length;index++){ 
      details.add(new PlaceDetails(placeImage[index],placeName[index])); 
     } 
     return details; 
    } 
} 
Problemi correlati