안드로이드 기본 위젯 TextView, Button, EditText, ImageView

---

이번 포스팅에서는 안드로이드 위젯에 대하여 좀더 자세하게 알아보자.

기본 위젯들을 살펴보고 이것들을 이용하여 간단한 예제를 만들어 본다.

---

1. TextView

TextView는 글자를 표현하기 위한 위젯이다.

텍스트뷰에서는 다음과 같은 속성들을 지정할 수 있다.

<TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:textSize="30sp"
        android:textColor="#77af22"
        android:textStyle="bold" />

텍스트뷰의 속성을 정리하면 다음과 같다.

• text
  표시할 텍스트
• textColor
  텍스트 색상
• textSize
  텍스트의 크기
• textStyle
  텍스트의 스타일(bold, italic, bolditalic)
• typeface
  텍스트 폰트(normal, sans, serif, monospace)
• width
  픽셀 단위로 텍스트뷰의 길이를 설정
• height
  픽셀 단위로 텍스트뷰의 높이를 설정
• lines
  텍스트뷰의 높이를 설정

이와 같이 텍스트뷰의 속성으로 텍스트의 내용, 크기, 색상, 스타일 등의 다양한 속성을 변경할 수 있다.

폰트 크기를 지정할 때에는 dp가 아닌 sp를 사용하는 것을 추천한다.

폰트의 경우 리소스 관리를 위해 values 폴더의 strings.xml 파일에 정리를 하는 것이 좋다.

폰트 또는 배경 등의 색상을 관리하기 위해 values 폴더의 colors.xml 파일에 색상 관련 리소스를 정리하는 것이 좋다.

이렇게 리소스를 따로 관리해주면 재사용이 필요한 경우 유용하게 사용할 수 있다.

---

2. Button

버튼은 가장 기본적인 위젯으로 UI에서 아주 많이 사용된다.

Button 클래스는 TextView 클래스를 상속받아 사용하기 때문에 TextView의 모든 속성을 사용할 수 있다.

<Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:backgroundTint="#aa1100"
        android:onClick="clickedButton"
        android:text="Button" />

버튼이 갖는 속성을 정리하면 다음과 같다.

• backgroundTint
  버튼의 색상을 변경한다.
• onClick
  버튼이 클릭될 때 이벤트를 지정한다.

버튼이 클릭되었을 때 이벤트를 처리하기 위해서 다음과 같이 MainActivity 클래스에 clickedButton() 메서드를 작성한다.

public void clickedButton(View view) {
        Toast.makeText(getApplicationContext(), "Button is Clicked.", Toast.LENGTH_SHORT).show();
    }

작성된 clickedButton() 메서드는 xml 파일에서 onClick 속성에 연결하여 사용한다.

버튼 클릭 이벤트를 구현할 때 가장 기본적인 내용이므로 알아두자.

 

버튼을 처리하는 또 다른 방법도 있다.

바로 익명 클래스를 사용하여 이벤트를 처리하는 방법이다.

이 방법의 코드는 다음과 같다.(가장 일반적으로 사용하는 방법.)

<Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:backgroundTint="#aa1100"
        android:text="Button" />

일단 xml 파일을 살펴보면 버튼 속성에 onClick 속성이 빠져있다.

최근에는 xml파일에서 onClick 속성이 다음과 같이 deprecated 되어 사용되지 않는 것 같다.(곧 없어진다는 얘기)

onClick 속성은 그냥 이런게 있다 하고 알아두는 정도로 넘어가자.

 

onClick 속성이 빠지면 MainActivity 클래스는 어떻게 바뀌었을까?

다음과 같이 buttonEvent() 메서드를 만들어서 버튼 id를 정의하고 OnClickListener() 를 사용하여 이벤트 처리를 했다.

public class MainActivity extends AppCompatActivity {

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

        buttonEvent();
    }

//    public void clickedButton(View view) {
//        Toast.makeText(getApplicationContext(), "Button is Clicked.", Toast.LENGTH_SHORT).show();
//    }

    public void buttonEvent() {
        Button button = findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(getApplicationContext(), "Button is Clicked.", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

 

뭔가 코드가 길어지긴 했지만 xml 파일에서 onClick 속성을 넣어 사용하는 것보다 이게 더 많이 사용된다.

실행해보면 다음과 같이 똑같은 결과물을 얻을 수 있다.

 

 

이 방법을 정리해보면 다음과 같이 3단계로 확인할 수 있다.

• 버튼 참조 변수 선언

Button button;

• 버튼 위젯 찾기

button = findViewBuId(R.id.button);

• 익명클래스를 버튼에 붙이기

button.setOnClickListener(new View.OnClickListener() {
	public void onClick(View v) {
    	// 이벤트 처리
    }
}

 

물론 나중에 더 고급 내용으로 view binding을 통하여 버튼 이벤트를 처리하는 방법도 있긴 하지만 이건 나중에 알아보자.

(참고로 view binding으로 구현하면 ㄹㅇ신세계를 경험할 수 있음.)

---

3. EditText

에디트 텍스트는 입력이 가능한 필드이다.

EditText는 TextView의 자식 클래스로 TextView 클래스의 속성들을 상속받아 모두 사용 가능하다.

<EditText
        android:layout_width="250dp"
        android:layout_height="wrap_content"
        android:hint="input your text"
        android:textSize="20sp"
        android:textAlignment="center"/>

에디트 텍스트가 갖는 속성을 정리하면 다음과 같다.

• inputType
  에디트 텍스트의 속성으로 inputType이 있는데 text, number, phone, textPassword 등을 용도에 맞게 선택할 수 있다.
  선택한 타입에 따라 입력패드가 달라진다.
• hint
  텍스트 입력창에 무엇을 입력해야 하는지 알려주는 역할을 한다.

에디트 텍스트를 활용한 화면은 다음과 같다.

왼쪽의 화면에는 hint로 input your text라는 글자가 표시되어 있는데,

이 텍스트 입력 칸에 오른쪽 화면과 같이 인풋 유어 텍스트라는 글자를 적어넣은 것이다.

안드로이드 개발을 하면서 버튼처리로 입력한 텍스트 내용을 전달하는 것도 나중에 많이 하게 된다.

에디트 텍스트에서 사용자가 입력한 텍스트를 읽어올 때에는 getText(), 텍스트를 작성하려면 setText()를 호출한다.

 

에디트 텍스트를 간단한 예제로 사용해보자.

다음과 같이 xml파일과 java코드를 작성해보고 실행해보자.

<?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"
    android:gravity="center"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:textSize="30sp"
        android:textColor="#77af22"
        android:textStyle="bold" />

    <EditText
        android:id="@+id/editText"
        android:layout_width="250dp"
        android:layout_height="wrap_content"
        android:hint="input your text"
        android:textSize="20sp"
        android:textAlignment="center"/>

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:backgroundTint="#aa1100"
        android:text="텍스트 보이기"
        android:textSize="20sp"
        android:textStyle="bold" />

</LinearLayout>

LinearLayout으로 화면 컨테이너를 만들고 TextView, EditText, Button을 차례대로 작성한다.

자바 클래스 파일에 연결하기 위해 각각 id도 만들어 주자.

 

이번에는 자바코드를 작성해보자.

위에서 만들었던 코드를 재활용해서 작성했다.

package com.minsuuuus.test;

import androidx.appcompat.app.AppCompatActivity;

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

public class MainActivity extends AppCompatActivity {

    private TextView textView;
    EditText editText;

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

        editText();
    }

    public void editText() {
        textView = findViewById(R.id.textView);
        editText = findViewById(R.id.editText);

        Button button = findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                String str = editText.getText().toString();
                textView.setText(str);
            }
        });
    }
}

editText() 메서드를 만들어서 그 안에 textView, editText, button을 연결한다.

onClick()을 통해 버튼 클릭 시 이벤트처리를 해주면 다음과 같은 결과가 나온다.

 

editText 입력창에 '헬로 월드!'를 작성하고 텍스트 보이기 버튼을 누르면 3번째 화면과 같이 상단 TextView 부분에 방금 입력한 '헬로 월드!'가 표시된다.

---

4. ImageView

이미지 뷰는 아이콘과 같은 이미지들을 간단히 표시하는 데 사용된다.

이미지 뷰는 TextView 클래스의 업그레이드 버전이라고 생각하면 된다.

<ImageView
	android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:rotation="45"
        android:src="@drawable/ic_launcher_background" />

이미지뷰가 갖는 속성을 정리하면 다음과 같다.

• src
  이미지뷰에서 중요한 것은 src이다.
  src는 이미지를 표시할 이미지 파일을 지정하는 곳이다.

이미지뷰를 버튼처리하여 버튼같이 활용할 수도 있다.

이미지뷰를 버튼같이 사용하기 위해 다음과 같이 자바코드를 작성하면 된다.

public class MainActivity extends AppCompatActivity {

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

        imageView();
    }

    public void imageView() {
        ImageView imageView = findViewById(R.id.imageView);
        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(getApplicationContext(), "ImageView is Clicked.", Toast.LENGTH_SHORT).show();
            }
        });
    }

}

앞서 버튼 설명을 할 때 사용했던 익명클래스를 사용하여 버튼이벤트를 처리하는 방법을 이용했다.

이미지뷰를 버튼처리한 결과는 다음과 같다.

 

화면 가운데 있는 초록색 이미지를 터치하면 화면 하단에 Toast 메시지가 나오도록 구현했다.

이렇게 간단한 방법으로 이미지뷰를 버튼처리에 활용할 수 있다.

<ImageButton
        android:id="@+id/imageButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher" />

이건 이미지 버튼을 사용한 방법이다.

이미지 버튼 위젯을 사용해도 같은 결과를 얻을 수 있으니, 어떤 것을 사용할 것인지는 필요에 따라 고르면 된다.

오늘 포스팅은 여기까지!