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

Android

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

Hoplin 2022. 3. 27. 19:04

예시 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);
    }
}

저작자표시 비영리