CCGridPictureEditor는 이름 그대로 그리드 기반의 이미지 편집 컴포넌트로, 여러 개의 썸네일 이미지를 격자 형태로 표시하는 데 사용됩니다. 이 컨트롤은 웨이보(위챗)의 다중 사진 게시 기능과 유사한 인터페이스를 쉽게 구현할 수 있게 해줍니다.

기존에는 Delphi 기본 제공하는 GridLayout을 수동으로 조합해 비슷한 기능을 구현했지만, 코드 양이 많고 관리하기 불편했습니다. 이제 CCGridPictureEditor를 사용하면 복잡한 작업 없이도 직관적인 이미지 리스트를 구성할 수 있습니다.

주요 속성 및 이벤트

다음은 컨트롤의 핵심 속성과 이벤트입니다:

• Appearence: 외형 스타일 설정
• Items: 표시할 이미지 항목 수를 정의하며, 각 항목은 하나의 이미지에 대응
• OnItemAddClick: '+' 버튼 클릭 시 발생하는 이벤트. 카메라 또는 갤러리에서 이미지를 선택하거나 URL로부터 로드할 수 있도록 처리 가능
• OnItemClick: 특정 이미지 클릭 시 호출되며, 해당 항목의 인덱스 값을 확인하여 상세 보기 등의 동작을 구현할 수 있음

Appearence 속성 세부 설정

• Fill: 컨트롤 배경 색상 지정 (Delphi 기준과 동일)
• InnerPadding: 이미지 내부 여백 설정
• ItemAddVisible: '+ 추가' 아이콘 표시 여부. 활성화 시 마지막 위치에 추가 버튼이 나타남
• ItemHeight, ItemWidth: 각 이미지 셀의 크기 지정
• ItemSpace: 셀 간 간격 설정
• RowType: 행 표시 방식
• rtMultiRow: 다중 행으로 이미지를 나열 (자동 줄바꿈 지원)
• rtSingleRow: 단일 행으로 표시되며, 화면 너비 초과 시 좌우 스크롤 가능 (사용자 경험 우수)
• Stroke: 테두리 스타일 및 색상 설정 (기본 컨트롤과 동일한 방식)

사용 예제

1. 폼에 CCGridPictureEditor를 드래그 앤 드롭하고, Align을 Top으로 설정합니다.
2. Appearence 속성을 통해 스타일을 조정하고, Items 속성에 접근해 두 개의 이미지 항목을 추가합니다.

Items 집합 메서드 분석

TCCGridPictureEditorItems = class(TCollection)
public
  function Add: TCCGridPictureEditorItem;           // 새로운 항목 추가
  function Insert(Index: Integer): TCCGridPictureEditorItem; // 지정된 위치에 삽입
  property Items[Index: Integer]: TCCGridPictureEditorItem read GetItem write SetItem; default;
end;

• Add: 새 항목을 맨 뒤에 추가하고 TCCGridPictureEditorItem 반환
• Insert(Index): 지정된 인덱스에 항목 삽입
• Items[Index]: 해당 인덱스의 항목에 접근

TCCGridPictureEditorItem의 주요 멤버

procedure LoadPictureFromURL(AURL: string);         // URL에서 이미지 로드
function PictureAsBase64String: string;             // 이미지를 Base64 문자열로 변환

property Data[const AIndex: string]: TValue read GetItemData write SetItemData; // 사용자 정의 데이터 저장 (예: ID 등)

published
  property Bitmap: TBitmap read FBitmap write SetBitmap; // 직접 이미지 할당

실제 적용 예시

1. URL 기반 이미지 추가

procedure TForm1.Button1Click(Sender: TObject);
begin
  CCGridPictureEditor1.BeginUpdate;
  CCGridPictureEditor1.Items.Add.LoadPictureFromURL(
    'http://p0.so.qhimg.com/t015a6cad033df02875.jpg'
  );
  CCGridPictureEditor1.EndUpdate;
end;

이 코드는 새 항목을 생성하고, 지정된 웹 주소에서 이미지를 가져와 표시합니다.

2. 특정 인덱스의 이미지 설정

CCGridPictureEditor1.Items[1].Bitmap := Image1.Bitmap;

3. 모든 이미지 제거

CCGridPictureEditor1.Items.Clear;

4. 인덱스 0의 항목 삭제

CCGridPictureEditor1.Items.Delete(0);

5. 이벤트 기반 확장 기능 구현

procedure TForm1.CCGridPictureEditor1ItemAddClick(Sender: TObject);
begin
  ShowMessage('이미지 추가 버튼이 클릭되었습니다. 카메라 또는 갤러리에서 이미지를 선택하세요.');
end;

procedure TForm1.CCGridPictureEditor1ItemClick(Sender: TObject; AItem: TCCGridPictureEditorItem);
begin
  ShowMessage('이미지가 클릭됨: 인덱스 = ' + IntToStr(AItem.Index));
end;

설정만으로도 직관적이고 강력한 이미지 관리 기능을 구현할 수 있으며, 실행 결과는 매우 매끄럽고 자연스럽습니다.