공통 [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 15488
공지 [UX Summit 요약] 오른쪽 클릭은 옳다 (Right Click is Right) 관리자 2020.11.16 13974
공지 [10.4 시드니] What's NEW! 신기능 자세히 보기 관리자 2020.05.27 16507
공지 RAD스튜디오(델파이,C++빌더) - 고객 사례 목록 관리자 2018.10.23 22063
공지 [데브기어 컨설팅] 모바일 앱 & 업그레이드 마이그레이션 [1] 관리자 2017.02.06 23282
공지 [전체 목록] 이 달의 기술자료 & 기술레터 관리자 2017.02.06 18934
공지 RAD스튜디오(델파이, C++빌더) - 시작하기 [1] 관리자 2015.06.30 39269
공지 RAD스튜디오(델파이,C++빌더) - 모바일 앱 개발 사례 (2020년 11월 업데이트 됨) 험프리 2014.01.16 174734
394 [VCL] 화면의 특정영역을 확대하는 “돋보기” 기능 구현방법 소개 file 험프리 2017.09.01 946
393 [시애틀] 비콘펜스(BeaconFence)등 새로운 오픈 소스와 컴포넌트 패키지를 IDE에서 직접 확보할 수 있습니다. Humphery 2015.09.07 942
» [FMX] TListView 더보기 버튼 구현하기 험프리 2017.09.20 937
391 [10.4 시드니 신기능] 컨트롤 개별 VCL 스타일 적용(Per-Control Style) 적용 험프리 2020.05.19 929
390 [XE8] 오프라인에서 도움말을 볼 수 있습니다.(CHM 형식) Humphery 2015.04.17 926
389 XE8 새로운 기능외의 개선사항 Humphery 2015.04.16 925
388 [10.4 시드니][패치] RAD스튜디오 10.4 '두 번째 패치(Patch 2)'를 다운로드 받으세요! 관리자 2020.07.20 917
387 [오픈소스] TGPuttyLib 소개 - PuTTY 기반 SFTP 클라이언트 험프리 2020.01.03 908
386 [고객사례-게임, 델파이] BVS Solitaire Collection (카드 게임) 관리자 2018.06.25 903
385 [고객 사례- 박물관, 시스템제어, 델파이] 미니어처 원더랜드 박물관 관리자 2016.12.19 903
384 델파이 안드로이드 개발을 위해 OpenJDK 채택 file 김원경 2020.05.25 902
383 [패치] RAD스튜디오 10.4.2, 델파이 컴파일러 관리자 2021.05.04 897
382 [XE8] 번거로운 수작업을 줄여 핵심기능 개발에 집중할 수 있는 개발 생산성 향상도구 Humphery 2015.04.28 897
381 [10.3.3][업데이트][핫픽스] RAD 스튜디오, 델파이, C++빌더 10.3.3 패치 목록 [1] 험프리 2019.12.26 895
380 [업데이트][핫픽스][XE8] iOS 8 시뮬레이터 변경사항 대응 file Humphery 2015.05.11 886
379 [엠바카데로 Feature Friday][개발팁]기본 프로젝트 옵션을 RAD스튜디오 옵션 셋으로 만들기 관리자 2019.06.28 886
378 [발표자료] 20160929 나만의 앱 완성하기 with 델파이 험프리 2016.09.21 882
377 [발표자료] 20180315 마이그레이션, 생각보다 더 쉽습니다 (C++빌더, 델파이) file 관리자 2018.03.19 881
376 20150224 [온라인세미나] VCL개발자를 위한 Speed UP! RAD스튜디오 발표자료 관리자 2015.02.25 880
375 [업데이트][10.3.2][패치] 업데이트 및 패치 정보 [5] 험프리 2019.08.23 872
쓰기
태그