[간편 로그인] (카카오, 네이버, 페이스북 등) 커스텀 이미지 사용하는 방법

[Android]/허접 Programming Tips

[간편 로그인] (카카오, 네이버, 페이스북 등) 커스텀 이미지 사용하는 방법

허접샴푸 2017. 1. 25. 16:34

안녕하세요~!

오늘은 간단한 방법으로 간편 로그인 버튼 이미지를 바꿔 보겠습니다.

기존 카카오톡, 네이버, 페이스북 Api를 활용하여 간편 로그인을 구현하였더만 아래와 같은 결과 화면을 얻을 수 있었습니다.

[그림 - 처음 간편 로그인 적용한 화면]

그러나 위 화면으로 앱을 서비스한다면 상당히 일관성도 없고 사용자로 하여금 별로인 디자인이라고 생각하게 만들겠죠?

그래서 아래와 같이 바꿔버렸습니다. 동작은 똑같이 잘 되구요~!

[그림 - 내 이미지로 바꿔버린 화면]

그럼 어떻게 그림을 바꾸었는데 동작이 똑같이 되는지 알아보도록 하겠습니다.

힌트는 바로 요놈입니다. performClick() 함수입니다.

PerformClick()란?

Call this view's OnClickListener, if it is defined. Performs all normal actions associated with clicking: reporting accessibility event, playing a sound, etc.

정의가 되어있으면 뷰의 클릭리스너를 호출한다. 클릭과 관련된 모든 액션을 수행한다!라고 되어있습니다.

(--> 즉 내 이미지를 클릭하면 기존 로그인이 작동되도록 원래 이미지에 performClick()을 수행하도록 하는 거죠! - 대신 클릭 시키기)

[원래 코드]
(3개의 버튼 중 하나로만 예시를 들을 테니 왜 그림에는 3개인데 여긴 한 버튼의 코드뿐이야? 라고 하지 말아주세요 ㅜ)

--> 위의 방법으로 xml을 작성하면 네이버가 제공하는 공식 로그인 이미지가 화면에 나타납니다. 참고로 layout_height="20dp"는
제 임의대로 작성한 것이기 때문에 다른 개발자분들 께서는 원하시는 사이즈로 맞추시기 바랍니다.

[바꾼 코드]

(FrameLayout을 활용하여 기존 로그인 버튼 이미지를 감쪽같이 숨겨버린다!)

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:text="간편 로그인" />

<FrameLayout    // 겹치게 만들기 위한 레이아웃
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="5dp">

    <com.nhn.android.naverlogin.ui.view.OAuthLoginButton
        android:id="@+id/buttonOAuthLoginImg"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:layout_marginTop="5dp"
        />

    <ImageView
        android:id="@+id/fake_naver"
        android:layout_width="wrap_content"
        android:layout_height="50dp"           //기존 이미지는 20dp이지만 내 이미지는 50dp라 기존 이미지를 숨겨버린다!
        android:src="@drawable/btn_naver" />

</FrameLayout>

-->제 커스텀 로그인 이미지는 FrameLayout 안에 ImageView로 등록하였습니다. 그리고 제가 볼때는 height이 50dp일때가 로그인 버튼

이미지가 가장 깔끔한 것 같아 50dp로 작성하였습니다. 그리고 기존 로그인 버튼 이미지 height은 20dp니 제 이미지의 height 50dp보다 작기 때문에 자동적으로 화면에 보이지 않게 됩니다.

[JAVA단 코드]

private ImageView fakeNaver; //제 이미지의 ImageView
private OAuthLoginButton naverLoginButton; //네이버 제공 Api의 로그인 버튼 뷰

... // (기본적인 코드 생략)

//Custom naver Setting
fakeNaver = (ImageView) findViewById(R.id.fake_naver);
fakeNaver.setOnClickListener(this);

//naver Setting
naverLoginButton = (OAuthLoginButton) findViewById(R.id.buttonOAuthLoginImg);
naverLoginButton.setOAuthLoginHandler(mOAuthLoginHandler);

... // (기본적인 코드 생략)

@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.fake_naver: //fake_naver 내 버튼을 눌렀을 경우
naverLoginButton.performClick(); //performClick 클릭을 실행하게 만들어 자동으로 실행되도록 한다.
break;
}
}

--> 위 주석만 봐도 기본적인 내용이라 이해가 갈 것입니다.

저도 여기저기 문서를 찾아보다가 위 방법이 가장 쉬운 것 같아 늘 이 방법을 활용하곤 합니다. 질문은 댓글로 남겨주세요~!