Card

데이터 정의

data class CardData(
  val imageUri: String,
  val imageDescription: String,
  val author: String,
  val description: String
)

class MainActivity : ComponentActivity() {
  companion object {
    val cardData = CardData(
      imageUri = "https://www.visitarizona.com/imager/s3_us-west-1_amazonaws_com/aot-2020/images/landmarks/LIMTED-USE_Upper-Antelope-Canyon_An-Pham_7889_096c04738257e41b64875a8038db08c1.jpg",
      imageDescription = "앤텔로프 캐년",
      author = "Chaebin",
      description = "앤텔로프 캐년은 죽기 전에 꼭 봐야 할 절경으로 소개되었습니다."
    )
  }
  
}

AsyncImage에 placeholder 지정, contentScale 설정, CircleShape 적용

@Composable
fun CardEx(cardData: CardData) {

  Card(
    modifier = Modifier.padding(4.dp),
    elevation = CardDefaults.cardElevation(8.dp)
  ) {
    Row(
      verticalAlignment = Alignment.CenterVertically,
      modifier = Modifier.padding(8.dp)
    ) {
      AsyncImage(
        model = cardData.imageUri,
        placeholder = ColorPainter(Color(0x330ff000)), // 이미지 로딩 실패 등 없을 때 기본상태
        contentDescription = "앤텔로프 캐년",
        modifier = Modifier
          .size(32.dp)
          .clip(CircleShape),
        contentScale = ContentScale.Crop // 비율 상관없이 둥글게 자름
      )
      Spacer(modifier = Modifier.padding(8.dp))
      Column {
        Text(text = cardData.author, style = TextStyle(fontStyle = FontStyle.Italic))
        Spacer(modifier = Modifier.padding(4.dp))
        Text(text = cardData.description)
      }
    }
  }
}

• preview
  

• real
  

---

CheckBox

Default

@Composable
fun CheckBoxEx() {
  Row(
    verticalAlignment = Alignment.CenterVertically
  ) {
    Checkbox(checked = false, onCheckedChange = {})
    Text(text = "프로그래머입니까?")
  }
}

onCheckedChange

compose에서 상태 : mutableStateOf type
compose에서 다시 그려지는 과정이 반복되는 것을 recomposition이라고 한다.
상태가 바뀔 때 recomposition이 이루어진다.

@Composable
fun CheckBoxEx() {
  Row(
    verticalAlignment = Alignment.CenterVertically
  ) {
    var checked = remember { mutableStateOf(false) }

    Checkbox(
      checked = checked.value,
      onCheckedChange = {
        checked.value = !checked.value
      }
    )
    Text(text = "프로그래머입니까?")
  }
}

Delegate properties

위임된 속성. .value 없어도 되는거

@Composable
fun CheckBoxEx() {
  Row(
    verticalAlignment = Alignment.CenterVertically
  ) {
    var checked by remember { mutableStateOf(false) }
    Checkbox(
      checked = checked,
      onCheckedChange = {
        checked = !checked
      }
    )
    Text(text = "프로그래머입니까?")
  }
}

Destruction (비구조화)

component1 : T type -> getter

component2 : T를 받아서 아무것도 반환 하지 않음 -> setter

@Composable
fun CheckBoxEx() {
  Row(
    verticalAlignment = Alignment.CenterVertically
  ) {
    val (checked, setChecked) = remember {
      mutableStateOf(false)
    }

    Checkbox(
      checked = checked,
      onCheckedChange = setChecked
    )
    Text(text = "프로그래머입니까?")
  }
}

Click 범위 확장

@Composable
fun CheckBoxEx() {
  Row(
    verticalAlignment = Alignment.CenterVertically
  ) {
    val (checked, setChecked) = remember {
      mutableStateOf(false)
    }

    Checkbox(
      checked = checked,
      onCheckedChange = setChecked
    )
    Text(
      text = "프로그래머입니까?",
      modifier = Modifier.clickable {
        setChecked(!checked) // text 범위를 눌러도 check 동작
      }
    )
  }
}

---

TextField

Default

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TextFieldEx() {
  Column(modifier = Modifier.padding(16.dp)) {
    TextField(value = "Tom", onValueChange = {})
  }
}

TextField 입력값 출력

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TextFieldEx() {
  var name by remember { mutableStateOf("Tom") }

  Column(modifier = Modifier.padding(16.dp)) {
    TextField(value = name, onValueChange = { name = it })
    Text(text = "Hello $name")
  }
}

Label 추가

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TextFieldEx() {
  var name by remember { mutableStateOf("Tom") }

  Column(modifier = Modifier.padding(16.dp)) {
    TextField(
      value = name,
      label = { Text("이름") },
      onValueChange = { name = it }
    )
    Text(text = "Hello $name")
  }
}

OutlinedTextField

취향 따라 사용

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TextFieldEx() {
  var name by remember { mutableStateOf("Tom") }

  Column(modifier = Modifier.padding(16.dp)) {
    OutlinedTextField(
      value = name,
      label = { Text("이름") },
      onValueChange = { name = it }
    )
    Spacer(modifier = Modifier.size(8.dp))
    Text(text = "Hello $name")
  }
}

---

TopAppBar

Default

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TopBarEx(name: String) {
  Column {
    TopAppBar(title = { Text(text = "TopAppBar") })
    Text("Hello $name")
  }
}

Icon button 추가

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TopBarEx(name: String) {
  Column {
    TopAppBar(
      title = { Text(text = "TopAppBar") },
      navigationIcon = {
        IconButton(onClick = {}) {
          Icon(
            imageVector = Icons.Filled.ArrowBack,
            contentDescription = "up navigation"
          )
        }
      }
    )
    Text("Hello $name")
  }

}

Actions 추가

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TopBarEx(name: String) {
  Column {
    TopAppBar(
      title = { Text(text = "TopAppBar") },
      navigationIcon = {
        IconButton(onClick = {}) {
          Icon(
            imageVector = Icons.Filled.ArrowBack,
            contentDescription = "up navigation"
          )
        }
      },
      actions = {
        IconButton(onClick = {}) {
          Icon(
            imageVector = Icons.Filled.Search,
            contentDescription = "search"
          )
        }
        IconButton(onClick = {}) {
          Icon(
            imageVector = Icons.Filled.Settings,
            contentDescription = "setting"
          )
        }
        IconButton(onClick = {}) {
          Icon(
            imageVector = Icons.Filled.AccountCircle,
            contentDescription = "account"
          )
        }
      }
    )
    Text("Hello $name")
  }
}