[Android]프레임 레이아웃과 뷰의 전환(이미지 바꾸기 예제)

• 이제 부터 XML 파일이 아닌 Java 소스를 건드려 보는 시간이 될겁니다.
  

혹시 세팅을 하는 도중에 ConstraintLayout 이 올바르게 동작하지 않을경우 Design탭에가서 lib를 다운받아야 합니다~

• 프레임 레이아웃 실습 하기

1. ConstraintLayout(최상위 레이아웃)
 
2. Button 추가
 
3. FrameLayout추가
 
layout_width = 350dp
layout_height = 430dp
프레임 레이아웃 안에다가 사진이 화면에 보일 수 있도록 만들어놓은것이 ImageView 이다.
 
4. 이제 이미지 파일 2개를 사용할것이다.
그래서 dream01.png , dream02.png 파일을 준비하고 그 파일을 복사한뒤에
안드로이드 스튜디오에 app->res->drawble 안에다가 그 이미지 파일을 복사 시켜준다.
 
5. 이제 FrameLayout에다가 ImageView를 넣는다. 끌어다가
 
6. 이러면 갑자기 Resource창이 뜨게되면서 Image창이 뜨게된다.
이때, 아까 우리가 넣었던 dream01, dream02 파일들이 보여지게된다.
 
7. 차례로 이미지 뷰를 추가 시킨다 2개
 
8. 그런데 이때, 이미지가 하나밖에 보이지 않는다. 왜?
이때 두개의 이미지가 겹쳐서 보이기때문에 한꺼번에 보이지않는다.
 
9. ImageView1를 선택한 상태에서 properties-> visiblity 속성을 클릭하여 visible로 바꾸어준다.
ImageView2 는 none 상태로 해준다
 
10. 이제 Button의 이벤트 발생 속성을 지정해준다
onButton1Clicked 라는 이름을 지정해준다.
 
11. 이제 MainActivity.java 로 넘어 가보자
 
여기서 우리가 제어 하려고 하는것은 이미지 두개의 뷰를 조작 하는것인데, imageview 라는 태그정보를 제어 할 수 있어야한다. 이때 우리는, 인플레이션이라고 메모리의 객체화를 할 수 있다.
imageView를 사용하기 위해서는 어떻게 해야할까?
바로 , id값을 가져와서 쓸수 있어야한다.

-하나하나씩 뜯어보면서 소스를 작성해봅시다.

첫번째,

 

find :찾아주세요

ViewById : 뷰 아이디 값을

R. (Resource)

id.

imageView( imageview의id값)

ImageView imageView = (ImageView)findViewById(R.id.imageView);

=> 코드 설명: ImageView 라는 변수를 만들어서 할당 시켜주는데, findViewById는 리턴값이 View 이므로 이것을 ImageView로 쓰고 싶으면 자료형을 ImageView로 캐스팅을 시켜주어야한다.

두번째, 

ImageView imageView3 = (ImageView)findViewById(R.id.imageView3);

 ImageView를 하나더 똑같이 할당시켜준다.

이때, ImageView는 Oncreate함수 내에서 선언된것이므로, 버튼이 클릭시 ImageView를 접근할 수 없다. 따라서, 클래스 변수로 선언 시켜줘야한다.

ImageView imageView;
ImageView imageView3;

이렇게 변수를 클래스 변수로 선언 해준다

imageView = (ImageView)findViewById(R.id.imageView);
// ImageView 라는 변수를 만들어서 할당을 시켜준다. findViewById는 리턴타입이 View 이므로 이것을
// ImageView로 쓰고 싶으면 자료형을 ImageView 캐스팅 시켜준다.
imageView3 = (ImageView)findViewById(R.id.imageView3);

3. 이제 조건에 따라서 imageView를 보여 줄것인데 이제 조건을 만들어야한다.

경우에 따라서 imageView를 보여주어야하므로, int index=0; 이라는 변수를 선언해준다.

그리고, index의 값에 따라 imageView를 보여줄것이다. 이조건들은 onButton1Clicked(View v) 메서드에 넣어 줄것이다.

public void onButton1Clicked(View v){
    index +=1;
    if(index > 1){
        index = 0;
    }
    if(index == 0){         //첫번째 인덱스가 선택되었을 경우
        imageView.setVisibility(View.VISIBLE);          // 이렇게 하면 이미지가 보이게된다.
        imageView3.setVisibility(View.INVISIBLE);
    }else if(index == 1){
        imageView.setVisibility(View.INVISIBLE);
        imageView3.setVisibility(View.VISIBLE);
    }
}

• 최종 동작 소스 및 화면

package com.example.example_framelayout;
 
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.ImageView;
 
public class MainActivity extends AppCompatActivity {
    ImageView imageView;
    ImageView imageView3;
    int index = 0; // 현재 이미지가 선택되어있는지 여부 확인, 선택될때마다 인덱스 값 증가 시킬려고선언
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //여기서 하고싶은것은 이미지두개의 뷰를 조작하려고 한다. imageView 라는 태그 정보를 제어 할수 있어야한다.
        // 인플레이션이라고 해서 메모리의 객체화를 할 수 있다. imageview를 쓰려면 id값을 가지고 쓸수 있어야한다.
 
 
        imageView = (ImageView)findViewById(R.id.imageView);
        // ImageView 라는 변수를 만들어서 할당을 시켜준다. findViewById는 리턴타입이 View 이므로 이것을
        // ImageView로 쓰고 싶으면 자료형을 ImageView 캐스팅 시켜준다.
        imageView3 = (ImageView)findViewById(R.id.imageView3);
 
    }
 
    public void onButton1Clicked(View v){
        index +=1;
        if(index > 1){
            index = 0;
        }
        if(index == 0){         //첫번째 인덱스가 선택되었을 경우
            imageView.setVisibility(View.VISIBLE);          // 이렇게 하면 이미지가 보이게된다.
            imageView3.setVisibility(View.INVISIBLE);
        }else if(index == 1){
            imageView.setVisibility(View.INVISIBLE);
            imageView3.setVisibility(View.VISIBLE);
        }
    }
}

실행 결과

• 나중에 앱스토어에 등록할때, apk 라는 파일로 해서 화면에 설치해서 띄우겠다는 의미이다.

• 이제 이런동작을 통해서 Java 파일을 건들면 이러한 어플리케이션 같은 느낌이나는것들을 만들수있다!