본문 바로가기
앱인벤터/Tips

앱인벤터 Tips ::: 레이블(label) 꾸미기

by 이지이지(EGEasy) 2022. 6. 13.

안녕하세요. 이지이지입니다.

이번 포스팅에서는 앱인벤터의 레이블을 꾸미는 방법에 대해 알아보도록 하겠습니다.

 

앱인벤터의 기본 레이블(label) 컴포넌트는 설정할 수 있는 속성이 너무 제한적입니다

여백을 준다거나, 모서리를 둥글게 하는 등의 설정은 할 수가 없죠.

 

이런 제약을 없애고 좀 더 디자인적인 요소를 가미하기 위한 LabelPlus라는 확장 프로그램이 있습니다.

 

com.extension.LabelPlus.aix
0.04MB

 

LabelPlus로 구현 가능한 기능은 다음과 같습니다.

 

# Android 10.0 미만, Android 10.0 이상 기기 모두 가능

1. 레이블을 클릭 가능하게 하기

2. 양쪽 정렬

3. 글자 선택 가능하게 하기

4. 글자 줄여 표현하기(글이 길어지면 앞, 중간, 또는 뒤에 점 세개로 표시)

5. 줄 수 제한두기

6. 그림자 효과

7. 배경색, 그레디언트 배경색, 그레디언트 방향, 테두리 색상 및 두께, 안 여백, 모서리 둥글게

8. 글자에 그레디언트 색상 지정

9. 특정 글자 영역에 흐림 효과 주기

10. 스크롤 기능

11. 수평, 수직으로 확장하기

12. 회전 기능

13. 줄 간격 주기

 

# Android 10.0 이상의 기기만 가능

=> 앱인벤터에서 기본으로 제공하는 폰트 이외의 폰트 또는 이미지를 사용하기 위해서는 애셋(Media)에 미리 업로드를 해주어야 하는데, Android 10.0이상 부터는 이전 버전과 저장소의 경로가 다르고, LabelPlus는 10.0 이상의 맞추어져 있기 때문입니다.

 

14. 사용자 지정 폰트

15. 이미지 삽입 또는 아이콘 추가 기능

 

 

위 처럼 앱인벤터 기본 레이블로는 구현 불가능했던 많은 기능을 LabelPlus가 제공해주고 있습니다.

 

몇 가지 예제를 블록과 실행 화면으로 보여 드리겠습니다.

 


◆ 양쪽 정렬

- justify: true(양쪽정렬), false(양쪽정렬 X)

- label: 양쪽 정렬할 레이블 컴포넌트

양쪽 정렬하기

 


◆ 그림자 효과

- radius: 그림자 크기

- dx: 본문으로부터 x축만큼 떨어질 거리 (-는 좌, +는 우)

- dy: 본문으로부터 y축만큼 떨어질 거리 (-는 상, +는 하)

- color: 그림자 색깔

- label: 그림자 효과를 적용할 레이블 컴포넌트

 

그림자 효과 적용

 


◆ 색상과 모양 효과

- bgColorList: 배경색으로 지정할 색상을 리스트 형태로 입력(그레디언트 효과를 주지 않고, 단색으로 채우고 싶을 때에도 리스트를 만들고 하나의 색상만 지정)

- gradientOrientation: 그레디언트 방향

- borderWidth: 테두리 두께

- borderColor: 테두리 색상

- padding: 안 여백

- radius: 모서리 둥글기 정도

- label: 색상과 모양 효과를 줄 레이블 컴포넌트

 

색상과 모양 효과

 


◆ 회전 기능

- angle: 회전 각도

- label: 회전을 적용할 레이블 컴포넌트

 

회전 기능

 


이상 레이블 컴포넌트 꾸미기에 대한 포스팅 이었습니다.

더 많은 기능 또는 자세한 사항은 다음 링크를 참고하시구요.

폰트나 이미지 등 사용법에 있어 궁금한 점이 있다면 댓글로 남겨주세요~

 

 

LabelPlus - Additional methods for the Label component

Blocks: - These blocks set and return whether the entire label is clickable (true) or not (false). - This block sets the label text range as a clickable link. hideLink - the text that will be returned to the Click event, if this text is empty, the method w

community.appinventor.mit.edu

 

댓글