섹션 2. 트와이스 앱 만들기

오늘 배울 것: 스플래시 화면 만들기, 사진 테두리 둥글게 하기, 액티비티 하나로 여러 이미지 뷰 보이게 하기

 

1. 메인액티비티보다 스플래시 액티비티가 먼저 나오도록 하려면?

스플래시용 액티비티를 새로 만들고, 매니페스트 파일 가서 메인액티비티의 인텐트 필터 부분을 잘라서 스플래시 액티비티의 <activity> 태그 안에 붙여넣기

 

2. 스플래시 화면이 뜨는 데에는 성공. 근데 이제 메인 액티비티로 넘어가려면?

스플래시 액티비티에서 코드로 구현해야 함.

핸들러 <--New!

핸들러란? 간단히 말하면 메시지를 전달하는 것이다. 

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

Handler().postDelayed({
startActivity(Intent(this, MainActivity::class.java))
finish() // 3초 뒤에 메인 액티비티로 넘기고 스플래시 액티비티는 끈단 뜻
}, 3000)
}
}

 

3. 이미지 뷰의 사진을 꽉 채우고 싶다면?

imageView full size등의 검색어로 구글링해서 속성 이것저것 넣어본다

 

4. 이미지 테두리 둥글게

androidx 의 cardView 라이브러리를 이용해서 각 이미지 뷰를 감싸준다.

 

5. 사진끼리 간격 띄우기

카드뷰의 margin(뷰 사이의 간격)을 10dp 정도로 설정해주기

 

6. 화면간 데이터 전달(인텐트 엑스트라 데이터)

이전 섹션에서는 각 이미지를 보여주기 위한 액티비티를 각각 만들어서 번거로웠는데, 이번에는 액티비티 하나로 모든 이미지를 보여줄 수 있도록 하자.

How?

6-1 몇번째 버튼(이미지)이 클릭되었는지를 실행될 액티비티에 데이터로 넘겨줘서 넘어온 데이터에 따라 어떤 이미지 보여줄지 정하도록 함.

btn2.setOnClickListener {
val intent = Intent(this, ImageInsideActivity::class.java)
intent.putExtra("data", "2") // 주목!
startActivity(intent)
}

6-2 이제 인텐트는 그 데이터를 어떻게 받느냐?

클릭했을 때 실행될 액티비티에

intent.getString("data")

이런 식으로 "data"처럼 메인 액티비티에서 임의로 지정한 항목이름을 실행될 액티비티에도 똑같이 넣어준다.

그리고 val getExtra = intent.getString("data") 걔를 변수 안에 넣어준다

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

        val getData  = intent.getStringExtra("data")

        Toast.makeText(this, getData, Toast.LENGTH_LONG).show
        // 토스트에 띄울 메시지는 두번째 매개변수에 넣어준다.
    }
}

6-3 인텐트의 데이터를 넘겨받고 나서 데이터에 맞게 보여줄 이미지 선택하는 로직 짜기

클릭하면 실행될 액티비티, 의 레이아웃 파일의 이미지뷰 영역에 아이디를 설정하고 그 아이디로 액티비티 파일에서 핸들링을 해보자.

 

val memberImage = findViewById<ImageView>(R.id.memberImageArea)
        // 이미지를 보여줄 영역의 이미지뷰의 아이디로 뷰를 찾아서 변수에 담음

        if(getData == "1"){ // 만약 1이라는 데이터를 받았다면
            memberImage.setImageResource(R.drawable.member_1)
            // 멤버 1 사진을 보여준다.
        }
        if(getData == "2"){
            memberImage.setImageResource(R.drawable.member_2)

차례로 9번 멤버까지 만들어준다.

이렇게 액티비티 파일 한개로 9개의 이미지를 선택해서 보여줄 수 있게 됐따!

 

 

+) 섹션 1의 앱과 거의 똑같은 상위버전인데 아마도 프로젝트를 만들 때 Android 16이 아닌 Android 21로 해서 안된 것 같다.

책 실습도 안드로이드 버전을 맞춰서 안됐던 것들을 다시 해봐야겠다.