[AN/USER] feat: 축제 목록 디자인 수정(#698)

[SeongHoonC]

📌 관련 이슈

• closed: [AN] 축제 목록 디자인 수정  #698

✨ PR 세부 내용

디자인 수정 완료하였습니다.

첫번째 시도

처음에 foreground 뷰페이저 아이템 그대로 양쪽 사이즈를 줄였는데

이미지와 텍스트 모두 포함한 height 의 중간으로 줄어들었습니다.

그리고 텍스트 Visible 도 따로 처리하기 힘들 것 같았습니다.

결론

Foreground ViewPager Adapter 에서 밖으로 빼냈습니다.

기존 코드는 화면 width 에 따라 이미지 크기를 키웠습니다.

하지만 이미지 크기 220 고정, 이미지 사이 간격 24 고정으로 디자인이 바꼈습니다.
그래서 화면 사이에 offset 을 바꿔야합니다.

offset 은 다음과 같이 계산합니다.

Resources.getSystem().configuration.screenWidthDp - IMAGE_SIZE - INTERVAL_IMAGE + (IMAGE_SIZE - (IMAGE_SIZE * RATE_SELECT_BY_UNSELECT)) * 0.5f

이 식이 어떻게 나온거냐..

if 가로 길이가 360 이라면

<원래 계산 방법>

offset = 핸드폰 가로길이(300) - 이미지 크기(220) - 이미지 사이 간격(24)

<변경된 디자인>

왼쪽 오른쪽 이미지 사이즈가 180/220 = 9/11 = 0.81 비율만큼 줄어들어서

간격이 0.81 만큼 줄었는데 24가 되어야합니다..

그래서 이미지가 줄어든 만큼 offset 에 더해줬습니다.

offset = 핸드폰 가로길이(360) - 이미지 크기(220) - 이미지 사이 간격(24) + (이미지 크기 - (이미지 크기 * 줄인 비율(0.81)) * 0.5

상수값만 조절하면 가능하도록 만들었습니다.

   private const val RATE_SELECT_BY_UNSELECT = 0.81f
    private const val IMAGE_SIZE = 220.0f
    private const val INTERVAL_IMAGE = 24.0f

참고한 블로그
https://furang-note.tistory.com/25

[re4rk]

고생하셨습니다! 의견만 달았으니 확인 후 머지 부탁드려요!

[re4rk]

formatting 한번 실행 하는 것이 좋을 것같습니다!

[re4rk]

식이 복잡한데 내부 함수로 풀어서 작성하는 것이 어떨까요??

[SeongHoonC]

넵 함수 분리해보겠습니다!

[EmilyCh0]

LGTM!! 식이 복잡한 만큼 디자인 예쁘네요. 고생하셨습니다 👍