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

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

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

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

バージョンの互換性

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

依存関係

スイッチを実装する

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

結果

オフになっている基本的なスイッチ。
図 1. オフのスイッチ。
オンになっている基本的な Switch。
図 2. チェックされたスイッチ。

カスタム サムを作成する

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

結果

チェックされていない状態の外観は、前のセクションの例と同じです。ただし、チェックすると、この実装は次のようになります。

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

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

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

結果

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

要点

  • 基本パラメータ:

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

    • thumbContent: チェックされているときのサムの見た目をカスタマイズするために使用します。
    • colors: トラックとサムの色をカスタマイズするために使用します。

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

このガイドは、Android 開発のより広範な目標を対象とした、厳選されたクイックガイド コレクションの一部です。

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

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

よくある質問のページでクイック ガイドを確認するか、お問い合わせのうえご意見をお聞かせください。