2. 안드로이드 레이아웃, 버튼 (버튼 이벤트로 사진 변경하기)

 

Layout 클래스의 종류

• RelativeLayout
• LinearLayout
• GridLayout
• FrameLayout
• ConstraintLayout

View 의 서브클래스

• Button - 일반적인 버튼, setOnClickListener 를 이용하여 이벤트처리가능
• EditText - 텍스트를 수정하여 입력할수있는 뷰
• CheckBox - 선택하거나 취소할수있는 특정유형을 고를떄 사용하는 버튼
• ImageView - 이미지 파일을 사용자에게 보여줄수있는 뷰 

 

---

ConstraintLayout + Button + ImageView 을 이용한 예제

이번에는 버튼 이벤트를 이용하여 앱에 저장된 사진을 변경하는 예제를 만들어 보겠습니다.

 

0. 프로젝트 설정

1. 먼저 안드로이드에서 NewProject 를 생성하고, EmptyActivity 를 선택합니다.

   

2.  프로젝트 이름을 설정해줍니다.

   

3.  안드로이드스튜디오 App -> Java -> MainActity 에서 다음과 같이 생성되었다면 성공!

   

1. Layout 설정

1. 안드로이드 스튜디오(ANS) res -> layout -> activity_main.xml 으로 이동합니다.

   

2. 오른쪽 탭을 보면 Palette 항목이 있고, Button, ImageView 가 있는 것을 볼수있습니다.

   

   (만약 Palette 가 없다면 ANS 오른쪽의 Design 탭을 클릭해주세요.)

3. Drag & Drop 방식으로 Boutton, ImageView 를 레이아웃에 위치시키고, 고정시켜줍니다.

   

4. ANS 오른쪽 상단의 code 또는 split 탭을 클릭하여 코드를 확인합니다. 

   

2. 이미지 앱에 저장

1. 원하는 이미지 3장을 Local 환경에 저장합니다.

   

2. ANS 의 res -> drawable 에 저장한 이미지를 저장시킵니다.

   

3. MainActivity 

코드량이 적기 때문에 코드안의 주석을 이용하여 설명하겠습니다.

package com.example.kj_project1_buttonevent

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.ImageView

class MainActivity : AppCompatActivity() {

    lateinit var button : Button // 1. view 요소 정의
    lateinit var imgView : ImageView
    var index = 1

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        button = findViewById(R.id.button) as Button // 2. view 바인딩
        imgView = findViewById(R.id.imageView) as ImageView

        button.setOnClickListener { // 3. 이벤트처리
            index++
            if(index == 4) index = 1
            
            val resId:Int = this.resources.getIdentifier("img${index}","drawable", this.packageName)
            // this.resources.getIdentifier 은 문자열로 이미지 파일을 찾을때 이용
            imgView.setImageResource(resId)
        }
    }
}

---

프로그램을 실행하면 버튼을 누를때마다 이미지가 바뀌는 것을 알수있습니다.