본문 바로가기
코딩/파이썬 활용 프로젝트

GUI_tkinter_4_레이블과 버튼 활용2 : 버튼 클릭으로 이미지 바꾸기

by jkyoon 2022. 12. 6.

*본 코드는 PC(윈도)에서도 동작합니다.

[목표] 버튼 클릭을 통해 레이블 이미지 변경하기

이번에는 레이블에 이미지를 표시하고 그 이미지를 변경해 보자.

창을 표시하기 위한 기본 코드 다섯 줄은 변함없다.

 

1.  레이블에 표시할 이미지 준비하기

1) 그림판에서 이미지 파일을 만들고 저장하자. (아래 코드는 붉은색 체크 표시 이미지를 만들고 img.png로 저장했다.)

2) 만든 이미지 파일(img.png)과 코딩 중인 파이썬(. py) 파일은 같은 폴더에 넣어두자.

3) 레이블에 이미지를 표시하기 위해 노란색 음영 표시한 코드 세 줄을 추가하자.

 

다음은 코드와 그 실행 결과다.

# 레이블에 이미지 표시하기
from tkinter import *

root = Tk()
root.title("GUI프로그래밍")
root.geometry("320x200")

photo = PhotoImage(file="img.png")
label1 = Label(root, image=photo)
label1.pack()

root.mainloop()

2. [코드 설명]이미지 표현을 위한 코드

PhotoImage(file="img.png")

PhotoImage() 함수는 이미지 파일을 가져오는 함수다.

표시하고자 하는 이미지 파일의 경로(위치)를 file속성에 지정한다. 위 코드에서는 img.png라는 파일의 위치를 지정했다.

 

photo = PhotoImage(file="img.png")

가져온 이미지를 photo라는 이름의 객체로 지정했다.

 

Label(rootimage=photo)

레이블에 가져온 이미지를 표시하는 단계다. Label() 함수의 image속성에 이미지 객체인 photo를 지정했다.

 

3. 버튼 만들고, 함수 정의하기

이제 버튼을 만들고 이를 클릭하면 레이블의 이미지를 변경하는 코드를 작성한다.

 

3-1. 버튼 만들기

위 코드에 버튼을 추가해 보자

아래 왼쪽 코드처럼 음영 표시된 두 줄을 추가하면 오른쪽처럼 버튼이 만들어진다.

#버튼 만들기
from tkinter import *

root = Tk()
root.title("GUI프로그래밍")
root.geometry("320x200")

photo = PhotoImage(file="img.png")
label1 = Label(rootimage=photo)
label1.pack()

btn = Button(roottext="이미지 변경"command=change)
btn.pack()

root.mainloop()

아래 내용을 코딩하기 전, 그림판에서 간단한 그림을 그려 ok.img라는 이름으로 .py파일과 같은 폴더에 저장해 두자.

 

3-2. 버튼 클릭 시 동작하는 함수 만들기(정의하기)

버튼을 클릭하면 레이블에 표시된 img.png라는 이미지가 ok.img로 바뀌도록 함수를 만들어 보자.

아래 왼쪽 코드에 음영 표시된 두 줄의 코드를 추가한 뒤 코드를 실행하자.

그리고, 버튼을 클릭하면 오른쪽 그림처럼 레이블의 이미지가 바뀐 것을 확인할 수 있다.

#버튼 함수 정의하기
from tkinter import *

root = Tk()
root.title("GUI프로그래밍")
root.geometry("320x200")

photo = PhotoImage(file="img.png")
label1 = Label(rootimage=photo)
label1.pack()

def change():
    photo.config(file="ok.png")
btn = Button(roottext="이미지 변경"command=change)
btn.pack()

root.mainloop()

[코드 설명 ] 버튼 함수 정의하기

추가된 두 줄의 코드 중

첫 줄 def change(): 는 'change 함수를 정의하겠다'는 의미다.

둘째 줄 photo.config(file="ok.png")

 이미지 객체인 photo의 속성(config) 중 file속성을 ok.png로 설정하겠다는 의미다.

댓글