공통 MODERNLISTVIEW 라이브러리 – 커스터마이징 가능한 강력한 크로스 플랫폼 라이브러리 활용 방법
2021.04.06 09:02
- 원문 링크: 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;
컬럼 모드 (Volumns 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: 이 글에 소개된 스크린샷과 일부 텍스트들은 위의 깃허브에서 가져온 정보들입니다.
