Lock.swift: スタイルのカスタマイズオプション

Lock.Swift のスタイル設定とカスタマイズのオプション

以下に、Lock のスタイルと外観を設定するためのさまざまなオプションを示します。さらに、Lock の動作や機能を変更するためのオプションも、Behavior Configuration Options ページで多数紹介しています。

Lock の外観のカスタマイズ

スタイルのカスタマイズオプションは、withStyle を使用して Lock の初期化時に追加できます。

Lock
  .classic()
  .withStyle {
	  $0.title = "Company LLC"
	  $0.logo = LazyImage(name: "company_logo")
	  $0.primaryColor = UIColor(red: 0.6784, green: 0.5412, blue: 0.7333, alpha: 1.0)
	}
  .present(from: self)

ヘッダースタイルのオプション

headerBlur

使用するぼかし効果のスタイルです。UIBlurEffectStyle で定義された任意の値を指定できます。

.withStyle {
  $0.headerBlur = .extraLight
}

headerColor

ヘッダーの背景色に使用する色です。デフォルトでは色は設定されず、ぼかしのみが適用されます。

.withStyle {
  $0.headerColor = UIColor? = nil
}

logo

ヘッダーロゴ画像。推奨される最小解像度は、幅 200 ピクセル、高さ 200 ピクセルです。

.withStyle {
  $0.logo = LazyImage(name: "company_logo")
}

headerCloseIcon

ヘッダーの”close”アイコンは変更できます。

.withStyle {
  $0.headerCloseIcon = LazyImage(name: "ic_close")
}

headerBackIcon

ヘッダーの”back”アイコンは変更できます。

.withStyle {
  $0.headerBackIcon = LazyImage(name: "ic_close")
}

タイトルのスタイル設定

hideTitle

ヘッダーのタイトルを非表示にし、ロゴのみを表示します。デフォルト値は false です。

.withStyle {
  $0.hideTitle = false
}

タイトル

ヘッダーで使用されるタイトルのテキスト

.withStyle {
  $0.title = "Company LLC"
}

titleColor

ヘッダーのタイトルに使用する色です。

.withStyle {
  $0.titleColor = UIColor.black
}

ボタンとコンポーネントのスタイル オプション

buttonTintColor

プライマリボタンのティントカラーに使用する色です。

.withStyle {
  $0.buttonTintColor = UIColor.white
}

disabledColor

Lock で無効化されたコンポーネントに使用される色です。

.withStyle {
  $0.disabledColor = UIColor(red: 0.8902, green: 0.898, blue: 0.9059, alpha: 1.0)
}

disabledTextColor

Lock の無効なコンポーネントのテキスト色に使用される色です。

.withStyle {
  $0.disabledTextColor = UIColor(red: 0.5725, green: 0.5804, blue: 0.5843, alpha: 1.0)
}

hideButtonTitle

プライマリボタンのタイトルを非表示にし、アイコンのみを表示します。デフォルト値は false です。

.withStyle {
  $0.hideButtonTitle = false
}

primaryColor

Lock のメインカラーとして使用する色です。

.withStyle {
  $0.primaryColor = UIColor.orange
}

入力フィールドのスタイル

inputTextColor

入力フィールド内のテキストの色。

.withStyle {
  $0.inputTextColor = UIColor.black
}

inputPlaceholderTextColor

入力フィールドのプレースホルダーテキストの色。

.withStyle {
  $0.inputPlaceholderTextColor = UIColor(red: 0.780, green: 0.780, blue: 0.804, alpha: 1.00)
}

inputBorderColor

入力フィールドの枠線の色。

.withStyle {
  $0.inputBorderColor = UIColor(red: 0.780, green: 0.780, blue: 0.804, alpha: 1.00)
}

inputBorderColorError

無効な値が入力された入力フィールドの枠線の色。

.withStyle {
  $0.inputBorderColorError = UIColor.red
}

inputBackgroundColor

入力フィールドの背景の色。

.withStyle {
  $0.inputBackgroundColor = UIColor.white
}

inputIconBackgroundColor

入力フィールドアイコンの背景色。

.withStyle {
  $0.inputIconBackgroundColor = UIColor(red: 0.9333, green: 0.9333, blue: 0.9333, alpha: 1.0)
}

inputIconColor

入力フィールドのアイコンの色です。

.withStyle {
  $0.inputIconColor = UIColor(red: 0.5725, green: 0.5804, blue: 0.5843, alpha: 1.0)
}

ステータスバーのスタイル

UIStatusBarAnimation

Lock Controller のステータスバー更新アニメーション。

.withStyle {
  $0.UIStatusBarAnimation = .none
}

statusBarHidden

Lock Controller のステータスバーの表示/非表示。

.withStyle {
  $0.statusBarHidden = false
}

UIStatusBarStyle

Lock Controller のステータスバーの表示スタイル。

.withStyle {
  $0.UIStatusBarStyle = .default
}

UISearchBarStyle

Lock パスワードレス 検索バーのスタイル。

.withStyle {
  $0.UISearchBarStyle = .default
}

その他のスタイル オプション

textColor

本文のテキスト色。

.withStyle {
  $0.textColor = UIColor.black
}

backgroundColor

Lock の背景色に使用する色です。

.withStyle {
  $0.backgroundColor = UIColor.white
}

backgroundImage

Lock の背景画像

.withStyle {
  $0.backgroundImage = LazyImage(name: "company_logo")
}

oauth2

接続名を AuthStyle にマッピングすることで、データベース接続以外の任意の OAuth2 接続のスタイルをカスタマイズできます

.withStyle {
  $0.oauth2["slack"] = AuthStyle(
    name: "Slack",
    color: UIColor(red: 0.4118, green: 0.8078, blue: 0.6588, alpha: 1.0),
    withImage: LazyImage(name: "ic_slack")
  )
}

seperatorTextColor

ソーシャルログインの区切りラベルの色。

.withStyle {
  $0.seperatorTextColor = UIColor(red: 0.0, green: 0.0, blue: 0.0, alpha: 0.54)
}

secondaryButtonColor

セカンダリ ボタンの色です。

.withStyle {
  $0.secondaryButtonColor = UIColor.black
}

tabTextColor

データベースログインタブのテキストの色。

.withStyle {
  $0.tabTextColor = UIColor(red: 0.3608, green: 0.4, blue: 0.4353, alpha: 0.6)
}

tabTintColor

データベースログインタブの色合いに使用する色。

.withStyle {
  $0.tabTintColor = UIColor(red: 0.3608, green: 0.4, blue: 0.4353, alpha: 0.6)
}