23.12.28 sns페이지 구현

sns에 페이지 구현이 끝났다
자세한 사항은
깃헙에 올려놨다

주의 해야 할 부분을 정리하자면

좋아요 버튼 구현

private fun setLikeButton(post: Post, likeButton: ImageView, likeCount: TextView) {
        likeButton.setOnClickListener {
            Log.e("user", post.likeSelectedUser.toString())
            if (post.likeSelectedUser.any { it == myId }) {
                post.like -= 1
                likeButton.setImageResource(img_empty_heart)
                post.likeSelectedUser.remove(myId)
            } else {
                post.like += 1
                likeButton.setImageResource(img_heart)
                post.likeSelectedUser.add(myId!!)
            }

            likeCount.text = post.like.toString()

            setPersonalButton()
        }
    }

게시물 에서 포스트의 정보를가진 post와 좋아요 버튼, 좋아요 수를 가지고 와서 수정한다

좋아요 버튼의 온클릭 리스터를 설정

자신이 좋아요를 눌렀었다면 좋아요 버튼을 눌렀을때 post의 좋아요가 1 내려가게되고 이미지가 empty_heart로 바뀌게 되고

피드에 좋아요를 한 사람중 자신의 아이디가 사라지게 된다

누르지 않았다면 좋아요가 1올라가게 되고 이미지가 heart로 바뀌며

피드에 좋아요를 한 사람의 리스트에 올라가게 된다

주의 해야 할 점은 저번에 인플래터를 반복문을 쓰면서 게시물들을 받았는데
입력값으로 버튼과 카운트를 받지않는다면
어느부분의 좋아요수가 변하는건지 인지하지못해 제일 마지막에 로드한 게시물의 좋아요만 변하게된다
그걸 해결하기 위해서 입력값을 게시물과 좋아요 버튼으로 같이 받아야 한다

화면전환 애니메이션

private fun setBackButton() {
        ivDetailBackBtn.setOnClickListener {
            finish()
            overridePendingTransition(R.anim.slide_in_from_left, R.anim.slide_out_to_right)
        }
    }

액티비티를 종료하고

오른쪽에서 왼쪽으로 슬라이드되면서 사라지고

그에 맞춰서 메인페이지가 나오게 한다

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="500"
        android:fromXDelta="-100%"
        android:toXDelta="0%"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:fromYDelta="0%"
        android:toYDelta="0%" />
</set>

안에 쓴 애니메이션 리소스 인데 500이란 시간동안 x -100% 화면밖 왼쪽에서 부터 x 0% 화면을 채우고

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="500"
        android:fromXDelta="0%"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:fromYDelta="0%"
        android:toYDelta="0%"
        android:toXDelta="100%" />
</set>

같은시간동안 화면 오른쪽에서 부터 화면 밖으로 나가게 한다

다크모드, 가로모드, 영어 버전

다크모드는 IDE에서 value등 폴더이름을 똑같이 만들고 뒤에 -night를 붙이면 자동으로 된다

다크모드 전용으로 실행시 컬러를 설정해주는대

<resources>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
    <color name="background_color">#E8E8E8</color>
    <color name="component_color">#FFFFFFFF</color>
    <color name="text_color">#FF1B212D</color>

    <color name="red">#FF0000</color>
    <color name="orange">#FFA500</color>
    <color name="yellow">#FFFF00</color>
    <color name="green">#008000</color>
    <color name="blue">#0000FF</color>
    <color name="indigo">#4B0082</color>
    <color name="violet">#EE82EE</color>

    <color name="light_green">#90EE90</color>
    <color name="sky_blue">#87CEEB</color>
    <color name="light_blue">#ADD8E6</color>
    <color name="purple">#800080</color>
    <color name="pink">#FFC0CB</color>
    <color name="brown">#A52A2A</color>
    <color name="gray">#808080</color>
    <color name="light_gray">#D3D3D3</color>
    <color name="dark_gray">#A9A9A9</color>
</resources>

이게 일반모드라면

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="black">#FFFFFFFF</color>
    <color name="white">#FF000000</color>
    <color name="background_color">#FF282828</color>
    <color name="component_color">#777777</color>
    <color name="text_color">#FFFFF38B</color>

    <color name="red">#008000</color>
    <color name="orange">#0000FF</color>
    <color name="yellow">#4B0082</color>
    <color name="green">#FF0000</color>
    <color name="blue">#FFA500</color>
    <color name="indigo">#FFFF00</color>
    <color name="violet">#EE82EE</color>

    <color name="light_green">#800080</color>
    <color name="sky_blue">#FFC0CB</color>
    <color name="light_blue">#A52A2A</color>
    <color name="purple">#90EE90</color>
    <color name="pink">#87CEEB</color>
    <color name="brown">#ADD8E6</color>
    <color name="gray">#D3D3D3</color>
    <color name="light_gray">#A9A9A9</color>
    <color name="dark_gray">#808080</color>
</resources>

다크모드를 이런식으로 설정해준다

xml파일에 @color/white 이런식으로 컬러를 직접입력하지 않고 리소스에서 꺼내오면

다크모드가 되었을때 자동으로 변하게 된다

가로모드도 비슷한대

레이아웃을 클릭해주고 복사 붙여넣기를 한뒤 레이아웃과 이름을 똑같이해주고 폴더 경로 끝에 -land를 추가해주기만 한다면 가로모드용 레이아웃이 생성된다

string리소스는 복붙 한 뒤 폴더명 뒤에 -en을 붙여주면 영어 버전으로 변경된다.