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

안드로이드 스튜디오 버전업 3.6.2

 

며칠 전에 안드로이드 스튜디오가 3.6.2로 버전업되었다.

그래서 새 버전으로 Basic Activity 프로젝트를 만들어 보면서 기본 사용법을 익히고 바뀐 부분도 확인힌다.

 

 

새 프로젝트를 만들고 templete(템플릿)에서 Basic Activity를 선택한다.

제목은 My Second Exercise로 하고 아래와 같이 설정한다.

 

 

첫화면은 아래와 같다.

 

이 Basic Activity의 구조는 Empty Activity와 다르다.

프로젝트가 만들어지면 MainActivity(메인 액티비티) 외에 추가된 파일들이 있다.

FirstFragment 와 SecondFragment

 

Fragment는 조각, 파편이라는 뜻으로 안드로이드 스튜디오에서는 하나의 스크린을 나타낸다.

Basic Activity는 2개의 독립적인 스크린을 가지고 시작한다.

처음 시작하면 나타나는 Hello FirstFragment 와 NEXT 버튼이 FirstFragment에 만들어져 있다.

 

또한 화면(스크린) 디자인을 정의하는 layout(레이아웃) 파일도 activity_main 이외에 3개의 파일이 더 있다.

activity_main을 더블클릭해서 Component Tree를 보면

CoordinatorLayout 이 포함하고 있는 요소들이 나타나 있다.

그 중에 content_main도 들어가 있다.

 

fragment_first 와 fragment_second는 각각 FirstFragment, SecondFragment의 레이아웃 파일들이다. 

 

안드로이드 스튜디오의 편집창도 바뀐 부분들이 있다.

디자인(Design)과 텍스트(Text)창 이동 탭이 아래 그림처럼 옵션이 한개 더 많아지고 오른쪽 속성창 위로 이동했다.

 

또한 디자인 창에는 확대,축소 등의 단추가 생겼다.

 

여기서는 랜덤수를 생성하는 앱을 만들어 보면서 Basic Activity에 있는 fragment 사용법도 함께 익혀본다.

 

FirstFragment 디자인 

 

fragment_first에 있는 텍스트의 색과 크기를 바꿔보자.

 

 

1. layout폴더에서 fragment_first.xml파일을 더블클릭하여 연다.
2. Component Tree에서 textview_first를 선택한다.
3. 오른쪽 attribute(속성)창 위의 검색에서 textc를 선택한다.
4. textColor의 입력창에 g를 입력한 후 darker_gray를 선택한다.

 

텍스트 크기를 바꿔보자.

 

 

단추 2개를 추가하고 constraint 위쪽을 textView아래쪽에 연결한다.

 

 

버튼2의 왼쪽, 아래쪽 constraint를 연결한다.

 

오른쪽 button3도 button2와 같은 방법으로 제약을 설정한다.

 

 

새로 등록한 버튼의 속성 id를 아래와 같이 수정한다.

 

 

이제 버튼의 text를 수정한다.

속성의 text에서 수정해도 되지만 fragment_first.xml 파일의 텍스트 창에서 바꿔본다.

 

 

순서대로 누르면 텍스트 창이 나타난다. 

선택한 버튼의 코드에서 text 속성 부분에 배경색으로 두드려져 있다.

마우스를 가져가면 문자열 Button을 string resource로 사용하라는 안내가 있다.

 

 

Extract string resource를 선택해서 편집창을 띄운다.

 

 

리소스 name , value 를 입력하고 OK버튼을 누른다.

 

id가 button_random인 버튼도 텍스트를 문자열 리소스에 등록하자.

 

리소스 name , value 를 입력하고 OK버튼을 누른다.

 

 

id가 button_first인 버튼은 본래 만들어져 있던 것이다.

이 버튼의 id를 button_count로 바꾼다.

 

 

id를 바꾸면 모든 참조된 것을 업데이트 할 것이지 물어본다.

Yes버튼을 클릭한다.

 

이제 이 단추의 text 속성값을 next에서 Count로 바꾸자.

strings.xml파일을 연다.

 

 

먼저 해당 속성값의 이름(next)부터 바꾸자.

마우스 포인터를 next에 두고 마우스 오른쪽 클릭 > Refactor > Rename을 클릭한다.

이름 변경창에서 button_count_text로 바꾸고 Refactor버튼을 누른다.

 

 

버튼의 text값은 그냥 문자열이므로 그냥 지우고 Count로 입력해서 바꾼다.

 

 

아래와 같은 모습으로 바뀐다.

 

 

textview_first는 id를 textview_count로 바꾸자

 

 

현재 button_count는 왼쪽(Start), 오른쪽(End)이 레이아웃(parent)에 제약되어 있다.

이것을 왼쪽은 toast버튼에, 오른쪽은 random버튼으로 제약을 바꿔보자.

 

 

아래와 같이 수정해 본다.

요령은 한 쪽 제약씩 끊은 후 연결하는 것이 쉽다.

 

textview_first의 text를 0으로 바꾸자.

 

 

Resource Manager(리소스 매니저) 탭을 클릭한다.

String 클릭 한다.

hello_first_fragment를 더블 클릭하면 strings.xml 파일을 열수 있다.

스트링 값을 0으로 바꾼다.

 

fragment_first.xml파일로 돌아와서 0의 크기를 72sp로 바꾼다.

 

이제 레이아웃 설정의 마지막으로 배경색을 바꾸자.

 

 

 

 

실행해서 다음과 같은 완성 화면인지 확인한다.

 

 

다음 글에서 계속...