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

2017.09.20 13:58

험프리 조회 수:937

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

 

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

 

이 글에서는, 

리스트뷰(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 15463
공지 [UX Summit 요약] 오른쪽 클릭은 옳다 (Right Click is Right) 관리자 2020.11.16 13970
공지 [10.4 시드니] What's NEW! 신기능 자세히 보기 관리자 2020.05.27 16504
공지 RAD스튜디오(델파이,C++빌더) - 고객 사례 목록 관리자 2018.10.23 22061
공지 [데브기어 컨설팅] 모바일 앱 & 업그레이드 마이그레이션 [1] 관리자 2017.02.06 23269
공지 [전체 목록] 이 달의 기술자료 & 기술레터 관리자 2017.02.06 18926
공지 RAD스튜디오(델파이, C++빌더) - 시작하기 [1] 관리자 2015.06.30 39262
공지 RAD스튜디오(델파이,C++빌더) - 모바일 앱 개발 사례 (2020년 11월 업데이트 됨) 험프리 2014.01.16 174728
34 [발표자료] VCL 애플리케이션 확장하기 with RAD 서버 관리자 2020.07.22 389
33 [3분 완성] C++로 안드로이드&iOS 용 사진공유앱 완성하기 관리자 2019.08.14 369
32 iOS 배포 시 에러 해결방법: Cant' start debugserver on device - device support image was not mounted 관리자 2019.07.17 495
31 iOS 개발환경 설정이 잘 되지 않은 경우 체크사항 - iOS 버전 확인 필요 관리자 2019.07.11 273
30 RAD 스튜디오 10.3.1에서 FCM 수신 설정하기 [5] 험프리 2019.06.10 1376
29 안드로이드 9버전 대상으로 10.3 리오 앱 실행 file 험프리 2019.02.12 537
28 iOS SDK 추가 화면에서 SDK 목록이 표시되지 않을 경우 해결방안 file 험프리 2019.01.16 979
27 [개발환경 설정] 안드로이드 기기 연결 시 'USB 디버깅 허용' 창이 표시되지 않는 경우 조치 방법 file 험프리 2018.08.21 1871
26 안면인식(Face Detection) 라이브러리(안드로이드, iOS) 험프리 2017.10.30 2419
25 TTS(Text-to-Speech) 라이브러리(윈도우, 맥OS, iOS, 안드로이드) [2] 험프리 2017.10.30 1339
» [FMX] TListView 더보기 버튼 구현하기 험프리 2017.09.20 937
23 [FMX] 폼의 높이를 애니메이션으로 변경하기, 툴바를 끌어 폼 이동하기 험프리 2017.09.12 530
22 [FMX] 파이어몽키 메시징 시스템을 이용해 프로세스 내에서 메시지를 등록하고 구독하는 방법 file 험프리 2017.09.01 264
21 [FMX] 안드로이드 패키지 버전 구하기 튜토리얼 file 험프리 2017.09.01 945
20 안드로이드에서 Firebase SDK 용 Google 로그인 사용하기 험프리 2017.08.04 619
19 첨부파일을 포함한 이메일 전송하기(iOS, 안드로이드, 윈도우) file 험프리 2017.08.04 666
18 파이어몽키(FireMonkey) vs. VCL 관리자 2017.07.18 2843
17 애플 개발자 프로그램 구독하지 않고 XCode8을 설정해 iOS앱을 배포하는 방법 험프리 2017.05.15 693
16 안드로이드에서 커스텀 폰트 사용하기 - 델파이 10.2 도쿄 험프리 2017.05.15 625
15 [발표자료] VCL 애플리케이션 확장하기 with RAD 서버 관리자 2017.03.16 483
쓰기
태그