[안드로이드 스튜디오 예제 #1] SMS 입력화면 만들고 글자의 수 표시하기(Frame Layout)

! 예제 내용

Layout 관련 예제

 

문자를 입력할 수 있는 SMS 기능을 가진 어플을 만들어 보자,

텍스트 창에는 80자까지 들어갈 수 있고, 글자를 쓸 때마다 글자 바이트 수를 계산해 나타내 줘야 한다.

버튼은 전송, 닫기 버튼이 있으며 전송 버튼을 누르면 텍스트 내용을 Toast로 나타내주고

닫기 버튼을 누르면 프로그램을 종료시키자.

 

 

새 프로젝트 'sms'를 생성했다

XNP 코드

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

    <EditText
        android:id="@+id/edittext"
        android:layout_width="391dp"
        android:layout_height="443dp"
        android:layout_marginTop="16dp"
        android:gravity="top|left"
        android:hint="메세지를 입력하세요"
        android:textSize="40dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="0/80 바이트"
        android:textSize="25dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/edittext" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="96dp"
        android:layout_marginRight="96dp"
        android:layout_marginBottom="152dp"
        android:onClick="onButton2Clicked"
        android:text="닫기"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="96dp"
        android:layout_marginLeft="96dp"
        android:layout_marginBottom="152dp"
        android:onClick="onButton1Clicked"
        android:text="전송"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
```

 

 

*설명

<EditText
        android:id="@+id/edittext"
        android:layout_width="391dp"
        android:layout_height="443dp"
        android:layout_marginTop="16dp"
        android:gravity="top|left"
        android:hint="메세지를 입력하세요"
        android:textSize="40dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

EditText를 이용해 메세지를 입력할 창을 생성했다.

 

위치와 글자 크기를 임의로 설정해주었고,

android:gravity = 'top|left' 를 이용해서 왼쪽 위에서 부터 글씨가 입력되도록 하였다.

android:hint="메세지를 입력하세요" 창에 아무런 메세지도 입력 안되어 있을 때 '메세지를 입력하세요' 라는 문장을 나타내준다.

 

 

 

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="0/80 바이트"
        android:textSize="25dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/edittext" />

TextView는 글자수를 나타내어 주기 위해 사용했다.

위치를 설정했고, 처음 디폴트 text를 0/80 바이트로 써주었다.

 

Button은 '전송', '닫기' 두개의 버튼을 만들었고, 위치 등을 지정해주었다.

Button에 android:onClick 이벤트도 넣어주었다.

 

 

MainActivity.java

(코드 참조 : https://jaehoonx2.tistory.com/25)

package org.techtowm.sms;

import android.os.Bundle;
import android.text.Editable;
import android.text.InputFilter;
import android.text.TextWatcher;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;


public class MainActivity extends AppCompatActivity {

    EditText edittext;      // 메세지 입력 뷰
    TextView textView;      // 작성 글자 수 나타내는 뷰
    Button button1;         // 작성 버튼
    Button button2;         // 끝남 버튼

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

				// 뷰 지정
        edittext = (EditText) findViewById(R.id.edittext);           
        textView = (TextView) findViewById(R.id.textView);
        button1 = (Button) findViewById(R.id.button1);
        button2 = (Button) findViewById(R.id.button2);

        edittext.addTextChangedListener(new TextWatcher() {     
						// addTextChangedListener 텍스트가 입력에 따라 변경될 때마다 확인하는 기능
            // TextWatcher 텍스트가 변경될 때마다 발생하는 이벤트 처리하는 인터페이스
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {}

            public void onTextChanged(CharSequence s, int start, int before, int count) {
                InputFilter[] filter = new InputFilter[1];
                filter[0] = new InputFilter.LengthFilter(80);       
								// 쓸 수 있는 글자 수 최대 80자로 제한
                edittext.setFilters(filter);

                int currentBytes = s.toString().getBytes().length;        // 텍스트 내용을 받아와서 바이트 수를 가져온다.
                String txt = String.valueOf(currentBytes) + " / 80 바이트";
                textView.setText(txt);                                           // 텍스트뷰에 현재 바이트수 표시
            }

            public void afterTextChanged(Editable s) {}
        });
    }

    public void onButton1Clicked(View v) {
        Toast.makeText(getApplicationContext(), (CharSequence) edittext.getText(), Toast.LENGTH_LONG).show();
    }   // 전송 버튼을 클릭하면 작성된 메시지를 토스트로 띄어준다.
    // editText.getText()의 반환형은 editable 이므로 CharSequence 타입으로 형변환 해준다.

    public void onButton2Clicked(View v) {
        finish();
    }
}

 

*설명

-edittext : 글자를 쓸 수 있는 text 칸

edittext.addTextCahngedListener: 텍스트가 변경될 때 마다 확인해준다.

 

-TextWatcher : 텍스트가 변경될 때마다 발생하는 이벤트를 처리해준다.

beforeTextChanged/onTextChanged/afterTextChange에 따라서 입력 전, 입력 중, 입력 후에 따른 이벤트 설정이 가능하다.

 edittext.addTextChangedListener(new TextWatcher() {     
						// addTextChangedListener 텍스트가 입력에 따라 변경될 때마다 확인하는 기능
            // TextWatcher 텍스트가 변경될 때마다 발생하는 이벤트 처리하는 인터페이스
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {}

            public void onTextChanged(CharSequence s, int start, int before, int count) {
                InputFilter[] filter = new InputFilter[1];
                filter[0] = new InputFilter.LengthFilter(80);       
								// 쓸 수 있는 글자 수 최대 80자로 제한
                edittext.setFilters(filter);

                int currentBytes = s.toString().getBytes().length;        // 텍스트 내용을 받아와서 바이트 수를 가져온다.
                String txt = String.valueOf(currentBytes) + " / 80 바이트";
                textView.setText(txt);                                           // 텍스트뷰에 현재 바이트수 표시
            }

            public void afterTextChanged(Editable s) {}
        });
    }

 

 

 

-InputFilter : 입력 문자 수를 제한해주는 역할을 한다.

filter[0] = new InputFilter.LengthFilter(80);  // 입력 문자 수를 80자로 제한

 

 

-s의 byte값들을 가져와서 입력 글자 수 (n/80 바이트)를 업데이트 해준다.

                int currentBytes = s.toString().getBytes().length;        // 텍스트 내용을 받아와서 바이트 수를 가져온다.
                String txt = String.valueOf(currentBytes) + " / 80 바이트";
                textView.setText(txt);      

 

 

-Button

onButton1Clicked : button1이 클릭 되었을 때, edittext의 Toast 메세지를 띄워준다.

-onButton2Clicked : button2이 클릭 되었을 때, 어플을 종료해준다.

 

*참고*

Toast.LENGTH_LONG와 Toast.LENGTH_SHORT가 있는데, LONG은 4초동안 Toast 메세지를 보여주고, SHORT는 2초 동안 Toast 메세지를 보여준다.

 

 

 

 

실행 결과

글자 수에 맞는 바이트가 잘 출력 되고,

전송 버튼을 누르면 Toast 메세지도 뜨는 것을 확인할 수 있었다.

 

한글이 안쳐지는데 이유를 모르겠다. 후에 원인을 알아내면 추가하겠다.