Android: как создать сетку галереи изображений, похожих на Facebook?

Я пытаюсь реализовать сетку галереи, похожую на facebook, где элементы имеют разные размеры:

введите здесь описание изображения

Я пытался использовать разные библиотеки / решения, но пока безуспешно:

  1. Я пробовал использовать AsymemetricGridView. Но проблема с этой реализацией заключается в том, что после выброса адаптера в сетке остаются пустые мертвые зоны.

  2. Я также подумал об использовании StaggeredGridLayoutManager и RecycleView, но элементы в этом случае не имеют равных или половинных размеров по сравнению с другими элементами, как это реализовано в галерее Facebook.

Сейчас я подумываю предоставить в адаптере разные держатели представлений для разных случаев, но мне эта идея очень не нравится. Как лучше подойти к этой задаче?


android gridview image-gallery staggered-gridview staggeredgridlayout
person Emil Adz    schedule 28.03.2016    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Наконец, я решил использовать библиотеку TwoWayView.

Это можно получить по адресу: https://github.com/lucasr/twoway-view

В своем коде я внес следующие важные изменения:

Добавлен TwoWayView в макет xml:

 <org.lucasr.twowayview.widget.TwoWayView
            android:id="@+id/twvGrid"
            android:background="@android:color/white"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            style="@style/TwoWayView"
            app:twowayview_layoutManager="SpannableGridLayoutManager"
            app:twowayview_numColumns="3"
            app:twowayview_numRows="3" />

В коде я внес следующие изменения:

private TwoWayView mTwvGrid;
.........

 mTwvGrid = (TwoWayView) findViewById(R.id.twvGrid);
    final Drawable divider = getResources().getDrawable(R.drawable.divider);
    mTwvGrid.addItemDecoration(new DividerItemDecoration(divider));


    mTwvGrid.setOnScrollListener(new RecyclerView.OnScrollListener() {
        @Override
        public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
            RequestManager glideRequestManager = Glide.with(TimelineStoryActivity.this);
            if (newState == RecyclerView.SCROLL_STATE_IDLE || newState == RecyclerView.SCROLL_STATE_SETTLING) {
                glideRequestManager.resumeRequests();
            } else {
                glideRequestManager.pauseRequests();
            }
        }

        @Override
        public void onScrolled(RecyclerView recyclerView, int dx, int dy) {}
    });
.......

if (mAdapter == null) {
            mAdapter = new TimelineStoryRecycleAdapter(this, mStory, mTwvGrid, this);
            mTwvGrid.setAdapter(mAdapter);
        } else {
            mAdapter.setStory(mStory);
        }

Вот конечный результат: введите описание изображения здесь

person Emil Adz    schedule 29.03.2016
comment
@Emil Adz может опубликовать код вашего TimelineStoryRecycleAdapter, для этого представления требуется ListAdapter, а в текущем списке приложений Android - это интерфейс, поэтому, пожалуйста, помогите о том, как разработать и применить адаптер - person Ak9637; 24.01.2017
comment
@ Ak9637, извини, не могу, так как у меня больше нет этого класса. - person Emil Adz; 25.01.2017
comment
Хорошо, не могли бы вы объяснить это, если возможно: для этого представления требуется ListAdapter, а в текущем списке Android-приложений - это интерфейс, поэтому, пожалуйста, помогите, как спроектировать и применить адаптер - person Ak9637; 25.01.2017
comment
twoway-view намного проще и быстрее реализовать, чем AsymemetricGridView. - person Edijae Crusar; 09.10.2017
comment
эта библиотека сейчас не работает. любое другое решение? - person Krutika Chotara; 30.09.2020

arrow_upward
1
arrow_downward

Для этого вы можете использовать recyclerview с StaggeredGridLayoutManager. StaggeredGridLAyoutManager уже обрабатывает это, также вы можете использовать setFullSpan для изображения, чтобы использовать всю строку

person JAAD    schedule 28.03.2016
comment
Если вы посмотрите на раздел номер 2 в моем вопросе, вы узнаете, что я пробовал этот вариант, но есть проблема с высотой элементов в сетке. Мне нужно, чтобы рост был в два раза больше. - person Emil Adz; 28.03.2016
comment
чья высота вам нужна, вы можете легко установить фиксированную высоту для просмотра изображения, чтобы достичь этого, я уже видел вашу вторую точку - person JAAD; 28.03.2016