[Android Studio] 기본 지식 배우기 - 4

1. 버튼을 활용한 덧셈 앱 만들기

지금까지 배운 것들을 활용해 간단한 덧셈 프로젝트를 제작해보겠습니다.

 

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

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:hint="첫번째 숫자"/>

        <EditText
            android:id="@+id/input1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:hint="여기에 입력하세요."/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:hint="두번째 숫자"/>

        <EditText
            android:id="@+id/input2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:hint="여기에 입력하세요."/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="결과: "/>

        <TextView
            android:id="@+id/result"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="0"
            android:textSize="30dp"/>

        <Button
            android:id="@+id/b1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="50dp"
            android:text="결과확인"/>

    </LinearLayout>

</LinearLayout>

 

package com.example.basicsum;

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;

public class MainActivity extends AppCompatActivity {
    EditText input1, input2;
    TextView result;
    Button b1;

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

        input1 = (EditText) findViewById(R.id.input1);
        input2 = (EditText) findViewById(R.id.input2);
        result = (TextView) findViewById(R.id.result);
        b1 = (Button) findViewById(R.id.b1);

        b1.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {
               String inputStr1 = input1.getText().toString();
               String inputStr2 = input2.getText().toString();
               int val1 = Integer.parseInt(inputStr1);
               int val2 = Integer.parseInt(inputStr2);

               int sum = val1 + val2;

               result.setText(Integer.toString(sum));
           }
        });
    }
}

 

Button의 이벤트처리를 통해 EditText의 값을 가져와 덧셈후 이를 result라는 TextView에 저장시켜주는 코드입니다. 결과값은 다음과 같습니다.

 

 

※위젯(=뷰)

 위젯은 화면을 구성할 때 사용되는 텍스트 뷰, 이미지 뷰 등을 말합니다. xml파일 안에서 태그 형식으로 이루어져있고 엘리먼트라고도 부릅니다. 태그로 이루어진 위젯은 다양한 속성을 가지고 있으며, 엘리먼트는 클래스와 유사한 개념으로 속성을 가지고 있습니다. 특히, 자바코드에서 메소드로 값을 변경할 수 있습니다. 자주 사용되는 기본 위젯은 다음과 같으며, 이외에도 많은 위젯들이 존재합니다.

위젯	하는 일	대표적인 속성
TextView	문자(텍스트)를 화면에 보여준다	text: 화면에 보이는 문자열 설정 textColor: 문자의 색상 설정 textSize: 문자의 크기 설정
Button	터치하거나 눌렀을 때, 원하는 동작 설정	id: 자바코드에서 사용할 버튼의 아이디
EditText	사용자로부터 문자나 숫자를 입력받을 때 사용	hint: 어떤 내용을 입력하라는 안내문자 표시
ImageView	화면에 이미지 표시	src: 이미지를 지정폴더인 [drawble]안에 파일[image]이 있다면 @drawble/image라고 지정하면 된다. 이미지 파일은 PNG형식을 추천하며 숫자로 시작하면 안된다.
ImageButton	그림으로 된 버튼사용	src: 이미지 지정
RadioButton	여러개 중 1개만 선택할 경우 사용, RadioGroup 태그 안에 적어야 한다.	text: 화면에 보이는 문자열 설정

 

2. 화면전환 만들기

 

Activity는 기본적으로 하나의 화면을 처리한다. 즉, 다른 화면으로 이동하려면 다른 Activity가 필요하다. 화면을 전환하는데 필요한 개념은 Intent이다.

 

Intent 사용법은 먼저, Intent클래스 객체를 생성하고 startActivity 메소드를 활용하면 된다. 객체 생성 시, 두번째 파라미터가 이동할 Activity명을 적는다.

 

b1.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Intent intent1 = new Intent(getApplicationContext(), ShowMe.class);
        startActivity((intent1));
    }
});

 

각각의 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"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="메인화면"/>

    <Button
        style="?android:attr/buttonStyleSmall"
        android:id="@+id/b1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="bts"/>

</LinearLayout>

<activity_main.xml>

 

package com.example.intenttest00;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {
    Button b1;

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

        b1 = (Button) findViewById(R.id.b1);

        b1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent1 = new Intent(getApplicationContext(), ShowMe.class);
                startActivity((intent1));
            }
        });
    }
}

<MainActivity.java>

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="방탄소년단입니당!"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/bts"/>

    <Button
        style="?android:attr/buttonStyleSmall"
        android:id="@+id/b1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="뒤로가기"/>


</LinearLayout>

<sub1.xml>

 

package com.example.intenttest00;
import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class ShowMe extends AppCompatActivity {
    Button b1;

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.sub1);

        b1 = (Button) findViewById(R.id.b1);
        b1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent1 = new Intent(getApplicationContext(), MainActivity.class);
                startActivity(intent1);
            }
        });
    }
}

<ShowMe.java>

 

새로운 화면 전환을 위해 Activity를 만든다고 끝나는 것이 아니다. manifest에 생성한 Activity를 등록해야 한다.

 

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.intenttest00">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.IntentTest00">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

       <!-- 새로 생성한 Activity -->
        <activity android:name=".ShowMe">

        </activity>

  </application>
</manifest>

 

처음 MainActivity에서 Intent에 의해 ShowMe로 화면 전환이 이루어 질 때, MainActivity는 따로 Stack에 저장되어 있고, 그 위에 ShowMe가 있게됩니다. 만약 finish()를 사용하면 ShowMe는 스택에서 사라지고, Stack에 있던 MainActivity가 다시 화면에 제시된다.

 만약 위처럼 ShowMe에서 Intent를 사용해 MainActivity로 화면을 전환하게 된다면 Stack에 계속해서 Activity들이 쌓이기 때문에 바람직하지 않다.

 

 

 

 

3. View클래스를 활용한 앱 만들기

지금까지 Activity클래스를 상속받고 setContentView메소드를 사용해 뷰들이 들이있는 xml파일을 화면에 나타냈습니다. 하지만 View 클래스를 상속받으며 텍스트, 이미지, 도형 등을 원하는 위치에 쉽게 표시할 수 있습니다. 물론 xml파일을 이용해서 만든 뷰들과 내가 만든 View 클래스를 같이 화면에 표시할 수 있습니다.

 

package com.example.viewclass00;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends AppCompatActivity {
    Paint p1 = new Paint();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        MyView myview = new MyView(this);
        setContentView(myview);
    }

    public class MyView extends View {
        public MyView(Context context) {
            super(context);
            p1.setColor(Color.RED);
            p1.setTextSize(40);
        }

        public void onDraw(Canvas canvas) {
            canvas.drawCircle(100, 100, 100, p1);
            canvas.drawRect(0, 300, 300, 400, p1);
            canvas.drawText("View 클래스를 상속받고 onDraw 활용하기", 0, 500, p1);
        }
    }
}

 

 

Canvas 클래스는 텍스트 표시하기, 원 그리기, 이미지 표시하기 등 다양한 메소드들을 가지고 있고, onDraw 메소드 안에서 사용하며 표시합니다.

Paint 클래스는 색상 설정, 텍스트 크기 설정, 알파값 설정 등 다양한 메소드를 가지고 있습니다. 위에서는 객체 p1을 생성해 활용한 예시입니다.

 

 

 다음 포스팅은 미니 그림판을 제작해보겠습니다. 실시간으로 그림을 그리며, 전에 그렸던 부분을 배열에 저장해 이어나가는 방식으로 View 클래스를 적극 활용해보도록 하겠습니다.