안녕하세요?
QCircle SDK를 활용해서 퀵서클 용 앱을 만드는 예를 LoginActivity를 통해서 간단히 소개하려고합니다.
이미 만든 앱이 있다면, 포스트를 참고하여 퀵서클용 액티비티를 추가해보세요.

먼저, Android Studio를 실행하여 만들어 놓은 앱이 없다면 New Project로 프로젝트를 생성합니다. 생성한 프로젝트에 Login Activity를 추가합니다.

프로젝트를 생성하면 아래 그림과 같이 LoginActivity와 PlusBaseActivity 이렇게 2개의 액티비티가 생성된 것을 확인할 수 있습니다.

 LoginActivity를 실행하면 오른쪽 화면과 같이 로그인 페이지가 나타납니다.   
  

이제 LoginActivity를 수정하여 이 화면을 QCircle에 맞게 수정해보겠습니다. 참고할 QCircle SDK 버전은 3.2버전입니다.

QCircle SDK 3.2 버전을 다운받아 포함된 샘플앱을 참고합니다.샘플앱은 퀵서클 케이스의 동그란 창에 맞게 실행되는 간단한 앱으로, 실행하면 아래와 같은 화면을 보여줍니다.

샘플앱은 QCircleActivity클래스 와 QCircleUtils 클래스를 사용하는데, QCircleActivity는 메인 액티비티로 위의 화면을 보여주는 역할을 하고, QCircleUtils는 QCircleActivity 클래스에서 필요한 메소드들을 제공합니다.

레이아웃 수정
LoginActivity 클래스를 수정하기전에, 레이아웃을 먼저 수정합니다. activity_login.xml 파일을 열어 login_form을 RelativeLayout으로 변경합니다. 이제부터 login_form을 메인 UI를 담고있는 퀵서클 메인 레이아웃으로 생각합니다. 이 레이아웃은 퀵서클의 동그란 창에 맞게보여져야하니 background를 샘플앱에서 가져온 circle_background로 지정합니다.

LoginActivity 클래스 수정
LoginAcitivty 수정을 위해서 샘플코드의 QCircleUtils클래스 코드를 사용하도록 합니다. QCircleUtils 클래스를 프로젝트에 추가합니다. Context를 생성하고 QCircleUtils 클래스의 setQuickCircleWindowParam 메소드를 사용하여 커버가 닫혔을 때 화면이 Lock Screen에 가리지 않도록 합니다.
setCircleLayoutParam은 아주 중요한 메소드입니다. setCircleLayoutParam은 내부에서 프레임워크에 저장되어있는 퀵서클 윈도우의 크기 및 위치 정보들을 읽어와서 레이아웃이 창에 맞게 보여지도록 Layout Parameter를 설정해줍니다. login_form을 로그인 화면의 UI들을 담고있는 메인 레이아웃으로 사용합니다. 메인 레이아웃은 퀵서클 창의 사이즈에 맞도록 설정되고, 이 안에 다른 UI 컴포넌트들을 추가하여 퀵서클 윈도우에서 보이도록 설정합니다.
login_form을 id로 읽어와서 mLoginFormView 뷰로 저장합니다.

1
2

//main view mLoginFormView = findViewById(R.id.login_form);

mLoginFormView 뷰를 인자로 넣어 퀵서클 윈도우에 맞도록 조정합니다.

1
2
3
4

private Context mContext; mContext=this; QCircleUtils.setQuickCircleWindowParam(mContext); QCircleUtils.setCircleLayoutParam(mContext, mLoginFormView);

메인 레이아웃에 타이틀 및 백버튼을 추가합니다. 퀵서클 액티비티의 경우, 커버가 닫힌 상태에서는 사용자가 메뉴로 돌아갈수없으므로, 화면에 소프트웨어 백버튼을 추가하여야합니다.

1
2
3
4

//addTitle mTitleView = QCircleUtils.addTitle(mContext, "MyApp", mLoginFormView); //Add a software back button QCircleUtils.addBackButton(mContext, mLoginFormView);

커버가 열리면 다른 동작을 할 수 있도록 인텐트를 받아주는 브로드캐스트 리시버를 생성하여 등록합니다. 액티비티 실행 종료시에는 브로드캐스트 리시버가 등록해제될 수 있도록 unregisterReceiver 코드도 설정합니다.
QCircleUtils의 getQCircleIntentReceiver 메소드는 케이스가 닫히면 현재 액티비티(퀵서클 액티비티)의 레이아웃을 보여주고, 케이스가 열리면 풀스크린 액티비티로 연결합니다.
개발자는 getQCircleIntentReceiver 의 코드를 수정하여, 커버가 열렸을 때 원하는 액티비티로 연결하도록 구현할 수있습니다.

1
2
3

private BroadcastReceiver mIntentReceiver; mIntentReceiver = QCircleUtils.getQCircleIntentReceiver(); registerIntentReceiver();

다른 UI 컴포넌트들의 위치 및 크기를 퀵서클 창에 맞게 적절히 조정한 뒤 addCircleMask를 이용하여 퀵서클 창에 맞게 UI 컴포넌트들을 잘라줄 수 있도록 Maskgin 이미지를 추가합니다.

1

QCircleUtils.addCircleMask(mContext, mLoginFormView);

이렇게 퀵서클 용으로 꾸며본 액티비티를 실행하면 다음과 같은 형태가 되네요.

케이스가 닫힌 상태에서는 이메일이나 패스워드에 입력을 할 수 가 없으므로, 로그인 버튼을 눌렀을 때 커버를 열어서 진행하라는 메시지 등을 추가할 수 있습니다.

지금까지 QCircle SDK를 활용하여 퀵서클 윈도우용 액티비티를 만드는 법을 소개하였습니다. 퀵서클은 커버를 열지않고도 앱의 기능을 사용할 수 있습니다. 하지만,화면이 크지않으므로, 복잡하게 화면을 구성하는것보다 몇 개의 버튼 정도만 배치하고 그와 관련된 동작들은 커버를 열어서 진행해도록 구현이 하는것이 좋겠네요!

신고