UI 커스터마이징

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

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

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

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

디자인 커스터마이징에 대해 문의사항이 있을 경우 버즈빌 BD 매니저에게 확인해주세요. 문의 전에 https://buzzvil.atlassian.net/wiki/spaces/BDG/pages/386138514 문서를 확인하는 것을 권장합니다.

1. 레이아웃 - 뷰 구현

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

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

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

1) 시계

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

2) 슬라이더

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

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

슬라이더 속성	설명

슬라이더 속성	설명
`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" />

기존 슬라이더(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`	`getPointerImageView().setBackgroundResource()`	selector 리소스로 설정합니다. 자세한 내용은 아래 ‘유저의 액션에 따라 Unlock/Landing 아이콘 바꾸기’ 항목을 참고해주세요.
`slider:sl_radius`	삭제	`getPointerImageView()`에 설정한 ImageView의 속성을 따라갑니다.
`slider:sl_text_size`	`getLeftTextView().setTextSize()` `getRightTextView().setTextSize()`	xml 속성으로 설정하는 대신, TextView를 가져와서 설정합니다.

ImageViewSlider 추가하기

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

<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	슬라이더의 오른쪽 아이콘

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

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

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

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

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

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

첫번째 아이템은 중앙 슬라이더가 클릭 됐을 때
두번째 아이템은 중앙 슬라이더가 좌측으로 밀어져서 랜딩이 일어나기 바로 직전
세번째 아이템은 아무 액션도 없을 때 입니다.

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

상태	왼쪽 아이콘 `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 리소스를 설정하면 사용자 액션에 따라 다른 아이콘이 보여집니다.

3) 뷰 추가

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

4) 배경 그라데이션

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

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

BaseLockerActivity를 상속받아서 잠금화면 액티비티 클래스를 생성
초기화 함수 (BuzzScreen.init) 의 3번째 파라미터에 생성한 액티비티 클래스를 지정
1. 액티비티 내에서 구현해야하는 필수 요소: 슬라이더, 시계
2. 그 외: 선택에 따라 직접 구현

1) `AndroidManifest.xml` 설정

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

excludeFromRecents, launchMode, screenOrientation, taskAffinity 속성은 반드시 위의 값으로 설정되어야 합니다.
android:resizeableActivity="false" 의 경우 일부 삼성 단말에서 잠금화면 액티비티 사이즈 조절이 가능한 현상을 막기 위함으로, optional 한 항목입니다.

2) 시계

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

3) 슬라이더

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

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

	항목	코드	세부내용

항목

코드

세부내용

1

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

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

Slider.setLeftOnSelectListener
Slider.setRightOnSelectListener

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

잠금해제: unlock
링크이동: landing

2

좌/우 포인트 업데이트

캠페인 롤링 시, 캠페인이 변할 때마다 BaseLockerActivity 내의 함수인 onCurrentCampaignUpdated 가 호출됨
- 이를 오버라이딩하여, 해당 함수의 파라미터로 전달되는 campaign 정보를 이용하여 포인트 정보 업데이트 해야함
  - Slider.setLeftText
  - Slider.setRightText

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