ユーザーが切り替えられるスイッチを追加する

Switch コンポーネントを使用すると、チェックあり とチェックなしの 2 つの状態を切り替えることができます。スイッチを使用すると、次のいずれかを行うことができます。

  • 設定をオンまたはオフに切り替える。
  • 機能を有効または無効にする。
  • オプションを選択する。

このコンポーネントには、サムとトラックの 2 つの部分があります。サムはスイッチのドラッグ可能な部分で、トラックは背景です。ユーザーはサムを左右にドラッグして、スイッチの状態を変更できます。スイッチをタップして、チェックをオンまたはオフにすることもできます。

バージョンの互換性

この実装では、プロジェクトの minSDK を API レベル 21 以上に設定する必要があります。

依存関係

スイッチを実装する

次の例は、Switch コンポーザブルの最小限の実装です。

結果

オフになっている基本的な切り替え。
図 1.チェックなしのスイッチ。
オンになっている基本的な Switch。
図 2.チェックありのスイッチ。

カスタム サムを作成する

thumbContent パラメータに任意のコンポーザブルを渡して、カスタム サムを作成できます。次に、サムにカスタム アイコンを使用するスイッチの例を示します。

結果

チェックなしの外観は、前のセクションの例と同じです。ただし、チェックありの場合、この実装は次のようになります。

thumbContent パラメータを使用して、チェックされたときにカスタム アイコンを表示するスイッチ。
図 3.カスタムのチェックありアイコンを使用したスイッチ。

カスタムカラーを使用する

colors パラメータを使用して、スイッチのサムとトラックの色を変更します。このとき、スイッチがチェックされているかどうかを考慮します。

結果

colors パラメータを使用して、サムとタックの両方にカスタム カラーのスイッチを表示するスイッチ。
図 4.カスタムカラーを使用したスイッチ。

要点

  • 基本パラメータ:

    • checked: スイッチの初期状態。
    • onCheckedChange: スイッチの状態が変化したときに呼び出されるコールバック。
    • enabled: スイッチが有効か無効か。
    • colors: スイッチに使用される色。
  • 高度なパラメータ

    • thumbContent: チェックありの場合のサムの外観をカスタマイズするために使用します。
    • colors: トラックとサムの色をカスタマイズするために使用します。

このガイドを含むコレクション

このガイドは、Android 開発の幅広い目標をカバーする、厳選されたクイック ガイド コレクションの一部です。

コンポーズ可能な関数を使用すると、マテリアル デザイン デザイン システムに基づいて美しい UI コンポーネントを簡単に 作成できます。

ご不明な点やフィードバックがある場合

よくある質問のページでクイック ガイドについて確認するか、お問い合わせください。