/
UI 커스터마이징

UI 커스터마이징

Owned by Jen Yoon (Unlicensed)
Last updated: Apr 20, 2023 by Jasmine Lee (Unlicensed)
7 min read

잠금화면 기본 UI를 고도화하여 퍼블리셔가 원하는 대로 디자인을 수정하고 기능을 추가할 수 있습니다.

잠금화면은 하나의 액티비티로 구성되며, 일반적인 액티비티와 마찬가지로 1) 레이아웃을 만들어주고 2) 액티비티 클래스 내에서 몇 가지 필수 함수들을 호출 혹은 구현해주면 됩니다.

이 외에 커스터마이징이 가능한 부분에 대해서는 본 문서 하단을 확인해주세요.

반드시 샘플 코드를 확인한 뒤 실제 퍼블리셔 앱의 코드에 연동 바랍니다. - Github Link

디자인 커스터마이징에 대해 문의사항이 있을 경우 버즈빌 BD 매니저에게 확인해주세요. 문의 전에 BuzzScreen SDK 자주 묻는 질문 문서를 확인하는 것을 권장합니다.

1. 레이아웃 - 뷰 구현

레이아웃에는 필수적으로 시계, 슬라이더가 포함되어 있어야 하며, 캠페인 이미지에 따라 뷰들의 가독성이 떨어지지 않게 하기 위해 배경 그라데이션을 추가하는 것이 좋습니다. 그 외에 커스텀 기능을 위한 뷰 (아래 그림의 카메라 shortcut 등) 를 추가할 수 있습니다.

참고: 레이아웃 가이드라인

 

시계, 버튼 등의 컴포넌트의 사이즈를 sp로 설정할 경우 유저의 폰트 크기 설정에 따라 잠금화면 레이아웃이 바뀔 수 있습니다. 따라서 sp 사용 시 모든 경우의 해상도를 고려하여 레이아웃을 그려야 하며, 유저의 폰트 크기 설정과 무관하게 화면을 구성하고자 한다면 dp로 사이즈를 명시하는 것을 권장합니다. (참고: 안드로이드 가이드 문서)

1) 시계

레이아웃에 뷰를 추가하고, 해당 뷰에 표시되는 값은 액티비티 내의 onTimeUpdated에서 처리합니다.

2) 슬라이더

✏️ 참고
새로운 슬라이더는 BuzzScreen SDK v4.27.x부터 지원합니다.

기존 com.buzzvil.buzzscreen.sdk.widget.Slider는 더 이상 사용할 수 없습니다.

새로운 슬라이더인 com.buzzvil.buzzscreen.sdk.widget.ImageViewSlider를 사용해주세요.

슬라이더를 구성하는 모든 이미지들을 변경할 수 있습니다.

슬라이더 속성

설명

슬라이더 속성

설명

slider:sl_left_icon

슬라이더의 왼쪽 아이콘

slider:sl_right_icon

슬라이더의 오른쪽 아이콘

slider:sl_pointer

슬라이더의 가운데 이미지

slider:sl_pointer_drag

슬라이더의 가운데 눌렀을 때 이미지

slider:sl_radius

슬라이더 중심과 좌우 아이콘 중심까지의 반지름

slider:sl_text_size

슬라이더의 포인트 텍스트의 크기 (Default : 14sp)

슬라이더 속성 사용 예제

<com.buzzvil.buzzscreen.sdk.widget.Slider android:id="@+id/locker_slider" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="8dp" slider:sl_left_icon="@drawable/locker_landing" slider:sl_pointer="@drawable/locker_slider_normal" slider:sl_pointer_drag="@drawable/locker_slider_drag" slider:sl_radius="128dp" slider:sl_right_icon="@drawable/locker_unlock" slider:sl_text_size="14sp" />

슬라이더의 좌측, 우측 아이콘 변경시에는 반드시 크기가 112 x 112 픽셀 이상인 이미지를 사용해야 합니다.

기존 슬라이더(Slider)에서 새로운 슬라이더(ImageViewSlider)로 마이그레이션 하기 위해 변경해야 하는 항목입니다.

기존 슬라이더 (Slider)

새로운 슬라이더 (ImageViewSlider)

비고

기존 슬라이더 (Slider)

새로운 슬라이더 (ImageViewSlider)

비고

slider:sl_left_icon

getLeftIconImageView().setBackgroundResource()

xml 속성으로 설정하는 대신, ImageView를 가져와서 설정합니다.

slider:sl_right_icon

getRightIconImageView().setBackgroundResource()

slider:sl_pointer

getPointerImageView().setBackgroundResource()

slider:sl_pointer_drag

selector 리소스로 설정합니다. 자세한 내용은 아래 ‘유저의 액션에 따라 Unlock/Landing 아이콘 바꾸기’ 항목을 참고해주세요.

slider:sl_radius

삭제

getPointerImageView()에 설정한 ImageView의 속성을 따라갑니다.

slider:sl_text_size

getLeftTextView().setTextSize()

getRightTextView().setTextSize()

xml 속성으로 설정하는 대신, TextView를 가져와서 설정합니다.

ImageViewSlider 추가하기

레이아웃에 ImageViewSlider를 추가합니다.

슬라이더의 크기는 자유롭게 설정이 가능하나, 잠금화면의 다른 구성 요소를 고려하여 슬라이더의 높이가 잠금 화면의 16%를 넘지 않는 것을 권장합니다.

<com.buzzvil.buzzscreen.sdk.widget.ImageViewSlider android:id="@+id/imageViewSlider" android:layout_width="match_parent" android:layout_height="wrap_content" />

ImageViewSlider 설정하기

슬라이더를 구성하는 모든 이미지들을 변경할 수 있습니다.

번호

메서드

Android View

설명

번호

메서드

Android View

설명

1

getLeftIconImageView()

ImageView

슬라이더의 왼쪽 아이콘

2

getLeftTextView()

TextView

슬라이더의 왼쪽 텍스트

3

getPointerImageView()

ImageView

슬라이더의 가운데 버튼

4

getRightTextView()

TextView

슬라이더의 오른쪽 텍스트

5

getRightIconImageView()

ImageView

슬라이더의 오른쪽 아이콘

  1. 가운데 포인터 버튼의 이미지를 변경하는 예제 코드입니다.

ImageViewSlider imageViewSlider = findViewById(R.id.imageViewSlider); ImageView pointer = imageViewSlider.getPointerImageView(); pointer.setBackgroundResource(R.drawable.your_pointer_image);

 

  1. Glide 등 서드파티 이미지 라이브러리를 사용하여 gif 이미지를 설정할 수 있습니다.

이미지를 다룰 때는 메모리 부족 문제가 발생하지 않도록 주의해야 합니다. 적절한 크기의 이미지를 사용하고, 더 이상 이미지를 사용하지 않을 때는 메모리를 해제해주세요. 메모리를 해제하는 방법은 사용하는 이미지 라이브러리에서 제공하는 방법을 참고해주시길 바랍니다.

아래는 Glide를 사용하여 gif 이미지를 설정하는 예시입니다. 다른 이미지 라이브러리를 사용하는 경우 해당 라이브러리의 사용 방법을 따라주세요.

ImageViewSlider imageViewSlider = findViewById(R.id.imageViewSlider); ImageView pointer = imageViewSlider.getPointerImageView(); Glide.with(this).load(R.raw.your_gif_image).into(pointer);

기본적으로 제공되는 SimpleLockerActivity에서 양쪽 슬라이드 아이콘은 사용자 액션에 따라 세개의 다른 아이콘이 보여지도록 설정되어 있습니다. 아래 예시를 참고하여 유저 액션에 따라 아이콘을 바꾸어 보여줄 수 있습니다.

예를 들면 좌측 locker_landing 아이콘의 경우, 아래처럼 상태 값에 따라 다른 아이콘이 나타나고 있습니다.

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/bs_locker_landing_selected" android:state_enabled="true" android:state_selected="true"/> <item android:drawable="@drawable/bs_locker_landing_enabled" android:state_enabled="true" android:state_selected="false"/> <item android:drawable="@drawable/bs_locker_landing_disabled" android:state_enabled="false"/> </selector>

  1. 첫번째 아이템은 중앙 슬라이더가 클릭 됐을 때

  2. 두번째 아이템은 중앙 슬라이더가 좌측으로 밀어져서 랜딩이 일어나기 바로 직전

  3. 세번째 아이템은 아무 액션도 없을 때 입니다.

 

아래는 이해를 돕기 위한 상태표 입니다.

상태

왼쪽 아이콘
getLeftIconImageView()

오른쪽 아이콘
getRightIconImageView()

가운데 포인터
getPointerImageView()

상태

왼쪽 아이콘
getLeftIconImageView()

오른쪽 아이콘
getRightIconImageView()

가운데 포인터
getPointerImageView()

기본(IDLE)

  • isEnabled = false

  • isSelected = false

  • isEnabled = false

  • isSelected = false

  • isEnabled = false

  • isSelected = false

포인터가 눌렸을 때(DRAG)

  • isEnabled = true

  • isSelected = false

  • isEnabled = true

  • isSelected = false

  • isEnabled = true

  • isSelected = true

포인터가 왼쪽 아이콘과 겹칠 때(LEFT_SELECT)

  • isEnabled = true

  • isSelected = true

  • isEnabled = true

  • isSelected = false

visibility = INVISIBLE

포인터가 오른쪽 아이콘과 겹칠 때(RIGHT_SELECT)

  • isEnabled = true

  • isSelected = false

  • isEnabled = true

  • isSelected = true

visibility = INVISIBLE

 

위 내용을 참고하여 슬라이더 아이콘에 selector를 사용한 xml 리소스를 설정하면 사용자 액션에 따라 다른 아이콘이 보여집니다.

<!-- your_selector_resource.xml --> <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/bs_locker_slider_drag" android:state_selected="true" /> <item android:drawable="@drawable/bs_locker_slider_normal" android:state_selected="false" /> </selector>
ImageViewSlider imageViewSlider = findViewById(R.id.imageViewSlider); ImageView pointer = imageViewSlider.getPointerImageView(); pointer.setBackgroundResource(R.drawable.your_selector_resource);

3) 뷰 추가

일반적인 뷰와 같이, 원하는 뷰를 레이아웃에 배치하고, 기능은 액티비티 내에서 구현합니다.

4) 배경 그라데이션

현재 보여지는 캠페인 이미지에 따라 시계 및 슬라이더의 가독성이 떨어질 수 있으므로 해당 UI 뒤에 배경 그라데이션을 넣어줍니다.

 

2. 액티비티 클래스 - 기능 구현

  1. BaseLockerActivity를 상속받아서 잠금화면 액티비티 클래스를 생성

  2. 초기화 함수 (BuzzScreen.init) 의 3번째 파라미터에 생성한 액티비티 클래스를 지정

    1. 액티비티 내에서 구현해야하는 필수 요소: 슬라이더, 시계

    2. 그 외: 선택에 따라 직접 구현

1) AndroidManifest.xml 설정

BaseLockerActivity를 상속받은 클래스 이름이 CustomLockerActivity인 경우

<manifest> <application> ... <activity android:name=".CustomLockerActivity" android:excludeFromRecents="true" android:launchMode="singleTask" android:screenOrientation="portrait" android:taskAffinity="${applicationId}.Locker" android:resizeableActivity="false" /> </application> </manifest>

  • excludeFromRecents, launchMode, screenOrientation, taskAffinity 속성은 반드시 위의 값으로 설정되어야 합니다.

  • android:resizeableActivity="false" 의 경우 일부 삼성 단말에서 잠금화면 액티비티 사이즈 조절이 가능한 현상을 막기 위함으로, optional 한 항목입니다.

2) 시계

  • 레이아웃에서 배치한 뷰를 시간 변화에 따라 업데이트 해줍니다. 시간이 분 단위로 업데이트 될때마다 BaseLockerActivity 내의 함수인 onTimeUpdated가 호출되므로 이를 오버라이딩하여 이 함수의 파라미터로 전달되는 시간 정보를 이용해 time, am/pm, date 등의 정보를 업데이트해야 합니다.

잠금화면 액티비티에서 onCurrentCampaignUpdated 와 onTimeUpdated 를 오버라이딩하여 구현하지 않으면 오류가 발생하므로 반드시 구현해야 합니다. 구체적 사용 예시는 샘플 내의 CustomLockerActivity.java 를 참고하세요.

3) 슬라이더

✏️ 참고
새로운 슬라이더는 BuzzScreen SDK v4.27.x부터 지원합니다.

기존 com.buzzvil.buzzscreen.sdk.widget.Slider는 더 이상 사용할 수 없습니다.

새로운 슬라이더인 com.buzzvil.buzzscreen.sdk.widget.ImageViewSlider를 사용해주세요.

슬라이더는 잠금화면과 독립적인 뷰이기 때문에 잠금화면과의 연동을 위해서는 크게 두 가지 작업을 해야 합니다.

항목

코드

세부내용

항목

코드

세부내용

1

좌/우 슬라이더 선택에 따른 리스너 등록

좌/우 선택에 따른 리스너 등록

  • Slider.setLeftOnSelectListener

  • Slider.setRightOnSelectListener

좌/우 선택 이벤트 발생 시 아래 함수 호출

  • 잠금해제: unlock

  • 링크이동: landing

2

좌/우 포인트 업데이트

  • 캠페인 롤링 시, 캠페인이 변할 때마다 BaseLockerActivity 내의 함수인 onCurrentCampaignUpdated 가 호출됨

    • 이를 오버라이딩하여, 해당 함수의 파라미터로 전달되는 campaign 정보를 이용하여 포인트 정보 업데이트 해야함

      • Slider.setLeftText

      • Slider.setRightText

캠페인 롤링 시 각가의 캠페인에 따라 화면에 표시되는 좌/우 포인트 변경이 필요함

슬라이더는 잠금화면과 독립적인 뷰이기 때문에 잠금화면과의 연동을 위해서는 크게 두 가지 작업을 해야 합니다.

항목

코드

세부내용

항목

코드

세부내용

1

좌/우 슬라이더 선택에 따른 리스너 등록

좌/우 선택에 따른 리스너 등록

ImageViewSlider.setOnSelectListener()

좌/우 선택 이벤트 발생 시 아래 함수 호출

  • 잠금해제: unlock

  • 링크이동: landing

2

좌/우 포인트 업데이트

  • 캠페인 롤링 시, 캠페인이 변할 때마다 BaseLockerActivity 내의 함수인 onCurrentCampaignUpdated 가 호출됨

  • 이를 오버라이딩하여, 해당 함수의 파라미터로 전달되는 campaign 정보를 이용하여 포인트 정보 업데이트 해야함

  • ImageViewSlider.getLeftTextView().setText()

  • ImageViewSlider.getRightTextView().setText()

캠페인 롤링 시 각가의 캠페인에 따라 화면에 표시되는 좌/우 포인트 변경이 필요함

  1. 좌/우 슬라이더 선택에 따른 리스너 등록 예제 코드 (

setOnSelectListener)

ImageViewSlider imageViewSlider = findViewById(R.id.imageViewSlider); imageViewSlider.setOnSelectListener(new OnSelectListener() { @Override public void onSelectLeft() { landing(); } @Override public void onSelectRight() { unlock(); } });

 

  1. 좌/우 포인트 업데이트 예제 코드 (

onCurrentCampaignUpdated)

@Override protected void onCurrentCampaignUpdated(Campaign campaign) { int landingPoints = campaign.getLandingPoints(); int unlockPoints = campaign.getUnlockPoints(); if (landingPoints > 0) { imageViewSlider.getLeftTextView().setText(String.format("+ %d", landingPoints)); } else { imageViewSlider.getLeftTextView().setText(""); } if (unlockPoints > 0) { imageViewSlider.getRightTextView().setText(String.format("+ %d", unlockPoints)); } else { imageViewSlider.getRightTextView().setText(""); } }

3. Else

이 외의 UI 커스터마이징은 아래 내용을 참고해주세요.

잠금화면 터치 시 화면 상하단에 화살표 등으로 전/후 페이지 유무를 표시할 수 있습니다. 이를 위해서는 setPageIndicators 를 호출하여 표시할 뷰를 지정해줍니다.

  • protected void setPageIndicators(View previous, View next)

    • Parameters

      • previous : 이전 페이지가 존재할 경우 표시할 뷰

      • next : 이후 페이지가 존재할 경우 표시할 뷰

setPageIndicators( findViewById(R.id.locker_arrow_top), findViewById(R.id.locker_arrow_bottom) );

△ 좌: 화면 터치 전 / 우: 화면 터치 시

잠금화면 카드 UI (피드 UI 참고) 에서 상하로 swipe 하면서 롤링할 때에, 소재가 전환되는 효과를 변경할 수 있습니다.

  • protected void setPageTransformer(ViewPager.PageTransformer transformer)

Sample Code

setPageTransformer(new ViewPager.PageTransformer() { @Override public void transformPage(View page, float position) { if (Build.VERSION.SDK_INT >= 11) { int pageHeight = page.getHeight(); if (0 <= position && position <= 1) { page.setTranslationY(pageHeight * -position + (position * pageHeight / 4)); } } } });

Related content