안드로이드 UI - droiddraw

오늘은 조금 쉬운 강좌를 올리려합니다.

켁케에엑님이 올리신 UI에디터 droiddraw를 사용해서 쉽게 레이아웃을 구성하는 방법입니다.

1. 레이아웃 선택

가장먼저 레이아웃을 선택합니다. 안드로이드 플랫폼에서 기본적으로 선택되어있는 레이아웃방식은

LinearLayout입니다. 강좌는 쉽게 AbsoluteLayout으로 진행해보겠습니다.

2. 디자인

우선 오른쪽 컨트롤을 드래그하여 다음과같이 화면을 구성합니다.

위와같이 화면을 구성하셨다면 다음은 이름을 정해줍니다.

3. 컨트롤 이름 지정

컨트롤 이름은 Properties에서 지정합니다. 각 속성에 관한 값은 다음과 같습니다.

가. Id : 아이디 지정
나. width : 가로길이
다. height : 세로길이
라. Background Color : 컨트롤 배경색
마. Padding : 여백
바. Visible : 해당속성이 보이게/또는 안보이게
사. Text : 컨트롤 들어갈 텍스트
아. FontSize : 글자크기
자. FontFace : 글자체
차. FontStyle : 굵게/이텔릭/볼드+이텔릭 지정
카. TextColor : 텍스트 색
타. TextAlignment : 텍스트 정렬 왼쪽 / 가운데 / 중간
파. 기타속성지정 (체크로 지정)
- Password : 암호텍스트상자로 변경
- Numbers Only : 숫자만 입력가능한 텍스트상자
- PhoneNumber : 핸드폰번호형식으로 입력
- CorrectSpelling : (잘모르겠네요ㅠㅠ) 정확한 스펠링 입력이라는 뜻같은데
- Capitalize : (잘모르겠네요ㅠㅠ)

4. 컨트롤 적용

Generate버튼을 눌러서 디자인 한 컨트롤을 적용합니다.

버튼을 누르면 아래쪽에 소스가 생성됩니다.

저 소스를 복사해서 Main.xml파일에 적용하시면 됩니다.

Main.xml파일

<?xml version="1.0" encoding="utf-8"?>

//이곳에 직접 디자인 후 제작한 소스를 입력

5. 결과

다음과 같이 결과가 출력됩니다.

이것으로 UI를 만들면 굉장히 쉽긴 합니다만 아직 버그가 너무 많은듯 하네요

버전이 바뀔 때 마다 소스가 약간씩 바뀌는것도 문제구요

해당 컨트롤엔 사용하면 안되는 부분이있는데 무시하고 디자인 에디터에서는 사용해버리는 문제도 있구요

(그랬을 경우에는 에러가 나게 됩니다.)

조금 더 높은 버전의 UI에디터를 기대해 봐야 할 듯 하구요 이 UI에디터는 참고용으로 사용하셔야 될듯 하네요^^

//의견

질문입니다..
1. 에디터는 나모웹 에디터같은 역활을 하는군요.. 사용하기는 편하지만 불필요한 소스가 제공된다고하니 말입니다. 제생각.. 이렇게 이해했어요 ㅎㅎ

2. xml 의 역활은 어플의 UI를 담당하는 역활로 보입니다.
각 UI에 대한 액션 컨트롤은 자바로 구현하는건지요?

1. 맞습니다. 아직 부족한점이 많은 UI에디터입니다.
(나모랑 다른점은 이건 소스까지 수정할수는 없다는것이겠죠)

2. 액션 컨트롤은 자바기반으로 구현합니다.

참고로.. 현재 AbsoluteLayout은 deprecate(?.. 철자가.. 쿨럭;;;).... 즉, 사용하지 말것을 요구하고 있습니다. 그리고 저 같이 이클립스에서 모두 작업을 계속해왔던 입장에선, 오히려 이 어플이 불편하더군요.... 허허;;

맞습니다. 엡솔루트(저는 그냥한글로^^)는 사용을 가급적이면 안하는것을 추천드리구요
위의UI툴은 참고용으로 쓰는게 좋겠죠^^ (저도 에디터를쓰면...... 더이상해지는)

나름대로 UI 설계시에 참고용으로 많은 도움이 될 유용한 툴인것 같습니다만...^^ 제 생각으론!!
어떤 툴이든 불필요한 소스가 들어가는 부분은 있습니다.

출처: http://cafe.naver.com/androi.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=88&