BTS 갤러리 앱 만들어보기

인터넷 강의에 따라서 안드로이드 스튜디오를 다운받고 코드를 짜고 앱을 만들어보았다.

 

레이아웃 코드 (화면 짜기)

<?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"
    tools:context=".MainActivity"
    android:orientation="vertical">

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

        <ImageView
            android:id="@+id/bts_image_1"
            android:src="@drawable/bts1"
            android:layout_width="105dp"
            android:layout_height="105dp"/>

        <ImageView
            android:id="@+id/bts_image_2"
            android:src="@drawable/bts2"
            android:layout_width="105dp"
            android:layout_height="105dp"/>

        <ImageView
            android:id="@+id/bts_image_3"
            android:src="@drawable/bts3"
            android:layout_width="105dp"
            android:layout_height="105dp"/>

    </LinearLayout>

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

        <ImageView
            android:id="@+id/bts_image_4"
            android:src="@drawable/bts4"
            android:layout_width="105dp"
            android:layout_height="105dp"/>

        <ImageView
            android:id="@+id/bts_image_5"
            android:src="@drawable/bts5"
            android:layout_width="105dp"
            android:layout_height="105dp"/>

        <ImageView
            android:id="@+id/bts_image_6"
            android:src="@drawable/bts6"
            android:layout_width="105dp"
            android:layout_height="105dp"/>

    </LinearLayout>

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

        <ImageView
            android:id="@+id/bts_image_7"
            android:src="@drawable/bts7"
            android:layout_width="105dp"
            android:layout_height="105dp"/>

    </LinearLayout>



</LinearLayout>

LinearLayout은 사진을 오른쪽으로 하나씩 붙여주는 방식이다.

android:orientation="vertical"은 의도적으로 수직방향으로 나열하겠다는 의미이다.

android:id="@+id/bts_image_1"은 사진에 아이디를 붙여서 액티비티 코드쪽에서 사용할 수 있게 해준다는 의미이다.

 

액티비티 코드 (프로그램 작동)

package com.sjbaek98.bts

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.ImageView
import android.widget.Toast

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

        // 1. 프로그램이 화면이 클릭되었다는 것을 알아야 함
        val image1 = findViewById<ImageView>(R.id.bts_image_1)
        image1.setOnClickListener {
            Toast.makeText(this, "1번 클릭 완료", Toast.LENGTH_LONG).show()
        }
        // 2. 화면이 클릭되면, 다음 화면으로 넘어가서, 사진을 크게 보여줌

        var intent= Intent(this,Bts1Activity::class.java)
        startActivity(intent)

        val image2 = findViewById<ImageView>(R.id.bts_image_2)
        val image3 = findViewById<ImageView>(R.id.bts_image_3)
        val image4 = findViewById<ImageView>(R.id.bts_image_4)
        val image5 = findViewById<ImageView>(R.id.bts_image_5)
        val image6 = findViewById<ImageView>(R.id.bts_image_6)
        val image7 = findViewById<ImageView>(R.id.bts_image_7)

        image2.setOnClickListener {
            var intent= Intent(this,Bts2Activity::class.java)
            startActivity(intent)
        }
        image3.setOnClickListener {
            var intent= Intent(this,Bts3Activity::class.java)
            startActivity(intent)
        }
        image4.setOnClickListener {
            var intent= Intent(this,Bts4Activity::class.java)
            startActivity(intent)
        }
        image5.setOnClickListener {
            var intent= Intent(this,Bts5Activity::class.java)
            startActivity(intent)
        }
        image6.setOnClickListener {
            var intent= Intent(this,Bts6Activity::class.java)
            startActivity(intent)
        }
        image7.setOnClickListener {
            var intent= Intent(this,Bts7Activity::class.java)
            startActivity(intent)
        }



        //7개 이미지들의 이름을 다 붙이고, 각각 클릭시 다른 액티비티로 이동!

    }
}

 

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

이 부분은 이미지2를 누르면 Bts2Activitiy로 들어가서 이미지2번을 크게 보여주는 작동 코드이다.

 

메인화면

클릭돼서 커진 화면