[Android] 안드로이드 인터페이스 기초 01 - 뷰 (View)

뷰에 대해 알아보려고 합니다. 

그 전에, 안드로이드의 화면 구성에 대해 먼저 알아보겠습니다. 

앱의 하나의 화면은 하나의 Activity가 관리하며,

화면은 다른 View 들을 내부에 담는 ViewGroup과 화면 요소를 구성하는 Widget 으로 구성됩니다.

View는 주로 XML로 선언하나 java code에서 직접 작성도 가능합니다.

 

위젯(Widget)은 화면 입출력 요소를 표현하는 뷰(View) 입니다.

출처 : DDWU 2022 SPRING, MOBILE SOFTWARE

뷰 그룹(ViewGroup)은 위젯 또는 다른 뷰를 grouping 하거나 배치할 때 사용하는 뷰(View) 입니다.

출처 : DDWU 2022 SPRING, MOBILE SOFTWARE

---

뷰의 개념과 기본 위젯들을 이용한 실습을 진행하겠습니다.

 

숫자 버튼을 계속 누르면 계속 숫자가 추가되는 앱을 구성하려고 합니다.

ONE , TWO , THREE 순서로 누를 경우 123가 됩니다.

clear를 누를 경우 EditText의 글자를 모두 지웁니다.

 

 

예제 화면

 

MainActivity.java

package ddwu.mobile.week03.hw3_2;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

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

        editText = findViewById(R.id.editText);
    }

    public void onClick(View v) {
        String text = editText.getText().toString();
        int num = Integer.parseInt(text);

        switch (v.getId()) {
            case R.id.one:
                num += 1;
                editText.setText(Integer.toString(num));
                Toast.makeText(this, text, Toast.LENGTH_SHORT).show();
                break;
            case R.id.two:
                num += 2;
                editText.setText(Integer.toString(num));
                Toast.makeText(this, text, Toast.LENGTH_SHORT).show();
                break;
            case R.id.three:
                num += 3;
                editText.setText(Integer.toString(num));
                Toast.makeText(this, text, Toast.LENGTH_SHORT).show();
                break;
            case R.id.clear:
                editText.setText("");
                Toast.makeText(this, text, Toast.LENGTH_SHORT).show();
                break;
        }

    }
}

 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/editText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="20"
        android:hint="숫자를 입력하세요."
        android:inputType="textPersonName"
        android:minHeight="48dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.155" />

    <Button
        android:id="@+id/one"
        android:layout_width="400dp"
        android:layout_height="wrap_content"
        android:onClick="onClick"
        android:text="one"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.454"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.27" />

    <Button
        android:id="@+id/two"
        android:layout_width="400dp"
        android:layout_height="wrap_content"
        android:onClick="onClick"
        android:text="TWO"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.454"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.387" />

    <Button
        android:id="@+id/three"
        android:layout_width="400dp"
        android:layout_height="wrap_content"
        android:onClick="onClick"
        android:text="THREE"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.454"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.499" />

    <Button
        android:id="@+id/clear"
        android:layout_width="400dp"
        android:layout_height="wrap_content"
        android:onClick="onClick"
        android:text="CLEAR"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.454"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.62" />

</androidx.constraintlayout.widget.ConstraintLayout>