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

Switch コンポーネントを使用すると、ユーザーはオンとオフの 2 つの状態を切り替えることができます。スイッチを使用して、ユーザーが次のいずれかを行うようにします。

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

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

バージョンの互換性

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

依存関係

スイッチを実装する

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

結果

オフになっている基本スイッチ。
図 1. オフのスイッチ。
オンになっている基本的なスイッチ。
図 2. オンになっているスイッチ。

カスタム サムネイルを作成する

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

結果

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

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

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

colors パラメータを使用して、スイッチがオンになっているかどうかを考慮して、スイッチのスライダーとトラックの色を変更します。

結果

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

要点

  • 基本パラメータ:

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

    • thumbContent: チェックボックスがオンの場合の外観をカスタマイズするために使用します。
    • colors: トラックとサムネイルの色をカスタマイズできます。

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

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

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

ご質問やフィードバックがある場合

よくある質問のページでクイックガイドをご覧になるか、お問い合わせフォームからご意見をお寄せください。