Гетерогенный вид сетки Android, такой как pinterest?

Можно ли создать макет, похожий на pinterest, на Android с помощью GridView? Я хочу создать галерею изображений, используя GridView, но я не уверен, что это хорошее решение. Я не хочу создавать три LinearLayouts (я думаю, что это решение не очень хорошее: Pinterest стиль просмотра списка или сетки в Android)

Есть идеи ;)?

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


person radzio    schedule 31.07.2012    source источник
comment
орех конечно, если это gridview на картинке.   -  person Shark    schedule 31.07.2012
comment
GridView не будет работать здесь, потому что height не одинаков для всех изображений.   -  person MAC    schedule 31.07.2012
comment
Для меня это действительно похоже на три столбца изображений.   -  person Shark    schedule 31.07.2012
comment
3 ListViews может быть лучше, потому что вы можете начать переработку. Однако это также может привести к нежелательному поведению пользовательского интерфейса, учитывая, что вы можете прокручивать каждый столбец независимо.   -  person Che Jami    schedule 31.07.2012
comment
Я думаю, что лучшим подходом было бы создать собственное представление и самостоятельно обрабатывать код отрисовки.   -  person Che Jami    schedule 31.07.2012
comment
@CheJami: наверное, это единственное решение;/   -  person radzio    schedule 31.07.2012
comment
@radzio: ты нашел решение?   -  person Nam Vu    schedule 15.10.2012


Ответы (7)


Создайте макет, как показано ниже.

<ScrollView...>
<LinearLayout....
   android:id="@+id/linear1"
   orientation="horizontal">

   <LinearLayout....
     android:id="@+id/linear2"
     android:layout_weight="0.33"
     orientation="vertical">

   <LinearLayout....
     android:id="@+id/linear3"
     android:layout_weight="0.33"
     orientation="vertical">

   <LinearLayout....
     android:layout_weight="0.33"
     orientation="vertical">

</LinearLayout>
</ScrollView>

Теперь динамически добавляйте ImageView в макеты.

linear1 = (LinearLayout) findViewById(R.id.linear1);
linear2 = (LinearLayout) findViewById(R.id.linear2);
linear3 = (LinearLayout) findViewById(R.id.linear3);

for(int i=0;i<n;i++)
{
   ImageView iv = new ImageView(this);
   iv.setImageResource(R.id.icon);

   int j = count % 3;  <---- 
   if(j==0)
       linear1.addView(iv);
   else if(j==1)
       linear2.addView(iv);
   else
       linear3.addView(iv); 
}

вывод:

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

person MAC    schedule 31.07.2012
comment
Я знаю, что это возможно, но я не хочу использовать LinearyLayout из-за плохой переработки вида. Это решение не будет работать со многими изображениями. - person radzio; 31.07.2012
comment
хорошо, как хотите, но я сделал это, и я загружаю 120 изображений с URL-адреса - person MAC; 31.07.2012
comment
Это очень аккуратное решение. - person jmishra; 31.07.2012
comment
Хм... Я проверю это решение после работы. Может быть, это то, что мне нужно ;-) - person radzio; 31.07.2012
comment
@downvoter: пожалуйста, объясните причину понижения голоса - person MAC; 28.09.2012
comment
быстро ли запускается без проблем с потреблением памяти? - person Nam Vu; 15.10.2012
comment
@MAC, пожалуйста, помогите мне с той же проблемой - person Chintan Khetiya; 28.11.2012
comment
@chintankhetiya: в чем проблема? - person MAC; 28.11.2012
comment
@downvoter не хотел бы назвать причину понижения голоса - person MAC; 13.12.2012
comment
@MAC Как я могу проверить, какой ImageView был нажат с помощью этого кода? Я хочу иметь возможность точно различать, какой из них был нажат, и перейти к другому действию (например, переменная положения даст мне в onItemClickListener) - person Kgrover; 02.04.2013
comment
@Kgrover: используйте iv.setTag(""+i) и установите onClick() и используйте v.getTag() - person MAC; 02.04.2013
comment
Я получил спасибо. Это сработало отлично. - person Kgrover; 02.04.2013
comment
это решение будет работать, но если элементов много, это может вызвать как медленную инициализацию, так и OOM . я добавил возможное решение, которое использует ту же идею адаптера. - person android developer; 09.09.2013
comment
Лучшая библиотека github.com/maurycyw/StaggeredGridViewDemo - person Pratik Butani; 08.02.2014

Я также играл с этим (использовал LinearLayout), но в конце у меня было много проблем с потреблением памяти (особенно когда мне приходилось перезагружать элементы). Я остановился на простом решении, которое использует два синхронизированных ListViews. Таким образом, я могу использовать внутреннее кеширование, что очень помогает. Для этого мне пришлось использовать OnTouchListener и OnScrollListener, которые синхронизируют списки. Вот пример:

https://github.com/vladexologija/PinterestListView

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

person vladexologija    schedule 21.09.2012
comment
Вы можете опубликовать пример кода для этого? - person eugene; 16.11.2012
comment
Что именно вам нужно? Весь источник активности? - person vladexologija; 16.11.2012
comment
на самом деле ничего больше, чем приведенный выше код. Будучи начинающим разработчиком Android, мне потребуется некоторое время, чтобы понять концепции, которые вы изложили. - person eugene; 19.11.2012
comment
Ну вот. Есть еще много вещей, которые нужно сделать (исправить несколько ошибок, оптимизировать, упростить...), но эта версия работает нормально. Что наиболее важно, он использует переработку! - person vladexologija; 21.11.2012
comment
@vladexologija Большое спасибо за такой замечательный пост. - person San; 03.01.2014
comment
@vladexologija Я хочу установить изображения с моей SD-карты. Поскольку вы использовали массив Integer, я не могу передать путь к изображениям. Любая идея о том, как этого добиться ?? Это было бы очень полезно. Заранее спасибо. - person San; 04.01.2014
comment
Что делает этот пример, так это то, что он просто синхронизирует два списка. Если вы создаете любые два списка с их пользовательскими адаптерами (в вашем случае загрузка изображения с некоторой отложенной загрузкой), они должны работать с небольшими изменениями в опубликованном коде. - person vladexologija; 06.01.2014
comment
кто-нибудь знает, как обрабатывать onItemClick, у меня это не работает - person fish40; 05.09.2014

Некоторые полезные библиотеки для реализации представления сетки в стиле Pinterest:

person petrnohejl    schedule 18.09.2013
comment
Есть пример с горизонтальной прокруткой? - person Gorets; 05.02.2014
comment
использовал библиотеку staggeredGridView в своем приложении play.google.com/store /apps/details?id=com.taureano.amazicons . Отлично сработало, поэтому проголосуйте за этот ответ. В библиотеке есть небольшая ошибка в изменении ориентации, но я нашел исправление в переполнении стека. - person Swati Rawat; 15.06.2014

Для недавних посетителей этого вопроса я бы предложил использовать RecyclerView с StaggedGridLayoutManager. У него более чем достаточно функций и гибкости.

person MohK    schedule 13.05.2015

Автономный помощник для синхронизации прокрутки двух ListView: https://gist.github.com/yanchenko/6179793.

person yanchenko    schedule 24.01.2013

Я использую эту библиотеку: https://github.com/huewu/PinterestLikeAdapterView.

Это работает очень хорошо. Единственная проблема, которая у меня есть, заключается в том, что setOnItemClickListener и setOnItemLongClickListener немного глючат, поэтому я устанавливаю прослушиватели непосредственно в convertView.

person emerix    schedule 09.08.2013

Эта библиотека взята из приложения Etsy: https://github.com/etsy/AndroidStaggeredGrid.

person HannahMitt    schedule 03.01.2014