공통 [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 15468
공지 [UX Summit 요약] 오른쪽 클릭은 옳다 (Right Click is Right) 관리자 2020.11.16 13971
공지 [10.4 시드니] What's NEW! 신기능 자세히 보기 관리자 2020.05.27 16505
공지 RAD스튜디오(델파이,C++빌더) - 고객 사례 목록 관리자 2018.10.23 22061
공지 [데브기어 컨설팅] 모바일 앱 & 업그레이드 마이그레이션 [1] 관리자 2017.02.06 23273
공지 [전체 목록] 이 달의 기술자료 & 기술레터 관리자 2017.02.06 18933
공지 RAD스튜디오(델파이, C++빌더) - 시작하기 [1] 관리자 2015.06.30 39266
공지 RAD스튜디오(델파이,C++빌더) - 모바일 앱 개발 사례 (2020년 11월 업데이트 됨) 험프리 2014.01.16 174728
125 N 윈도우와 맥 개발 시작을 위한 파이어몽키 코스북: 무료 다운로드 제공(385페이지) 관리자 2013.04.05 152331
124 Find the O/S Language Type c2design 2014.07.30 47794
123 [Android] 폰번호 가져오기 [1] 타락천사 2014.09.05 38547
122 델파이XE2 파이어몽키 기반 아이폰앱 개발에서 제스춰를 인식시키는 방법 박병일 2012.01.25 23256
121 RAD 스튜디오 모바일 개발 환경 설정(안드로이드, iOS) [1] file 험프리 2014.05.19 15972
120 델파이 XE2 로 아이폰 하드웨어 컨트롤 하기 박병일 2012.01.19 15504
119 파이어몽키 기반의 아이폰앱 개발에서 주소록 가져오기 박병일 2012.01.25 14432
118 델파이 XE2로 만든 아이폰 앱 - TicTacToe file 박병일 2012.01.17 13960
117 파이어몽키 3D Text Editor file 박병일 2012.02.06 13923
116 델파이 XE2의 DataSnap 서버와 OSX Client의 연동 박병일 2012.01.19 13545
115 델파이 XE2로 아이폰앱 만들기 박병일 2012.01.18 13050
114 Delphi XE2에서 맥 애플리케이션을 만들어 보자 박병일 2012.01.18 12997
113 웹상의 이미지를 폼(TImage)에서 사용하는 방법 [3] file Humphery 2013.12.14 11784
112 델파이 XE2 파이어몽키로 만든 아이폰 3D 매쉬 앱 file 박병일 2012.03.07 11632
111 파이어 몽키를 이용한 공학 계산과 그래프 박병일 2012.01.28 11429
110 파이어 몽키란 무었인가? 박병일 2012.01.19 11168
109 파이어몽키를 이용하여 당구 게임을 시뮬레이션한 데모 file 박병일 2012.02.06 10651
108 David I의 31일 동영상(한글자막) - 프로토토타입 바인드 소스와 실제 데이터셋을 사용한 UI의 C++앱 만들기(델파이 동일 적용 가능) 관리자 2013.05.11 10632
107 안드로이드 앱 서명 및 배포 file Humphery 2014.01.02 10316
쓰기
태그