2024. 5. 10. 18:35ㆍ카테고리 없음
어느정도 리듬게임 프로젝트의 기능구현이 끝나서, 남는기간동안 앱프론트의 본질에 충실해져보기로 한다
특히 곡선택화면은 리듬게임의 심장과도 같은부분이기때문에 이런 구린UI는 사용하면 기능에비해 실례라고 볼수있겠다.
https://www.youtube.com/watch?v=cpEeqACsF_Q
구글에서 입사제의를 받았다던 유튜버의 이 예쁜 포트폴리오를 보면서 이런 슬라이드식으로 넘어가는 예쁜 3D갤러리를 곡 선택화면으로 만든다면 확실한 차이점을 주고, 인터렉티브한 사용자경험을 선사해줄수 있겠다 싶었다.
먼저 이 포스팅을 보러온분들은 제 포스팅을 통해 어떤 결과물을 얻어갈수 있는게 젤 궁금한 요소일거기때문에 결과물을 먼저 보여드리고 시작하겠습니다.
각 이미지에 description(설명) 과 difficulty(난이도) 를 추가로 설정하여 중간에 선택된 이미지에 대한 설명과 난이도를 텍스트뷰에 표시해줍니다.
또한 ImageView가 아닌 RefelctionImageView를 사용하여 아래 그림이 반사되는 예쁜 3d이미지를 쉽게만들어 사용해볼수있습니다.
1. 의존성추가
사용법은 크게 어렵지않습니다. 물론 안드로이드 스튜디오에 구버전 캐러셀뷰 예제가 너무많아 이것저것 실험해본다고 2틀날밤을 새긴했습니다.
먼저 build.gradle에 이 의존성2개를 추가해줍니다(본인같은경우엔 material은 이미 추가돼있었습니다)
학교 프로젝트때문에 언어는 java고 gradle 부분만 코틀린DSL이기때문에 적절히 변형하여 사용하시면 됩니다.
setting.gradle에 맨상단에 mavenCentral()을 추가해줍니다. 이것을 추가해야 maven에서 다운로드해서 적용이 됩니다.
항상 gradle쪽 작업을 하고나선 sync now로 꼭 적용을 해주기!
2.xml에 영역추가
어디에 추가하던 상관없습니다. 이미지뷰를 추가하시듯이 레이아웃으로 영역을 잡아줘도 되고, 그냥 dp로 위치를 조절하시든 하여 사진과같이 캐러셀리사이클뷰를 표시할 영역에
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginBottom="20dp">
</com.jackandphantom.carouselrecyclerview.CarouselRecyclerview>
를 추가하여 캐러셀리사이클뷰를 만들어줍니다. id값,넓높이는 본인 입맛대로 바꾸세요!
텍스트뷰2개 추가된것은 이미지에 미리보기 이름과 난이도를 설정해두고 화면중앙에 이미지가 왔을때 이름과 난이도를 표시하기 위해 설정해뒀습니다.
3. 캐러셀뷰에 표시할 이미지카드 만들기
기본 xml을 만들듯이 item_layout.xml 을 하나 만들어줍니다.
LinearLayout으로 전체를 잡아주시고. width,height를 설정합니다. 이 크기가 곧 캐러셀리사이클뷰의 이미지카드가 되는겁니다.
그냥 ImageView를 쓰셔도되지만. ReflectionImageView를 사용하면 사진 반 크기만큼 반사된 3d이미지를 만들수있습니다.
4. 이미지 아이템 (이미지카드) 클래스 만들기
클래스를 하나 만들어 변수로 이미리 리소스ID, 곡 제목, 곡 난이도를 담을 모델클래스를 만듭니다.
곡제목, 곡난이도같은 텍스트는 사용안하실꺼면 안넣으셔도 됩니다.
ImageItem 생성자로 매개변수를 각 변수와 똑같은타입을 받고
this.imageResource = imageResource;로 해당 모델클래스 변수값으로 저장합니다.
이미지,문자등을 반환하기 위해 get메소드도 각각 만들어 자료형을 반환해줍니다.
5. 데이터바인딩 하기
MainActivity.class의 onCreate안에서 캐러셀뷰와 데이터를 표시해줄 각 텍스트뷰를 뷰바인딩 해줍니다.
뷰바인딩한 코드 바로 다음에서 캐러셀 레이아웃 매니저를 선언합니다. 레이아웃매니저 객체생성시 매개변수는 다음순서대로 생성합니다.
- isLoop: 이 값이 true이면, CarouselRecyclerview가 무한 스크롤되도록 설정합니다. false이면 끝에서 다시 시작하지 않습니다.
- isItem3D: 이 값이 true일 경우, 아이템에 3D 효과를 적용합니다.
- ratio: 아이템의 확대 비율을 설정합니다. 0은 확대하지 않음을 의미합니다.
- flat: 이 값이 true일 경우, 모든 아이템이 평평하게 보이도록 설정합니다. false이면 각 아이템이 각도를 가질 수 있습니다.
- alpha: 이 값이 true일 경우, 중앙에서 멀어질수록 아이템의 투명도가 증가합니다.
- isScrollingEnabled: 스크롤이 가능하도록 설정합니다. true이면 사용자가 스크롤할 수 있습니다.
- orientation: Carousel의 방향을 설정합니다. 보통 LinearLayoutManager.HORIZONTAL 또는 LinearLayoutManager.VERTICAL을 사용합니다.
그후 아까 바인딩한 캐러셀리사이클뷰에 layoutManger을 setLayoutManager 해줍니다. (빨간줄이 뜰텐데 실행해도 무방합니다. 버전오류인거같습니다)
6. List에 ImageItem 모델 삽입
아까 ImageItem에서 만든 자료형을 토대로 매개변수를 주어 리스트배열을 만듭니다.
7. 어댑터클래스 작성 및 객체생성
MyAdapter 이라는 클래스를 하나 만들고, RecyclerView.Adapter<MyAdapter.ViewHolder> 을 상속받아줍니다.
이 클래스를 생성함으로써 ReflectionImageView에 onCreate에서 생성한 List<ImageItem> items의 imageResource를
각 holder에 bind함으로써 이미지 갤러리를 만들어줄수있습니다.
MyAdapter 작성이 끝났다면, 다시 MainActivity.java의 onCreate 메소드로 돌아 MyAdapter객체를 매개변수 items를 주고 생성합니다.
생성한 adapter는 캐러셀 리사이클뷰에 setAdapter로 설정해줍니다.
실행해보면 이렇게 예쁜 3d 이미지갤러리를 만들 수 있습니다.
갤러리를 만드는데는 성공했으니 이제 중간에 줌업된 이미지에대한 정보를 간략하게 표기해볼겁니다.
8. 간략한 이미지에대한 설명 텍스트 출력하기
item_layout.xml에서 이미지밑에 텍스트뷰를 추가해 각각 이미지밑에 텍스트가 뜨게해도 되지만.
전 선택된 이미지에대한 텍스트만 띄우고싶기에 addOnScrollListener을 사용합니다.
onScrolled(스크롤 됐을때)
함수사용을 선언하고 onCreate메소드 바깥에서 메소드를 하나 작성해줍니다.
int recyclerViewCenterX = (recyclerView.getLeft() + recyclerView.getRight()) / 2; //중앙위치
int minDistance = Integer.MAX_VALUE; //최소거리
View closetChild = null; //센터값 기본값
for (int i = 0 ; i <= recyclerView.getChildCount() ; i++ ){
View child = recyclerView.getChildAt(i); // 해당 순서의 자손을 뷰로 참조\
if (child != null) { //자손이 null인지 아닌지 확인( 자손이 로딩되기전에 사용해 NullPointException을 방지하기위해)
int childCenterX = (child.getLeft() + child.getRight()) / 2; //자손의 x값 계산
int distance = Math.abs(recyclerViewCenterX - childCenterX); //리사이클러뷰 x좌표와 자손x값을 빼서 거리계산(노트랑비슷함ㅋㅋ)
if (distance < minDistance) {
minDistance = distance; // 최소거리가 거리차이보다 크다면 -> 최소거리를 거리값으로 변경
closetChild = child; // 가까운 자손뷰 변수에 자손입력
}
}
}
if (closetChild != null) {
int position = recyclerView.getChildAdapterPosition(closetChild);
if (position != RecyclerView.NO_POSITION) {// -1 기본값이 아니라면
song_name_Main.setText(items.get(position).getDescription()); //선택된 자손의 설명값을 텍스트로설정
song_difficulty_Main.setText(items.get(position).getDifficulty()); //선택된 자손의 난이도값을 텍스트로설정
}
}
}
이 메소드는 리사이클러뷰와 items 리스트를 매개변수로 받아, 리사이클뷰의 중앙위치(현재 선택위치)와
리사이클뷰의 자손들(이미지 카드) 좌표를 비교하여 중앙에있다면 closetChild에 변수를 저장하고.
closetChild의 인자값(예를들면 1)을 items List에서 찾아(list의 1) 설명과 난이도를 텍스트뷰에 표시해주는 메소드입니다.
이렇게하면 이런 예쁜 곡선택 화면을 구성할 수 있습니다. 응용하여 쇼핑몰등 다양한 활용법이 있을거같습니다.