세번째 프로젝트 만들기_01_디자인

안드로이드 스튜디오와 코틀린에 익숙해지기 위해 만들어 보는 세번째 프로젝트는 "행운의 별"이다.

 

 

제목은 Lucky Star

별이 4개 있다.

행운의 별을 클릭하면 Result(결과)에 Lucky!

행운의 별이 아니면 Sorry! 가 나타난다.

 

새 프로젝트 만들기

참고:

프로젝트 만드는 과정 중에서 앞에서 다루었던 내용은 간단하게 표현하는 경우도 있다.

잘 안되는 부분이 있다면 안드로이드 스튜디오의 앞 글들을 참고한다.

 

새 프로젝트를 만들기 위해 안드로이드 스튜디오를 실행한다.

File > New > New Project를 클릭해서 새 프로젝트를 만든다.

Project Templte선택창에서 Empty Activity를 선택한다.

Project Name을 Lucky Star로 입력하고 언어는 Kotlin을 선택한다.

 

 

디자인

프로젝트가 준비되면 activity_main.xml탭을 클릭한다.

Orientation for Preview (미리보기 방향)을 Landscape(가로)로 선택한다.

 

 기본으로 만들어져 있던 TextView(Hello World)는 위쪽으로 이동하고 아래와 같이 추가로 버튼4개와 textView 한 개를 스크린에 추가한다.

 

 마지막으로 Button 중에서 FloatingActionButton을 오른쪽 아래쪽에 추가한다.

Pick a Resource(리소스 선택)창이 자동으로 뜬다.

검색에 del을 입력하고 delete(삭제) 아이콘을 선택한다.

 

 

추가할 것인지 물어보는 창이 뜨면 OK를 클릭한다.

 

설치를 성공하면 오른쪽 Hide(숨기기)버튼을 클릭한다.

 

View ID 수정

 

View의 ID를 아래와 같이 수정한다.

 

 

textViewTitle과 textViewResult의 Text속성값을 String리소스로 아래와 같이 등록한다.

(리소스 등록하는 방법은 앞에서 여러번 해 보았다.)

 

 

Constraint 제약 만들기

 

버튼을 정렬하고 constrint(제약)을 만들자.

button1을 선택한 후 Shift키를 누른 상태에서 button4를 클릭하여 버튼4개를 모두 선택한다.

 

 

Align(정렬) 버튼을 클릭한 후 Horizontally(수평으로), Vertically(수직으로) 를 한번씩 클릭해 준다.

 

textViewTitle을 선택한 후 속성창에서 textSize(텍스트 크기)를 바꿔준다.

 

추가로 textViewResult의 크기는 24sp 정도로 한다.

 

textViewTitle을 다시 선택한 후 속성창에서 Vertical Bias(세로 편향)를 20 정도로 조정한다.

 

 

textViewResult에 제약을 만들자.

선택한 후 속성창의 Layout에서 왼쪽,오른쪽,아래쪽 +버튼을 눌러서 스크린에 제약을 건다.

 

 위쪽은 textViewTitle의 아래쪽에 제약을 건다.

 

textViewResult는 세로 편향을 70 정도로 조정한다.

 

FAB버튼의 제약은 아래와 같이 한다.

 

 

다 됐으면 세로 방향으로 돌려서 확인한다.

 

 

버튼 배경 이미지

 

위에서 처럼 button을 Shift키를 사용해서 모두 선택한 후 속성창에서 background 속성을 바꾼다.

리소스 선택창에서 검색창에 star을 입력한 후 선택한다.

 

 

계속해서 검색창을 x 버튼을 눌러서 닫고 넓이와 높이를 50dp로 바꾼다.

그리고 버튼 안에 글자는 필요 없으므로 속성창 text에 있는 Button 글자를 지운다.

 

 

tag 넣기

 

tag(태그)는 버튼과 같은 뷰에 꼬리표를 다는 것이다.

코딩할 때 버튼 4개를 쉽게 다루기 위해 tag를 붙여 놓는다.

 

button1을 선택한 후 속성창의 검색에 tag를 입력하고 1을 입력한다.

 

계속해서 button2를 선택 후 2를 입력한다.

같은 방법으로 button3에는 3, button4에는 4를 입력한다.

 

디자인이 완성되었다.

 

 

실행해보자.

 

 

액션바에 있는 앱 제목이 중복되므로 액션바를 없애기로 한다.

 

 

코드는 다음 글에서 작성한다.

 

끝.

Wraven...