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

안녕하세요~! 

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

기존 카카오톡, 네이버, 페이스북 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개인데 여긴 한 버튼의 코드뿐이야? 라고 하지 말아주세요 ㅜ)

<TextView     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:layout_marginTop="10dp"     android:text="간편 로그인" />    <com.nhn.android.naverlogin.ui.view.OAuthLoginButton   //네이버 버튼     android:id="@+id/buttonOAuthLoginImg"     android:layout_width="match_parent"     android:layout_height="20dp"     android:layout_marginTop="5dp"     />

--> 위의 방법으로 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;      }  }

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

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