[Android] Bubble Picker

출처) 잼라이브(JAM Live) 어플

 

'잼라이브'라는 퀴즈 어플에는 이용자들에게 라이브 퀴즈 쇼 이외에 조금 더 재미를 주기 위해서 여러 가지 방법을 택하여 대시보드에 넣어놓았다. 그중 Bubble이라는 메뉴가 있는데, 클릭하면 상세화면으로 들어간다. 화면은 위 사진과 같다. '달고나 몇 개 찾기'와 같은 특정 조건을 달성하면, 앱 내에서 사용 가능한 '잼' 혹은 상품을 준다.

앱에 적용된지 얼마 되지 않은 이 기능을 처음 보고, 어떻게 개발했을까 하는 궁금증과 만들어보고픈 마음이 생겼었다. 마침 진행 중인 학교 개인과제 프로젝트에 이 기능을 넣을 수 있을 것 같아서 검색을 해보았다.

Bubble Picker라고 검색을 하니 github링크가 바로 나왔다. 만들면서 참고한 링크를 첨부한다. 찾아보니 꽤 오래전에 나왔던 재밌는 기능인데, 왜 이제야 알게 되었을까..

igalata/Bubble-Picker

 

 

우선, 프로젝트단의 build.gradle 파일에 아래 사진처럼 maven을 추가해준다.

maven { url "https://jitpack.io" }

이후 앱단의 build.gradle 파일에 아래 사진처럼 implementation을 추가해준다. 위 링크에는 compile로 작성되어 있지만, compile을 더 이상 사용하지 않기 때문이다. 자세한 건 링크를 참고하자.

implementation 'com.github.igalata:Bubble-Picker:v0.2.4'

이후 sync now를 눌러주면 Android Studio에서  이것저것 알아서 해준다. 에러 없이 잘 진행되었다면 다음으로 간다.

 

 

이제 Bubble Picker를 넣을 레이아웃으로 가서 bubblepicker를 추가해준다. id와 bgColor 등은 알아서 정해주자.

<com.igalata.bubblepicker.rendering.BubblePicker
        android:id="@+id/picker"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:backgroundColor="#00000000" /> <!-- 배경투명 -->

 

layout의 java파일로 이동하여 BubblePicker를 선언, 초기화 해준 후, bubble에 들어갈 단어의 배열을 만들어준다. 이후 method를 Override 해준다.

BubblePicker bubblePicker;
String[] title = {
	"test","test","test","test","test","test","test"
	// bubble에 들어갈 글자를 적는다.
	// values나 strings에 array로 따로 만들어 주는게 좋다.
};

int[] images ={
	// bubble을 선택했을때 나올 Image를 넣는다.
};

int[] colors ={
	// bubble의 기본 색상을 넣는다.
};

@Override
protected void onResume() {
      super.onResume();
      picker.onResume();
}

@Override
protected void onPause() {
      super.onPause();
      picker.onPause();
}

 

이제 onCreate에 초기화와 setting을 해준다.

@Override
protected void onCreate(Bundle savedInstanceState){
	...
    
    bubblePicker = findViewById(R.id.picker);
    bubblePicker.setAdapter(new BubblePickerAdapter(){
    	@Override
        public int getTotalCount(){
        	return titles.length;
        }
        
        @NotNull
        @Override
        public PickerItem getItem(int i){
        	PickerItem item = new PickerItem();
            
            item.setTitle(titles[i]); // Bubble마다 아까 초기화한 Text들을 붙여준다.
            item.setGradient(new BubbleGradient(color, color, bubbleGradient.HORIZONTAL));
            iten.setTextColor(Color.BLACK); // Bubble의 Text 색을 입혀준다.
            
            return item;
        }
	});
    
    bubblePicker.setListener(new BubblePickerListener(){
    	@Override
        public void onBubbleSelected(@NotNull PickerItem pickerItem){
        	Toast.makeText(getApplicationContext(), "Click!", Toast.LENGTH_SHORT).show();
            // 이부분에 각 Bubble 클릭 이후를 구현하면 된다.
        }
        
        @Override
        public void onBubbleDeselected(@NotNull PickerItem pickerItem){
        	// Bubble이 클릭 된 상태에서 한 번 더 클릭했을때의 기능을 구현하면 된다.
        }
 	});
 }

 

이렇게 하면 구현은 다 되었다. 작동시켜보자.

실행하면 몇 초간 아무 일도 없다가, 화면 가장자리부터 스멀스멀 Bubble들이 나올 것이다. 엄청 답답하다. 원했던 기능은 이게 아닌데.

해결법은 아주 간단하다. 크기가 작아서, 그만큼 화면으로 들어오는데 시간이 걸리는 것이다. 아래 한 줄만 추가해주면 된다.

bubblePicker.setBubbleSize(100);

 

그럼 이제 내가 원했던 Bubble이 나온다!

만약, BubblePicker가 가장자리에서가 아닌, 화면 중앙에서 바로 나오게끔 하고 싶다면 아래 줄만 추가해주면 된다.

bubblePicker.setCenterImmediately(true);

 

 

다 끝내고 나니 간단했던 것인데, 삽질을 많이 했었던 것 같다. 구현해보고 싶었던 기능을, 직접 알아가고 배워가며 구현하니 정말 뿌듯했었다. 또, 중간중간 뜨는 에러들을 해결하고, 인터넷에서 찾아보며 꽤 큰 경험을 한 것 같다. 앞으로도 구현하고 싶은 기능들에 대해 용기 있게 도전하고 해결해 나아갈 수 있을 것 같다.

 

 

p.s 개인 과제의 일부이지만, BubblePicker를 구현한 Class의 소스를 공유한다.

https://github.com/gurdlwl/Jangsaengpo_App/blob/master/app/src/main/java/kr/hs/dgsw/jangsengpoapp/VideoActivity.java

gurdlwl/Jangsaengpo_App