내일배움캠프 7기 Android TIL 23일차 (2023.08.16)

일일 회고

 

본격적인 프로젝트 구현을 시작하였다.

비록 UI 구현위주로만 하는 것이지만 신경 쓸게 꽤 있었던 것 같다.

요구사항과 정해놓은 기능을 오류 없이 정확도 높게 잘 구현해 봐야겠다.

---

오늘의 키워드

• oop 세션 3회차
• 프로젝트 제작

---

OOP 실시간 세션 - 3회차

https://aaapple.tistory.com/35

OOP(Object - Oriented Programming) 실시간 세션

프로젝트 제작

나는 메인페이지를 맡아 먼저 메인 페이지의 UI를 구현하였다.

약간 카카오톡 느낌의 메인 UI였는데 그런 느낌을 내려고 본인, 친구의 프로필을 CardView를 통해 통일감을 주었다.

아직 디자인은 생각 중이다.

 

메인페이지의 명세대로 코틀린 코드를 작성해 보자

 

리사이클러뷰나 뷰바인딩을 쓰지 않으므로 동적으로 바뀔 모든 컴포넌트의 변수를 만들어준다..

private val loginButton by lazy { findViewById<Button>(R.id.login_button) }
    private val scrollView by lazy { findViewById<ScrollView>(R.id.scrollview_friends) }
    private val notificationCloseButton by lazy { findViewById<ImageButton>(R.id.close_button) }
    private val notification by lazy { findViewById<CardView>(R.id.main_notification) }
    private val cardViewMain by lazy { findViewById<CardView>(R.id.main_profile) }
    private val cardViewFirst by lazy { findViewById<CardView>(R.id.main_friend_1) }
    private val cardViewSecond by lazy { findViewById<CardView>(R.id.main_friend_2) }
    private val cardViewThird by lazy { findViewById<CardView>(R.id.main_friend_3) }
    private val cardViewFourth by lazy { findViewById<CardView>(R.id.main_friend_4) }
    private val cardViewMainImageView by lazy {
        cardViewMain.findViewById<ImageView>(R.id.main_profile_imageview)
    }
    private val cardViewMainTextView by lazy {
        cardViewMain.findViewById<TextView>(R.id.main_profile_textview)
    }
    private val cardViewFirstImageView by lazy {
        cardViewFirst.findViewById<ImageView>(R.id.friend_profile_imageview)
    }
    private val cardViewFirstTextView by lazy {
        cardViewFirst.findViewById<TextView>(R.id.friend_profile_textview)
    }
    private val cardViewSecondImageView by lazy {
        cardViewSecond.findViewById<ImageView>(R.id.friend_profile_imageview)
    }
    private val cardViewSecondTextView by lazy {
        cardViewSecond.findViewById<TextView>(R.id.friend_profile_textview)
    }
    private val cardViewThirdImageView by lazy {
        cardViewThird.findViewById<ImageView>(R.id.friend_profile_imageview)
    }
    private val cardViewThirdTextView by lazy {
        cardViewThird.findViewById<TextView>(R.id.friend_profile_textview)
    }
    private val cardViewFourthImageView by lazy {
        cardViewFourth.findViewById<ImageView>(R.id.friend_profile_imageview)
    }
    private val cardViewFourthTextView by lazy {
        cardViewFourth.findViewById<TextView>(R.id.friend_profile_textview)
    }

아직 로그인, 디테일 페이지와 연결작업이 되지 않아 당장에 사용은 하지 않는다.

 

 

로그인 상태에 따른 뷰를 분기 처리한다. (아직 미완, 로그인 작업자와 데이터 주고받기를 해봐야 함)

    private fun initViews() {
        when(isLoggedIn) {
            true -> {
                scrollView.isVisible = true
                notLoggedInTextView.isVisible = false
//                loginButton.isVisible = false
//                setting.isVisible = true
                val name = intent?.getStringExtra("name") ?: "정도균"
                // 데이터베이스를 따로 사용하지 않으니 인원 목록은 하드코딩을 함
                val filteredList = list.filter{ it.name != name }
                cardViewMainTextView.text = name
                cardViewMainImageView.setImageResource(list.filter{it.name == name}[0].titleImage)
                cardViewFirstTextView.text = filteredList[0].name
                cardViewFirstImageView.setImageResource(filteredList[0].titleImage)
                cardViewSecondTextView.text = filteredList[1].name
                cardViewSecondImageView.setImageResource(filteredList[1].titleImage)
                cardViewThirdTextView.text = filteredList[2].name
                cardViewThirdImageView.setImageResource(filteredList[2].titleImage)
                cardViewFourthTextView.text = filteredList[3].name
                cardViewFourthImageView.setImageResource(filteredList[3].titleImage)
            }
            false -> {
                scrollView.isVisible = false
                notLoggedInTextView.isVisible = true
//                loginButton.isVisible = true
//                setting.isVisible = false
            }
        }
    }

 

각 인원의 카드뷰를 선택했을 때, 디테일 페이지로 넘어가도록 함 (이 부분도 디테일 페이지 작업자와 맞춰 보아야 함)

    private fun initCardViews() {
        cardViewFirst.setOnClickListener {
//            startDetailPage(DetailPage::class.java, list[0])
        }
        cardViewSecond.setOnClickListener {
//            startDetailPage(DetailPage::class.java, list[1])
        }
        cardViewThird.setOnClickListener {
//            startDetailPage(DetailPage::class.java, list[2])
        }
        cardViewFourth.setOnClickListener {
//            startDetailPage(DetailPage::class.java, list[3])
        }
    }
    
private fun startDetailPage(activity: AppCompatActivity, data: TeamMember ) {
        startActivity(Intent(this@MainPage, activity::class.java).apply {
            // TODO 팀원 정보 리스트를 만들어서 해당인원 정보 넘기기
            putExtra("data", data)
        })
    }

 

UI를 꾸미기 위해 만든 공지 창은 X버튼을 누르면 fade-out효과를 주며 사라지도록 구현하였다.

 

 

우선 내가 할 수 있는 부분은 거의 다 한 것 같고 이제 로그인, 디테일 페이지 연결작업과 디자인을 신경 쓰는 일이 남았다.

 

 

 

++ 공지 부분이 너무 단조로운 것 같아 흐르는 효과를 주었다.

xml 코드 단 4줄! 코틀린 코드 단 2줄! 추가로 효과를 줄 수 있었다. 

참고: https://mine-it-record.tistory.com/274

<TextView
	    ...
            android:ellipsize="marquee"
            android:marqueeRepeatLimit="marquee_forever"
            android:singleLine="true"
            android:focusable="true"
            />
<!-- ellipsize="marquee" 텍스트가 범위를 넘어갈 시 흐르게 하도록 하는 효과 -->
<!-- marqueeRepeatLimit="marquee_forever 흐르는 효과를 무한으로 -->
<!-- singleLine="true" 한 줄로만 보이게 -->
<!-- focusable="true" 포커스를 주어야 흐르는 효과가 생갬 -->

private val notificationTextView by lazy { notification.findViewById<TextView>(R.id.notification_text) }
notificationTextView.isSelected = true // 흐르는 효과 - 텍스트 포커싱?