Jetpack Compose のリニア レイアウトとフレーム レイアウト

概要

Compose の線形レイアウトは、Android の従来のビューの LinearLayout に対応します. 違いは、Compose が方向に応じてレイアウトを列と行に分割することです. 従来のビューの LinearLayout で、orientation = "horizo​​ntal" の場合に対応します.親コンテナー内の 2 つの内部要素のレイアウトとそれらの配置方法が異なるため、2 つのコンポーネントに分割すると、タイプ セーフな Modifier 修飾子を提供するのに役立ちます。Compose のフレーム レイアウトは、Android の従来のビューの FrameLayout に対応しており、サブコンポーネントを順番に積み重ねることができます。

分析例

1.直線的なレイアウト

Compose では、線形レイアウトはさまざまな使用シナリオに従って列と行に分けられます.列は垂直線形レイアウト コンポーネントであり、行は水平線形レイアウト コンポーネントです.

1.1 列のコンポーネント

@Composable
inline fun Column(
    modifier: Modifier = Modifier,
    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
    content: @Composable ColumnScope.() -> Unit
)

上記は列のパラメーター リストです, そのうちの verticalArrangement および horizo​​ntalAlignment パラメーターは、サブアイテムの垂直/水平位置をそれぞれ配置するのに役立ちます. デフォルトでは、サブアイテムは垂直 (Arrangment.Top) および水平に配置されます.子の左配置へ

例を使用して、Column の使用方法を確認できます。

@Composable
fun LinearLayoutDemo() {
    
    
    Column(
        modifier = Modifier
            .border(1.dp, color = Color.Red)
            .size(150.dp),
        verticalArrangement = Arrangement.Center
    ) {
    
    
        Text(
            text = "Hello World",
            style = MaterialTheme.typography.h6,
            modifier = Modifier.align(Alignment.CenterHorizontally)
        )
        Text(
            text = "JetPack",
            style = MaterialTheme.typography.h6,
            modifier = Modifier.align(Alignment.CenterHorizontally)
        )
        Text(
            text = "zhongxj",
            style = MaterialTheme.typography.h6,
            modifier = Modifier.align(Alignment.CenterHorizontally)
        )
    }
}

操作結果:

In the above code, we place the Text in the Column in the middle in the component through the verticalArrangement parameter, and then use the Modifier.align modifier to set the alignment rules of the subitems独立. 一部の人々はここで尋ねるかもしれません, そうではありませんhorizo​​ntalAlignment パラメータがありますか
? なぜ水平方向に Modifier.align を使用するのですか? 垂直レイアウトのサブアイテムの場合、Modifier.align は水平方向の位置のみを設定できますが、水平レイアウトのサブアイテムは垂直方向の位置のみを設定できます。コンポーネントに複数のサブアイテムがある場合、それらは常に垂直方向に直線的に配置されます.サブアイテムを個別に設定できるようにすると、悪い状況が発生します.たとえば、3つのアイテムA、Bがあります. A の構成が Aligment.Bottom で、B が Aligment.Top の場合、これは明らかに不可能であるため、Column のサブアイテムの垂直方向のレイアウトは、verticalArragnment を介してのみ設定できます。（注意：这里不是说Column只能使用verticalArragnment参数）

注意：在不给Column指定高度、宽度、大小的情况下，Column组件会默认包裹里面的子项，在这个时候我们是无法使用Column参数中的verticalArrangement或者horizontalAlignment来定位子项在Column中的整体位置的

1.2 行コンポーネント

Row コンポーネントは、内部のサブ項目を左から右に水平に配置でき、Cloumn コンポーネントと組み合わせて使用​​すると、リッチで美しいインターフェイスを構築できます。以下は、行コンポーネントと列コンポーネントを使用して作成された記事カードです。コードは次のとおりです。

@Composable
fun ArticleCard() {
    
    
    Surface(
        shape = RoundedCornerShape(8.dp),
        modifier = Modifier
            .padding(horizontal = 12.dp)
            .fillMaxWidth(),
        elevation = 10.dp,
    ) {
    
    
        Surface(modifier = Modifier.padding(12.dp), color = Color(0xeeeeeeee)) {
    
    
            Column(modifier = Modifier.padding(12.dp)) {
    
    
                Text(
                    text = "JetPack Compose",
                    style = MaterialTheme.typography.h6
                )

                Spacer(modifier = Modifier.padding(vertical = 5.dp))
                Text(
                    text = " Jetpack Compose是第一个使用Kotlin正在开发中的大型项目," +
                            "因此Android团队正在探索Kotlin API指南的新世界,以创建一组特定于Compose API的指南," +
                            "该工作仍在进行中,仍然有很长的路要"
                )

                Row(
                    modifier = Modifier.fillMaxWidth(),
                    horizontalArrangement = Arrangement.SpaceBetween
                ) {
    
    
                    IconButton(onClick = {
    
     /*TODO*/ }) {
    
    
                        Icon(
                            imageVector = Icons.Filled.Favorite,
                            contentDescription = null, modifier = Modifier.size(16.dp)
                        )
                    }

                    IconButton(onClick = {
    
     /*TODO*/ }) {
    
    
                        Icon(
                            painterResource(id = R.drawable.comment),
                            contentDescription = null, modifier = Modifier.size(16.dp)
                        )
                    }

                    IconButton(onClick = {
    
     /*TODO*/ }) {
    
    
                        Icon(
                            painterResource(id = R.drawable.share),
                            contentDescription = null, modifier = Modifier.size(16.dp)
                        )
                    }
                }
            }
        }
    }
}

操作結果:

上記のコードからわかるように、Row の horizo​​ntalArrangement パラメーターは、ボタンの水平位置を合理的に構成するのに役立ちます。アイコン部分では、いいねボタンとシェアボタンが左右の端に並んでいることがわかります. Arrangement は、Center (中央)、Start (左に水平)、End (水平に) を除いて、多くのサブアイテムの配置方法を定義します。右へ) およびその他の一般的な配置 特定のシナリオでは、間隔、等間隔など、いくつかの配置方法もあります。

2. フレームレイアウト

2.1 ボックスのコンポーネント

Box コンポーネントは、子アイテムを順番に積み重ねることができるレイアウト コンポーネントです. これは、使用されている従来のレイアウトの FrameLayout に似ています. これは非常に単純です. 次のコードを見て、その使用法を理解しましょう.

@Composable
fun BoxDemo(){
    
    
    Box(modifier = Modifier
        .size(150.dp)
        .background(Color.Green))
    Box(modifier = Modifier
        .size(80.dp)
        .background(Color.Red))

    Text(text = "Hello World")
}

操作結果:

2.2 表面成分

サーフェスは文字通り平面として理解されます, マテリアル デザインのデザイン ガイドラインでも同じことが言えます. このプラットフォームには多くのコンポーネントを配置できます. この平面の境界線, 角の丸み, 色などを設定できます. たとえば, を使用します.表面 カード効果を実現するためのコードは次のとおりです。

@Composable
fun SurfaceDemo() {
    
    
    Surface(
        shape = RoundedCornerShape(8.dp),
        elevation = 10.dp,
        modifier = Modifier
            .width(300.dp)
            .height(100.dp),
        color = Color.Gray
    ) {
    
    
        Row(modifier = Modifier.clickable {
    
    }) {
    
    
            Image(
                painter = painterResource(id = R.drawable.portrait),
                contentDescription = null,
                modifier = Modifier.size(100.dp),
                contentScale = ContentScale.Crop
            )

            Spacer(modifier = Modifier.padding(horizontal = 12.dp))
            Column(
                modifier = Modifier.fillMaxHeight(),
                verticalArrangement = Arrangement.Center
            ) {
    
    
                Text(text = "zhongxj", style = MaterialTheme.typography.h6)
                Spacer(modifier = Modifier.padding(vertical = 8.dp))
                Text(text = "海塔灯")
            }
        }
    }
}

操作結果:

上記のコードから、私たちは主に Surface で UI コードを書いていることがわかります.Surface は主にコンポーネント全体の形状、影、背景などを担当しています.Surface は多くを追加することなくいくつかのコードを分離するのに役立ちます.単一のコンポーネントに Modifier モディファイア メソッド。

很多读者可能会有疑问有了Box为啥还要加一个Surface组件，其实Box和Surface组件还是有区别的，如果我们需要快速设置界面的形状，阴影，边框，颜色等，我们使用Surface会更好，因为这样可以减少Modifier的使用量。而如果我们只是需要简单设置界面背景颜色，大小，且需要简单布局下子项的位置，则可以使用Box

3.スペーサーブランク

多くの場合、コンポーネント間に空白を残す必要がありますが、今回は Compose が提供する Spacer コンポーネントを使用して、単にデモを使用して Spacer の使用方法を示すことができます。

@Composable
fun SpacerDemo(){
    
    
   Row {
    
    
       Box(modifier = Modifier
           .size(100.dp)
           .background(Color.Green))
       Spacer(modifier = Modifier.width(20.dp))
       Box(modifier = Modifier
           .size(100.dp)
           .background(Color.Yellow))
       Spacer(modifier = Modifier.weight(1f))
       Box(modifier = Modifier
           .size(100.dp)
           .background(Color.Magenta))
   }
}

運用実績

上記のコードから、Box を使用してプレースホルダーの長方形ブロックをコードに描画する Spacer の別の使用シナリオを見ることができます. コンテンツがない場合は、代わりに Spacer を使用できます.

要約する

この記事では主に、Compose でのリニア レイアウトとフレーム レイアウトの使用方法について説明しますが、実際には非常に単純であり、スキルがなくても、もっと練習する必要があります。Compose UI を XML UI を書くのと同じくらい上手に書くと、作業効率が大幅に向上し、より少ないコードでより魅力的な UI 効果を実現でき、Kotlin と Java を組み合わせて使用​​することもできます。テスト用のインターフェースを書くのはとても便利です. Java を使っている人は Compose を使ってインターフェースを書き, Java を使って関数を書くことができます. Kotlin を使っている人は Compose を使うと便利です.インターフェイスと機能は本当にクールです。