Switch
コンポーネントを使用すると、ユーザーはオンとオフの 2 つの状態を切り替えることができます。スイッチを使用して、ユーザーが次のいずれかを行うようにします。
- 設定をオンまたはオフに切り替える。
- 機能を有効または無効にします。
- オプションを選択します。
このコンポーネントは、サムとトラックの 2 つの部分で構成されています。スライダーはスイッチのドラッグ可能な部分で、トラックは背景です。ユーザーはスライダーを左右にドラッグしてスイッチの状態を変更できます。スイッチをタップして確認し、オフにすることもできます。
バージョンの互換性
この実装では、プロジェクトの minSDK を API レベル 21 以上に設定する必要があります。
依存関係
スイッチを実装する
次の例は、Switch
コンポーザブルの最小実装です。
結果


カスタム サムネイルを作成する
thumbContent
パラメータに任意のコンポーザブルを渡して、カスタム サムネイルを作成できます。サムネイルにカスタム アイコンを使用するスイッチの例を次に示します。
結果
未選択時の外観は、前のセクションの例と同じです。ただし、チェックすると、この実装は次のようになります。

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

要点
基本パラメータ:
checked
: スイッチの初期状態。onCheckedChange
: スイッチの状態が変化したときに呼び出されるコールバック。enabled
: スイッチが有効か無効か。colors
: スイッチに使用される色。
詳細パラメータ
thumbContent
: チェックボックスがオンの場合の外観をカスタマイズするために使用します。colors
: トラックとサムネイルの色をカスタマイズできます。
このガイドを含むコレクション
このガイドは、Android 開発の幅広い目標を網羅する、厳選されたクイックガイド コレクションの一部です。

インタラクティブなコンポーネントを表示する
コンポーズ可能な関数を使用して、マテリアル デザインのデザイン システムに基づいて美しい UI コンポーネントを簡単に作成する方法を学びます。
ご質問やフィードバックがある場合
よくある質問のページでクイックガイドをご覧になるか、お問い合わせフォームからご意見をお寄せください。