유디의 공간정보·개발일기

2. 0708_ layout, Binding 설정, 버튼 클릭 시 이미지 변경 본문

JAVA + Android Studio

2. 0708_ layout, Binding 설정, 버튼 클릭 시 이미지 변경

55yudi 2021. 10. 23. 21:32

- wrap_content : 내용물에 맞게 상자크기를 맞춤

 

- 이미지 파일명은 소문자와 '_' 가능 (숫자는 오류나서 안된다.)

 

- iconfinder.com 에서 free 아이콘 이미지 다운/사용

- 원하는 px 사이즈, png 파일로 받고 파일을 ctrl+c 해서

  안드로이드 스튜디오 프로젝트 창>res폴더>drawble 클릭 후 ctrl+v

 

- xml에서 common - ImageView 추가해서 이미지 선택

 

- Common Attributes - src compat 옆의 버튼 클릭 - 바꿀 이미지를 선택해 지정 가능하다.

  또는 코드 창에서 버튼을 누를 때 이미지 변경이 동작하도록 할거니까

Button button1 = findViewById(R.id.button);

button1.setOnClickListener(new View.OnClickListener() { //버튼을 누를 때 동작하도록 예약
	@Override
	public void onClick(View v) {
	output2.setImageResource(R.drawable.walking); //어떤 이미지를 보여줄 건지 ()안에 이미지경로 명시
	}
});

 

- 이클립스에서의 콘솔창 역할 = 안드로이드 스튜디오에서는 logcat

 

- 화면 구성

 

[코드]

package com.example.test4;

import androidx.appcompat.app.AppCompatActivity;

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

public class MainActivity extends AppCompatActivity {

    TextView output1;   //첫 화면이 유지되는 동안
    EditText input1;
    ImageView output2;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        output1 = findViewById(R.id.output1); //앞쪽의 outpu1은 변수상자고, 뒷쪽의 output1은 id임
        input1 = findViewById(R.id.input1);
        output2 = findViewById(R.id.output2);
        
        Button button1 = findViewById(R.id.button);
        button1.setOnClickListener(new View.OnClickListener() { //버튼을 누를 때 동작하도록 예약
            @Override
            public void onClick(View v) {
                output2.setImageResource(R.drawable.walking); //어떤 이미지를 보여줄 건지 ()안에 이미지경로 명시
            }
        });
        
        
    }
}

 


Binding

 

- 초기 설정을 변경하기 위함

>Gradle Scripts - build.gradle(Module:~~)

buildFeatures {
	viewBinding true
}

- 코드 입력 후 상단 바에 Sync now 클릭 또는 코끼리 아이콘 클릭 (변경사항 반영하는 것)

 

MainActivity.java

ActivityMainBinding binding;

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        //화면모양을 나타내는 것
        binding = ActivityMainBinding.inflate(getLayoutInflater());
        setContentView(binding.getRoot());

- 최상위 레이아웃 : root

 

- 버튼 클릭시 동작할 내용 예약코드

binding.button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String myName = binding.input1.getText().toString();
                binding.output1.setText("내 이름 : " + myName);

                binding.output2.setImageResource(R.drawable.dog);
            }
        });

- 입력할 때 { } 위치 잘 보기!

 


- 버튼을 누르면 각각에 연결된 이미지가 뜨도록 하기

 

- '사람만들기' 버튼 id : makePersonButton

binding.makePersonButton.setOnClickListener(new View.OnClickListener() { //사람만들기 버튼을 누르면 -
            @Override
            public void onClick(View v) {
                String name = binding.input1.getText().toString();
                person1 = new Person(name, 20); //진짜사람을 만들어서 변수상자에 넣기, Person에 함수있음
                binding.output2.setImageResource(R.drawable.person); //- person이미지가 나타나게 한다.
            }
        });

- getText().toString();

  : String 형태로 text를 도출하겠다는 의미

 

- new Person 은 person.java 코드에서 먼저 생성자 함수 적어준 후 가져온 것

[person class]

package com.example.test4_1;

import android.widget.ImageView;

public class Person {

    String name;
    int age;

    Person() {

    }

    Person(String name, int age) {
        this.name = name;
        this.age = age;
    }

    public void walk(ImageView output2) {
        System.out.println("사람이 걸어갑니다.");

        output2.setImageResource(R.drawable.walking); //원래 앞에 binding을 붙였는데
                                        //오류가 생겨서 walk()안에 변수를 넣어주고 binding을 지움!
    }
}

- walk 도 마찬가지로 Main코드에서 '걷기' 버튼 id(walkButton)에 연결해줌

 

 

[MainActivity.java 전체코드]

package com.example.test4_1;

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 com.example.test4_1.databinding.ActivityMainBinding;

public class MainActivity extends AppCompatActivity {

    ActivityMainBinding binding; //변수상자 명시

    Person person1; //변수상자 명시

    /*
    TextView output1; //화면이 유지되는 동안 계속 쓸거니까 명시, 그럼 밑에서 또 쓸 때 변수상자크기 안적어도 됨
    EditText input1;
     */

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        //화면모양을 나타내는 것
        binding = ActivityMainBinding.inflate(getLayoutInflater());
        setContentView(binding.getRoot());

        binding.button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String myName = binding.input1.getText().toString();
                binding.output1.setText("내 이름 : " + myName);

                binding.output2.setImageResource(R.drawable.dog);
            }
        });

        binding.makePersonButton.setOnClickListener(new View.OnClickListener() { //사람만들기 버튼을 누르면 -
            @Override
            public void onClick(View v) {
                String name = binding.input1.getText().toString();
                person1 = new Person(name, 20); //진짜사람을 만들어서 변수상자에 넣기, Person에 함수있음
                binding.output2.setImageResource(R.drawable.person); //- person이미지가 나타나게 한다.
            }
        });

        binding.makeDogButton.setOnClickListener(new View.OnClickListener() { //강아지만들기 버튼을 누르면 -
            @Override
            public void onClick(View v) {
                binding.output2.setImageResource(R.drawable.dog); //- dog이미지가 나타나게 한다.
            }
        });

        binding.walkButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                person1.walk(binding.output2); //다음줄 방법 대신 walk함수 안에 이미지 변경코드를 넣은거!
                //binding.output2.setImageResource(R.drawable.walking); //이미지도 바꿔보기
            }
        });


        /*
        output1 = findViewById(R.id.output1); //근데 이 findViewById 방법이 오류가 잘나서 요즘 잘 안써서
        input1 = findViewById(R.id.input1);   //ActivityMainBinding binding을 쓰긴하는데 find가 직관적이긴 하다

        Button button1 = findViewById(R.id.button);
        button1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String myName = input1.getText().toString(); //String객체로 text불러오게 해줌!!
                output1.setText("내 이름 : " + myName);
            }
        });
         */

        }
}