바의 모양을 수정하기

개요

바의 경우에는 한 UI에 여러 구성요소가 있어 스타일을 이용한 모양 수정이 조금 까다롭게 느껴질 수 있습니다. 그러나 일단 각 부분의 명칭을 알고 나면 어렵지 않습니다.

이것이 렌파이의 기본 바입니다. 테마를 무엇으로 설정했느냐에 따라 모양이 조금씩 다르기는 합니다만 구조는 동일합니다.

위 그림에서 각 부분의 명칭을 확인한 다음 스타일로 모양을 수정해봅니다.

스타일을 이용해 변경한 모습입니다.

스크립트

init python: style.newBar =Style(style.bar) # 썸 이미지 # 바보다 높은 곳에 나타나도록 하려면 # 바의 세로길이보다 더 긴 이미지를 만들고 그 윗부분에 썸이 나타나도록 하면 됩니다. # 무슨 의미인지는 첨부한 "thumb.png" 이미지를 참고하세요. style.newBar.thumb = Image("thumb.png") # 썸때문에 바가 절단난 것처럼 보이므로 # 썸 가로길이의 반만큼을 thumb_offset에 입력 # 무슨 말인지 궁금하면 아랫줄을 주석처리하고 한번 보세요. style.newBar.thumb_offset = 13 # 양쪽 끝 거터의 동그란 부분은 바의 값에 상관 없이 표시되는 이미지이어야 합니다. # 바가 어떻든 간에 표시되어야 하는 이미지 영역의 너비. 픽셀단위 style.newBar.left_gutter = 10 style.newBar.right_gutter = 10 # 채워진 공간 style.newBar.left_bar = Image("bar_full.jpg") # 빈 공간. style.newBar.right_bar = Image("bar_empty.jpg")

바의 모양을 변경하기 위해 사용한 이미지입니다.

bar_empty.jpg

bar_full.jpg

thumb.png

참고

스타일 강의 http://askance.tistory.com/3

바 스타일 속성 http://baekansi.hosting.paran.com/doc/html/style.html#bar-style-properties