오늘이라도
[Android] 6. Frame Layout : string, visibility, invisible, gone, scaleType, 디버깅 본문
취업성공패키지 SW 개발자 교육/Android
[Android] 6. Frame Layout : string, visibility, invisible, gone, scaleType, 디버깅
upcake_ 2020. 5. 13. 09:26반응형
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
반응형