[안드로이드 프로그래밍 과제] - 2주차 (직접 풀어보기 4-2)

1. 과제 안내문, 예시 출력화면

---

다음과 같은 화면을 xml로 코딩하라. 버튼, 텍스트뷰, 에디트텍스트, 버튼을 차례로 지정하고 앞에서 배운 다양한 속성을 사용하여 다음 화면과 최대한 동일하게 나오도록 하라.

 

예시 출력 화면

---

 안드로이드 프로그래밍 강의의 첫 번째 과제이다. 안드로이드 프로그래밍을 처음 배울 때는 위와 같은 위젯의 기초를 배운다. 마진, 패딩과 같은 위젯의 속성도 배우는데, 화면을 배치하는데 있어서 매우 중요한 개념이니 확실하게 알아두어야 한다. 위의 과제는 다양한 위젯들의 속성을 정의하고 배치하는 것을 연습하기 위한 과제라고 생각된다. 다음은 풀이 과정이다.

 

2. 코드 구성

 

 위의 위젯들은 총 4개가 있다. 버튼1, 텍스트 뷰, 에디트 텍스트, 버튼2 이다. 각각의 위젯을 구성하는 코드를 차례로 게시하겠다.

 

- 버튼 1 위젯

 

<Button
        android:id="@+id/btn1"
        android:layout_margin="20dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/btn1str"
        android:background="#00ff00"
        />

 

 사실 위의 위젯들은 실제로 동작하지 않기에, MainActivity.java 파일에 코드를 적지 않아도 된다. 이는 각각의 위젯마다 id값을 할당할 필요가 없다는 뜻이기도 하다. 그래도 기본을 연습하는 입장으로 일일이 코드를 작성해보기로 했다. 위의 예시를 보면 버튼 1이 레이아웃의 상단으로부터 조금 떨어진것을 알 수 있는데 이는 margin값을 할당해야한다는 것을 의미한다. 색은 초록색이기에 backgrond를 정의하였다. text값은 strings.xml에 따로 정의해준 값을 사용하였다.

 

- 텍스트 뷰

 

<TextView
        android:id="@+id/textView"
        android:layout_margin="20dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/textViewStr"
        />

 

 텍스트 뷰 또한 마찬가지이다. 예시화면을 보면, 버튼 1과 레이아웃 상단과 떨어진 정도의 두배만큼 버튼 1과 텍스트뷰가 떨어져있다. 이는 버튼 1의 하단 마진 값을 따로 설정한 것이 아닌 두 위젯이 같은 마진값을 가진다는 것을 의미한다. 실제로 상단과 하단의 마진값을 다르게 주는 코드가 있는 것으로 알고있지만, 아직 사용할 필요는 없다고 생각했다.

 

- 에디트 텍스트

 

<EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/editTextStr"
        android:layout_margin="20dp"
        android:background="#0000ff"
        />

 

 에디트 텍스트 같은 경우, 화면의 가로 전체가 파란색으로 덮여있는 것으로 보아 width 값을 match_parent로 할당하였다.

 

- 버튼 2

 

    <Button
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:text="@string/btn2str"
        android:layout_margin="20dp"
        />

 

 버튼 2의 특이점은 레이아웃의 하단 끝까지 높이를 차지하고 있다는 것이다. Linear Layout이기 때문에 height 값을 match_parent로 할당한다면 마진값과 계산되어 화면에 나타난다.

 

- 전체코드

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/btn1"
        android:layout_margin="20dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/btn1str"
        android:background="#00ff00"
        />
    <TextView
        android:id="@+id/textView"
        android:layout_margin="20dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/textViewStr"
        />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/editTextStr"
        android:layout_margin="20dp"
        android:background="#0000ff"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:text="@string/btn2str"
        android:layout_margin="20dp"
        />

</LinearLayout>

 

3. 결어

 

 아직 기술적으로 어려운 부분을 배우지는 않아서 코드가 간단하게 보일 수 있다. 앞으로 더 많은 것을 적었으면 좋겠다.