[안드로이드 공부]FrameLayout 프레임레이아웃

 

오늘은 FrameLayout 프레임레이아웃을 공부를 했다.

 

 

 

프레임 레이아웃의 사용방법은 위의 사진과 같다.

FrameLayout ; 여러 개의 뷰를 중첩으로 배치하고 그중 하나를 레이아웃의 전면에 표시할 때 사용하는 레이아웃이다.

---

 

 

 

새로운 프로젝트를 생성한다. 

 

 

일단 최상위 레이아웃은 LinearLayout으로 설정해준다. 

그리고 방향은 vertical로 설정해준다.

 

 

버튼을 생성해준다. 

 

 

그리고 밑에는 FrameLayout을 생성한다. 

 

이번 목표는 FrameLayout을 이용하여 버튼을 누르면 이미지가 바뀌는 것을 해볼 것이다.

 

먼저 이미지를 넣자

 

(자신의 컴퓨터에 따라 경로의 위치가 다를 수 있음)

C -> user -> AndroidStdioProjects -> (자신의 프로젝트 파일) -> app -> src -> main -> res -> drawable

의 경로를 따라 사진 2개를 넣어준다.

 

 

그러면 여기에 정상적으로 그림이 들어갔을 것이다.

 

 

화면에 이미지를 넣기위해 ImageView를 넣어준다.

 

 

그러면 이런 창이 뜰텐데 app의 자신이 넣은 사진을 클릭한 후, OK를 누른다.

 

 

그러면 정상적으로 들어갔을 것이다. 가로 세로는 꽉 채우게 match_parent로 설정해준다.

 

 

그리고 사진 하나더를 더 넣어준다.

 

 

두번째 사진은 숨기기 위해, visibility를 gone으로 설정해준다.

 

 

버튼은 바꾸기로 바꿔주자.

 

 

버튼을 클릭했을때 동작할 수 있게 onClick을 onButton1Clicked로 설정해준다.

 

이제 버튼을 클릭했을때 동작 할수 있도록 코드를 짜주자.

package org.techtown.myframelayout;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    public void onButton1Clicked(View v){

    }
}

 이렇게 버튼을 클릭했을때 실행되는 함수를 만들었다

package org.techtown.myframelayout;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {
    ImageView imageView;
    ImageView imageView2;
    @Override
.
.
.
(중략)

ImageView를 코드에서 쓸 수 있게 타입 자료형을 새로 선언해 준다. 이름은 id값으로 설정해준다.

package org.techtown.myframelayout;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {
    ImageView imageView;
    ImageView imageView2;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageView = findViewById(R.id.imageView);
        imageView2 = findViewById(R.id.imageView2);
    }

    public void onButton1Clicked(View v){

    }
}

 imageView의 아이디를 찾아 값을 넣어주기 위해 findviewById를 이용한다.

package org.techtown.myframelayout;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {
    ImageView imageView;
    ImageView imageView2;

    int imageIndex = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageView = findViewById(R.id.imageView);
        imageView2 = findViewById(R.id.imageView2);
    }

    public void onButton1Clicked(View v){

    }
}

그리고 이미지의 상태를 구분하기 위해 int형으로 imageIndex를 선언해준다.

	(생략)    
    .
    .
    .
    public void onButton1Clicked(View v){
        changeImage();
    }

    public void changeImage(){
        if (imageIndex == 0){
            imageView.setVisibility(View.VISIBLE);
            imageView2.setVisibility(View.GONE);

            imageIndex = 1;
        }
        else if (imageIndex == 1){
            imageView2.setVisibility(View.VISIBLE);
            imageView.setVisibility(View.GONE);

            imageIndex = 0;
        }
    }
}

이제 마지막으로, 버튼을 클릭 했을때, 이미지가 바뀌는 함수를 선언한다.

 

그러면 모두 완성이 됬다.

이렇게 실행이 된다.