ModernListView 라이브러리 – 커스터마이징 가능한 강력한 크로스 플랫폼 라이브러리 활용 방법

원문 링크: https://blogs.embarcadero.com/discover-the-powerful-custom-modernlistview-library-for-cross-platform-development-in-delphi-firemonkey/
원문 작성자: 콘스탄틴 토모브 (Konstantin Tomov)

ModernListView 라이브러리 관련하여 www.fmxexpress.com 에 올라온 아티클이 있어 공유합니다.

“커뮤니티 사용자 rzaipov1990은 깃허브(Github)에 델파이 10 베를린에 있는 파이어몽키용 ListView 컴포넌트를 커스터마이징한 버전을 올려놓았습니다. ListView는 모든 모바일 앱에서 사용되는 핵심적인 컴포넌트입니다. 개발자는 늘 컴포넌트를 선택해야만 합니다. 컴포넌트는 원하는 대로 구성 변경이 가능하면서도 사용과 구현이 쉬워야 합니다. 공개된 최신 ListView 컴포넌트는 델파이 10 베를린 버전의 파이어몽키에서 사용 가능한 것으로 안드로이드, iOS, OSX, 윈도우용 앱 개발이 가능합니다.”

ModernListView 라이브러리의 기능들은 어떤 게 있을까요?

특징적인 기능 중 하나는 수평(horizontal)과 수직(vertical) 모드를 모두 지원한다는 점입니다.

목록에는 셀(항목들)을 수평으로 표시할 수 있습니다.

또는 항목을 세로로 표시할 수도 있죠. 애플리케이션의 룩앤필을 디자인할 때, 이 컴포넌트를 활용하면 모든 그래픽 요소들을 원하는 대로 커스터마이징할 수 있고, 다음과 같은 이벤트들도 설정할 수 있습니다: SetColorItemSelected, SetColorItemFill, SetColorBackground, SetColorItemSeparator, SetColorText, SetColorTextSelected, SetColorTextDetail, SetColorHeader, SetColorTextHeader 등 여러 속성들을 활용할 수 있습니다.

속성은 따로 설명할 필요는 없으니 여기서는 다루지 않겠습니다. AutoColumns와 ColumnWidth 속성을 사용해보세요. 그러면 이 컴포넌트는 목록을 채울 때 가장 알맞은 모양과 위치를 자동으로 계산해줍니다 (많은 항목을 처리할 때 굉장히 유용하죠).

표준 동작 이벤트와는 별개로, ListView에서 OnColumnClick를 활용할 수 있습니다. 스크롤 바 숨기기/보여주기 옵션도 있죠 (ListView.ShowScrollBar). 항목 구분을 위한 들여쓰기 설정도 가능하구요 (ListView.SeparatorLeftOffset, ListView.SeparatorRightOffset).

ModernListView 라이브러리의 비용은 얼마일까요?

이 컴포넌트는 무료입니다. 그리고 멋진 데모도 함께 제공되죠. 현재는 파이어몽키에서만 사용이 가능합니다. 멀티-디바이스 애플리케이션 개발을 계획하고 있다면 매우 유용한 컴포넌트입니다.


ModernListView 라이브러리를 사용해봅시다!

이 컴포넌트에 대해 좀 더 자세히 알아볼까요? 구성 요소, 설계, 기능을 살펴보겠습니다.


디자인 편집 효과, 컬러라이저 (Colorizer)

  • ListView1.SetColorItemSelected(TAlphaColorRec.Orangered);
  • ListView1.SetColorItemFill(TAlphaColorRec.Whitesmoke);
  • ListView1.SetColorItemFillAlt(TAlphaColorRec.Lightgrey);
  • ListView1.SetColorBackground(TAlphaColorRec.Whitesmoke);
  • ListView1.SetColorItemSeparator(TAlphaColorRec.Red);
  • ListView1.SetColorText(TAlphaColorRec.Darkmagenta);
  • ListView1.SetColorTextSelected(TAlphaColorRec.Blueviolet);
  • ListView1.SetColorTextDetail(TAlphaColorRec.Darksalmon);
  • ListView1.SetColorHeader(TAlphaColorRec.Crimson);
  • ListView1.SetColorTextHeader(TAlphaColorRec.Whitesmoke);
  • ListView1.SetColorTextHeaderShadow(TAlphaColorRec.grey);
  • ListView1.SetColorPullRefresh(TAlphaColorRec.Lime);
  • ListView1.SetColorPullRefreshIndicator(TAlphaColorRec.Limegreen);
  • ListView1.SetColorStretchGlow(TAlphaColorRec.Limegreen);

항목들을 원하는 색상으로 설정하기

수평 모드 (Horizontal Mode)

  • ListView1.Horizontal := true;

컬럼 모드 (Columns Mode) – 수직 구조만 가능 (only vertical)

  • ListView1.ColumnWidth := 160;
  • ListView1.AutoColumns := true;

이벤트 설정

AutoColumn 모드를 설정할 때 이벤트

목록 종료 시 호출됩니다.


메소드들

  • Style for ListView Columns Mode
  • ListView1.ShowScrollBar – hide/show scrollbar
  • ListView1.ItemsClearTrue – correct delete items
  • ListView1.OffsetTop – indent of the first element
  • ListView1.OffsetBottom – indent of the last element
  • ListView1.getFirstVisibleItemIndex – first visible ItemIndex
  • ListView1.getVisibleCount – amount of visible items
  • ListView1.getLastVisibleItemindex – first visible ItemIndex + amount of visible items
  • ListView1.SeparatorLeftOffset – indent for separator line
  • ListView1.SeparatorRightOffset – indent for separator line
  • ListView1.EnableTouchAnimation – enable/disable touch animation

이 외에도 활용 가능한 기능들이 정말 많습니다. 전체 내용은 깃허브(Github)에서 패키지를 다운로드 받아서 확인할 수 있습니다: https://github.com/rzaripov1990/ModernListView

Note: 이 글에 소개된 스크린샷과 일부 텍스트들은 위의 깃허브에서 가져온 정보들입니다.


12.0 12.1 AI AWS C++ c++빌더 chatgpt DelphiCon ios rad서버 RAD스튜디오 UI UIUX UX uxsummit vcl 개발 개발사례 고객사례 기술레터 기술백서 데브옵스 데이터 데이터베이스 델파이 리눅스 마이그레이션 머신러닝 모바일 새버전 샘플 세미나 안드로이드 윈도우 인공지능 인터베이스 출시 커뮤니티에디션 코드 클라우드 파이썬 파이어몽키 현대화