Android — разница между Gridlayout и Staggered Gridlayout

Сетка: это ViewGroup, отображающий элементы в двумерной сетке с возможностью прокрутки. В этом случае каждая сетка имеет одинаковый размер (высота и ширина). представление сетки показывает симметричные элементы в представлении.

Представление сетки в шахматном порядке. По сути, это расширение Grid View, но в нем каждая сетка имеет разный размер (высоту и ширину). Представление в шахматном порядке показывает асимметричные элементы в поле зрения.

Учебное пособие по реализации представления в шахматном порядке:

1. Представление в шахматном порядке
2. Раскладка Pinterest Masonry в шахматном порядке

Работа в Oodles Technologies научила меня работать в шахматном порядке. Я поделюсь этим.

StaggeredGridLayout — это LayoutManager, он похож на GridView, но в этой сетке каждое представление имеет свой собственный размер (высоту и ширину). Он поддерживает как вертикальные, так и горизонтальные макеты.

Ниже приведены некоторые основные шаги для создания шахматной сетки:

1) Создайте представление.

Как мы знаем, StaggeredGrid не является прямым представлением, это LayoutManager, который размещает дочерние элементы в шахматном порядке. Мы используем RecyclerView в качестве представления для шахматной сетки. Вот наш RecyclerView в макете:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

2) Установите StaggeredGridLayout LayoutManager.

Как только наше представление будет готово, давайте воспользуемся LayoutManager для создания сетки в представлении:

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) Адаптер для увеличения представлений StaggeredGrid.

Чтобы раздуть данные в виде сетки, нам сначала нужен макет, который будет представлять эти данные. Мы используем CardView для этого, и макет:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardcornerradius="4dp"
        app:cardusecompatpadding="true">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/colorPrimary"
            android:orientation="vertical">

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

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

        </LinearLayout>

    </android.support.v7.widget.CardView>

</LinearLayout>

После того, как мы настроим все основные шаги, пришло время завершить нашу основную деятельность. Вот полный код MainActivity:

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

Макет сетки (уровень API 14): макет, который размещает дочерние элементы в прямоугольной сетке. Количество строк и столбцов в сетке может быть объявлено с помощью свойств android:rowCount и android:columnCount. Однако, как правило, если количество столбцов объявлено, GridLayout выводит количество строк на основе количества занятых ячеек, что делает ненужным использование свойства rowCount. Точно так же ориентация GridLayout может быть опционально определена через свойство android:orientation.

Я думаю, что нет отдельного StaggeredGridLayout. Вот что у нас есть

StaggeredGridLayoutManager . Это один из менеджеров компоновки, используемых в Recyclerview.A LayoutManager, который размещает дочерние элементы в шахматном порядке. Он поддерживает горизонтальное и вертикальное расположение, а также возможность размещать дочерние элементы в обратном порядке.

StaggeredGridView. StaggeredGridView позволяет пользователю создавать GridView с неравномерными строками, похожими на то, как выглядит Pinterest. Включает собственные OnItemClickListener и OnItemLongClickListener, селектор и восстановление фиксированной позиции. Посмотрите это. пример.

Раскладка в шахматном порядке

1. Это выкладывает детей в шахматном порядке.
2. Он поддерживает горизонтальное и вертикальное расположение, а также возможность размещать дочерние элементы в обратном порядке.
3. Смещенные сетки, скорее всего, будут иметь пробелы по краям макета.
4. Чтобы избежать пробелов, StaggeredGridLayoutManager может независимо смещать диапазоны или перемещать элементы между диапазонами. Вы можете управлять этим поведением через setGapStrategy(int).

Макет сетки

1. Это размещает своих детей в прямоугольной сетке.
2. Сетка состоит из набора бесконечно тонких линий, разделяющих область просмотра на ячейки.
3. Дети занимают одну или несколько смежных ячеек, как определено их параметрами макета rowSpec и columnSpec.

Шаблон сетки включает несколько столбцов с несколькими строками разного размера.

Он обеспечивает гибкое представление столбца/строки с верхним и нижним колонтитулом и выглядит довольно простым в реализации, хотя пользователям Gradle будет легче, чем тем, кто работает с Eclipse и Ant. Так выглядит представление в приложении Etsy Github, для которого оно было разработано.

Принимая во внимание, что GridLayout — это макет, который размещает его дети в прямоугольной сетке.

Он был представлен на уровне API 14 и недавно был перенесен в библиотеку поддержки. Его основная цель — решить проблемы с выравниванием и производительностью в других макетах. Ознакомьтесь с этим руководством, если вы хотите узнать больше о GridLayout.