[Android] 6. Frame Layout : string, visibility, invisible, gone, scaleType, 디버깅

https://github.com/upcake/Class_Examples

교육 중에 작성한 예제들은 깃허브에 올려두고 있습니다. 

gif 파일은 클릭해서 보는 것이 정확합니다.

---

 - Frame Layout : 버튼 눌러 이미지 바꾸기 -

 - @string이 붙은 속성들은 res/values/strings.xml에서 확인할 수 있다.

 

▼FrameLayout 기본 틀

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

</FrameLayout>

 

▼activity_main.xml : 이미지 바꾸는 버튼과 이미지 배치

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Button
        android:id="@+id/btnChange"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="이미지 바꾸기"/>

    <!--프레임 레이아웃 : 개체를 중첩시킬수 있다는 특징이 있다-->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >


        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/dream01" />
        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/dream02"
            android:visibility="invisible"/>
        <!--visibility : 요소를 어떻게 보이게 할 것인지 설정하는 옵션-->
        <!--invisible : 요소가 차지하는 공간은 있지만 보이지는 않음-->
        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher"
            android:scaleType="centerCrop"
            android:visibility="gone"/>
        <!--scaleType : 이미지뷰 안에서 이미지의 배치를 설정하는 옵션-->
        <!--gone : 요소가 차지하는 공간도 없고 보이지도 않음-->
    </FrameLayout>

</LinearLayout>

 - FramLayout : 여러 개체를 중첩시킬 수 있는 특징을 가진 레이아웃이다.

 - visibility : 요소를 어떻게 보이게 할 것인지 설정하는 옵션

 - invisible : 요소가 차지하는 공간은 있지만 보이지는 않음

 - gone : 요소가 차지하는 공간도 없고 보이지도 않음

 - scaleType : 이미지 뷰 안에서 이미지의 배치를 설정하는 옵션

 

 

▲프레임 레이아웃 밑에 이미지 넣기

 - 원하는 요소를 드래그해서 FrameLayout 밑에 두면 요소가 FrameLayout 하위 요소로 들어간다.

 

▲이미지 가져오기

 - 이미지를 복사한 후, drawable 우클릭 - Paste로 애플리케이션에서 사용할 이미지를 가져온다.

 

▼MainActivity.java 

package com.example.my04_framelayout;

import androidx.appcompat.app.AppCompatActivity;

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

public class MainActivity extends AppCompatActivity {
    //변수 선언
    Button btnChange;
    ImageView imageView1, imageView2, imageView3;
    int selIdx = 1; // 1, 2, 3번 그림중에 1번을 먼저 보여줄 것이므로 1로 초기화한다.

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

        //변수 찾기
        btnChange = findViewById(R.id.btnChange);
        imageView1 = findViewById(R.id.imageView1);
        imageView2 = findViewById(R.id.imageView2);
        imageView3 = findViewById(R.id.imageView3);

        //이미지 Visibility 설정
        imageView1.setVisibility(View.VISIBLE);
        imageView2.setVisibility(View.GONE);
        imageView3.setVisibility(View.GONE);

        //버튼에 이벤트 삽입
        //버튼을 누르면 보이는 이미지가 바뀌게끔 설정
        btnChange.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(selIdx == 1) {
                    imageView1.setVisibility(View.VISIBLE);
                    imageView2.setVisibility(View.GONE);
                    imageView3.setVisibility(View.GONE);
                    selIdx = 2;
                    Toast.makeText(MainActivity.this, "1번 선택 됨", Toast.LENGTH_SHORT).show();
                } else if (selIdx == 2) {
                    imageView1.setVisibility(View.GONE);
                    imageView2.setVisibility(View.VISIBLE);
                    imageView3.setVisibility(View.GONE);
                    selIdx = 3;
                    Toast.makeText(MainActivity.this, "2번 선택 됨", Toast.LENGTH_SHORT).show();
                } else if (selIdx == 3) {
                    imageView1.setVisibility(View.GONE);
                    imageView2.setVisibility(View.GONE);
                    imageView3.setVisibility(View.VISIBLE);
                    selIdx = 1;
                    Toast.makeText(MainActivity.this, "3번 선택 됨", Toast.LENGTH_SHORT).show();
                } //if else if
            } //onClick()
        }); //setOnClickListener()
    } //onCreate
} //MainActivity

 - setVisibility() 메서드로 요소의 visibility 속성을 변경할 수 있다.

 

▲이미지 바꾸기 버튼 작동 화면

 

▲디버깅

 - 중단점 설정 : 라인 번호 옆에 여백 클릭

 - 디버깅 단축키

  · 디버깅 시작 : Shift + F9

  · 다음 중단점까지 실행 : F9

  · 마우스 커서 위치까지 실행 : Alt + F9

  · 소스 코드 한 줄 실행 : F8