[アンドロイド]Jetpack Component試食-第2話:テキスト出力

前回の授業では、Componentプロジェクトを作成し、簡単なコードを確認しました.次に、コードを直接修正してテキストを出力します.

Columns & Rows

まず次のコードのようにHelloとWorldを出力します

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Text("Hello")
            Text("World")
        }
    }
}

シミュレータを実行して結果を表示すると、2つの文字が重複します.

これらのマージされた文字列を垂直または水平に区切るには、RowおよびColumnを使用します.次のコードのようです.

// 코드 생략..
super.onCreate(savedInstanceState)
setContent {
    Row{
        Text("Hello")
        Text("World")
    }
}

結果を実行すると、2つの文字列が水平に配置されます.Rowの代わりにColumnを使うと、縦に並べられているのでしょうか?

テキストの中央揃え

画面の中央にテキストを配置する場合は、horizontalAlignmentを使用します.次のコードを入力し、結果画面を表示します.

super.onCreate(savedInstanceState)
setContent {
    Column(horizontalAlignment = Alignment.CenterHorizontally){
        Text("Hello")
        Text("World")
    }
}

うん.ほかにない、この詐欺師.
一見あまり変わっていないようです.
ただし、各文字列をよく見ると、テキストボックスの中央揃えのみが表示されます.

上の図に示すように、テキストボックスのサイズはwrap contentで、限られた空間内で中央に位置合わせされています.
では、画面全体の真ん中にテキストを置くにはどうすればいいのでしょうか.
とても簡単です.テキストボックスのサイズを大きくすればいいですよね?modifierを使用してテキストボックスのサイズを大きくします.fillMaxSizeを使用すると、次のコードに示すように、テキストボックスのサイズが画面を埋め尽くします.

setContent {
    Column(
        Modifier.fillMaxSize(), // xml에서의 match_parent와 같은 의미입니다.
        horizontalAlignment = Alignment.CenterHorizontally){
        Text("Hello")
        Text("World")
    }
}

結果を表示すると、画面全体のテキストが水平方向に中央に表示されます.

また、Modifierのプロパティを表示すると、paddingを使用してマージンを指定したり、背景色を指定したりすることができます.
次のコードを入力し、結果を出力します.

setContent {
    Column(
        Modifier.fillMaxSize()
            .background(Color.Green),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally){
        Text("Hello")
        Text("World")
    }
}

テキストが画面の真ん中にあることを確認します.
ここで注意すべきは、Columnとして指定する場合、Arrangementを使用して垂直中央揃えを行い、Alignmentを使用して水平中央揃えを行うことである.
ただし、「行」に指定する場合は、Arrangementを使用して水平方向の中央揃えを行い、Alignmentを使用して垂直方向の中央揃えを行う必要があります.