로이드 - 누르면 색 바뀌는 버튼 + 토스트

MainActivity

는 변경이 없다. 연결할 파일이 activity_main 이 아니라면 그것만 변경해주자

package com.techtown.test08;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

activity_main.xml

화면 구성이다. 필요한 TextView 와 Button 화면 만 만들어준다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="13dp"
        android:text="Hello World" />

    <com.techtown.test08.MyButton
        android:layout_width="200dp"
        android:layout_height="80dp"
        android:id="@+id/button"
        android:text="확인"
        android:layout_centerInParent="true"/>
</RelativeLayout>

화면 맨 위 중간에 Hello World 가 나오도록 TextView 설정 해주었고, MyButton 파일과 연결할 공간도 만들어 주었다.

MyButton.java

필요한 것을 본격적으로 작성할 java 파일이다. 기본적으로 설정할 배경색과 글씨색이 있고, 눌렸을때(터치 되었을 때) 작동될 배경색과 글씨색이 설정된다

package com.techtown.test08;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.widget.Toast;

import androidx.appcompat.widget.AppCompatButton;

public class MyButton extends AppCompatButton {


    public MyButton(Context context) {
        super(context);
        init(context);
    }

    public MyButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    public void init(Context context) {
        // 기본 배경 색상
        setBackgroundColor(Color.CYAN);
        // 기본 글씨 색상
        setTextColor(Color.BLACK);
        // 글씨 크기 app/res/values 폴더에 dimens.xml 파일 만들고 내용
        float textSize = getResources().getDimension(R.dimen.text_size);
        // sp 단위로 설정하기 위해 xml 파일을 이용하는 것
        setTextSize(textSize);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 로그 호출
        Log.d("MyButton", "온 드로우 호출");
    }

    // 뷰가 터치 되었를 때 호출되는 메소드
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        // 로그 호출
        Log.d("MyButton", "온 터치 이벤트 호출");

        // event에 action 받기
        int action = event.getAction();

        switch (action) {
            // 눌렸을 때 작동하는 case
            case MotionEvent.ACTION_DOWN:
                // 배경은 파란색으로
                setBackgroundColor(Color.BLUE);
                // 글씨는 붉은 색이 된다
                setTextColor(Color.RED);
                break;

            case MotionEvent.ACTION_OUTSIDE:
            case MotionEvent.ACTION_CANCEL:
            case MotionEvent.ACTION_UP:
                setBackgroundColor(Color.CYAN);
                setTextColor(Color.BLACK);
                break;
        }
        // 뷰 다시 그리기
        invalidate();

        return true;
    }
}

중간에 init 부분을 보면 글씨 크기를 직접 작성하지 않고 따로 설정파일을 만들어 연결해주었는데, 이는 그냥 setTextSize() 메소드를 사용해서 설정할 시 픽셀단위로 밖에 하지 못하기 때문이다. 픽셀은 값이 고정이라 화면 크기별로 다르게 표현되는 sp 단위가 좋고, sp 단위를 사용하려면 설정을 xml 파일로 따로 작성해 연결해주어야 한다...고 한다.

dimens.xml

글씨 크기를 sp로 설정할 파일을 따로 연결해준다 작성했으니, 해당 파일을 작성해주어야한다. 위에 적어놓은 것처럼 res/values 에 파일을 생성해준다. 한줄로 작성해도 상관없다.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="text_size">
        20sp
    </dimen>
</resources>

실행 화면

처음으로 실행하면, 가장 위 중간에 Hello World가 노출된 모습과 중간에 확인 글자가 있는 네모난 곳을 볼 수 있다.

그리고 확인 버튼(? 을 누르면 색이 변하는 것을 확인할 수 있다. 클릭을 떼면 다시 첫 화면처럼 돌아간다

토스트 메시지

근데 뭔가 그냥 아쉬워서 토스트 메시지를 추가해보기로 했다. 누르면 버튼이 눌렸습니다 같은 것이 띄워지도록.

검색해보니 추가하는 방법은 생각보다 간단했다.
Toast.makeText(getApplicationContext(), "출력하고픈 메시지", Toast.LENGTH_SHORT).show();
여기서 SHORT로 하면 조금 짧게, LONG으로 하면 조금 더 길게 화면에 노출된다고.
안에 들어가는 요소를 조금 더 자세히 보자면

// context : 안드로이드 시스템에 있는 class와 자원들을 앱 level 까지 올려주는 것
// ex. 액티비티 시작하기, 브로드 캐스팅하기, 인텐트 주고 받기
Context context = getApplicationContext();

// 전송할 text
CharSequence text = "메시지";

// 화면에 얼마나 길게 노출시킬 것인가?
int duration = Toast.LENGTH_SHORT;

Toast toast = Toast.makeText(context, text, durration);
toast.show();

오류

근데 이게 안되는거다. getApplicationContext() 부분이 자꾸 이상하다고. 전에 잠깐 사용해봤을때는 this로 했던거 같은데? 싶어서 변경해봐도 안되길래 검색해봤다.

Context는 두 종류

1. Application context : 어플리케이션 자체와 연동되는 것으로, 어플리케이션을 종료 후 다시 실행시킬 때에만 바뀌는 것
2. Activity context : 액티비티와 연동된 것으로, 해당 액티비티를 끄로 다시 실행시키면 activity context도 바뀐다 (- 한 개의 어플리케이션 내 여러 액티비티를 넣을 수 있는 걸 기억하자)

그래서 this vs getApplicationContext()?

두 종류의 Context 중 this = activity context 를 getApplicationContext() = application context 라고 한다. 따라서 대부분의 경우 두 종류를 혼동해 사용한다고 해도 별 문제없이 동작한다고.

근데 this를 넣었는데 오류가 난다면 해당 액티비티가 제대로 있는지 확인하고, getApplicationContext() 를 넣었는데 안된다면 this를 넣어보라 한다.

난 this도 안되던데

this = getBaseContext() = getContext() = Activity Context
getApplicationContext() = getApplication() = Application Context

라고 하기에, getContext() 를 사용해봤다. 사용법을 듣고 보니 일단 this는 해당 액티비티에 연동된거라는데, 그렇게 올릴 값이 아니길래

Toast.makeText(getContext(), "버튼 누름", Toast.LENGTH_SHORT).show();

로 작성해주었다. 위치는 스위치-케이스 문에서 뷰가 눌렸을 case인 아래에

...
        switch (action) {
            // 눌렸을 때 작동하는 case
            case MotionEvent.ACTION_DOWN:
                // 배경은 파란색으로
                setBackgroundColor(Color.BLUE);
                // 글씨는 붉은 색이 된다
                setTextColor(Color.RED);
                // 토스트 창도 띄워짐
                Toast.makeText(getContext(), "버튼 누름", Toast.LENGTH_SHORT).show();
                break;
...

실행화면

버튼을 눌렀다 땐 상황이다. 버튼은 원래상태로 돌아갔고, 밑에는 버튼이 눌렸었다는 메시지가 잠깐 띄워졌다가 사라졌다.