web-dev-qa-db-fra.com

Android - Différence entre Gridlayout et Staggered Gridlayout

Je travaille dans l'API de conception de matériel Android et je souhaite afficher des données au format grille. J'ai essayé à la fois GridLayout et StaggeredGridlayout et les deux ont la même apparence. Pour des informations générales, je voudrais demander quelle est la différence entre Gridlayout et StaggeredGridlayout?

Je vous remercie.

androidandroid-layoutandroid-gridlayoutstaggeredgridlayout
29
IBRAR AHMAD

Vue en grille: Il s'agit d'une ViewGroup qui affiche les éléments dans une grille bidimensionnelle et défilable. Dans ce chaque La grille a la même taille (hauteur et largeur). La vue en grille montre les éléments symétriques en vue.

Grid View

Staggered Grid View: il s'agit fondamentalement d'une extension de Grid View, mais dans cette chaque la grille est de taille variable (hauteur et largeur). La vue en grille décalée affiche les éléments asymétriques en vue.

staggered grid view

Didacticiel pour implémenter la vue en grille décalée: 

  1. Vue en grille décalée
  2. Pinterest Maçonnerie Staggered Grid View
55
Vipul Asri

Mon temps chez Oodles Technologies m'a appris à parler de stupéfié… Je vais le partager.

StaggeredGridLayout est un LayoutManager, il ressemble à une vue de grille, mais dans cette grille, chaque vue a sa propre taille (hauteur et largeur). Il prend en charge les dispositions verticales et horizontales.

Vous trouverez ci-dessous quelques étapes élémentaires pour créer un réseau échelonné.

1) Créer une vue.

Comme nous le savons, staggeredgrid n’est pas une vue directe, c’est un gestionnaire de disposition qui classe les enfants dans une grille décalée. Nous utilisons RecyclerView comme vue pour une grille décalée . Voici notre aperçu du recyclage dans la disposition-

<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) Définissez StaggeredGridLayout LayoutManager.

Une fois que notre vue est prête, utilisons Layoutmanager pour créer des grilles sur la vue.

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) Adaptateur pour gonfler les vues en grille décalée.

Pour gonfler les données sous forme de grille, nous avons besoin d'une présentation qui représentera ces données. Nous utilisons CardView pour cela et la présentation est-

<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>

Ensuite, nous mettons en place toutes nos étapes de base, il est temps de terminer notre activité principale. voici le code complet de l'activité 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;
    }
}
5
Anirudh Bhardwaj

Disposition de grille (API niveau 14): Une disposition qui place ses enfants dans une grille rectangulaire . Le nombre de lignes et de colonnes de la grille peut être déclaré à l'aide des propriétés Android:rowCount et Android:columnCount. . Cependant, généralement, si le nombre de colonnes est déclaré, GridLayout déduira le nombre de lignes en fonction du nombre de cellules occupées, rendant inutile l'utilisation de la propriété rowCount . De même, l'orientation de GridLayout peut éventuellement être définie via la propriété Android:orientation.

Je pense qu'il n'y a pas de StaggeredGridLayout séparé. Voici ce que nous avons

StaggeredGridLayoutManager:} _ C'est l'un des gestionnaires de disposition utilisés dans Recyclerview.A LayoutManager qui positionne les enfants dans une grille échelonnée. Il prend en charge la disposition horizontale et verticale ainsi que la possibilité de disposer les enfants en sens inverse.

Staggered GridView: StaggeredGridView permet à l'utilisateur de créer un GridView avec des rangées irrégulières semblables à celles de Pinterest. Inclut les propres OnItemClickListener et OnItemLongClickListener, le sélecteur et la restauration à position fixe.Veuillez regarder l'exemple this.

2
Raja Jawahar

StaggeredGridlayout

  1. Cela dispose les enfants dans une formation en grille échelonnée.
  2. Il prend en charge la disposition horizontale et verticale ainsi que la possibilité de disposer les enfants en sens inverse.
  3. Les grilles en quinconce sont susceptibles de comporter des lacunes sur les bords de la mise en page.
  4. Pour éviter les espaces, StaggeredGridLayoutManager peut décaler les étendues indépendamment ou déplacer des éléments entre les étendues. Vous pouvez contrôler ce comportement via setGapStrategy(int).

Disposition de la grille

  1. Cela place ses enfants dans une grille rectangulaire. 
  2. La grille est composée d'un ensemble de lignes infiniment fines qui séparent la zone de visualisation en cellules.
  3. Les enfants occupent une ou plusieurs cellules contiguës, définies par leurs paramètres de disposition rowSpec et columnSpec.

 Example of GridLayout

1
Shree Krishna

Un modèle de grille décalé comprend plusieurs colonnes avec plusieurs lignes de tailles différentes. 

Il permet une vue flexible colonne/ligne avec un en-tête et un pied de page et semble assez facile à mettre en œuvre, même si les utilisateurs de Gradle auront plus de facilité que ceux travaillant avec Eclipse et Ant. Voici à quoi ressemble la vue dans l'application Etsy Github pour laquelle elle a été développée.

Alors que a GridLayout est une présentation qui place ses enfants dans une grille rectangulaire.

Il a été introduit dans l'API de niveau 14 et a récemment été rétroporté dans la bibliothèque de support. Son objectif principal est de résoudre les problèmes d'alignement et de performances dans d'autres mises en page. Consultez ce tutoriel si vous voulez en savoir plus sur GridLayout.

0
Garg's