새로운 글
새로운 덧글

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

 

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

 

이 글에서는, 

리스트뷰(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

번호 제목 글쓴이 날짜 조회 수
공지 [데브기어 컨설팅] 모바일 앱 & 업그레이드 마이그레이션 관리자 2017.02.06 1269
공지 이 달의 기술자료 & 기술레터 관리자 2017.02.06 376
공지 데브기어 강의 - 2017년 12월~2018년 3월 관리자 2015.01.22 5696
공지 RAD Studio(Delphi, C++Builder) 시작하기 관리자 2015.06.30 9204
공지 RAD 스튜디오로 개발된 모바일 앱 사례(17년 12월 13일 업데이트) 험프리 2014.01.16 146704
386 [10.2 도쿄][릴리즈2] 기타 10.2.2에서 추가 강화된 내용 file 험프리 2017.12.13 66
385 [10.2 도쿄][릴리즈2] RAD 서버 싱글 사이트 개발 라이선스 제공 험프리 2017.12.13 51
384 [10.2 도쿄][릴리즈2] 새로운 VCL 컨트롤 4종을 사용할 수 있습니다. file 험프리 2017.12.13 47
383 [10.2 도쿄][릴리즈2] FireMonkey 퀵에디트로 주요 속성을 시각적으로 빠르게 설정할 수 있습니다. file 험프리 2017.12.13 25
382 [10.2 도쿄][릴리즈2] IDE 룩앤필이 새로워졌습니다. - 다크테마 지원, 컴포넌트 아이콘 변경 file 험프리 2017.12.13 36
381 [업데이트][10.2 도쿄][릴리즈 2] 10.2 도쿄 - 릴리즈 2 출시 & 설치방법 안내 file 험프리 2017.12.13 189
380 [고객사례-설치도구, 델파이] RAD 안드로이드 관리자 2017.12.06 67
379 이 달의 기술자료 - 2017년 12월 file 험프리 2017.11.24 157
378 [발표자료] 20171117 델파이/C++빌더 제조/제어 개발 세미나 관리자 2017.11.20 111
377 [발표자료] 20171116 델파이/C++빌더 의료 개발 세미나 관리자 2017.11.17 93
376 [발표자료] 20171109 RAD스튜디오 100% 활용하기: 최신 기술 적용과 확장 관리자 2017.11.10 118
375 RAD 스튜디오 - 사물인터넷 관련기술과 고객사례 험프리 2017.10.31 205
374 [고객사례-설치도구, 델파이] RAD&Installer 관리자 2017.10.31 174
373 이 달의 기술자료 - 2017년 11월 file 험프리 2017.10.30 179
372 안면인식(Face Detection) 라이브러리(안드로이드, iOS) 험프리 2017.10.30 158
371 TTS(Text-to-Speech) 라이브러리(윈도우, 맥OS, iOS, 안드로이드) 험프리 2017.10.30 111
370 [고객사례-생산성도구, 델파이] Change-Pro for Excel - 엑셀 변경항목 분석 프로그램 관리자 2017.10.27 150
369 RAD스튜디오 로드맵 - 2017년 9월 관리자 2017.10.23 232
368 이 달의 기술자료 - 2017년 10월 file 험프리 2017.09.26 243
» [FMX] TListView 더보기 버튼 구현하기 험프리 2017.09.20 199


광고 모듈이 설치되어 있지 않아 실행을 중단합니다..