[Android] 예시 SMS 레이아웃 만들기

예시 SMS입력 레이아웃을 만들자. 화면 구성은 아래 3가지로 요약된다.

• 입력상자
• 현재 입력중인 글자 수를 Count해주는 TextView, 이것은 오른쪽에 정렬되어있다.
• 버튼 두개가 있는 레이아웃 : Send, Copy두가지가 있다. 이 버튼들은 가운데 정렬되어있다
  • Send : 입력한 문자를 Toast로 출력한다
  • Copy : 입력한 문자를 클립보드에 복사한다. 복사가 완료되면, Toast로 복사되었다고 알려준다

다른 추가적인 조건들은 아래와 같다.

• 최대 80바이트를 입력할 수 있다.

addTextChangedListner 메소드를 사용하면, TextWatcher 객체를 설정하여 텍스트가 변경될 때 마다 발생하는 이벤트를 처리한다. TextWatcher는 아래 세가지 메소드 선언문이 정의되어있는 Interface이다.

• public void beforeTextChanged(CharSequence s, int start, int count, int after) 
• public void afterTextChanged(Editable s)
• public void onTextChanged(CharSequence s, int start, int before, int count

afterTextChanged()메소드가 반환하는 Editable객체는, toString메소드를 이용해서 일반 String타입의 문자열을 확인할 수 있다.

 

beforeTextChanged는 말그대로 입력 변경이 감지되기 전에 실행되는 메소드이고, afterTextChanged는 입력감지 후 실행되는 메소드이다. 예를 들어 beforeTextChanged에 입력 이전에 입력되어있던 값을 표시하게하고, afterTextChanged에는 입력 이후에 값을 표시한다고 가정하자. 

MainActivity.java

package com.example.samplewidget;

import androidx.appcompat.app.AppCompatActivity;

import android.content.ClipData;
import android.content.Context;
import android.os.Bundle;
import android.text.Editable;
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 android.content.ClipboardManager;


public class MainActivity extends AppCompatActivity {

    private EditText editText;
    private TextView textView1;
    private TextView textView1_1;
    private TextView textView2;
    private TextView textView2_1;

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

        editText = findViewById(R.id.editTextTextPersonName7);
        textView1 = findViewById(R.id.textView9);
        textView2 = findViewById(R.id.textView11);

        textView1_1 = findViewById(R.id.textView12);
        textView2_1 = findViewById(R.id.textView13);

        TextWatcher textWatcher = new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
                String previousTyped = charSequence.toString();
                textView1.setText(new StringBuilder(">> ").append(previousTyped).toString());
                textView1_1.setText(new StringBuilder().append(previousTyped.length()).append(" typed").toString());
            }

            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {

            }
            @Override
            public void afterTextChanged(Editable editable) {
                String typed = editable.toString();
                textView2.setText(new StringBuilder(">> ").append(typed).toString());
                textView2_1.setText(new StringBuilder().append(typed.length()).append(" typed").toString());
            }
        };

        editText.addTextChangedListener(textWatcher);
    }
}

testSMS.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginLeft="15dp"
    android:layout_marginTop="15dp"
    android:layout_marginRight="15dp"
    android:layout_marginBottom="15dp">

    <LinearLayout
        android:id="@+id/edittextfield"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <EditText
            android:id="@+id/editTextTextPersonName7"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10"
            android:inputType="textPersonName"
            android:hint="Type text here"
            android:minHeight="48dp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/textview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/edittextfield"
        android:layout_alignParentTop="false"
        android:layout_centerHorizontal="true"
        android:orientation="vertical">

        <TextView
            android:id="@+id/textView8"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Before Changed"
            android:textSize="40sp" />

        <TextView
            android:id="@+id/textView12"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:text="0 typed"
            android:textSize="19sp" />

        <TextView
            android:id="@+id/textView9"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text=">> "
            android:textSize="24sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/textview2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/textview"
        android:orientation="vertical">

        <TextView
            android:id="@+id/textView10"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="After Changed"
            android:textSize="40sp" />

        <TextView
            android:id="@+id/textView13"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:text="0 typed"
            android:textSize="19sp" />

        <TextView
            android:id="@+id/textView11"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text=">> "
            android:textSize="24sp" />
    </LinearLayout>
</RelativeLayout>

 

이제 직접 SMS화면을 구현해 보자. 구현 코드와 예시 화면은 아래에 있다.

예시 화면

testsms.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginLeft="15dp"
    android:layout_marginTop="15dp"
    android:layout_marginRight="15dp"
    android:layout_marginBottom="15dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_above="@id/buttonlayout">

        <EditText
            android:id="@+id/editTextTextPersonName5"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@id/input_count"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:gravity="top"
            android:inputType="textPersonName"
            android:maxLength="80"
            android:background="@android:color/transparent"
            android:hint="Type text here"
            android:textSize="30sp" />
        <TextView
            android:id="@+id/input_count"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:text="0 / 80 byte"
            android:layout_marginRight="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginBottom="10dp"
            android:textSize="20sp"/>


    </RelativeLayout>

    <LinearLayout
        android:id="@+id/buttonlayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_gravity="center_horizontal"
            >
            <Button
                android:id="@+id/sendbtn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="20dp"
                android:paddingLeft="20dp"
                android:paddingRight="20dp"
                android:text="Send"
                android:textSize="19sp"/>
            <Button
                android:id="@+id/closebtn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="20dp"
                android:paddingLeft="20dp"
                android:paddingRight="20dp"
                android:text="Copy"
                android:textSize="19sp"/>
        </LinearLayout>
    </LinearLayout>

</RelativeLayout>

MainActivity.java

package com.example.samplewidget;

import androidx.appcompat.app.AppCompatActivity;

import android.content.ClipData;
import android.content.Context;
import android.os.Bundle;
import android.text.Editable;
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 android.content.ClipboardManager;


public class MainActivity extends AppCompatActivity {
    private EditText editText1;
    private TextView textView1;
    private ClipboardManager clipboardManager;

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

        editText1 = findViewById(R.id.editTextTextPersonName5);
        textView1 = findViewById(R.id.input_count);
        clipboardManager = (ClipboardManager)getSystemService(Context.CLIPBOARD_SERVICE);


        Button btn1 = findViewById(R.id.sendbtn);
        btn1.setOnClickListener(new View.OnClickListener() {
            @Override //
            public void onClick(View view) {
                // get content text and show with toast
                Toast.makeText(getApplicationContext(),editText1.getText().toString(),Toast.LENGTH_LONG).show();
            }
        });

        Button btn2 = findViewById(R.id.closebtn);
        btn2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                String typedText = editText1.getText().toString();
                // If nothing typed no need to clip
                if(typedText.isEmpty()){
                    Toast.makeText(getApplicationContext(),"Noting to copy!",Toast.LENGTH_LONG).show();
                }
                // If something typed clip
                else{
                    ClipData clip = ClipData.newPlainText("Text you write to box",typedText);
                    clipboardManager.setPrimaryClip(clip);
                    Toast.makeText(getApplicationContext(),new StringBuilder().append("Text Copied to Clipboar")
                                    .append(" : ")
                                    .append(clip.getDescription().getLabel()),
                            Toast.LENGTH_LONG).show();
                }
            }
        });

        TextWatcher watcher = new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

            }

            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
                textView1.setText((new StringBuilder().append(charSequence.toString().length()).append(" / 80 byte")).toString());
            }

            @Override
            public void afterTextChanged(Editable editable) {
                if(editable.toString().length() > 80){
                    editable.delete(editable.length()-2, editable.length() - 1);
                }
            }
        };
        editText1.addTextChangedListener(watcher);
    }
}