List 구성 요소 사용자 정의

List 구성 요소에 스타일 사용
List 구성 요소에 스킨 사용

제작하는 동안 또는 런타임에 List 구성 요소를 가로/세로로 변형할 수 있습니다. 제작하는 동안에는 스테이지에서 구성 요소를 선택한 다음 [자유 변형 도구]나 [수정] > [변형] 명령을 사용합니다. 런타임에는 setSize() 메서드를 사용하거나 height , width , scaleX , scaleY 등의 해당 List 클래스 속성을 사용합니다.

목록의 크기가 조절될 때 목록의 행이 가로로 축소되면 그 길이를 넘는 텍스트가 잘립니다. 세로일 경우에는 목록에서 필요한 만큼 행이 추가되거나 제거됩니다. 필요한 경우 스크롤 막대가 자동으로 배치됩니다.

List 구성 요소에 스타일 사용

스타일 속성을 설정하여 List 구성 요소의 모양을 변경할 수 있습니다. 스타일에 따라 구성 요소를 그릴 때 사용되는 구성 요소의 스킨 및 패딩 값이 결정됩니다.

다양한 스킨 스타일을 사용하여 스킨에 사용할 여러 클래스를 지정할 수 있습니다. 스킨 스타일 사용에 대한 자세한 내용은 스킨 을 참조하십시오.

다음 절차에서는 List 구성 요소의 contentPadding 스타일 값을 설정합니다. 내용 주위의 패딩은 List 크기에서 이 설정 값을 뺀 것이므로 List의 텍스트가 잘리지 않게 List 크기를 늘려야 할 수 있습니다.

새 Flash 파일(ActionScript 3.0) 문서를 만듭니다.
[구성 요소] 패널의 List 구성 요소를 스테이지로 드래그하고 인스턴스 이름을 aList 로 지정합니다.

기본 타임라인에서 프레임 1을 선택하고 [액션] 패널을 연 후 다음 코드를 입력하여 contentPadding 스타일을 설정하고 List에 데이터를 추가합니다.

aList.setStyle("contentPadding", 5); 
aList.setSize(145, 200); 
aList.addItem({label:"1956 Chevy (Cherry Red)", data:35000}); 
aList.addItem({label:"1966 Mustang (Classic)", data:27000}); 
aList.addItem({label:"1976 Volvo (Xcllnt Cond)", data:17000}); 
aList.rowCount = aList.length;

[컨트롤] > [무비 테스트]를 선택합니다.

List 구성 요소에 스킨 사용

List 구성 요소는 다음과 같은 스킨을 사용하여 시각적 상태를 표현합니다.

List 스킨

ScrollBar 스키닝에 대한 자세한 내용은 UIScrollBar 구성 요소 사용자 정의 을 참조하십시오. Focus Rect 스킨의 스키닝에 대한 자세한 내용은 TextArea 구성 요소 사용자 정의 을 참조하십시오.

참고: 한 구성 요소에서 ScrollBar 스킨을 변경하면 해당 ScrollBar를 사용하는 다른 구성 요소에서도 해당 스킨이 모두 변경됩니다.

Cell Renderer 스킨을 두 번 클릭하여 List 셀의 여러 상태에 대한 두 번째 스킨 팔레트를 엽니다.

List Cell Renderer 스킨

이러한 스킨을 편집하여 List의 셀 모양을 변경할 수 있습니다. 다음 절차에서는 Up 스킨의 색상을 변경하여 일반적인 비활성 상태의 List 모양을 변경합니다.

새 Flash 파일(ActionScript 3.0) 문서를 만듭니다.
[구성 요소] 패널의 List 구성 요소를 스테이지로 드래그하고 인스턴스 이름을 aList 로 지정합니다.
List를 두 번 클릭하여 해당 스킨 팔레트를 엽니다.
Cell Renderer 스킨을 두 번 클릭하여 Cell Renderer 스킨 팔레트를 엽니다.
Up_Skin 스킨을 두 번 클릭하여 편집할 수 있도록 엽니다.
스킨의 채움 영역을 클릭하여 선택합니다. [채움 색상] 선택기가 스킨의 현재 채움 색상으로 속성 관리자에 나타나야 합니다.
[채움 색상] 선택기로 #CC66FF 색상을 선택하여 Up_Skin 스킨의 채움에 적용합니다.
스테이지 위의 편집 막대 왼쪽에 있는 [뒤로] 버튼을 클릭하여 문서 편집 모드로 돌아갑니다.

타임라인의 프레임 1에서 다음 코드를 [액션] 패널에 추가하여 List에 데이터를 추가합니다.

aList.setStyle("contentPadding", 5); 
aList.setSize(145, 200); 
aList.addItem({label:"1956 Chevy (Cherry Red)", data:35000}); 
aList.addItem({label:"1966 Mustang (Classic)", data:27000}); 
aList.addItem({label:"1976 Volvo (Xcllnt Cond)", data:17000}); 
aList.rowCount = aList.length;

[컨트롤] > [무비 테스트]를 선택합니다.

List가 다음 그림과 같이 나타나야 합니다.

Up_Skin 색상이 사용자 정의된 List 셀

프레임 효과는 contentPadding 스타일 설정 때문입니다.