Перейти к содержанию
  • Регистрация
  • 0
Rusland

Алфавитный скроллинг для ListView

Вопрос

Как можно сделать алфавитный скроллинг подобно этому?

 

3S0YI.jpgandroid-listview-fastscroll-styling-589x

 

Если список очень большой, то прокрутка происходит очень долго. Есть какие-нибудь идеи?

Изменено пользователем Rusland

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Рекомендуемые сообщения

  • 0

post-59-0-84662800-1450338958_thumb.png

TListBox

alphLB.zip

 

TListView

alphLV.zip

Изменено пользователем ZuBy

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0

Готового компонента под это как я понимаю нет? :)

 

как всегда идея - поместить панель поверх всего и двигать ее

Не понял идеи )

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0

TListBox

attachicon.gifalphLB.zip

 

TListView

attachicon.gifalphLV.zip

Спасибо. Сейчас поглядим :)

ZuBy, это не совсем то что я имел в виду )

Мне хочется ускорить прокрутку списка, так как элементов много. Это моя вина, не правильно сформулировал вопрос )

Поищу видео чтобы объяснить что я имею в виду 

Изменено пользователем Rusland

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0

Насколько я понял нужна такая штука
 

Screenshot_2015_12_17_12_45_55.png

В "LBMouseUP" скрольте до того места, куда вам надо попасть

ListBoxAtoZ.zip

Изменено пользователем Alexander616

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0

Вот снял видео с одного приложения

https://yadi.sk/i/oQNGe9t9mHgFM

Изменено пользователем Rusland

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0

 

Насколько я понял нужна такая штука

Alexander616, сейчас посмотрю :)

 

Судя по видео я тоже неправильно понял вопрос, извиняюсь

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0

Вот снял видео с одного приложения

https://yadi.sk/i/oQNGe9t9mHgFM

не понял, чем отличается от моего?)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0

Тут вот в чем дело - список должен быть отсортированным по алфавиту, о чем я забыл упоминуть.

 

не понял, чем отличается от моего?)

Постараюсь пояснить...

На видео видно что справа есть скроллинг (в alph**.zip такого нет), по которому можно очень быстро перемещаться вверх/вниз (если двигаешь пальцем по списку - скроллируется со стандартной скоростью, а когда двигаешь пальцем по этому скролл-у то перемещения в несколько раз быстрее)... подобное есть на iOs - там можно выбрать букву и список автоматически перемещается на на item с названием начинающимся на эту букву (см. первую картинку первого поста)... я всегда думал что этот алфавит и скролл - есть нечто неотделимое, поэтому и назвал тему Алфавитный скроллинг :)

В рамках названия темы ваши примеры как раз то что нужно.

 

Создам пожалуй другую тему с название Быстрый скроллинг по ListView. 

 

Alexander616, ваш пример как раз делает почти то что нужно... надо как-то связать с основным списком чтобы он скроллировался в зависимости от выбранной буквы и перемещение алфавита должно быть в обратную сторону :)

 

 

PS. посмотрите в андройде в стандартном приложении Контакты есть такой скроллер... надеюсь теперь понятно что я имел в виду? ))

Изменено пользователем Rusland

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0

 

Alexander616, ваш пример как раз делает почти то что нужно... надо как-то связать с основным списком чтобы он скроллировался в зависимости от выбранной буквы и перемещение алфавита должно быть в обратную сторону :)

 

 

PS. посмотрите в андройде в стандартном приложении Контакты есть такой скроллер... надеюсь теперь понятно что я имел в виду? ))

Не совсем понял "перемещение алфавита должно быть в обратную сторону"

в моём примере, я связал с основным, но возможно есть и более оптимальный способ. При LBMouseMove я обхожу весь основной листбокс и ищу первую запись, которая начинается на выбранную букву, скорее всего при большом количестве записей будет подвисать

PS. Если уменьшить размер лист айтема в алфавитном листбоксе, будет почти тоже самое что и в списке контактов)

ListBoxAtoZ.zip

Изменено пользователем Alexander616

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0
Alexander616ваш пример больше похож на вариант как это сделано в iOS, но тогда нужно чтобы весь алфавит умещался на экране. (Можно ли это сделать с ListBox?)  А сейчас при скроллировании по алфавиту  сам алфавит ездит туда сюда )

 

Вариант ZuBy больше напоминает как сделано в Android... надо только отдельный скроллер прикрутить.

Сейчас буду думать как лучше ))

 

Посмотрел еще раз пример ZuBy alphLB. Сейчас заметил что видно наличие ползунка скроллера (он почти сливается с фоном), но "ухватиться" за него, чтобы ускоренно скроллить, не получается. :(

Изменено пользователем Rusland

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0

 

Alexander616ваш пример больше похож на вариант как это сделано в iOS, но тогда нужно чтобы весь алфавит умещался на экране. (Можно ли это сделать с ListBox?)  А сейчас при скроллировании по алфавиту  сам алфавит ездит туда сюда )

 

Вариант ZuBy больше напоминает как сделано в Android... надо только отдельный скроллер прикрутить.

Сейчас буду думать как лучше ))

 

Посмотрел еще раз пример ZuBy alphLB. Сейчас заметил что видно наличие ползунка скроллера (он почти сливается с фоном), но "ухватиться" за него, чтобы ускоренно скроллить, не получается. :(

 

как вариант, можно извратиться и посчитать высоту экрана, разделить на 26 (либо сколько букв/символов/цифр вам надо) и установить высоту каждого айтема в листбоксе отдельно, чтобы не надо было прокручивать алфавитный скролер

Изменено пользователем Alexander616

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0

уместить у меня весь алфавит в LB так и не получилось, единственное решение вижу объединить некоторые буквы

использовал русский алфавит

 

- сортировка ListView

- формирование ListBox в зависимости от контента ListView

alphLV.zip

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0

как вариант, можно извратиться и посчитать высоту экрана, разделить на 26 (либо сколько букв/символов/цифр вам надо) и установить высоту каждого айтема в листбоксе отдельно, чтобы не надо было прокручивать алфавитный скролер

Хотелось бы избежать "извращений" :)

 

 

уместить у меня весь алфавит в LB так и не получилось, единственное решение вижу объединить некоторые буквы

использовал русский алфавит

 

- сортировка ListView

- формирование ListBox в зависимости от контента ListView

attachicon.gifalphLV.zip

За сортировку ListView отдельное спасибо )

Все же я не понимаю, и там где пример с ListView и там где пример ListBox видно полосу прокрутки и ползунок (при начале прокрутки)... в примере с ListView я даже могу его ухватить и перемещать (до тех пор пока он не пропадет), но скроллинга списка не происходит. Почему так?

 

Кстати, а почему Ё вверх алфавита лезет? И что за свойство AutoTapScroll у ListView? Может от него что-то зависит?

Изменено пользователем Rusland

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0

Запустил alphLV из под Windows - встроенный скроллер работает! Выходит что он не работает только под Android? (или у меня только не работает и поэтому у всех возникает вопрос "а что не так?") :)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0
Кстати, а почему Ё вверх алфавита лезет?

 

Почему буква вверху, для меня тоже загадка

 

 

Запустил alphLV из под Windows - встроенный скроллер работает! Выходит что он не работает только под Android? (или у меня только не работает и поэтому у всех возникает вопрос "а что не так?") :)

да на мобильных он не работает, это просто индикатор положения

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0

да на мобильных он не работает, это просто индикатор положения

 

Раз такое дело, то решил прикрутить к ListView  ScrollBar. Сразу возникло два новых вопроса:

1.) Можно ли скрыть этот самый индикатор положения? (лучше бы конечно чтобы Embarcadero довела его до ума)

    В ListBox-е вроде можно убрать c помощью ShowScrollBars (но не проверял). А как в ListView?

2.) Как при скроллировании пальцем по списку переносить в ScrollBar текущее положение ползунка? 

 

PS. Попробовал в OnTimer написать ScrollBar1.Value:=ListView1.getFirstVisibleItemIndex;

      работает, но как-то корявенько выходит :)

alphLVS.zip

Изменено пользователем Rusland

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0

2.) Как при скроллировании пальцем по списку переносить в ScrollBar текущее положение ползунка? 

 

PS. Попробовал в OnTimer написать ScrollBar1.Value:=ListView1.getFirstVisibleItemIndex;

      работает, но как-то корявенько выходит :)

 

да вроди если в ListView1ScrollViewChange 

ScrollBar1.Value:=ListView1.getFirstVisibleItemIndex;

посадить, всё нормально, зачем таймер?

Изменено пользователем Alexander616

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0

да вроди если в ListView1ScrollViewChange 

ScrollBar1.Value:=ListView1.getFirstVisibleItemIndex;

посадить, всё нормально, зачем таймер?

Если посадить на ListView1ScrollViewChange, то будет вечный конфликт ) Изменение Scrollbar1.Value влечет вызов ScrollBar1Change где происходит скроллирование LV. Следовательно будет вызван ListView1ScrollViewChange... получится бесконечный цикл )

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0
 

 

да вроди если в ListView1ScrollViewChange 

ScrollBar1.Value:=ListView1.getFirstVisibleItemIndex;

посадить, всё нормально, зачем таймер?

Если посадить на ListView1ScrollViewChange, то будет вечный конфликт ) Изменение Scrollbar1.Value влечет вызов ScrollBar1Change где происходит скроллирование LV. Следовательно будет вызван ListView1ScrollViewChange... получится бесконечный цикл )

 

ну тогда можно взять переменную, и переключать её когда меняется из ListView

ListView1ScrollViewChange:

ScrollBarChange := True;
ScrollBar1.Value := ListView1.getFirstVisibleItemIndex;
ScrollBarChange := False;

ScrollBar1Change:
  if not ScrollBarChange then
    ListView1.ScrollTo(Round(ScrollBar1.Value));



 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0

Кстати на скролбаре что ползунок, его никак не увеличить? Из-за того что он меньше чем ползунок listview, образуется "слепая зона", в которой двигаешь ползунок а список остаётся на месте 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0

Alexander616, действительно c помощью доп. переменной работает.

А как избавиться от "слепой зоны" не знаю, самому интересно.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0

Кстати, стандартный ScrollBar можно спрятать, если скопировать в свой проект FMX.ListView.pas

и изменить 

const
...
{$IFDEF ANDROID}
  DefaultScrollBarWidth = 0; // вместо 7
{$ENDIF}

Осталось решить проблему "слепой зоны" ползунка при скроллировании внизу списка.

 

PS. Ну и желательно реализовать плавность хода скроллера (

alphLVS.zip

Изменено пользователем Rusland

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Присоединяйтесь к обсуждению

Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.

Гость
Ответить на вопрос...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.


  • Похожий контент

    • От krapotkin
      Всем привет!
      После долгого творческого запоя я запилил альфу либы, которая позволяет юзать обычный, не-генномодифицированный ListView.
      Данные подаются в виде модели данных, описание раскладки итема лежит в JSON.

      Для работы пишется примитивный наследник класса-адаптера, который биндит данные модели на элементы из JSON. Я решил, что руками делать это дешевле чем через RTTI
      { TMyAdapter } procedure TMyAdapter.SetupDrawableContent(const ADrawable: TListItemDrawable; const AData: TMyData); begin if SameText( ADrawable.Name, 'text') then begin (ADrawable as TListItemText).Text := AData.Text; end else if SameText( ADrawable.Name, 'detail') then begin (ADrawable as TListItemText).Text := AData.Detail; end else if SameText( ADrawable.Name, 'balance') then begin (ADrawable as TListItemText).Text := FormatFloat('0.00', AData.Balance); end else if SameText( ADrawable.Name, 'reserved') then begin (ADrawable as TListItemText).Text := FormatFloat('0.00', AData.Reserved); end end; Главная хитрость и отличие от стандартного DynamicAppearance+LiveBinding - переменная высота итемов ListView и использование арифметики в описании раскладки.
      Можно указать Detail.Y  = Text.Bottom + 5, ItemHeight = Detail.Bottom + 10, Detail.W = ItemWidth/2 - X
      {"Kind":"rect","Name":"BonusRect","Value":"", "Place":{"X":"itemwidth*3/4","Y":"Text.Y","W":"ItemWidth/4-5","H":"50"}, "BorderColor":"#FF005500", "Color":"lime", "LineWidth":3}, {"TextHAlign":2,"TextVAlign":1,"Kind":"text","Name":"Balance","Value":"", "Place":{"X":"BonusRect.x+5","Y":"Text.Y","W":"BonusRect.w-10","H":"50"}, "WordWrap":true, "Color" :"Black", "Font":{"Size":18,"Style":""}} ], "ItemHeight":"detail.bottom+10", Это дает довольно гибкую систему. Не на все случаи жизни, но все, что нужно, можно после автоматической раскладки дополнительно приписать в OnUpdateObjects 
      Код для работы примерно такой
      procedure TForm1.FormCreate(Sender: TObject); begin data:= TMyDataList.CreateFromFile(ExePath()+'data.json'); // загрузка в модель данных Adapter := TMyAdapter.Create(lvWallets, data.Items, ExePath()+'pattern.json'); // создание адаптера и загрузка шаблона Adapter.Pattern.SetupListView(lvWallets); // задать отступы и разную мелочь Adapter.ResetView(); // здесь в цикле из модели данных создается нужное количество итемов ListView end; procedure TForm1.lvWalletsUpdatingObjects(const Sender: TObject; const AItem: TListViewItem; var AHandled: Boolean); begin Adapter.SetupContent(AItem); // загрузить текст, картинки и другое содержимое в элементы итема Adapter.Pattern.DoLayout(AItem); // поправить раскладку в соответствии с содержимым элементов итема end; Для использования кроме стандартных - текст, картинка, кнопка - создано несколько дополнительных элементов итема - прямоугольник, круг, уголок, линия.
      Отличие от ModernLV - , 
      1) все происходит без правки системных файлов
      2) пока нет колонок и других особых изысков.
      На результат работы смотреть тут. Исходники пока не причесаны, будут чуть позже
       
      ListViewFramework.7z
    • От Dmitry Stolyarov
      Добрый день, подскажите, пжл, новичку...
      Есть ListView и ImageList с двумя картинками. В ListView Item добавлен Image. ListView заполняю из БД и пытаюсь вывести картинку в зависимости от значения поля БД, но в независимости от значения БД выводится одна и та же картинка.. Такое нельзя провернуть?
      procedure TForm6.ListViewNAMEUpdateObjects(const Sender: TObject;
        const AItem: TListViewItem);
        var IItem:TListItemImage;
      begin
       IItem:= aItem.Objects.FindDrawable('Image4') as TListItemImage;
      if (IItem<>nil) then
      with FDQuery1 do
       begin
       First;
       while not Eof do
        begin
         if FDQuery1FK_PRICE.AsInteger = 1 then begin
          IItem.ImageIndex:=1
         end else
            begin
               IItem.OwnsBitmap := True;
           IItem.ImageIndex:=0;
            end;
         Next;
        end;
       end;
      end;
       
    • От gresaggr
      Добрый день.
      Как под FMX в ListView сделать подчеркивание Detail в рантайме?
      Пытался делать так:
      LV.ItemAppearanceObjects.ItemObjects.Detail.Font.Style := [TFontStyle.fsUnderline]
      но не срабатывает.
      P.S. Возможно это применить не ко всем строкам, а только к некоторым?
    • От ice donkey
      Заполняю ListView в рантайме:
       
       
      LiveBindings не подходит, поэтому есть вопрос: а как задать фиксированный заголовок - чтобы в списке все Items, начинающиеся с буквы А были как бы объединены под одним заголовком А? Который  в свою очередь смещался бы только заголовком Б (с Items, которые на букву Б) и так далее.
       
      Пример:
       
    • От Olexander Sagaydak
      Летом 2016 вопрос отображения объектов в ListView при создании Items уже обсуждался. Хочу ещё раз обсудить этот вопрос. А именно:
      Простой код 
      ListViewItem := ListView.Items.Add;
      ListViewItem.Objects.AccessoryObject.Visible := false; (или true, не важно)
      вторая строка не работает если до выполнения, ListView ни одного раза не отображался. Если же отображался хотя бы один раз - всё нормально.
      В предыдущих обсуждениях Krapotkin рекомендовал Resize и OnUpdateObjects. Если нет идей проще, то, конечно, воспользуюсь.  
       
    • От x11
      Если у элементов, идущих подряд одинаковый текст, то текст скрывается.
      Как это это отключить?
       
    • От x11
      Не понять, ни в справке найти, ни примеров, как получить текст из header.
      Как получить текст из какого-то элемента, есть пример:
      lvContacts.Items[li.Index].Objects.FindObjectT<TListItemText>('textTel').Text; а для заголовка ил подвала не нахожу примеров
    • От Erlan_krg
      Всем привет! Встретился с одной проблемой. Удаляю Item у ListView по нажатию кнопки, которая находится на ListViewItem
      procedure TfmAppointment.lvSelectedServicesButtonClick(const Sender: TObject;
        const AItem: TListItem; const AObject: TListItemSimpleControl);
      begin
          lvSelectedServices.BeginUpdate;
          if lvSelectedServices.ItemCount > 0 then
              lvSelectedServices.Items.Delete(AItem.Index);
          lvSelectedServices.EndUpdate;
      end;
      итем удаляется, но потом выскакивает ошибка Access violation at address 60BCB318 и то се бо се
       
      у ListView ItemAppearance выставлен на DynamicAppearance
      помимо родного объекта Text добавил еще один объект Text и кнопку
       
      но фишка в чем, если убрать дополнительный объект Text с ListWiewItem и удалить итем то ошибка не выскакивает)
       
      что за прикол?
    • От sinuke
      Доброго дня, форумчане
      Возникла проблема с тем, чтобы поменять местами два итема в ListView. ListView.Items не имеет метода Exchange, сами итемы не имеют метода Assign чтобы можно было один итем клонировать в другой / удалить / вставить
      У кого какие мысли? Как реализовать?
      Delphi 10.2 Tokyo
       
    • От x11
      Не могу понять, как записать текст в Footer text
       
       

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×
×
  • Создать...