[TAVE 스터디 1주차] 사진앱 만들기(1)

Section 1

---

안드로이드 스튜디오 개발환경 세팅

IDE란?

• 정의: 통합 개발 환경(IDE, Integrated Development Environment), 소프트웨어 개발에 필요한 여러 기능을 하나의 프로그램 안에서 제공하는 환경

• 코드 작성, 컴파일, 빌드, 디버깅, 실행환경, 자동완성 등의 기능 제공

• e.g. IntelliJ IDEA, Eclipse, Visual Studio, Android Studio (안드로이드 앱 개발용)

프로젝트 생성하는 법

사실 나는 안드로이드 스튜디오가 이미 깔려져 있는 상태라 바로 프로젝트를 실행할 수 있었다.
이 화면에서 Empty Activity를 선택 후 프로젝트를 생성하면 된다.

(주의사항: 노트북에 IntelliJ나 Java가 깔려있지 않으면 오류가 날 수 있다고 한다.)

파일 개념

• MainActivity.kt: 화면의 있는 로직을 담당, 버튼 클릭이나 화면 전환과 같은 제어 코드 작성

• activity_main.xml: 앱의 UI를 담당하는 파일, 배치만 하고 실제 동작은 MainActivity와 연결해야 함.

• Gradle: 앱 개발에 필요한 라이브러리, 패키지 등의 환경 설정 담당

추가적인 개념

• Import 하는 법: Alt + Enter (윈도우 기준)
  • 색상: "@color/black" = "#000000" / "#color/white" = "#ffffff"

---

Section 2

---

Drawable, ImageView

Drawable

• 이미지 소스들을 저장하는 디렉토리

• 원하는 이미지들을 res/drawble 파일로 리팩토리한다. img1/jpg - img6.jpg까지 불러온 상태이다.

ImageView

• 안드로이드에서 이미지를 화면에 보여주는 UI 위젯
• width와 height 지정, src로 이미지 파일 불러오기
• 예시 코드

  <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/img1" />

---

Layout 종류

Linear Layout

• 뷰들을 가로 또는 세로 방향으로 차례대로 배치
• orientation="vertical" → 세로 정렬
• orientation="horizontal" → 가로 정렬

Relative Layout

• 마음대로 겹치게 배치가능한 구조
• 자유도는 높지만 복잡한 UI에서는 관리 어려움

Constraint Layout

• 각각의 뷰를 비례해서 띄워서 배치하는 구조
• 가로, 세로, 여백 동을 조정 가능

---

레이아웃에 사진 삽입

1. LinearLayout을 만들어 이 안에 ImageView 3개를 넣는다.

   <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="120dp" >
   
        <ImageView
            android:src="@drawable/img1"
            android:layout_width="120dp"
            android:layout_height="120dp" />
   
        <ImageView
            android:src="@drawable/img2"
            android:layout_width="120dp"
            android:layout_height="120dp" />
   
        <ImageView
            android:src="@drawable/img3"
            android:layout_width="120dp"
            android:layout_height="120dp" />
   </LinearLayout>

2. 동일한 방법으로 LinearLayout를 더 만든다.

3. 가장 큰 범위의 LinearLayout의 orientation을 "vertical"로 한다. -> 3개의 레이아웃이 세로로 정렬

---

클릭 이벤트 처리

1. 이미지뷰에 아이디 주기

   <ImageView
            android:id="@+id/img1"
            android:src="@drawable/img1"
            android:layout_width="120dp"
            android:layout_height="120dp" />

2. 토스트로 확인해보기

val image1 = findViewById<ImageView>(R.id.img1)
image1.setOnClickListener {
    Toast.makeText(this, "1번 클릭 완료", Toast.LENGTH_LONG).show()
        }

• setOnClickListener: 클릭 리스너, 중괄호 안의 람다(it이 클릭된 View)가 클릭 시 실행
• Toast(토스트): 사용자에게 잠깐 보여주는 작고 자동으로 사라지는 메시지
• LENGTH_SHORT(2초) / LENGTH_LONG(3.5초) 선택 가능

---

화면 액티비티 만들기 & 화면 전환

새로운 화면 액티비티 만들기

새로운 엠티 뷰 액티비티 만들기
"Photo1Activity"라고 지음
activity_photo1.xml에 다음 코드를 작성 -> 그냥 사진을 크게 보여주는 코드

<ImageView
        android:src="@drawable/img1"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

화면 전환

MainActivity에서 다음과 같은 코드 작성

// 2.화면이 클릭되면, 다음 화면으로 넘어감
val intent = Intent(this, Photo1Activity::class.java)
startActivity(intent)

• Intent: 안드로이드에서 컴포넌트를 실행하거나 다른 앱 기능을 호출할 때 사용하는 메시지 객체
• this: 현재 액티비티의 Context
• Photo1Activity::class.java: 이동할 대상 액티비티 클래스, .java를 붙여서 자바의 Class 객체 형태로 변환
• startActivity(intent): 위에서 만든 intent 객체를 사용 -> 현재 화면에서 Photo1Activity가 실행되고 화면이 전환

이렇게 액티비티를 7개 만든다.

MainActivity에서 위와 같이 새로운 액티비티를 불러오는 코드를 작성

        val image2 = findViewById<ImageView>(R.id.img2)
        val image3 = findViewById<ImageView>(R.id.img3)
        val image4 = findViewById<ImageView>(R.id.img4)
        val image5 = findViewById<ImageView>(R.id.img5)
        val image6 = findViewById<ImageView>(R.id.img6)
        val image7 = findViewById<ImageView>(R.id.img7)

        image2.setOnClickListener {
            val intent = Intent(this, Photo2Activity::class.java)
            startActivity(intent)
        }

        image3.setOnClickListener {
            val intent = Intent(this, Photo3Activity::class.java)
            startActivity(intent)
        }

        image4.setOnClickListener {
            val intent = Intent(this, Photo4Activity::class.java)
            startActivity(intent)
        }

        image5.setOnClickListener {
            val intent = Intent(this, Photo5Activity::class.java)
            startActivity(intent)
        }

        image6.setOnClickListener {
            val intent = Intent(this, Photo6Activity::class.java)
            startActivity(intent)
        }

        image7.setOnClickListener {
            val intent = Intent(this, Photo7Activity::class.java)
            startActivity(intent)
        }

📷실행 결과 화면