먼저...응원해주시는 모든분들께 감사의 인사를 전합니다...감사합니다...(__)

오늘 이시간은 위젯사이즈 조절과 기타 다른 속성(시간, 날짜, 날씨...)을 부여해 보겠습니다...

특히...위젯사이즈 조절에 힘겨우실 겁니다...

이것은...만든이의 폰에 최적화가 되어 있기에 기종이 다르면 사이즈가 크거나 작게 적용됩니다...

그러기에...자신에 맞는 사이즈를 직접 조절해 주어야 합니다...좀 번거로운 작업이 될 수도 있습니다...

하지만...한 번 자신의 사이즈를 찾으면 그 비율로 맞추기만 하면 되니까 처음만 힘들다고 여기시면 됩니다...

그럼...사이즈 조절에 관해 설명하겠습니다...

천천히...스샷을 보시면서 따라해 보시면 됩니다...

먼저...4*1 위젯을 만들어 보겠습니다...

아래 스샷처럼 4*1의 위젯을 불러옵니다...

스샷)

여기서...잠깐...어제는 uzip 파일을 불러왔지만...오늘은 NEW 를 선택해 줍니다...

NEW 를 선택하시면 다시 아래 스샷처럼 메인화면으로 넘어 옵니다...손가락 표시를 터치해 줍니다...

설정화면으로 다시 들어간 모습니다...

덩그러니 흰색만 있습니다...ㅡㅡ;;;(새것이니깐 그렇겠죠...^^;;;)

백키를 눌러 설정화면에서 다시 나와봅니다...

위 스샷을 보시면 아시겠지만...지금 만든 것은 4*1 위젯의 크기입니다...

어제 만든 아이언맨은 4*3의 위젯이구요...(<==또...이것은 위젯늘리기로 펼쳐진 모습입니다)

화면배열이 4열인 분은 그대로 하셔도 되고...5열이신분들은 오늘 만들려 하는 4*1 위젯을 늘려주시기 바랍니다...

아래 스샷은 4*1 위젯을 늘린 모습입니다...

스샷)

위의 스샷을 보시면 아시겠지만 두 위젯사이에 간극이 있습니다...

이 간극을 없애기 위해 4*1 위젯의 사이즈를 조절해 보겠습니다...

(여기서...한가지 아셔야 할것은 기종에 따라 위젯의 최대크기가 다릅니다...

아무리해도 간극이 사라지지 않는다면...동시에 4*3의 위젯도 사이즈를 조절해주어야 합니다...)

다시...4*1위젯의 설정화면으로 돌아가 보겠습니다...

스샷)

현재상태 Backgroud 입니다...

스샷을 잘 보시면...Control #1...Control #2 라고 보이시고

Alpha, Color 가 보이실겁니다...

(간략설명: Alpha - 투명도 조절, Color - 말그대로 색상선택 입니다...)

현재상태는 Control #1 입니다...우측으로 넘겨봅니다...(맛클앱을 쓰시는 분이시라면 잘 아실겁니다...^^)

또...우측으로 넘겨봅니다...

아래 스샷처럼 지금 다룰 Control #3 이 나왔습니다...

스샷)

위의 스샷을 보시면 아시겠지만...

Width(너비):882 & Height(높이):216 으로 되어 있네요...

좀 전 적용된 스샷에서 높이부분에 간극이 있었으므로 높이의 수치를 높여줘 봅니다...216 ---> 230

으로 하고 save를 눌러 줍니다...

스샷)

좀 크긴 느낌이 들죠...확실히 알기 위해 설정화면에서 나가 보겠습니다...

스샷)

헉~...ㅡㅡ;;;...밑부분은 채워졌는데...이제 옆이 줄어 들었습니다...

다시 설정으로 돌아가셔서 높이값을 수정해 줘 보겠습니다...

(왜?...너비가 줄어들었는데 높이값을 수정해?...하시는 분이 있으실 겁니다...^^;;;...저를 믿어보세요.)

높이값을 좀전에 230 ---> 225 로 줄여보았습니다...(Save를 눌러주셔야 됩니다...)

스샷)...너무 미미한 변화라 눈에 뜨지 않으실겁니다...

다시 설정창에서 나가서 확인을 해보겠습니다...

스샷)

꽉 찼습니다...^^;;;...

여기서부터 사이즈 조절에 관한 자세한 얘기를 하겠습니다...

좀 어렵게 들릴수도 있지만...어찌보면 간단하기도 합니다...

저가 알기론...

4*1위젯은...

현재 버전의 uccw에서 사이즈는 너비 *(곱하기) 높이 =200000 까지 지원합니다...

즉...지금 적용한 값...882 * 225 = 198450 

200000 에 근접한 값입니다...

그러면...최대근사치 값을 구해보겠습니다...200000/882 = 226.7....

높이값을 226으로 하면 거의 최대치가 되겠군요...226으로 변경해보겠습니다...

그러면...4*1 이 200000까지 지원을 하면 다른 것들은 얼마까지 지원하는가?라는 의문을 가지실겁니다...

간단합니다...

4*2 : 400000 (4*1위젯이 두개라 생각하면 됩니다...)

4*3 : 600000

4*4 : 800000 

아시겠죠...^^;;;

스샷)

위의 스샷을 가만히 보니 4*3 위젯 아이언맨이 너비가 좀 작아보이는군요...

4*3 아이언맨 위젯 설정에 가서 높이를 680 ---> 679 로 낮춰 보겠습니다...

스샷)

어떻습니까?...두개의 위젯이 하나처럼 보이시죠?...^^;;;

오늘 4*1위젯에 집어 넣어 볼 것은... 

시간   관련:Time(시간), Date(날짜), Am/Pm(오전/오후), 

베터리관련:Battery Level(베터리잔량), Battery Status(베터리충전상태), 

위의 속성을 부여해 보겠습니다...

다시 설정화면을 보시겠습니다...(이제 좀...익숙해지셨죠...화면이...^^)

스샷)

현재상태 Background 입니다...

백그라운드에 아이언맨위젯 바탕색으로 쓰인 Color를 적용해보겠습니다...

색상코드는 2d2d2d 입니다...

설정에 있는 Color 박스를 터치하고 아래와 같이 입력을 해봅니다...

(자신이 원하는 색으로 지정해도 됩니다...)

스샷)

스샷)

선택하고 닫으면...아래와 같이 시간이 추가가 된 것을 보실 수 있습니다...

이제 Time 에 속성을 부여할 차례입니다...[Position(위치), Size(크기), Angle(기울기), Alpha(투명도), Color(색상)...등]

설정화면에 Background라고 적힌 박스를 터치해 봅니다...

아래와 같이 background 가 선택되어 있는데...Time 으로 선택을 합니다...

배경색이 어두우니...Color 를 바꾸어 밝은색으로 바꾸겠습니다...Color박스 터치 후...

fffff 코드를 입력하거나...색상창에서 손가락을 터치해 동그란 원을 자신이 원하는 색으로 이동시켜 주면 됩니다...

위치조절해 보겠습니다...

Position 박스를 터치하면 아래와 같은 화살표를 눌러(다...다...다...닥) 자신이 원하는 방향으로 이동을 시키면 됩니다...

저는 위젯 가운데로 보내보겠습니다...

(Faster movement 라는 체크박스가 보이시죠...말 그대로 입니다...빨리 이동시키기입니다...)

이제 Control #1에 있는...position, color, 알았어니...size, angle, alpha 에 대해 알아보겠습니다...

size는 말 그대로 크기입니다...기본 80으로 적용이 되어 있습니다...저는 120으로 올려보겠습니다...

angle 은 기울기 인데...기본 0 입니다...변화하는 모습을 보여드리기 위해 10으로 해보았습니다...

alpha 는 투명도...기본 255 완전불투명으로 되어 있습니다...200 으로 낮추어 보았습니다...

(값이 작을수록 투명에 가까와 집니다...)

위 내용값 적용스샷)

위의 스샷을 보시면...숫자크기는 커졌고...기울어졌고...색이 좀 바래졌습니다...^^

이렇게 적용되구나 알고 계시면 됩니다...

다시 angle만 원위치 시키겠습니다...ㅡㅡ;;;

Time의 다음 속성이 있는 Control #2 를 살펴보겠습니다...

우측으로 살짝 넘겨보시면...Contro #2 가 나오는데...그 곳엔 Special Effect 라는 박스가 있습니다...

이것은...도대체 어디에 쓰는 물건인고?...하시겠지만...사실 별거 없는 겁니다...ㅡㅡ;;;

그래도...용이나게 써먹을 수 있는 것입니다...^^;;;

그 박스를 터치해 보면...기본 No Effect 에 선택되어 있습니다...

바로 아래에 있는 See through effect 가 궁금하시면 한 번 선택해 주어 봅니다...^^;;;

어떻게 바뀌셨나요...위젯배경을 뚤어버리죠...^^

스샷)

설정창에서 나와 적용된 모습)

쉽게 설명을 하자면...ㅡㅡ;;;...폰 메인배경에 투영시킨다?...더 어려워진거 같네요...ㅡㅡ;;;

일단...이 special effects 는 기본인 no effect 하기로 합니다..

저가...나중...좀 더 익숙해질때 다시 언급하여 그 효과를 극대화 시킬 수 있는 법을 알려드리겠습니다...^^

다음은...Control #3 으로 넘어가겠습니다...또...살짝 우측으로 넘겨주세요...

dx, dy, Radius, Color 이라는 박스가 보이시고...작은 글씨로...Shadow controls(음영...즉 그림자 조절)이라고 보입니다...

ㅡㅡ;;;...참...미분방정식도 아니고...dx, dy라니...ㅎㅎ...

별거 아닙니다...dx 는 수직선에서 x축...ㅡㅡ;;;...이런...ㅠㅠ...

기본...0으로 설정이 되어 있습니다...

숫자가 크지면 오른쪽으로...숫자가 작아지면 왼쪽으로 그림자가 생긴다고 여기시면 됩니다...

dy는 숫자가 커지면 위쪽으로...작아지면 아래쪽으로 그림자가 생깁니다...^^

Radius는 쉽게 말해서 그림자반경...커질수록 그 그림자의 반경이 넓어지겠죠...

여기서 한가지 아셔야 할 것이...dx, dy 값을 줬더라도...Radius(반경)값이 0이면 효과없음입니다...^^

대신...dx, dy 값이 0 이더라도...Radius 값을 주면...숫자 주변으로 그림자가 생깁니다...^^

color 는 말그대로 그림자의 색을 주는 것입니다...

저가...흰색으로 그림자를 주어 보겠습니다...

여기서...dx, dy 값은 0 이고...Radius 값만...20 으로 줘 보겠습니다...

스샷)

보이시죠...숫자주변으로...희멀건 그림자가...^^;;;

보통의 경우 그림자를 이용해 음각효과 또는 양각효과를 줍니다...

또...나중의 강좌에 말하겠지만...Shape 로 박스 또는 선을 그릴때 약간의 입체적 효과를 줄때 사용하곤 합니다...

Shape로 효과 줄때...또 언급하겠습니다...

다음...Control #4 입니다...우측으로 넘겨주세요...

아래 스샷에도 보이지만...여기에는...Fonts(서체), Align(정렬), Case(대소문자선택?),Prefix(앞쪽커스텀?),Suffix(뒤쪽커스텀?)

사실...여기에서 주로 쓰는 것은...Fonts, Align, 이 두가지 입니다...

참고로...Case는 숫자이기에 큰 의미는 없습니다...(나중에 date에서 다루도록 하겠습니다...)

또...prefix, suffix 이건...이 시간 02:49 앞과 뒤에 글귀를 써넣고 싶다 할때 쓰여집니다...

예) prefix : 현재시간 , suffix : 분 입니다

 "현재시간 02:49분 입니다"  

적용스샷)

어느정도 이해가 가셨죠?...

이제 Font와 Align 에 대해 설명하면...

현재는 폰의 기본폰트로 작업하고 있는데...특정폰트로 변경하고 싶다 하실때 이 Font 박스를 터치 합니다...

스샷)

정상적으로 Fonts폴더가 존재하면...박스를 터치하면 그 안에 있는 아래와 같이 파일들이 뜹니다...

저는 여기에서...bicubik.ttf 라는 폰트를 선택해 보았습니다...

스샷)

Align(정렬) 박스를 터치하면...

아래 스샷처럼...Left(좌측정렬), Center(중앙정렬), Right(우측정렬) 이렇게 세가지가 뜨는데...

잘 아시죠...정렬은...^^;;

그런데...이것 역시 중요한 것입니다...

시간... 날짜...날씨온도...베터리퍼센트...등...변화하는 텍스트 또는 숫자등은 그 폰트박스에 따라 줄었다 커졌다 합니다...

그러기에...간격이 넓어졌다 줄어들었다를 반복하지요...

정렬을 맞추어 주지 않으면...더 넓어지거나...더 좁아집니다...

쉽게 맞추려면...

화면 왼쪽에 있는 것은 좌측정렬을 해주시고...

가운데 있는 것은 중앙정렬...

오른쪽에 있는 것은 우측정렬 해주시면 됩니다...

기본적으로...전부다...Left(좌측정렬)로 되어 있습니다...

다음은...마지막으로 Time의 마지막 속성 Control #5 입니다...ㅡㅡ;;;휴...

먼저 스샷을 보시죠...

Format 과 Separator 박스가 보입니다...

Format 에 들어가 보시면...

00-24 : 두자리 시 - 24시간 방식....예) 15 : 00

00-12 : 두자리 시 - 12시간 방식....예) 03 : 00

0 - 24 : 한자리 시 - 24시간 방식....예) 15 : 00 .............만약에 오전 7시 이면...예) 7 : 00

0 - 12 : 한자리 시 - 12시간 방식....예)  3 : 00 

이런식으로 표시가 됩니다...

다음으로...separator 박스를 터치하면...

: <---클론 시 와 분의 분리를 커스텀...즉 다른것으로 바꾸고 싶으실때 사용하면 됩니다...

예로...별로  ★ <---로 바꾸어 보겠습니다...

스샷)

^^;;;...이렇게해서...Time에 대한 속성 설명이 어느정도 된거 같군요...

왜...Time 이거 하나를 하면서...Control을 다 언급을 하였냐면...

Control을 지금 어느정도 설명을 해 놓지 않으면...앞으로 설명하는데 지장이 많을 줄 압니다...

처음...어느정도 개념을 잡아 놓으면...

지금...비록 Time 하나를 했지만...하시는 분은...다른 거 역시 추가해서 다룰때 거부감이 없어지실 겁니다...

물론...각...아이템에 따라 조금씩 추가되는 control도 있고 없어지는 것도 있지만...일단 베이스는 깔고 가야 될거 같아서 입니다...

추가되는 것은...그때 그때...그 아이템에서 설명토록 하겠습니다...

오늘은...여기서 마무리를 해야겠네요...ㅡㅡ;;;

오늘 못다한 강좌는 다음 강좌로 미루어야겠습니다...ㅠㅠ...죄송합니다...(__)

지금까지...글을 읽고 따라하신다고 수고많으셨습니다...그럼 다음강좌에서 뵙겠습니다...감사합니다...(__)

마지막으로 오늘했는 최종샷입니다....