【Android】【Compose】基本概念(課程筆記)

看 MainActivity.kt

• onCreate() : 應用程式的進入點
•  setContent() : 透過可組合函式用來定義版面配置
• 何標有 @Composable 註解的函式都可以從 setContent() 函式或其他可組合函式進行呼叫。
• 該註解告知 Kotlin 編譯器 Jetpack Compose 使用這個函式來產生使用者介面。
• @Composable 函式無法傳回任何內容
• 命名須為名詞，其餘參考 androidx/compose/docs/compose-api-guidelines.md at androidx-main · androidx/androidx · GitHub
• @Preview
• 預覽函式(不用 build app 即可顯示預覽圖)
• showBackground = true  會在預覽時加入背景

showBackground = false

showBackground = true 

• 
  
  
  
  

更改文字背景色

1. 

2. 

3. 把 Box 改成 Surface ，輸入想要的背景色 (需 import Color)

@Composable
fun Greeting(name: String) {
    Surface(color = Color.Blue) {
        Text(text = "Hello~ $name!")
    }
}

新增邊框間距 (padding)

• Modifier 是用來擴增或裝飾可組合的內容。
• 您可以使用 padding 修飾符來修改元素，這個元素會將間距套用至該元素周圍 (這裡指的是文字周圍的間距)。此方法為使用 Modifier.padding() 函式來完成。

例子 :

@Composable
fun Greeting(name: String) {
    Surface(color = Color.Blue, modifier = Modifier.padding(2.dp)) {
        Text(text = "Hello~ $name!")
    }
}

階層與版面配置

• UI 元素是階層結構。有父項與子項。
• Compose 有三種基本版面配置，分別為 Column 、 Row、Box(將元素堆疊在另一個元素上面)

• 在 Column 中可以設定 verticalArrangement 
  
  
  
  
  
• 在 Row 中可以設定 horizontalArrangement
  
  
  
  
  

實作

步驟舉例 : 選取兩個 Text 可組合函式，按一下燈泡圖示。依序選取「Surround with widget」>「Surround with Row」。

Column 實例 (以及使用 Text)

@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
    Column(
        verticalArrangement = Arrangement.Center, //置中(垂直置中)
        modifier = modifier.padding(8.dp)
    ) {
        //文字訊息
        Text(
            text = message,
            fontSize = 100.sp,
            lineHeight = 116.sp, //需要設定行高，否則字可能會擠在一起
            textAlign = TextAlign.Center //文字置中
        )
        Text(
            text = from,
            modifier = Modifier
                .padding(16.dp)
                .align(alignment = Alignment.End) // 靠右對齊
                .background(color = Color.Yellow)
        )

    }
}

textAlign = TextAlign.Justify 使文字不因為分行而參差不齊

請看文章第一段的部分 : 左邊沒使用，右邊有用

插入圖片

@Composable
fun GreetingImage(message: String, from: String, modifier: Modifier = Modifier) {
    val image = painterResource(R.drawable._52243)
    Box {
        Image(
            painter = image,
            contentDescription = null, // 令 TalkBack 忽略此圖
            contentScale = ContentScale.Crop, // 圖片剪裁方式為根據可用空間置中裁剪
            modifier = Modifier.fillMaxSize(), // 可用空間(元件能顯示)的範圍為全螢幕
            alpha = 0.2F // 透明度
        )
        GreetingText(
            message = message,
            from = from,
            modifier = Modifier.fillMaxSize().padding(8.dp)
        )
    }
}

自訂圖片  |  Jetpack Compose  |  Android Developers

排版

padding

// This is an example.
Modifier.padding(
    start = 16.dp,
    top = 16.dp,
    end = 16.dp,
    bottom = 16.dp
)

在 Column 中可以設定 verticalArrangement 、在 Row 中可以設定 horizontalArrangement

Column(
    verticalArrangement = Arrangement.Center, //置中(垂直置中)
    modifier = Modifier.fillMaxSize().padding(8.dp)
) {
    ...
}

align

可用來單獨放置子項可組合函式，無需遵循上層布局強制執行的版面配置對齊規則。

Text(
    text = from,
    modifier = Modifier
        .padding(16.dp)
        .align(alignment = Alignment.CenterHorizontally) // 靠右對齊
        .background(color = Color.Yellow)
)

添加 String 資源

stringResource(R.string.happy_birthday_text)