Lock.Android:カスタムテーマ設定

Lock.Android UIのカスタマイズ

Lock.Android UIの外観はカスタマイズすることができます。ヘッダーロゴやタイトルなどの様々な項目に加え、一部の色やボタンなどの項目も、アプリケーションのテーマに合わせて変更できます。

サポートされる属性のリスト

名前	タイプ	説明
Auth0.HeaderLogo	drawable - reference	ヘッダー内に表示する描画可能なロゴ。推奨される最小解像度は200ピクセル（幅） x 200ピクセル（高さ）です。
Auth0.HeaderTitle	string - reference	ヘッダー内にタイトルとして表示するテキスト。
Auth0.HeaderTitleColor	color - reference	タイトルテキストの色。
Auth0.HeaderBackground	color - reference	ヘッダーのバックグラウンドカラーとして使用される。
Auth0.PrimaryColor	color - reference	Submit（送信）ボタンといったウィジェットの_normal_ stateとして使用される。accent colorとしても使用される。
Auth0.DarkPrimaryColor	color - reference	Submit（送信）ボタンといったウィジェットの_pressed_ stateとして使用される。

新しいリソースファイルを作成する

まず、Lock.Themeから拡張する新しいThemeを作成し、カスタマイズする属性をオーバーライドします。オーバーライドしない属性は、Lock.Themeで定義された属性がデフォルトになります。

<resources>
  <style name="MyTheme" parent="Lock.Theme">
    <item name="Auth0.HeaderLogo">@drawable/com_auth0_lock_header_logo</item>
    <item name="Auth0.HeaderTitle">@string/com_auth0_lock_header_title</item>
    <item name="Auth0.HeaderTitleColor">@color/com_auth0_lock_text</item>
    <item name="Auth0.HeaderBackground">@color/com_auth0_lock_header_background</item>
    <item name="Auth0.PrimaryColor">@color/com_auth0_lock_submit_normal</item>
    <item name="Auth0.DarkPrimaryColor">@color/com_auth0_lock_submit_pressed</item>
  </style>
</resources>

新しいテーマを使用するには、android:theme属性を使用してAndroidManifest.xmlファイルでアクティビティをセットアップします。使用するのがクラシックLockかパスワードレスLockかに応じて、更新するアクティビティ宣言が異なります。Lockライブラリーはこれらのアクティビティを内部で宣言するため、テーマ属性のみのライブラリーの宣言をオーバーライドする特別なtools:replace属性を使用して、アクティビティを再度宣言する必要があります。

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.company.app">
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <!-- Classic -->
        <activity
            android:name="com.auth0.android.lock.LockActivity"
            android:theme="@style/MyTheme"
            tools:replace="android:theme" />
        <!-- Passwordless -->
        <activity
            android:name="com.auth0.android.lock.PasswordlessLockActivity"
            android:theme="@style/MyTheme"
            tools:replace="android:theme" />
    </application>
</manifest>

スタイルリソースファイルに独自のテーマを定義し、テーマの親がLock.Themeであることを指定し忘れた場合、またはマニフェストファイルでアクティビティのテーマを指定しなかった場合は、UIが非常に見づらくなるので注意してください。カスタムテーマで無効な値を指定した場合も、同様のことが起こります。

OAuth接続のカスタムボタン

サードパーティのIDプロバイダー接続のスタイルをカスタマイズするには、新しい接続を作成しなければなりません。これにはCustom Social Connections拡張機能を使用して、すべての必須フィールドに入力した上で変更を保存します。

LockでサードパーティのIDプロバイダー接続のスタイルをカスタマイズするには、ビルダーを呼び出し、使用するconnectionNameとstyleを両方渡します。

まず、Lock.Theme.AuthStyleを拡張するカスタムスタイルを作成します。以下の例のようなキーの名前を使用して、ロゴ、背景色、接続名を定義します。

<style name="Style.Facebook" parent="Lock.Theme.AuthStyle">
    <item name="Auth0.BackgroundColor">@color/facebook_color</item>
    <item name="Auth0.Name">@string/facebook_name</item>
    <item name="Auth0.Logo">@drawable/facebook_logo</item>
</style>

ビルダーのセットアップ画面で、オーバーライドする接続名のAuthStyleを追加します。

builder.withAuthStyle("facebook", R.style.Style_Facebook) .build(...);

Lock がその接続をSocialButton に表示する必要がある場合、まずユーザーがオーバーライドしたスタイルが検索されます。見つからない場合は、Lockのデフォルトのスタイルになります。上のfacebookの例では、Facebookの背景色、Facebookのロゴ、および「FACEBOOK」の名前が使用されることになります。