안드로이드 - 4 버튼 0131

1. MainActivity.java

아래는 각 버튼을 눌렀을 때, 배경색을 변경하는 기능을 구현한 MainActivity 클래스입니다.

package com.example.app_0131;

import androidx.appcompat.app.AppCompatActivity;
import androidx.constraintlayout.widget.ConstraintLayout;

import android.graphics.Color;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;

// 각 버튼을 눌렀을 때, 배경색을 변경하는 기능을 구현하기!
//1. view.OnClickListener 를 인터페이스로 구현
//2. onClick()를 오버라이딩
//3. onClick() 메소드 내 버튼을 구별하는 조건문 만들기
//4. c_layout의 배경색을 변경하는 기능 구현

// View.OnClickListener 인터페이스 구현
// : 여러 개의 버튼이 공통된 기능으로 구현할 경우에 적합
public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    ConstraintLayout c_layout;
    Button btn_red, btn_green, btn_blue;

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

        // view를 초기화하기!
        c_layout = findViewById(R.id.c_layout);
        btn_red = findViewById((R.id.btn_red));
        btn_green = findViewById(R.id.btn_green);
        btn_blue = findViewById(R.id.btn_blue);

        // 각 버튼에 onClick() 메소드 연결해주기!
        btn_red.setOnClickListener(this);
        btn_green.setOnClickListener(this);
        btn_blue.setOnClickListener(this);

    }

    @Override
    public void onClick(View view) {
        Log.v("status","버튼 클릭!");

        // 클릭이 발생한 View 의 id를 가져오는 메소드
        int viewId = view.getId();

        if(viewId == R.id.btn_red){
            Log.v("status","빨간색 버튼 클릭!");
            c_layout.setBackgroundColor(Color.RED);
        } else if (viewId == R.id.btn_green){
            Log.v("status","초록색 버튼 클릭!");
            c_layout.setBackgroundColor(Color.GREEN);
        } else if(viewId == R.id.btn_blue){
            Log.v("status","파란색 버튼 클릭!");
            c_layout.setBackgroundColor(Color.BLUE);
        }
    }
}

이 코드는 view.OnClickListener 인터페이스를 구현하여 여러 개의 버튼이 공통된 기능으로 구현하는 예시입니다. 또한, onClick() 메소드 내에서 버튼을 구별하는 조건문을 작성하여 각 버튼에 따라 배경색을 변경하는 기능을 구현했습니다.

 

2. activity_main

<?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:id="@+id/c_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/btn_blue"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/btn_blue"
        app:layout_constraintBottom_toBottomOf="@+id/btn_green"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/btn_green"
        app:layout_constraintTop_toTopOf="@+id/btn_green"
        app:layout_constraintVertical_bias="0.0" />

    <Button
        android:id="@+id/btn_red"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="44dp"
        android:text="@string/btn_red"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/btn_green"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/btn_green"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/btn_green"
        app:layout_constraintBottom_toBottomOf="@+id/btn_red"
        app:layout_constraintEnd_toStartOf="@+id/btn_blue"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/btn_red"
        app:layout_constraintTop_toTopOf="@+id/btn_red"
        app:layout_constraintVertical_bias="0.0" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

이 코드는 ConstraintLayout 안에 버튼 3개를 배치하고, 각각의 버튼을 클릭하면 배경색이 바뀌도록 구현된 XML 레이아웃 파일입니다.

코드의 구성은 다음과 같습니다.

• ConstraintLayout: 화면 전체를 차지하는 레이아웃
• Button btn_red: 배경색을 빨간색으로 바꾸는 버튼
• Button btn_green: 배경색을 초록색으로 바꾸는 버튼
• Button btn_blue: 배경색을 파란색으로 바꾸는 버튼

버튼들은 ConstraintLayout 내에 위치하며, ConstraintLayout 내에서의 위치와 크기는 ConstraintLayout.LayoutParams 속성을 이용해 지정합니다. 버튼들은 각각의 id값으로 구별할 수 있으며, 각 버튼의 onClick() 메소드에서 id값을 비교하여 버튼 클릭 이벤트를 처리합니다.

 

3. MainActivity2.java

package com.example.app_0131;

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;
import android.widget.Toast;

// 버트을 눌렀을 때, 유저가 입력한 값을 TextView에 출력하기
// 1. 익명클래스 방식으로 이벤트 적용
// 2. 유저가 입력한 값을 가져오기! (EditText)
// 3. 가져온 값을 화면에 출력하기! (TextView)
public class MainActivity2 extends AppCompatActivity {

    TextView tv_text;
    EditText edt_text;
    Button btn;

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

        // 레이아웃의 View와 Java의 View 객체 연결
        edt_text = findViewById(R.id.edt_text);
        tv_text = findViewById(R.id.tv_text);
        btn = findViewById(R.id.btn);

        // 익명클래스로 이벤트 처리하기!
        // 독립적인 이벤트를 View에 적용할 때 사용
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                String text = edt_text.getText().toString();
                tv_text.setText(text);
                edt_text.setText("");

                // Toast : 유저에게 알림메시지를 보여줄 때 사용
                // makeTest() : 유저에게 보여줄 메시지 생성
                // show() : 생성된 메시지를 앱 화면에 출력
                Toast.makeText(MainActivity2.this, "입력 완료!", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

위 코드는 유저가 입력한 값을 가져와서 화면에 출력하는 간단한 예제 코드입니다. 주석을 추가하여 각 부분의 역할과 설명을 자세히 알려주고 있습니다.

주요 포인트는 EditText와 TextView를 초기화하고, Button을 눌렀을 때 OnClickListener 인터페이스를 익명 클래스로 구현하여 버튼 클릭 이벤트를 처리하는 부분입니다.

이때 edt_text에서 유저가 입력한 값을 가져와서 tv_text에 출력하고, edt_text를 비워주는 코드를 포함하고 있습니다.

마지막으로 Toast를 이용하여 유저에게 입력 완료 알림 메시지를 보여주는 코드도 함께 포함되어 있습니다.

 

4. activity_main2.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"
  tools:context=".MainActivity2">

    <!-- 입력한 값을 보여줄 TextView -->
    <TextView
        android:id="@+id/edt_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="204dp"
        android:textSize="34sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.461"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <!-- 입력할 값을 받을 EditText -->
    <EditText
        android:id="@+id/tv_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="92dp"
        android:ems="10"
        android:hint="내용을 작성해주세요"
        android:inputType="textPersonName"
        app:layout_constraintEnd_toEndOf="@+id/edt_text"
        app:layout_constraintHorizontal_bias="0.361"
        app:layout_constraintStart_toStartOf="@+id/edt_text"
        app:layout_constraintTop_toBottomOf="@+id/edt_text" />

    <!-- 입력한 값을 TextView에 출력할 버튼 -->
    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="56dp"
        android:text="텍스트변경하기"
        app:layout_constraintEnd_toEndOf="@+id/tv_text"
        app:layout_constraintHorizontal_bias="0.491"
        app:layout_constraintStart_toStartOf="@+id/tv_text"
        app:layout_constraintTop_toBottomOf="@+id/tv_text" />
</androidx.constraintlayout.widget.ConstraintLayout>

• MainActivity2에서 EditText에 입력된 값을 TextView에 출력하는 예제 코드입니다.
• ConstraintLayout을 이용하여 TextView, EditText, Button을 배치하였습니다.
• EditText와 Button의 layout_constraintEnd_toEndOf 속성을 같은 TextView의 id로 설정하여, 화면 크기에 상관없이 중앙 정렬되도록 하였습니다.

5. MainActivity3.java

package com.example.app_0131;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

// 각 버튼을 눌렀을 때, 이미지가 바뀌는 기능을 구현하기!
// 1. "다음" 버튼을 누르면 이미지가 순서대로 넘어간다.
// 2. "이전" 버튼을 누르면 이미지가 역순으로 넘어간다.
// 3. 이미지를 무한으로 넘어간다. ex) 1 -> 2 -> 3 -> 1 -> 2 -> 3 -> ...
public class MainActivity3 extends AppCompatActivity {
    ImageView img;

    Button btn_pre, btn_next;

    // 이미지를 보관하는 배열 생성
    int[] imgArray = {R.drawable.muscle, R.drawable.muscle2, R.drawable.muscle3};
    int pos; // 자동으로 0으로 초기화됨

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

        img = findViewById(R.id.img);
        btn_pre = findViewById(R.id.btn_pre);
        btn_next = findViewById(R.id.btn_next);

        // ImageView의 이미지를 변경할 때 사용!
        // R.drawable.파일명
        img.setImageResource(R.drawable.muscle);

        // 각 버튼을 눌렀을 때, 이미지가 바뀌도록 구현
        // 현재 이미지 : 파일명1
        // "다음" 버튼 클릭 -> 파일명2
        // "이전" 버튼 클릭 -> 파일명3

        btn_pre.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (pos == 0) {
                    pos = imgArray.length - 1;
                } else {
                    pos -= 1;
                }
                img.setImageResource(imgArray[pos]);
            }
        });

        btn_next.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (pos == imgArray.length - 1) {
                    pos = 0;
                } else {
                    pos += 1;
                }
                img.setImageResource(imgArray[pos]);
            }
        });
    }
}

 

위 코드는 다음과 같은 내용을 구현한 앱입니다.

• 버튼 클릭 시, 이미지가 변경되는 기능 구현
• "다음" 버튼 클릭 시, 이미지가 순서대로 넘어감
• "이전" 버튼 클릭 시, 이미지가 역순으로 넘어감
• 이미지를 무한으로 넘어감 (1 -> 2 -> 3 -> 1 -> 2 -> 3 -> ...)

6. activity_main2.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"
    tools:context=".MainActivity3">

    <!-- 이미지를 보여줄 ImageView -->
    <ImageView
        android:id="@+id/img"
        android:layout_width="130dp"
        android:layout_height="182dp"
        android:layout_marginStart="28dp"
        app:layout_constraintBottom_toBottomOf="@+id/btn_pre"
        app:layout_constraintStart_toEndOf="@+id/btn_pre"
        app:layout_constraintTop_toTopOf="@+id/btn_pre"
        app:layout_constraintVertical_bias="0.537"
        app:srcCompat="@drawable/muscle3" />

    <!-- 이전 버튼 -->
    <Button
        android:id="@+id/btn_pre"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:text="이전"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.522" />

    <!-- 다음 버튼 -->
    <Button
        android:id="@+id/btn_next"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginTop="76dp"
        android:layout_marginBottom="58dp"
        android:text="다음"
        app:layout_constraintBottom_toBottomOf="@+id/img"
        app:layout_constraintStart_toEndOf="@+id/img"
        app:layout_constraintTop_toTopOf="@+id/img"
        app:layout_constraintVertical_bias="0.0" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

7. AndroidManifest.xml

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

    <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/Theme.App_0131"
        tools:targetApi="31">
        <!-- MainActivity2 -->
        <activity
            android:name=".MainActivity2"
            android:exported="false" />
        <!-- MainActivity -->
        <activity
            android:name=".MainActivity"
            android:exported="false" />
        <!-- MainActivity3 -->
        <activity
            android:name=".MainActivity3"
            android:exported="true">
            <!-- 앱 실행시 첫 화면으로 설정 -->
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

</manifest>

 

• AndroidManifest.xml 파일은 앱의 정보와 설정을 담고 있으며, 앱에서 사용하는 모든 컴포넌트들(Activity, Service, BroadcastReceiver, Provider)을 등록해야 한다.
• 앱의 컴포넌트가 실행될 때, 안드로이드 운영체제는 AndroidManifest.xml 파일을 읽어 해당 컴포넌트의 실행 권한이 있는지 확인한다.
• 위 코드에서는 세 개의 Activity를 등록하였으며, MainActivity3가 실행될 때 앱의 첫 화면으로 설정되도록 <intent-filter>를 추가하였다.