[50일차 Android] Image Resource / Image Animation

 

 

 

출처 : 안드로이드 앱스쿨 2기 윤재성 강사님 수업 PPT

 

 

 

📖 Image Resource

• 안드로이드는 drawable 폴더에 이미지를 넣어서 이미지를 사용할 수 있으며 xml 통해 이미지를 새롭게 구성하여 사용할 수 있다.
  • 여러 이미지를 겹쳐 하나의 이미지를 만들 때
  • 패턴 이미지를 만들 때
  • 상태에 따른 이미지를 만들 때 등등

drawable vs mipmap

	drawable	mipmap
넣는 이미지	애플리케이션 내에서 사용할 이미지	아이콘으로 사용할 이미지
관리하는 이미지 종류	Bitmap을 포함하여 xml 파일을 통해 만든 이미지, 코드를 통해 만든 이미지, 안드로이드에서 화면이 그릴 수 있는 요소들을 모두 포함	jpg, png, gif 파일로 부터 읽어온 이미지 데이터를 관리

 

 

 

예제 코드

drawable/tile.xml - 배경 설정

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

<!-- tileMode : clamp, disabled, mirror, repeat 중 하나를 선택하여 반복 시 모양을 정할 수 있다. -->

<bitmap 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/p"
    android:tileMode="repeat" />

 

 

 

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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    
    android:background="@drawable/tile"
    
    android:orientation="vertical"
    tools:context=".MainActivity" >
    
    ...
    
    </LinearLayout>

---

 

 

drawable/btn_image.xml - 클릭 시 이미지 애니메이션 설정

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 버튼을 누른 상태 -->
    <item android:state_pressed="true" android:drawable="@drawable/btn1"/>
    <!-- 그 외의 모든 상태 -->
    <item android:drawable="@drawable/btn2"/>
</selector>

 

 

 

activity_main.xml

    ...
    
    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/buttonStartAni"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/btn_image"
        android:text="Button" />
    
    ...
    
</LinearLayout>

 

 

 

---

drawable/layer.xml - 이미지 겹쳐서 표시하기

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <bitmap android:src = "@drawable/img1" android:gravity="center"/>
    </item>
    <item android:top="10dp" android:left="10dp">
        <bitmap android:src = "@drawable/img2" android:gravity="center"/>
    </item>
    <item android:top="20dp" android:left="20dp">
        <bitmap android:src = "@drawable/img3" android:gravity="center"/>
    </item>
</layer-list>

 

 

 

activity_main.xml

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/layer" />
   
        ...
       
   </LinearLayout>

 

 

 

---

drawable/ani_data.xml - 움직이는 이미지 만들기

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

<!-- oneshot : true를 설정해주면 반복되지 않는다. -->
<animation-list 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:oneshot="true">

    <!-- drawable : 보여줄 이미지 -->
    <!-- duration : 현재 이미지를 보여줄 시간 -->
    <item android:drawable="@drawable/ani_img1" android:duration="100"/>
    <item android:drawable="@drawable/ani_img2" android:duration="100"/>
    <item android:drawable="@drawable/ani_img3" android:duration="100"/>
    <item android:drawable="@drawable/ani_img4" android:duration="100"/>
    <item android:drawable="@drawable/ani_img5" android:duration="100"/>
    <item android:drawable="@drawable/ani_img6" android:duration="100"/>
    <item android:drawable="@drawable/ani_img7" android:duration="100"/>
    <item android:drawable="@drawable/ani_img8" android:duration="100"/>
    
</animation-list>

 

 

 

activity_main.xml

    ...
    
    <ImageView
        android:id="@+id/imageViewAni"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/ani_data" />
        
</LinearLayout>

 

 

 

---

MainActivity.kt

class MainActivity : AppCompatActivity() {

    lateinit var activityMainBinding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        activityMainBinding = ActivityMainBinding.inflate(layoutInflater)

        activityMainBinding.run{
            buttonStartAni.setOnClickListener {
                // 애니메이션 이미지 객체 추출
                val animationDrawable = imageViewAni.drawable as AnimationDrawable

                // 애니메이션이 동작 중이면
                if(animationDrawable.isRunning == true){
                    // 애니메이션 중단
                    animationDrawable.stop()
                } else {
                    // 애니메이션이 동작 중이 아니라면 가동
                    animationDrawable.start()
                }
            }
        }

        setContentView(activityMainBinding.root)
    }
}

 

 

 

---

결과