어플 개발 - 화면 구성하기

 이전의 과정 들을 모두 마쳤다면 자바(Java)와 안드로이드 스튜디오(Android studio)를 설치하고 가상 디바이스(AVD)까지 끝낸 뒤라 어플 개발을 시작만 하면 되는 상황이 되었습니다.

 그러나 호기롭게 시작한 첫 화면은 다음과 같았습니다.

아....이 무엇이 무언이지 모르겠는 기분....

 살짝 멘붕에 빠질 뻔하다가 간신히 멘탈을 가다듬고 하나씩 건드려 보며 터득해 보기로 하겠습니다.

 우선 간단하게 첫 화면을 구성하는 방법에 대해서 알아보았습니다.

 그러기 위해서는 다시 위의 그림의 왼쪽 메뉴처럼 app >> res >> layout으로 들어가서 activity_main.xml 파일을 더블클릭하여 열어줍니다.

 그럼 저처럼 Text가 아닌 그림이 보일텐데 당황하지 말고 밑쪽에 보게되면 Design 옆의 Text를 눌러서 위와 같이 글로 구성된 화면을 봅니다.

 지금 현재는 아무 것도 없이 오른쪽의 화면처럼 Hello World! 라고만 출력 되어 있는 모습을 볼 수 있습니다.

 대충 감이 온 분들은 이 글씨를 제어하는 부분이 바로 아래의 소스 부분이라고 바로 감을 잡을 겁니다.

 <TextView

    android:layout_width="wrap_content"    

    android:layout_height="wrap_content"    

    android:text="Hello World!"    

    app:layout_constraintBottom_toBottomOf="parent"    

    app:layout_constraintLeft_toLeftOf="parent"    

    app:layout_constraintRight_toRightOf="parent"    

    app:layout_constraintTop_toTopOf="parent" />

그래서 위의 소스 밑에 Enter 한 번 치고 내려와서 그 뒤에 < 한 번 쳐주면 다음처럼 안드로이드 스튜디오에서 지원하는 많은 위젯 들이 보입니다.

 Button, Calendar, CheckBox, ImageView, 등등.... 중에서 우선 제일 만만한 버튼(Button)을 골라 보았습니다.

 그러면 다음과 같은 구문도 자동으로 생성이 되고 오른쪽 화면에 버튼이 하나 형성되어 있는 것을 볼 수 있습니다.

<Button    

 android:layout_width="wrap_content"    

 android:layout_height="wrap_content" />

 여기서 layout_width는 만드는 버튼의 너비를 뜻하는 것이고 layout_height은 버튼의 높이를 뜻하는 것입니다.

 그런데 사실 wrap_content 를 선택하기 전에 match_parent라는 선택지도 있어서 살짝 고민하였을 텐데 두 문장의 뜻은 다음과 같습니다.

 wrap_content: 내용물(content)의 크기에 맞게 크기를 맞춰줌
 match_parent: 남아있는 여유공간을 채워줌

 이제 버튼 안에 무슨 버튼이라고 표시를 해야 되니 위의 Textview 에서 글자를 표현하기 위해 android:text라고 치면 자동으로 형성이 됩니다. 그러면 하기와 같이 " " 안에 원하는 글자를 넣어주면 역시 오른쪽 화면에 바로 반영 되는 것을 확인할 수 있습니다.

android:text="button1"

 이제 버튼의 위치를 원하는 위치에 놓고 싶다면 다시 밑쪽에 위치한 Design 탭을 눌러서 아래와 같은 화면을 볼 수 있습니다.

 여기서 이전에 생성한 Button1을 드래그 하여 원하는 위치에 가져다 놓으면 됩니다.
그러면 다시 Text로 돌아갔을 때 해당 위치가 어디인지를 아래와 같이 나타내어 줍니다.

<Button    

 android:id="@+id/button"    

 android:layout_width="wrap_content"    

 android:layout_height="wrap_content"    

 android:text="button1"    

 tools:layout_editor_absoluteX="280dp"    

 tools:layout_editor_absoluteY="447dp" />

 그리고 위치를 확정해 주려면 다음의 아이콘인 Infer Constraints 버튼을 눌러서 현재 상태를 기반으로 상황을 고정합니다.

 그러면 다음과 같이 layout_constrainBottom_toBottomOf="parent" 와 layout_constrainStart_toStartof="parent" 라는 구문이 추가적으로 생기게 되며 가상 드라이브에서도 버튼의 위치가 원하는 위치로 출력되어 나타나는 것을 확인할 수 있습니다.

  <Button

    android:id="@+id/button"    

    android:layout_width="wrap_content"    

    android:layout_height="wrap_content"    

    android:layout_marginBottom="82dp"    

    android:layout_marginStart="37dp"    

    android:text="@string/button1"    

    app:layout_constraintBottom_toBottomOf="parent"    

    app:layout_constraintStart_toStartOf="parent" />