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

Section03

---

📱Splash

Splash 개념

• 앱이나 소프트웨어를 실행할 때 로딩이 완료되기 전 잠시 동안 표시되는 초기 화면
• 애플리케이션의 로고나 간단한 이미지를 통해 로딩 중임을 알림
• 주로 1~5초 정도 짧게 노출

구현 방법

1. SplashActivity라는 이름의 New Empty Activity를 새로 만든다.
2. 다음과 같이 AndroidManifest.xml에서 확인할 수 있다.
   
   
3. Manifest 파일에서 intent-filter 블록을 스플래쉬 액티비티 블록 안으로 넣는다.
4. <activity android:name=".SplashActivity" android:exported="true" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android:name=".MainActivity" android:exported="true"> </activity>
5. SplashAcitivity.kt 에 다음과 같은 코드를 추가한다.

Handler().postDelayed({
            startActivity(Intent(this, MainActivity::class.java))
            finish()
        }, 3000) // 3초 뒤에 스플래쉬 화면 꺼짐 

• Handler: 'Handler'라는 객체 -> 해당 핸들러가 연결된 스레드의 Looper에 작업을 보낸다.
• postDelayed({...}, 3000): 첫번째 인자는 Runnable, 두 번째 인자는 지연시간(밀리초)
• 첫 번째 인자: Intent를 만들어 MainActivity 시작
• finish(): 현재 액티비티(Splash)를 종료 -> 사용자가 뒤로가기를 눌러도 스플래시로 돌아오지 않는다.

---

📱사진 비율

사진 삽입

<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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="200dp">

        <ImageView
            android:scaleType="fitXY" // 사진비율!!
            android:src="@drawable/kko1"
            android:layout_width="120dp"
            android:layout_height="150dp"/>
        <ImageView  .../>
        <ImageView  .../>        
    </LinearLayout>
    <LinearLayout 
    ...
    </LinearLayout>

1주차와 마찬가지로 linearlayout 안에 3개의 linearlayout을 넣고, 그 안에 ImageView를 첨부한다.

사진 비율

android:scaleType="fitXY"	android:scaleType="center"

2가지의 방법이 있지만 둘다 비율이 안 좋았다...

Margin & Padding

Margin

• 뷰(View) 바깥쪽 여백, 뷰와 다른 뷰(혹은 부모 레이아웃) 사이의 거리
• ex) 버튼과 버튼 사이 간격 띄우기

Padding

• 뷰(View) 안쪽 여백, 뷰의 테두리(border)와 내용(content) 사이의 거리
• ex) 버튼 안의 글자가 버튼 테두리에 딱 붙지 않도록 띄우기

CardView를 이용해 사진 편집

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:gravity="center">

        <androidx.cardview.widget.CardView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            app:cardCornerRadius="100dp">

            <ImageView
                android:src="@drawable/kko1"
                android:layout_width="120dp"
                android:layout_height="150dp"/>

        </androidx.cardview.widget.CardView>
</LinearLayout>

1. androidx.cardview.widget.CardView를 이용해 사진 간 margin을 준다.
2. app:cardCornerRadius="100dp"을 이용해 테두리를 둥글게 만들 수 있다.
3. cardview 블록 안에 ImageView를 넣는다.

---

📱화면 간 데이터 전달

MainActivity.kt

        val btn1 = findViewById<ImageView>(R.id.k1)
           ....
        val btn9 = findViewById<ImageView>(R.id.k9)

        btn1.setOnClickListener {
            val intent = Intent(this, ImageInsideActivity::class.java)
            intent.putExtra("data", "1") 
            startActivity(intent)
        }
        btn2.setOnClickListener {
            val intent = Intent(this, ImageInsideActivity::class.java)
            intent.putExtra("data", "2")
            startActivity(intent)
        }
        ...

1. 레이아웃에 있는 'k1'이라는 아이디를 가진 ImageView를 찾아서 변수에 할당
2. 사용자가 각 사진(btn_)를 클릭했을 때 -> 데이터를 넘긴다.
3. 인텐트에 "data"(키)로 문자열 "1"을 넘긴다.

activity_image_inside.xml

<ImageView
        android:id="@+id/memberImageArea"
        android:src="@drawable/kko1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>     

• memberImageArea라는 아이디를 준다.

ImageInsideActivity.kt

        val getData = intent.getStringExtra("data")

        val memberImage = findViewById<ImageView>(R.id.memberImageArea)

        if(getData == "1"){
            memberImage.setImageResource(R.drawable.kko1)
        }
        if(getData == "2"){
            memberImage.setImageResource(R.drawable.kko2)
        }

1. MainActivity.kt에서 보낸 "data" 값을 꺼낸다.
2. activity_image_inside.xml에서 memberImageArea라는 아이디를 가진 ImageView를 찾아서 memberImage 변수에 할당한다.
3. if 조건문을 사용하여 해당 이미지뷰에 리소스를 설정 -> 각각의 이미지들을 할당

---

📱실행결과 화면