인터페이스 기초 01 - 뷰(View)

안드로이드의 화면은 다른 View들을 담고 있는 ViewGroup과 화면 요소를 구성하는 Widget으로 구성된다.

즉, View란 화면에 보이는 모든 요소를 말한다. 그리고 앱의 하나의 화면은 하나의 Activity가 관리한다.

#실습

- 이름과 전화번호를 입력한 후 인삿말 버튼을 클릭하면 인삿말을 출력하고, 종료 버튼을 누르면 프로그램이 종료되는 앱 만들어보기

                       -초기화면-                                             -인삿말 클릭 시 -                                         - 종료 버튼 클릭 시-                                                       

<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">

    <TextView
        android:id="@+id/profile"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:text="Profile"
        android:textColor="#030303"
        android:textSize="40dp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0" />

    <TextView
        android:id="@+id/photo"
        android:layout_width="0dp"
        android:layout_height="28dp"
        android:text="Photo"
        android:textSize="20dp"
        android:textStyle="bold|italic"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/profile"
        app:layout_constraintVertical_bias="0.0"
        tools:ignore="MissingConstraints" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:src="@drawable/photo"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/photo"
        app:layout_constraintVertical_bias="0.0"
        tools:ignore="MissingConstraints" />

    <TextView
        android:id="@+id/name"
        android:layout_width="0dp"
        android:layout_height="28dp"
        android:text="Name"
        android:textSize="20dp"
        android:textStyle="bold|italic"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView"
        app:layout_constraintVertical_bias="0.0"
        tools:ignore="MissingConstraints" />

    <EditText
        android:id="@+id/etName"
        android:layout_width="0dp"
        android:layout_height="49dp"
        android:ems="10"
        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_toBottomOf="@+id/name"
        app:layout_constraintVertical_bias="0.0"
        tools:ignore="MissingConstraints" />

    <TextView
        android:id="@+id/phone"
        android:layout_width="0dp"
        android:layout_height="28dp"
        android:text="Phone"
        android:textSize="20dp"
        android:textStyle="bold|italic"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/etName"
        app:layout_constraintVertical_bias="0.0" />

    <EditText
        android:id="@+id/etPhone"
        android:layout_width="0dp"
        android:layout_height="49dp"
        android:layout_marginBottom="148dp"
        android:ems="10"
        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_toBottomOf="@+id/phone"
        app:layout_constraintVertical_bias="0.0"
        tools:ignore="MissingConstraints" />

    <Button
        android:id="@+id/btnHello"
        android:layout_width="380dp"
        android:layout_height="50dp"
        android:onClick="onClick"
        android:text="인삿말"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.483"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/etPhone"
        app:layout_constraintVertical_bias="0.208"
        tools:ignore="MissingConstraints" />

    <Button
        android:id="@+id/btnExit"
        android:layout_width="380dp"
        android:layout_height="50dp"
        android:onClick="onClick"
        android:text="종료"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.483"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btnHello"
        app:layout_constraintVertical_bias="0.0" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

1. id

android:id="@+id/profile"

특정 뷰를 참조하기 위한 식별 정보로 이름을 붙여주는 것과 똑같다.

android:id ="@+id/내가 지정하는 이름" 과 같은 형식으로 만든다.

 

2. layout_width, layout_height

android:layout_width="0dp"
android:layout_height="wrap_content"

뷰 그룹 안에서의 가로와 세로 너비를 지정하는 것으로 단위는 dp 또는 dip를 사용하는데, dp를 더 많이 사용한다.

선택지 중에서 match_parent와 wrap_content가 있다. 

match_parent는 담겨 있는 뷰그룹의 크기에 맞춘 것이고, wrap_content는 담고 있는 항목의 크기에 맞춘 것이다.

위의 표를 보면서 더 쉽게 설명하자면

match_parent는 Button이 들어있는 배경의 크기에 맞게 맞추는 것이고, wrap_content는 버튼 안에 적혀 있는 글자(Button)의 크기에 맞게 맞추는 것이다. 그리고 layout_width, layout_height는 필수로 지정해야 한다.

 

3. TextView

<TextView
    android:id="@+id/photo"
    android:layout_width="0dp"
    android:layout_height="28dp"
    android:text="Photo"
    android:textSize="20dp"
    android:textStyle="bold|italic"
    .
    .
    .

text는 표시할 문자열을 나타낸다. 

textStyle은 normal, bold, italic이 있는데 동시에 적용하고 싶으면 위 코드와 같이 작성하면 된다.

 

4. ImageView

<ImageView
    android:id="@+id/imageView"
    android:layout_width="300dp"
    android:layout_height="300dp"
    android:src="@drawable/photo"
    .
    .
    .

이미지를 표시하는 액자 역할로 기본 이미지가 필요하다.

이미지는 drawalbe 파일에 저장해두고, android: src="@drawalbe/파일이름"으로 출력한다.

이미지 파일은 투명도 등을 조종하기 위해 가능하면 png 파일을 사용하는 것이 좋고, 파일명은 한글과 대문자는 피한다.

또한, 확장자로 구분하지 않으므로 파일명을 다르게 해야 한다.

예를 들어, photo.jpg와 photo.png를 구별하지 않으므로 이름이 중복되면 안 된다.

 

5. EditText

<EditText
    android:id="@+id/etName"
    android:layout_width="0dp"
    android:layout_height="49dp"
    android:ems="10"
    android:hint="이름을 입력하시오."
    android:inputType="textPersonName"
    .
    .
    .

키보드 입출력을 처리한다. 

hint는 입력하기 전 칸에 쓰여 있는 문자열로 입력하면 자동으로 없어진다.

inputType은 입력할 값의 유형으로 유형에 따라 사용하는 키보드의 종류가 자동으롭 변경된다.

 

5. Button

<Button
    android:id="@+id/btnHello"
    android:layout_width="380dp"
    android:layout_height="50dp"
    android:onClick="onClick"
    android:text="인삿말"
    .
    .
    .

text는 버튼에 나타나는 문자열을 의미하고,

onClick은 버튼을 클릭했을 때 동작할 메소드명을 지정하는 것이다.

예를 들어, android: onClick="Click" 으로 지정했다면 자바 소스 코드 부분에 public void Click (View v) { ... } 라는 메소드를 구현에 버튼 클릭시 작동할 동작을 작성할 때 사용된다.

---

<MainActivity.java>

package ddwucom.moblie.week03.assignment03_p18;

import androidx.appcompat.app.AppCompatActivity;

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

public class MainActivity extends AppCompatActivity {


    EditText editText1;
    EditText editText2;
    Button exit;

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

        editText1 = findViewById(R.id.etName);
        editText2 = findViewById(R.id.etPhone);
        exit = (Button)findViewById(R.id.btnExit);

    }

    public void onClick(View view){

        String name = editText1.getText().toString();
        String phone = editText2.getText().toString();
        String hello = "안녕하세요, 저는 " + name + "입니다.\n전화번호는 " + phone + "입니다.";

        switch(view.getId()) {
            case R.id.btnHello:
                Toast.makeText(getApplicationContext(), hello, Toast.LENGTH_LONG).show();
                break;

            case R.id.btnExit:
                finish();
                break;
        }
    }

}

 

1. findViewById()

EditText editText1;
EditText editText2;
Button exit;

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

    editText1 = (EditText)findViewById(R.id.etName);
    editText2 = (EditText)findViewById(R.id.etPhone);
    exit = (Button)findViewById(R.id.btnExit);

}

ViewGroup에 배치된 위젯을 객체로 가져오는 역할이다.

R.id.etName 는 res 파일에 속한 자원들의 id가 정수 타입 상수로 등록되는 것으로, res파일에서 id가 etName인 자원을 가져오라는 뜻이다.

즉, etName과 etPhone에서 이름과 전화번호를 입력 받으면 editText1, editText2 각각에 저장된다.

 

2. getText().toString()

String name = editText1.getText().toString();
String phone = editText2.getText().toString();

입력받은 값을 가져와 문자열로 변환하여 name과 phone에 저장한다.

정수일 경우에는 Integer.parseInt(text)로 정수형 변환을 이용한다.

 

3. Toast.makeText(), finish()

switch(view.getId()) {
    case R.id.btnHello:
        Toast.makeText(getApplicationContext(), hello, Toast.LENGTH_LONG).show();
        break;

    case R.id.btnExit:
        finish();
        break;
}

Toast.makeText()는 화면 하단에 일정 시간 동안 나타나는 안내용 출력창이다.

Toast.makeText(getApplicationContext(), "출력할 메시지", 출력시간). show() 로 작성되며,

출력시간은 LENGTH_SHORT 또는 LENGTH_LONG 중에서 선택할 수 있다.

finish()는 앱을 종료시킨다.