공통 [FMX] TListView 더보기 버튼 구현하기

2017.09.20 13:58

험프리 조회 수:1046

모바일 앱을 개발할 때에 리스트 항목이 많은 경우, 한번에 가져오면 시간이 오래 걸려 좋지 않은 사용자 경험이 됩니다.

 

이 경우, 리스트 중 일부를 빠르게 표시하고, 리스트 끝으로 이동 시 추가로 표시하는 방식을 통해 문제를 해결할 수 있습니다.

 

이 글에서는, 

리스트뷰(TListView)의 목록 끝으로 이동 시, 더보기 버튼을 표시하도록 (매우 심플하게)구현합니다.

버튼 클릭 시 항목을 추가합니다.

 

이 글을 참고해 리스트 끝으로 이동 시 자동으로 항목을 추가하도록 구현할 수도 있습니다.

 

리스트뷰 더보기 버튼  구현하기

결과

 

결과 화면은 다음과 같습니다.

 

처음 24개 항목 표시 후, 목록 끝으로 이동 시 버튼이 표시되고, 버튼을 눌러 항목을 추가합니다.

 

구현방법

1) 더보기 버튼을 리스트뷰(TListView)에 올려놓고 감춥니다.(Visible := False)

2) 리스트뷰의 스크롤 이동(OnScrollViewChange) 이벤트 핸들러에서 제일 끝으로 이동한 경우 버튼을 표시합니다.

 

 

컴포넌트 구성은 아래와 같습니다.

 

구현된 주요 코드는 아래와 같습니다.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
procedure TForm2.AddItem(ACount: Integer);
var
  I: Integer;
  Item: TListViewItem;
begin
  for I := 0 to ACOunt - 1 do
  begin
    Item := ListView1.Items.Add;
    Item.Text := 'Item ' + ListView1.Items.Count.ToString;
  end;
end;
 
procedure TForm2.FormCreate(Sender: TObject);
begin
  AddItem(24);
  btnListViewMore.Visible := False;
end;
 
procedure TForm2.btnListViewMoreClick(Sender: TObject);
begin
  AddItem(6);
  btnListViewMore.Visible := False;
end;
 
procedure TForm2.ListView1Resized(Sender: TObject);
begin
  ListView1ScrollViewChange(Sender);
end;
 
procedure TForm2.ListView1ScrollViewChange(Sender: TObject);
var
  LastItemBottom, ListViewBottom: Single;
begin
  LastItemBottom := ListView1.GetItemRect(ListView1.ItemCount - 1).Bottom;
  ListViewBottom := ListView1.LocalRect.Bottom;
 
  btnListViewMore.Visible := ((LastItemBottom - ListViewBottom) < 30);
end;

 

샘플 프로젝트

 ListViewMoreButton.zip

 

이 샘플에서는 더보기 버튼 클릭 시 단순하게 목록을 추가했습니다. 실무에서는 더보기 버튼 클릭시 추가 데이터를 수신 후 목록을 동적으로 갱신하도록 구현해야 합니다.

 

당겨서 새로고침(Pull to refresh) 구현하기

모바일 앱에서는 새로운 정보를 가져오기 위해 당겨서 새로고침 기능을 사용할 수 있습니다.

이 기능은 리스트뷰(TListView)의 속성을 이용해 구현할 수 있습니다.

 

PullToRefresh 속성을 True로 설정 시, 목록 상단에서 당겨서 새로고침 기능을 제공합니다.

위 동작이 발생하면 OnPullRefresh 이벤트가 발생합니다.

 

참고링크

 

원글: http://blog.hjf.pe.kr/473

, 이 게시물을
Profile
목록
목록
번호 제목 글쓴이 날짜 조회 수
공지 [DelphiCon 요약] 코드사이트 로깅 실전 활용 기법 (Real-world CodeSite Logging Techniques) 관리자 2021.01.19 21693
공지 [UX Summit 요약] 오른쪽 클릭은 옳다 (Right Click is Right) 관리자 2020.11.16 20313
공지 [10.4 시드니] What's NEW! 신기능 자세히 보기 관리자 2020.05.27 22361
공지 RAD스튜디오(델파이,C++빌더) - 고객 사례 목록 관리자 2018.10.23 28108
공지 [데브기어 컨설팅] 모바일 앱 & 업그레이드 마이그레이션 [1] 관리자 2017.02.06 29407
공지 [전체 목록] 이 달의 기술자료 & 기술레터 관리자 2017.02.06 24730
공지 RAD스튜디오(델파이, C++빌더) - 시작하기 [1] 관리자 2015.06.30 45677
공지 RAD스튜디오(델파이,C++빌더) - 모바일 앱 개발 사례 (2020년 11월 업데이트 됨) 험프리 2014.01.16 181230
116 RFID 리더(한미IT RF Prisma) 연동하기 - 델파이에서 JAR 이용 [1] 험프리 2017.12.19 1692
115 C++빌더와 델파이를 이용한 SHA 해시 file 김원경 2018.05.21 1680
114 [코드레이지11] 인공지능(AI) with 델파이 & C++빌더 - Boian Mitov [1] 험프리 2016.11.24 1676
113 [따라하기] 인공지능 오목게임(7) - 오목게임 승자(5돌) 결정 지능프로그램 file 대화마을 2017.10.17 1671
112 [따라하기] 인공지능 오목게임(2) - 최종결과물 [2] file 대화마을 2017.09.14 1669
111 [안드로이드/iOS] 이미 배포(Deployment)된 파일 업데이트 하기 험프리 2016.03.31 1636
110 [XE8] 모바일 튜토리얼 무료 다운로드(영문), 총 364페이지 관리자 2015.07.09 1604
109 [발표자료] REST API 웹서비스 연동 관리자 2017.05.29 1507
108 RAD 스튜디오 10.3.1에서 FCM 수신 설정하기 [5] 험프리 2019.06.10 1484
107 기존 시스템을 웹(Web)으로 확장하기 위해 고려해야 할 두 가지 포인트 관리자 2018.06.11 1472
106 C++로 UI를 손쉽게 개발해봅시다! 관리자 2020.04.07 1456
105 TCategoryButtons 동적 생성하고, TButtonItem 클릭 이벤트 연결하기 file 험프리 2016.03.23 1455
104 TTS(Text-to-Speech) 라이브러리(윈도우, 맥OS, iOS, 안드로이드) [2] 험프리 2017.10.30 1435
103 개발자가 고민하는 마이그레이션 논쟁 해소를 위한 7가지 핵심 방안 관리자 2018.02.19 1423
102 엔터프라이즈 커넥터로 '구글 드라이브 VCL 애플리케이션' 만들기 file 관리자 2017.09.29 1413
101 윈도우 10에서의 High DPI 김원경 2020.03.02 1380
100 [코드레이지 2019] 웹소켓(WebSocket)과 델파이 험프리 2020.01.22 1325
99 FMX Linux (파이어몽키 리눅스) 첫 걸음 시작하기 관리자 2019.07.10 1324
98 2017년 가장 많이 클릭된 기술자료 TOP 7 관리자 2018.01.23 1279
97 이 달의 기술자료 - 2015년 07월 file 험프리 2015.06.26 1253
쓰기
태그