「Composeの基本レイアウト」のメモ#3 ~SearchBarの実装~

3. プランを立ててから開始する

作成するアプリの構造

• ScreenContent(3つの構成要素でできる)
  • Search bar
  • Align your body section
    • 水平方向にスクロール可能な行で表示される「Align your body」要素
  • favorite collections section
    • 水平方向にスクロール可能なグリッドで表示される「Favorite collection」カード

4. 検索バー - 修飾子

検索バーの作成に必要な要素

• TextField()コンポーザブル
  • valueパラメータ
    • TextFieldに表示されるテキストの現在の状態を保持
  • onValueChangeパラメータ
    • テキストが変更されたときに呼び出されるコールバック関数を受け取る
  • leadingIconパラメータ
    • Icon()コンポーザブル
    • TextField の先頭に表示されるアイコンを設定
    • 関数を受け取る
  • colorsパラメータ
    • TextField の色の設定をカスタマイズ
  • placeholderパラメータ
    • TextField が空のときに表示されるプレースホルダーテキストを設定
    • 関数を受け取る
  • modifierパラメータ
    • 検索バーの高さ=56.dp →　modifier.heightIn(min = 56.dp)
      • コンポーザブルが特定の最小の高さを持つように設定
    • 幅は親の幅いっぱい　→ modifier.fillMaxWidth()
      • 検索バーは親の水平方向のスペースをすべて占有
    • 一方の修飾子が幅に影響し、もう一方の修飾子が高さに影響するため、これらの修飾子の順序は重要でない

//最小構成
fun SearchBar(
    modifier: Modifier = Modifier
) {
    TextField(
        value = "",
        onValueChange = {},
        leadingIcon = {},
        colors = TextFieldDefaults.colors(),
        placeholder = {},
        modifier = modifier
            .fillMaxWidth().heightIn(min = 56.dp))
    // Implement composable here
}

Android Studioの補完機能を利用したleadingIconの設定

        leadingIcon = {
            Icon(
                imageVector = Icons.Default.,
                contentDescription = null
            )
        },

上記のように記述すると、Android Studioの補完機能で必要なライブラリをインポートできる

1. Iconの上にマウスカーソルを持っていく

2. importを押す
   

3. @Composable　Icon(imageVector:~ を押す
   

4. Icons.Default.Search以外のエラーが消える
   

同様に赤字のところにカーソルを持っていき、importを行なえばエラーを解消できる。

背景色とplaceholderの設定

• surface色は、アプリ全体で共通して使用される色の一つであり、ボタン、カード、モーダルなどのコンポーネントの背景色として使用される
• MaterialThemeの色を使用することで、開発者は独自の色を設定する手間を省き、デザインの複雑さを減らすことができる
• placeholderはTextコンポーザブルを使用して設定する