Android Studio : 화면의 UI 위젯들을, 액티비티에서 가져다 사용하기 위한 방법 (ID 값, findViewById 함수)

< 화면의 UI 위젯들을, 액티비티에서 가져다 사용하기 위한 방법

(UI 위젯의 ID 값, 액티비티 클래스에서의 findViewById 함수) >

 

# Design 화면에서 생성한 UI 위젯들을 액티비티에서 코드하여 사용하기 위해선 우선 UI 위젯의 ID 값을 설정해 주어야 한다!

- 실무적으로 사용하기 편리하도록 기능에 맞게 ID값도 미리 상의해서 결정하는것이 좋다!

- 필요시 레이아웃도 삽입하여 ID값을 정하고 코드로도 작성 가능!

 

# 이제 MainActivity에서 코드로 작성!

- 여기서 생성한 ID와 액티비티에서 연결하는 코드가 findViewById

- 해당 작성 부분을 유의해서, 전체 코드 확인!    

package com.ksg.diceapp;

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

import androidx.activity.EdgeToEdge;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;

import com.daimajia.androidanimations.library.Techniques;
import com.daimajia.androidanimations.library.YoYo;

import java.util.Random;

public class MainActivity extends AppCompatActivity {

    // 화면에서 코드로 조작할 클래스를 멤버 변수로 만들어준다.
    // 변수명은, 화면의 아이디 값과 똑같이 지어주면, 개발이 편하다.
    // 변수명만 선언하면 Null 에러가 발생된다.
    // but, 여기 코드에선 New를 쓰는게 아니다! 화면에서 이미 끌어다가 만든게 객체 생성한거임

    // 화면을 불러오기 위한 객체
    Button button;
    ImageView imgDice1;
    ImageView imgDice2;

    MediaPlayer mp;


    // 여기는 자동 생성된 부분!
    // 자동 생성된 부분에서 주석 처리한 줄은 삭제해도 무관!
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //EdgeToEdge.enable(this);
        setContentView(R.layout.activity_main);
        //ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> {
        //    Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());
        //    v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);
        //    return insets;
        //});

        // 그러므로, 화면에서 만든 UI 컴퓨넌트와 자바의 변수를 연결한다!!
        // 안드로이드 스튜디오에서는 Manifest.xml 파일부터 시작되는것!
        // 그러므로 메인에서 불러서 이영역으로 왔으니 여기서 연결해주는 코드를 작성
        button = findViewById(R.id.button);
        imgDice1 = findViewById(R.id.imgDice1);
        imgDice2 = findViewById(R.id.imgDice2);

        mp = MediaPlayer.create(MainActivity.this, R.raw.dice_sound);

        // 액션바 없애기 위해서 res values themes.xml 에서 액션바를 노 액션바로 수정함
        // 버튼 동작 코드하기! setOnClickListener(new View.OnClickListener() 작성하면 자동으로 오버라이딩 해줌
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                // 0. 버튼 누르자마자 주사위 굴리는 소리를 낸다.
                mp.start();

                // 1. 랜덤으로 숫자를 2개 가져온다.
                Random random = new Random();
                int num1 = random.nextInt(6); // 0-5까지 정수를 가져오라는 뜻.
                int num2 = random.nextInt(6); // 0 ~ 5 까지의 정수를 가져오라는 뜻

                // 2. 해당 숫자에 맞게, 주사위 이미지를 바꿔준다.
                if(num1 == 0){
                    // 주사위 1 에 해당되는 이미지를, 이미지뷰에 표시한다.
                    imgDice1.setImageResource(R.drawable.dice1);
                }  if (num1 == 1){
                    imgDice1.setImageResource(R.drawable.dice2);
                }  if (num1 == 2){
                    imgDice1.setImageResource(R.drawable.dice3);
                }  if (num1 == 3){
                    imgDice1.setImageResource(R.drawable.dice4);
                }  if (num1 == 4){
                    imgDice1.setImageResource(R.drawable.dice5);
                }  if (num1 == 5){
                    imgDice1.setImageResource(R.drawable.dice6);
                }

                if(num2 == 0){
                    // 주사위 2 에 해당되는 이미지를, 이미지뷰에 표시한다.
                    imgDice2.setImageResource(R.drawable.dice1);
                }  if(num2 == 1){
                    imgDice2.setImageResource(R.drawable.dice2);
                }  if(num2 == 2){
                    imgDice2.setImageResource(R.drawable.dice3);
                }  if(num2 == 3){
                    imgDice2.setImageResource(R.drawable.dice4);
                }  if(num2 == 4){
                    imgDice2.setImageResource(R.drawable.dice5);
                }  if(num2 == 5){
                    imgDice2.setImageResource(R.drawable.dice6);
                }

                // 3. 애니메이션 효과를 준다.
                YoYo.with(Techniques.Shake).duration(400).repeat(0)
                        .playOn(imgDice1);
                YoYo.with(Techniques.Shake).duration(400).repeat(0)
                        .playOn(imgDice2);
            }
        });

 

다음 게시글로 계속~!