android - whatwg - w3c html standards

Android-Diferencia entre Gridlayout y Staggered Gridlayout

Question

Estoy trabajando en el api de diseño de material de Android y quiero mostrar algunos datos en formato de cuadrícula. GridLayout y StaggeredGridlayout y ambos se ven igual. Para obtener información general, quiero preguntar cuál es la diferencia entre Gridlayout y StaggeredGridlayout ?

Gracias.

Answer 1

Mi tiempo en Oodles Technologies me enseñó sobre escalonada. Voy a compartir eso

StaggeredGridLayout es un LayoutManager, es como una vista de cuadrícula, pero en esta cuadrícula cada vista tiene su propio tamaño (alto y ancho). Soporta diseños tanto verticales como horizontales.

A continuación hay algunos pasos básicos para crear una cuadrícula escalonada:

1) Crear una vista.

Como sabemos, staggeredgrid no es una vista directa, es un layoutmanager que presenta a los niños en una formación de grilla escalonada. Usamos RecyclerView como una vista para una cuadrícula escalonada. Aquí está nuestro recyclerview en diseño-

<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) Establecer StaggeredGridLayout LayoutManager.

Una vez que nuestra vista esté lista, usaremos Layoutmanager para crear cuadrículas en la 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) Adaptador para inflar las vistas escalonadas.

Para inflar los datos en forma de cuadrícula, primero necesitamos un diseño que represente esos datos. Estamos utilizando CardView para esto y el diseño es-

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

Luego configuramos todos nuestros pasos básicos, es hora de completar nuestra actividad principal. Aquí está el código completo de la actividad principal.

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

Answer 2

Un diseño de cuadrícula escalonado incluye varias columnas con varias filas de diferentes tamaños.

Permite una vista flexible de columna / fila con encabezado y pie de página y parece bastante fácil de implementar, aunque los usuarios de Gradle tendrán un tiempo más fácil que aquellos que trabajan con Eclipse y Ant. Así es como se ve la vista en la aplicación Etsy Github para la cual fue desarrollada.

Mientras que un GridLayout es un diseño que coloca a sus hijos en una cuadrícula rectangular.

Se introdujo en el nivel 14 de la API y recientemente se incluyó en la biblioteca de soporte. Su objetivo principal es resolver problemas de alineación y rendimiento en otros diseños. Echa un vistazo a este tutorial si quieres aprender más sobre GridLayout.

Answer 3

Diseño de cuadrícula (nivel de API 14): un diseño que coloca a sus hijos en una cuadrícula rectangular. El número de filas y columnas dentro de la cuadrícula se puede declarar usando las android:rowCount y android:columnCount . Sin embargo, normalmente, si se declara el número de columnas, GridLayout deducirá el número de filas según el número de celdas ocupadas, lo que hace innecesario el uso de la propiedad rowCount. De manera similar, la orientación de GridLayout puede definirse opcionalmente a través de la propiedad de android:orientation .

Creo que no hay un StaggeredGridLayout separado. Aquí están las cosas que tenemos

StaggeredGridLayoutManager: es uno de los gestores de diseño utilizados en Recyclerview. Un LayoutManager que presenta a los niños en una formación de cuadrícula escalonada. Admite el diseño horizontal y vertical, así como la capacidad de diseñar niños en reversa.

Staggered GridView: StaggeredGridView permite al usuario crear un GridView con filas desiguales similares a cómo se ve Pinterest. Incluye el propio OnItemClickListener y OnItemLongClickListener, el selector y la restauración de la posición fija. Mire this ejemplo.

Answer 4

StaggeredGridlayout

1. Esto pone a los niños en una formación de cuadrícula escalonada.
2. Admite el diseño horizontal y vertical, así como la capacidad de diseñar niños en reversa.
3. Es probable que las grillas escalonadas tengan huecos en los bordes del diseño.
4. Para evitar las brechas, StaggeredGridLayoutManager puede compensar los tramos de forma independiente o mover elementos entre los tramos. Puede controlar este comportamiento a través de setGapStrategy(int) .

Diseño de cuadrícula

1. Esto pone a sus hijos en una cuadrícula rectangular.
2. La cuadrícula se compone de un conjunto de líneas infinitamente finas que separan el área de visualización en celdas.
3. Los niños ocupan una o más celdas contiguas, según lo definen sus parámetros de diseño rowSpec y columnSpec .

Answer 5

Vista de cuadrícula : es un grupo de ViewGroup que muestra los elementos en una cuadrícula desplazable bidimensional. En esto cada Grid es del mismo tamaño (Altura y ancho). La vista de cuadrícula muestra elementos simétricos a la vista.

Vista de cuadrícula escalonada : Básicamente es una extensión de la Grid View pero en esta cada cuadrícula es de tamaño variable (alto y ancho) . La vista de cuadrícula escalonada muestra elementos asimétricos a la vista.

Tutorial para implementar Staggered Grid View:

1. Vista de cuadrícula escalonada
2. Diseño de mampostería de Pinterest Vista de cuadrícula escalonada