ボタンとクリック
操作できるボタンを追加します。
「ボタンとクリック」はCoddyKit上の無料Android Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAndroid Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Android Academyコースには全4レッスンが含まれています。
ボタンとは
Buttonはタップできるコンポーザブルです。ユーザーがタップすると、アプリがコードを実行します。
ボタンにはonClickアクションと、通常はTextラベルなどの表示するコンテンツが必要です。
Button(onClick = { }) {
Text("Tap me")
}onClickラムダ
onClickパラメータはラムダを受け取ります。ラムダとは、中かっこ { } の中に記述するコードです。そのコードは、ボタンが押されるたびに実行されます。
そこには、出力やデータの変更など、任意のロジックを記述できます。
Button(onClick = {
println("Clicked!")
}) {
Text("Click")
}ボタンのコンテンツ
末尾の中かっこの中に記述するコンテンツはRowScopeです。TextやIcons、またはその両方を配置できます。
ほとんどのボタンには、アクションを説明する単一のTextラベルを配置します。
Button(onClick = { }) {
Text("Save")
}Stateでクリック数を数える
タップに反応するには、rememberとmutableStateOfを使って値を保存します。値が変わると、UIが更新されます。
ここでは、タップするたびにcountが1増えます。
var count by remember { mutableStateOf(0) }
Button(onClick = { count++ }) {
Text("Count: $count")
}ボタンを無効にする
enabledパラメータで、ボタンをタップできるかどうかを制御します。falseに設定すると、ボタンがグレー表示になり、クリックを受け付けなくなります。
フォームの入力が完了していない間などに便利です。
Button(
onClick = { },
enabled = false
) {
Text("Locked")
}OutlinedButton
OutlinedButtonは塗りつぶしを使わず、枠線だけを描画します。使い方は同じですが、より控えめな見た目になります。
より目立つ主要なButtonの隣に、補助的なアクションとして使います。
OutlinedButton(onClick = { }) {
Text("Cancel")
}TextButton
TextButtonは枠線も塗りつぶしもなく、ラベルだけを表示します。最も控えめなボタンスタイルです。
SkipやLearn moreのような、強調度の低いアクションに適しています。
TextButton(onClick = { }) {
Text("Skip")
}ボタンの色
ButtonDefaults.buttonColorsにcontainerColorを渡すと、Buttonの色を変更できます。
ブランドに合い、読みやすさも保てる色を選びましょう。
Button(
onClick = { },
colors = ButtonDefaults.buttonColors(
containerColor = Color.Green
)
) {
Text("Go")
}IconButton
IconButtonは、ハートやメニューなど、1つのIcon用に作られた小さな円形のタップ領域です。
ラベルがないため、ツールバーのスペースを節約できます。
IconButton(onClick = { }) {
Icon(Icons.Default.Favorite, contentDescription = "Like")
}ボタンの形を整える
shapeパラメータで角の形を変更できます。より丸みのある端にするには、dp値を指定したRoundedCornerShapeを使います。
数値を大きくすると、より柔らかく、ピルのようなボタンになります。
Button(
onClick = { },
shape = RoundedCornerShape(16.dp)
) {
Text("Rounded")
}クリック関数に名前を付ける
コードを整理するには、onClickにインラインの処理を書く代わりに、名前付きの関数を渡します。これによりUIが読みやすくなります。
関数参照を渡すか、lambdaの中で関数を呼び出します。
fun onSave() { println("Saved") }
Button(onClick = { onSave() }) {
Text("Save")
}理解度チェック
ボタンについての理解度を確認しましょう。
まとめ
Buttonでは、アクションにonClickを使い、ラベルにはcontent blockを使うことを学びました。rememberでStateを保持すると、クリックによってUIを変えられます。
OutlinedButton、TextButton、IconButtonと、enabled、色、shapeの設定方法も見ました。
次は、paddingを使って間隔を調整します。
よくある質問
「ボタンとクリック」レッスンは無料ですか？
はい。「ボタンとクリック」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Android Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Android Academyコースには全4レッスンが含まれています。
「ボタンとクリック」で何を学びますか？
操作できるボタンを追加します。 ブラウザで直接実行するハンズオンコードでAndroid Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Android Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAndroid Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「ボタンとクリック」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAndroid Academyレッスンでコードを書いて実行できますか？
はい。すべてのAndroid Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。