[모바일프로그래밍] 01. 뷰와 기본 위젯

안드로이드 앱 화면에 보이는 버튼, 글자, 입력창은 모두 같은 뿌리에서 나온다. 바로 View라는 클래스다. 오늘은 안드로이드 UI의 근간인 뷰와 뷰그룹의 개념, 자주 쓰는 기본 위젯, 그리고 위젯의 공통 속성을 정리했다.

---

1. 뷰(View)와 뷰그룹(ViewGroup)

화면의 모든 것은 View다
안드로이드 화면을 이루는 모든 요소는 View 클래스를 상속받는다. 이렇게 화면에 배치되는 UI 요소를 통틀어 위젯(widget)이라 부른다.

• View: 버튼·텍스트처럼 실제로 보이는 화면 요소
• ViewGroup: 다른 위젯을 담는 그릇 역할의 위젯. 레이아웃이 여기에 속한다.

 

화면에서 보이는 버튼은 "버튼 위젯"이고, 코드에서는 Button 클래스의 객체다. 화면의 요소와 코드의 객체가 일대일로 대응한다고 보면 된다. 자바 GUI에서 본 "컴포넌트를 컨테이너에 담는" 구조가, 안드로이드에선 View와 ViewGroup으로 거의 그대로 나타났다.

---

2. 기본 위젯

가장 자주 쓰는 기본 위젯들이다.

위젯	역할
TextView	텍스트 표시
Button	클릭 버튼
EditText	텍스트 입력
ImageView	이미지 표시
CheckBox / RadioButton	선택

 

이름이 곧 역할을 말해준다. "보여주기"는 TextView·ImageView, "입력받기"는 EditText, "동작 시키기"는 Button이 맡는 식이다.

---

3. 위젯의 공통 속성

모든 위젯은 크기를 반드시 지정해야 한다. 가장 핵심적인 속성이 너비와 높이다.

속성	의미
layout_width / layout_height	위젯의 너비 / 높이
wrap_content	내용물 크기에 딱 맞춤
match_parent	부모 크기에 맞춰 꽉 채움

 

안드로이드 UI는 보통 XML로 화면을 선언하고, 자바/코틀린 코드에서 그 위젯을 찾아 제어한다.

<Button
    android:id="@+id/btn1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="클릭" />

 

Button btn = findViewById(R.id.btn1);

 

id와 findViewById의 연결
XML에서 android:id="@+id/btn1"로 위젯에 이름표를 붙이면, 빌드 과정에서 R 클래스에 그 id가 등록된다. 코드는 findViewById(R.id.btn1)로 그 이름표를 찾아 위젯 객체를 손에 쥔다. 화면(XML)과 로직(코드)을 잇는 다리가 바로 이 id다.

 

XML로 화면을 선언하고 코드에서 id로 찾아 제어하는 구조가, 웹에서 HTML 요소를 JS의 getElementById로 찾던 것과 똑같았다. 플랫폼이 달라도 "구조 선언 + 코드로 제어"라는 패턴은 같았다.

---

오늘 느낀 점

• 화면의 모든 게 View를 상속한다는 점에서, 자바 GUI의 JComponent 공통 상속과 같은 발상이 보였다. 객체 지향의 공통 부모 구조가 또 등장했다.
• XML(화면)과 코드(로직)를 id로 잇는 방식이, 웹의 HTML+JS, 자바의 XML 분리와 같은 "구조 선언 + 코드 제어" 패턴이라는 게 잡혔다.
• wrap_content·match_parent로 크기를 상대 지정하는 게, CSS 반응형·자바 배치 관리자와 같은 "다양한 화면에 적응" 고민의 연장이라는 걸 느꼈다.

---

한 걸음 더

• 화면을 XML로 따로 선언하는 데에는 이유가 있다. 디자인(레이아웃)과 동작(코드)을 분리하면, 디자이너와 개발자가 따로 작업할 수 있고 화면 구성을 바꿔도 로직을 건드리지 않아도 된다. 웹에서 HTML과 자바스크립트를 분리하는 것과 같은 발상이다.
• wrap_content와 match_parent가 픽셀 값 대신 쓰이는 까닭은 안드로이드 기기의 화면 크기가 제각각이기 때문이다. "300픽셀"처럼 고정하면 어떤 기기에서는 넘치고 어떤 기기에서는 작다. "내용에 맞춰" 또는 "부모에 맞춰"라는 상대적 지정이 다양한 화면에 적응하는 비결이다.
• findViewById를 매번 호출하는 방식은 위젯이 많아지면 번거롭고 실수가 잦다. 그래서 요즘 안드로이드 개발에서는 뷰 바인딩(View Binding)이나 Jetpack Compose 같은 더 현대적인 방식으로 옮겨가고 있다. 기본 원리를 알아두면, 이런 도구들이 무엇을 자동화해 주는지 이해하기 쉬워진다.

---

확장 : 입력 검증과 Toast 안내

기본 위젯을 다룰 때는 단순히 값을 읽고 출력하는 것보다, 사용자가 값을 비워 두었을 때 어떻게 안내할지도 같이 생각해야 한다. EditText는 항상 문자열을 돌려주므로, 숫자 계산을 하려면 먼저 빈 문자열인지 확인하고 그 다음 숫자로 변환하는 흐름이 안전하다.

EditText editNo1;
EditText editNo2;
Button btnAdd;
TextView txtResult;

editNo1 = findViewById(R.id.editNo1);
editNo2 = findViewById(R.id.editNo2);
btnAdd = findViewById(R.id.btnAdd);
txtResult = findViewById(R.id.txtResult);

btnAdd.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        String sNo1;
        String sNo2;
        int iNo1;
        int iNo2;
        int iSum;

        sNo1 = editNo1.getText().toString();
        sNo2 = editNo2.getText().toString();

        if (sNo1.length() == 0 || sNo2.length() == 0) {
            Toast.makeText(getApplicationContext(), "숫자를 모두 입력하세요.", Toast.LENGTH_SHORT).show();
        } else {
            iNo1 = Integer.parseInt(sNo1);
            iNo2 = Integer.parseInt(sNo2);
            iSum = iNo1 + iNo2;

            txtResult.setText("합계: " + iSum);
        }
    }
});

 

이 예제에서 핵심은 입력 -> 종료 판단 -> 처리 -> 출력 순서다. 입력값이 비어 있으면 바로 안내하고 끝내며, 정상 입력일 때만 숫자 변환과 계산을 진행한다.

 

---

수업 코드 보완: XML 위젯을 Java 코드로 제어하는 흐름

안드로이드 기본 위젯은 XML에서 화면 요소를 먼저 배치하고, Java 코드에서 id로 찾아와 이벤트를 연결하는 순서로 다룬다. 수업 코드에서 반복되는 핵심 흐름은 다음과 같다.

예제: 이름을 입력하면 인사말 출력하기

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="20dp">

    <EditText
        android:id="@+id/editName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="이름 입력" />

    <Button
        android:id="@+id/btnShow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="확인" />

    <TextView
        android:id="@+id/txtResult"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp" />
</LinearLayout>

 

public class MainActivity extends AppCompatActivity {
    EditText editName;
    Button btnShow;
    TextView txtResult;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        editName = (EditText) findViewById(R.id.editName);
        btnShow = (Button) findViewById(R.id.btnShow);
        txtResult = (TextView) findViewById(R.id.txtResult);

        btnShow.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                String sName;
                String sMessage;

                sName = editName.getText().toString();
                sMessage = sName + "님, 반갑습니다.";

                txtResult.setText(sMessage);
            }
        });
    }
}

 

단계	확인할 내용
XML	android:id="@+id/editName"처럼 위젯 이름을 붙인다.
Java 연결	findViewById(R.id.editName)으로 XML 위젯을 코드 변수에 연결한다.
이벤트	setOnClickListener 안에 클릭 후 처리할 일을 작성한다.
출력	계산하거나 만든 문자열을 setText()로 화면에 보여준다.

 

유제: 두 수를 입력받아 합계 출력하기

이 유제는 EditText 2개, Button 1개, TextView 1개로 구성하면 된다. 핵심은 입력값이 처음에는 문자열이므로 Integer.parseInt()로 숫자 변환을 한 뒤 계산하는 것이다.

---