안드로이드 스튜디오 독학하기 29일째

안녕하세요?

이번 포스팅에서는 안드로이드 스튜디오에서 프레임 레이아웃이라고 해서 한번에 한개의 뷰만을 보여주는 레이아웃이 있다고 합니다. 이번에 실습해서 포스팅할 내용은 바로 이 프레임 레이아웃을 이용해서 버튼을 누르면 이미지가 바뀌는 앱을 만드는 내용을 포스팅 하고자 합니다.

우선 새 프로젝트를 생성해서 SampleFrameLayout이라고 이름을 지정합니다. 그리고 activity_main.xml의 text탭으로 가서 제약 레이아웃으로 되어 있는 레이아웃을 리니어 레이아웃으로 변경하도록 합니다.

위 스크린샷에 보여지는 것 처럼 리니어 레이아웃(LinearLayout)으로 변경을 하도록 합니다. 그리고 나서는 지난번에 잊어버려서 애를 먹었는 리니어 레이아웃의 orientation속성을 vertical로 지정을 하도록 합니다.

위에 올라온 스크린샷에 보여지는 것처럼 properties윈도우 안으로 가서, 속성을 vertical로 지정을 하도록 합니다. 그리고 나서는 먼저 버튼을 추가하도록 합니다.

그리고 나서 위 스크린샷에 보이는 것처럼 팔레트 윈도우에 있는 레이아웃(Layouts)항목에 Framelayout을 선택해서 드래그 하도록 합니다.

 

다음으로는 package윈도우에 있는 drawable폴더 안에 그림파일 2개를 추가하도록 합니다. 그리고 나서 이미지뷰 컴포넌트 2개를 프레임 레이아웃(FrameLayout)안에 추가를 하도록 합니다.

첫번째 이미지뷰는 visibility속성을 안보이는 것을 의미하는 invisible로 지정을 하도록 합니다.

두번째 이미지뷰는 visibility속성을 보이게 지정하는 것을 의미하는 visible로 지정을 합니다.

다음은 위에서 잊어버렸는데, 화면 제일 위에 있는 버튼의 텍스트를 [이미지 바꾸기]라고 하고, 그 다음에는 onClick속성에 [button1click]라고 지정을 하도록 해서, 아래에 나올 자바 코딩을 할때 편하게 버튼의 기능을 구현하는데 쓰도록 합니다.

이번에는 MainAcitivity.java파일을 열어서 코딩을 시작하도록 합니다. 우선 int라고 해서 변수 한개의 선언을 하도록 합니다. 그리고 나중에 이미지뷰를 지정하기 위해서 

ImageView 변수이름1번;

ImageView 변수이름2번;

타이핑을 하도록 합니다. 그리고 시작하자 마자 변수의 값을 0으로 지정을 하기 위해서, 다음과 같이 코딩을 하도록 합니다.

int 변수 = 0;

그리고 나서 다음으로 계속 코딩을 이어가서, ImageView라고 지정을 한 변수이름1번과 변수이름2번이 각각 무슨 이미지뷰를 의미하는 지를 지정합니다.

 

위 스크린샷처럼 지정을 한 다음, 이제는 버튼을 누르면 이미지가 바뀌는 식으로 하기 위해서 다음과 같이 코딩을 시작하도록 합니다.

위 스크린샷에 보이는 changeimage(); 라는 것은 임의의 메서드로, 실제 안드로이드 스튜디오 안에서는 전혀 어떤 기능이라고 정의가 되어 있지 않기 때문에 사용자가 일일히 지정을 해야 합니다. 그래서 버튼은 앱을 실행시키면 누구나 누를 수 있기 때문에 다음과 같이 코딩을 합니다.

public void 버튼의 onClick속성(View v) { 

   임의의 메서드();

}

그리고 나서는 임의의 메서드는 이후 아래에 나올 메서드를 정의하는 구문에서 이게 무엇이다 라는 것으로 지정하게 될 것인데, 이 경우에는 다른데서 쉽게 접근해서는 안되고, 오로지 이 임의의 메서드가 지정되어야 하기 때문에 private라고 시작을 하게 됩니다.

private void 임의의 메서드() {

  기능

}

이런 식으로 코딩을 하면 됩니다. 이어서 이제 아래에 있는 if구문은 바로 처음 시작한 상태이기도 하면서 변수 = imageswitch라는 것의 값을 비교해야 합니다. 그래서 =이 아니라 ==을 사용하였으며, 우선 imageswitch가 0일 경우에는 첫번째 이미지뷰의 visibility는 보이고, 두번째 이미지뷰의 visibility는 보이지 않도록 속성을 지정하는 구문이 됩니다. 그리고 나서 변수인 imageswitch는 값을 1로 변경하라고 코딩을 하는 것입니다.

if(변수 == 0) {

   변수이름1번.setVisibility(View.VISIBLE);

   변수이름2번.setVisibility(View.INVISIBLE);

   변수 = 1;}

그리고 다음은 else if로 위에 변수가 0이 아닐 경우의 수를 코딩하도록 합니다.

여기서는 위에 설명한 것과 같습니다. 다만 이번에는 첫번째 이미지뷰가 안보이도록 하고, 두번째 이미지뷰가 보이도록 지정을 한다는 것이 다를 뿐입니다. 그리고 이번에는 변수를 0으로 변경하기 위한 구문으로 바뀌엇다는 정도가 차이가 있습니다.

그래서 전체적인 코딩한 결과물은 아래의 스크린샷과 같습니다.

이제 본격적으로 USB케이블로 연결이 된 스마트폰 상에서 한번 테스트를 하도록 해 보았습니다.

실제로 테스트를 해본결과 버튼을 누르면 두개의 이미지가 서로 바뀌는 것을 제대로 확인하였습니다. 지난번 만들었던 앱에서는 한번만 바뀌었지만, 이번에는 왔다갔다 하듯이 바꿀 수 있다는 점에서 더 발전이 되었다고 볼 수 있을 듯 합니다.