안드로이드 앱프로그래밍4 - 버튼 누르면 이미지 변경하기

안드로이드 앱프로그래밍3 -  버튼 누르면 이미지 변경하기

1. Empty Activity(빈 액티비티)로 프로젝트를 생성합니다. 

 

2. 프로젝트 Name를 입력하고 Finish 클릭하고 마칩니다. 

 

3. TextView "Hello World"는 삭제합니다. 

 

4. ConstraintLayout 위에서 마우스 우클릭하고 팝업메뉴에서 Conver View...를 클릭하세요.

 

5. LinearLayout를 선택하고 Apply(적용)합니다. 

6. 그리고 LinearLayout으로 변경됐는지 확인합니다. 그리고 현재 LinearLayout(horizontal)입니다. 

 

7. LinearLayout의 속성중 orientation을 vertical로 변경합니다. 

 

8. Button을 추가합니다. 

 

9. Button 속성중 onClick을 "onButtonImageChange"로, text를 "이미지 변경하기"로 입력합니다. 

onClick에 쓰는 이름은 메쏘드명이 됩니다. 

 

10. Palette에서 Layouts를 선택, FrameLayout를 선택하고 화면으로 드래그합니다. 

11. 변경할 이미지를 3개만 다운받아 보겠습니다. 

 

12-1. 다운받은 이미지를 Ctrl+C (복사) 하세요. 

12-2. res의 drawable 폴더를 선택하고 Ctrl+V (붙여넣기)를 해주세요 

 

12-3 다음과 같은 디렉토리 고르는게 나오면 그냥 drawable를 선택하고 OK를 클릭합니다. 

 

12-4. res(리소스)의 drawable폴더에 이미지파일이 들어온걸 확인할 수 있습니다. 이미지 이름은 소문자로해주세요.

 

13. Palette에서 Widgets를 선택하고 ImageView를 추가시켜주세요.

 

14. 이미지뷰를 추가하면 다음과 같은 화면에서 Prject를 선택하고 사용할 이미지를 선택하세요. 첫번째로 lion.png를 선택합니다.

 

15. 이미지뷰에 lion 이미지가 나와요. 

16. 이미지뷰의 Layout속성중 layout_width와 layout_height를 match_parent로 변경합니다. 

 

17. 동일한 방법으로 ImageView를 또 추가합니다. 

 

18. 얼룩말 이미지도 layout_width와 layout_height 속성을 match_parent로 변경합니다. 

 

19. 동일한 방법으로 코끼리 이미지뷰도 추가합니다. 레이아웃속성도 똑같이 match_parent로 합니다. 이렇게 하면 3가지 이미지가 겹쳐보입니다.

 

20-1. 겹쳐보이는 3가지 이미지를 정리해주기 위해서 visibility속성을 변경해야 합니다.

20-2 두번째 얼룩말 이미지인 imageView2를 선택하고 visibility속성을 gone으로 변경합니다. 그럼 얼룩말 이미지가 사라집니다.

 

20-3. 세번째 코끼리 이미지인 imageView3를 선택하고 visibility속성을 gone으로 변경합니다. 그럼 코끼리 이미지가 사라집니다.

21. 이제 소스코드를 입력하기 위해 MainActivity.java창을 열어요. 

 

22-1. 버튼의 onClick 에 입력한 이름이 메쏘드입니다. 

 

22-2. 다음과 같이 버튼의 메쏘드 코드를 입력합니다. 

 

23. ImageView 변수설정, imageChange는 각 이지미를 0,1,2로 구분함. 

 

24. 각 imageView 변수에 컨포넌트 imageView들의 id을 지정해줍니다. 

 

25. 버튼 클릭시 동작되는 부분 소스코드를 입력합니다. imageChagne==0 이면 사자이미지를 imageChange==1이면 얼룩말 이미지를, imageChange==2이면 코끼리 이미지를 보여주게 합니다. 

imageView.setVisibility(View.VISIBLE); // 이미지를 보여준다. 

imageView.setVisibility(View.GONE); // 이미지를 사라지게 한다. 

 

26. 앱을 실행합니다