TListBox 컴포넌트 사용방법:사용자 정의 아이템데이터 동적으로 표시하기

파이어몽키에서 자주 사용하는 컴포넌트 중 하나가 TListBox 입니다. 설계 시에 데이터를 라이브바인딩을 이용하여 표시하는 것은 많이 사용 해보셨을 것입니다. 이 자료에서는 기존의 아이템 스타일외의 형태로 동적으로 데이터를 표시하는 방법에 대해서 소개 해보도록 하겠습니다. 클래스들을 생성하여 표시하는 방법, 또 다른 방법으로 Custom Style을 작성하여 적용하는 방법등 샘플을 두 가지 방법으로 작성해 보도록 하겠습니다.

 

[완성 샘플]

ListBox1.png

 

클래스 생성하여 표시하기

    .  1. New > FireMonkey Multi-Application > Black Application을 선택하여 프로젝트를 생성합니다.

 

       2. 위의  화면과 같이 TToolBar ,TText, TTbutton(백버튼)등을 올려 놓습니다.

 

3. TTabControl 컴포넌트를 올려놓고 TabItem1 TabItem2를 추가합니다.

 

4. 첫 번째 탭에 TListBox 컴포넌틑를 올려 놓습니다.

 

5. 예제에서는 데이터베이스를 사용하지 않기 때문에 구조체의 배열을 사용하여 선택한 아이템의 항목들을 저장하도록 선언합니다.

 

type

 

  TPerson = record

    Name:string;

    Title:string;

    Address:string;

    mail:string;

    Tel:string;

  end;

 

const

  persons_Num = 10;

 

var

  Form1: TForm1;

  persons:array [0..persons_num-1] of Tperson;

 

  6.   폼의 OnCreate 이벤트 핸들러를 다음과 같이 구현합니다.

procedure TForm1.FormCreate(Sender: TObject);

var

  i            : Integer;

  LBI       : TListBoxItem;

begin

   TabControl1.ActiveTab    := TabItem1;

   TabControl1.TabPosition := TTabPosition.None;

   Back.Visible                    := false;

   InitListBox;

end;

 

7. 폼의 private 부분에 아래와 같이 프로시저를 선언합니다.

Procedure OnItemClick(Sender : TObject);

    Procedure InitListBox;

 

   8.   InitListBox 프로시저를 아래와 같이 구현합니다.

procedure TForm1.InitListBox;

var

  i           : Integer;

  LBI       : TListBoxItem;

  LBL      : TLabel;

  R         : TRectangle;

  Lay      : TLayout;

 

begin

  ListBox1.BeginUpdate;

  try

    ListBox1.Clear;

 

    for i:=0 to persons_num - 1 do

      begin

        LBI := TListBoxItem.Create(ListBox1);

 

        LBI.Parent                       := ListBox1;

        LBI.StyleLookup              := 'listboxitembottomdetail';

        LBI.Height                       := 110;

        LBI.OnClick                     := OnItemClick;

        LBI.Tag                            := i;

        LBI.ItemData.Accessory  := TListBoxItemData.TAccessory.aMore;

 

        R                                       := TRectangle.Create(LBI);

        R.Parent                           := LBI;

        R.Align                              := TAlignLayout.Left;

        R.Margins.Top                  := 4;

        R.Margins.Right                := 6;

        R.Margins.Bottom             := 4;

        R.Margins.Left                                   := 2;

        R.Stroke.Kind                                    := TBrushKind.None;

 

        if i mod 2 = 0 

          then R.Fill.Color                              := TAlphacolorRec.Cyan

          else R.Fill.Color                              := TAlphacolorRec.Pink;

 

        R.Fill.Kind                                         := TBrushKind.Solid;

        R.Width                                             := 12;

 

        Lay                                                   := TLayout.Create(LBI);

        Lay.Parent                                       :=  LBI;

        Lay.Align                                         :=  TAlignLayout.Client;

 

        // Type

        LBL                                                  := TLabel.Create(Lay);

        LBL.Parent                                      :=  Lay;

        LBL.AutoSize                                  :=  true;

        LBL.WordWrap                               :=  false;

        LBL.Align                                        :=  TAlignLayout.MostTop;

        LBL.TextSettings.HorzAlign            :=  TTextAlign.Leading;

        LBL.Margins.Top                            :=  3;

        LBL.Margins.Right                         :=  6;

        LBL.Margins.Bottom                      :=  0;

        LBL.Margins.Left                           :=  12;

        LBL.TextSettings.Font.Size           :=  14;

        LBL.TextSettings.Font.Style          :=  LBL.TextSettings.Font.Style + [TFontStyle.fsBold];

        LBL.TextSettings.FontColor          :=  TAlphaColorRec.Crimson;

        LBL.Text                                        :=  '이름' + inttostr(i+1);

        persons[i].Name                           :=  LBL.Text;

 

        LBL.StyledSettings                       := LBL.StyledSettings - [TStyledSetting.Size];

        LBL.StyledSettings                       := LBL.StyledSettings - [TStyledSetting.Style];

        LBL.StyledSettings                      :=  LBL.StyledSettings - [TStyledSetting.FontColor];

 

        // TOP

        LBL                                               := TLabel.Create(Lay);

        LBL.Parent                                   :=  Lay;

        LBL.AutoSize                               :=  true;

        LBL.WordWrap                            :=  false;

        LBL.Align                                     :=  TAlignLayout.Top;

        LBL.TextSettings.HorzAlign         :=  TTextAlign.Leading;

        LBL.Margins.Top                          :=  3;

        LBL.Margins.Right                       :=  6;

        LBL.Margins.Bottom                    :=  0;

        LBL.Margins.Left                         :=  12;

        LBL.TextSettings.Font.Size         :=  14;

        LBL.TextSettings.Font.Style        :=  LBL.TextSettings.Font.Style + [TFontStyle.fsBold];

        LBL.TextSettings.FontColor        :=  TAlphaColorRec.Black;

        LBL.Text                                      :=  '직업군 ' + inttostr(i+1);

        persons[i].Title                            :=  LBL.Text;

 

        LBL.StyledSettings                     :=  LBL.StyledSettings - [TStyledSetting.Size];

        LBL.StyledSettings                     :=  LBL.StyledSettings - [TStyledSetting.Style];

        LBL.StyledSettings                     :=  LBL.StyledSettings - [TStyledSetting.FontColor];

 

        // MID

        LBL                                             :=  TLabel.Create(Lay);

        LBL.Parent                                 :=  Lay;

        LBL.AutoSize                             :=  true;

        LBL.WordWrap                          :=  false;

        LBL.Align                                   :=  TAlignLayout.Client;

        LBL.TextSettings.HorzAlign       :=  TTextAlign.Leading;

        LBL.Margins.Top                       :=  0;

        LBL.Margins.Right                    := 6;

        LBL.Margins.Bottom                 :=  0;

        LBL.Margins.Left                      :=  12;

        LBL.TextSettings.Font.Size      :=  14;

        LBL.TextSettings.FontColor     :=  TAlphaColorRec.Darkgreen;

        LBL.Text                                  :=  '서울시 강남구 반포동 사평대로' + inttostr(i+i);

        persons[i].Address                  :=   LBL.Text;

 

        LBL.StyledSettings                 :=  LBL.StyledSettings - [TStyledSetting.Size];

        LBL.StyledSettings                 :=  LBL.StyledSettings - [TStyledSetting.Style];

        LBL.StyledSettings                 :=  LBL.StyledSettings - [TStyledSetting.FontColor];

 

        // Bottom

        LBL                                         :=  TLabel.Create(Lay);

        LBL.Parent                             :=  Lay;

        LBL.AutoSize                         :=  true;

        LBL.WordWrap                      :=  false;

        LBL.Align                               :=  TAlignLayout.Bottom;

        LBL.TextSettings.HorzAlign   :=  TTextAlign.Leading;

        LBL.Margins.Top                    :=  0;

        LBL.Margins.Right                 :=  6;

        LBL.Margins.Bottom              :=  6;

        LBL.Margins.Left                   :=  12;

        LBL.TextSettings.Font.Size   :=  14;

        LBL.TextSettings.FontColor  :=  TAlphaColorRec.Black;

        LBL.Text                                :=  '메일 주소' + inttostr(i+i) + '@naver.com';

        persons[i].mail                       :=  LBL.Text;

 

        LBL.StyledSettings                :=  LBL.StyledSettings - [TStyledSetting.Size];

        LBL.StyledSettings                :=  LBL.StyledSettings - [TStyledSetting.Style];

        LBL.StyledSettings                :=  LBL.StyledSettings - [TStyledSetting.FontColor];

 

        // MostBottom

        LBL                                        :=  TLabel.Create(Lay);

        LBL.Parent                            :=  Lay;

        LBL.AutoSize                        :=  true;

        LBL.WordWrap                     :=  false;

        LBL.Align                              :=  TAlignLayout.MostBottom;

        LBL.TextSettings.HorzAlign  :=  TTextAlign.Trailing;

        LBL.Margins.Top                   :=  0;

        LBL.Margins.Right                :=  40;

        LBL.Margins.Bottom             :=  6;

        LBL.Margins.Left                   :=  0;

        LBL.TextSettings.Font.Size   :=  12;

        LBL.TextSettings.FontColor  :=  TAlphaColorRec.Navy;

        LBL.Text                               :=  '전화번호 010-' + inttostr(i+1);

        persons[i].Tel                       :=  LBL.Text;

 

        LBL.StyledSettings             :=  LBL.StyledSettings - [TStyledSetting.Size];

        LBL.StyledSettings             :=  LBL.StyledSettings - [TStyledSetting.Style];

        LBL.StyledSettings             :=  LBL.StyledSettings - [TStyledSetting.FontColor];

      end;

 

  finally

    ListBox1.EndUpdate;

  end;

end;   

 

  +참고로 아이템을 교대로 색상을 변경하여 표시합니다.

 

  9.      두 번째 탭을 아래와 같이 TEdit를 사용하여 설게합니다.

ListBox2.png

 

10.  리스트 항목을   클릭시에 데이터를 표시하기 위한 OnItemClick 이벤트 핸들러를 구현합니다

Procedure TForm1.OnItemClick(Sender: TObject);

begin

  TabControl1.SetActiveTabWithTransitionAsync(TabItem2,TTabTransition.Slide,TTabTransitionDir  ection.Normal,

Procedure

      begin

       Name.Text       := Persons[Listbox1.ItemIndex].name;

       Title.Text          := Persons[Listbox1.ItemIndex].Title;

       Address.Text    := Persons[Listbox1.ItemIndex].Address;

       Mail.Text          := Persons[Listbox1.ItemIndex].mail;

       Tel.Text            := Persons[Listbox1.ItemIndex].tel;

       Back.Visible     := true;

   end);

     end;


  11. 프로그램을 실행하여 데이터가 잘 표시되는지 확인합니다.

 

  12. TStyleBook 컴포넌트를 내려 놓고 원하는 스타일을 적용합니다.

사용자 정의(Custome) 스타일 적용하여 리스트아이템 표시하기

앞에서 작성한 예제를 사용자 정의 스타일을 사용하여 수정 해보도록 하겠습니다.

 

1. 앞에서 작성한 프로젝트를  Save Project As.. 로 unit_ListBox_style, Project_ListBoxStyle 로 저장합니다.

 

2. Style Book 컴포넌트를 더블 클릭하여 Style Desinger Editor를 오픔합니다.

 

3. 다음 화면과 같이 스타일을 추가하고 Save as.. 하여 별도의 이름으로 저장합니다.(예를들어 MyXXX.style) 

 

ListBox4.png

 

4.   상위의 StyleContainer를 클릭 후 Layout 컴포넌트를 더블클릭하여 추가 한 후 아래와 같이 속성을 변경합니다.

 

속성

StyleName

MyListItemStyle

Height

110

 

 

 5.  그 위에 Rectangle 컴포넌트를 내려 놓고 다음과 같이 설정합니다.

 

속성

 

 

StyleName

 

RectangleStyle

 

Align

 

Left

 

Margins.Top                      

 

Margins.Right;

 

Margins.Bottom           

 

Margins.Left                     

 

4

 

6

 

4

 

2

 

Stroke.Kind

 

TBrushKind.None

 

    

6. 그 위에 Layout 컴포넌트를 내려 놓고 다음과 같이 설정합니다.

 

속성

 

 

StyleName

 

LayoutStyle

 

Align

 

Alclient

 

 

.   Layout위에 Label 컴포넌트를 5개 내려 놓고 각각을 다음과 같이 설정합니다.

 

컴포넌트

속성

TLabel

StyleName

Label1item

Align

MostTop

AutoSize

Ture

Margins.Top           

Margins.Right                

Margins.Bottom

Margins.Left        

3

6

0

12

TextSettings.Font.Size       

TextSettings.Font.Style

TextSettings.Font.Color

TextSettings.WordWrap

14

[] + fsBold

Crimson

False

StyledSettings. Size

StyledSettings.Style

StyledSettings.FontColor

False

False

False

TLabel

StyleName

Label2item

Align

Top

AutoSize

True

Margins.Top           

Margins.Right                

Margins.Bottom

Margins.Left

3

6

0

12

TextSettings.Font.Size       

TextSettings.Font.Style

TextSettings.Font.Color

TextSettings.WordWrap

14

[] + fsBold

black

False

StyledSettings. Size

StyledSettings.Style

StyledSettings.FontColor

False

False

False

Tlabel

StyleName

Label3item

Align

Client

AutoSize

True

Margins.Top           

Margins.Right                

Margins.Bottom

Margins.Left

0

6

0

12

TextSettings.Font.Size      

TextSettings.Font.Style

TextSettings.Font.Color

TextSettings.WordWrap

14

[]

deepGreen

False

StyledSettings. Size

StyledSettings.Style

StyledSettings.FontColor

False

False

False

TLable

StyleName

Label4item

Align

Bottom

AutoSize

True

Margins.Top           

Margins.Right                

Margins.Bottom

Margins.Left

0

6

6

12

TextSettings.Font.Size       

TextSettings.Font.Style

TextSettings.Font.Color

TextSettings.WordWrap

14

[]

Black

False

StyledSettings. Size

StyledSettings.Style

StyledSettings.FontColor

False

False

False

TLable

StyleName

Label5item

Align

MostBottom

AutoSize

True

Margins.Top           

Margins.Right                

Margins.Bottom

Margins.Left

0

40

6

12

TextSettings.Font.Size       

TextSettings.Font.Style

TextSettings.Font.Color

TextSettings.WordWrap

TextSettings.HorzAlign

12

[]

Navy

False

Trailing

StyledSettings. Size

StyledSettings.Style

StyledSettings.FontColor

False

False

False

 


8.  InitListBox 루틴을 다음과 같이 코드를 수정합니다.

 

procedure TForm1.InitListBox;var

var

  i            : Integer;

  LBI       : TListBoxItem;

  LBL      : TLabel;

  R         : TRectangle;

  Lay      : TLayout;

 

begin

  ListBox1.BeginUpdate;

  try

    ListBox1.Clear;

    for i:=0 to persons_num - 1 do

    begin

        LBI := TListBoxItem.Create(ListBox1);

        LBI.Parent                            := ListBox1;

        LBI.StyleLookup                   := 'MyListItemStyle';

        LBI.Height                            := 110;

        LBI.OnClick                          := OnItemClick;

        LBI.Tag                                 := i;

        LBI.ItemData.Accessory      := TListBoxItemData.TAccessory.aMore;

 

        if i mod 2 = 0 then

           LBI.StylesData['RectangleStyle.Fill.color']  := TAlphacolorRec.Cyan

        else

           LBI.StylesData['RectangleStyle.Fill.color']   := TAlphacolorRec.Pink;

 

         LBI.StylesData['Rectanglestyle.fill.Kind']      := TValue.From<TBrushKind>(TBrushKind.Solid);

         LBI.StylesData['RectagleStyle.width']          := 12;

         LBI.StylesData['Label1item']                        := '이름' + inttostr(i+1);

         LBI.StylesData['Label2item']                        := '직업군 ' + inttostr(i+1);;

         LBI.StylesData['Label3item']                        := '서울시 강남구 반포동 사평대로' + inttostr(i+i);

         LBI.StylesData['Label4item']                        := '메일 주소' + inttostr(i+i) + '@naver.com';

         LBI.StylesData['Label5item']                        := '전화번호 010-' + inttostr(i+1);

 

         persons[i].Name                                          :=  LBI.StylesData['Label1item'].asstring;

         persons[i].Title                                             :=  LBI.StylesData['Label2item'].AsString;

         persons[i].Address                                      :=  LBI.StylesData['Label3item'].AsString;

         persons[i].mail                                            :=  LBI.StylesData['Label4item'].AsString;

         persons[i].Tel                                              :=  LBI.StylesData['Label5item'].AsString;

  end;

  finally

    ListBox1.EndUpdate;

  end;

end;

 

 

 8. 실행 해보면 앞의 예제와 동일하게 데이터가 표시됨을 확인 하실 수 있습니다.

 

ListBox5.png

 

[샘플]

ListBoxcustomitem_Dynamic.zip

ListBoxCustomItem_Style.zip

번호 제목 글쓴이 날짜 조회 수
공지 [DelphiCon 요약] 코드사이트 로깅 실전 활용 기법 (Real-world CodeSite Logging Techniques) 관리자 2021.01.19 7272
공지 [UX Summit 요약] 오른쪽 클릭은 옳다 (Right Click is Right) 관리자 2020.11.16 7081
공지 [10.4 시드니] What's NEW! 신기능 자세히 보기 관리자 2020.05.27 9465
공지 RAD스튜디오(델파이,C++빌더) - 고객 사례 목록 관리자 2018.10.23 14509
공지 [데브기어 컨설팅] 모바일 앱 & 업그레이드 마이그레이션 [1] 관리자 2017.02.06 16254
공지 [전체 목록] 이 달의 기술자료 & 기술레터 관리자 2017.02.06 12043
공지 RAD스튜디오(델파이, C++빌더) - 시작하기 [1] 관리자 2015.06.30 31157
공지 RAD스튜디오(델파이,C++빌더) - 모바일 앱 개발 사례 (2020년 11월 업데이트 됨) 험프리 2014.01.16 166972
126 모바일 앱 개발, 가장 좋은 선택은? 관리자 2021.03.18 486
125 안드로이드 SDK 수동 설치 방법 file 김원경 2020.07.15 1711
124 iOS 앱스토어 1024x1024 아이콘 문제에 대한 해결 방법 김원경 2020.07.08 335
123 파이어몽키를 사용하여 멀티 플랫폼/아키텍처 용 소프트웨어 개발 file 김원경 2020.03.25 473
122 RAD Studio 10.3.3 안드로이드 앱에서 센서 컴포넌트 사용시 링크 오류 해결방법 김원경 2020.03.18 261
121 [델파이 안드로이드 64비트 오류 수정] TInAppPurchase 컴포넌트 수정 file 김원경 2020.03.18 252
120 파이어몽키에서 Message 대화상자 사용하기/Message 대화상자와 유사하게 폼 사용하기 file 김원경 2020.01.23 1961
» 파이어몽키 TListBox 컴포넌트 사용방법: 사용자 정의 아이템데이터 동적으로 표시하기 file 김원경 2020.01.20 413
118 리눅스용 앱에 다양한 스타일 적용하기 (FMX 스타일들을 리눅스 앱에도!) 관리자 2019.09.17 339
117 밝은 톤의 사용자 친화적인 디자인을 찾고있다면 - 푸에르토 리코(Puerto Rico) FMX 스타일 관리자 2019.09.17 395
116 과감하면서도 볼드한 효과를 주고 싶다면 - Ruby Graphite FMX 스타일 관리자 2019.09.17 354
115 그라데이션이 적용된 멋진 스타일을 적용하고 싶다면 - 스텔라(Stellar) FMX 스타일 관리자 2019.09.17 420
114 리눅스 앱에 파이어몽키에서 적용했던 스타일을 똑같이 적용하세요 - Wedgewood Light 스타일 관리자 2019.09.09 267
113 리눅스 앱에 '깔끔하면서도 샤프한' 스타일을 적용하고 싶다면 - Air 스타일 관리자 2019.09.09 254
112 '눈에 확 띄는' 리눅스 앱을 만들고 싶다면 - Amakrits 스타일 관리자 2019.09.09 225
111 리눅스 앱에 '윈도우 10 컬러 스타일'을 적용하고 싶다면 - Aqua Graphite 스타일 관리자 2019.09.09 316
110 리눅스 앱에 '프로페셔널' 해보이는 스타일을 적용하고 싶다면 - Blend FMX 스타일 관리자 2019.09.09 281
109 FmxLinux - 델파이, RAD스튜디오에 추가되었습니다! 관리자 2019.06.26 434
108 [무료 제공툴] 파이어몽키 스텐실(FMX Stencils) [3] 관리자 2018.08.24 1127
107 10.2.3 새로운 기능: 파이어몽키 UI 템플릿 - 프로필 화면 관리자 2018.04.24 667