Skip to content

Latest commit

 

History

History
237 lines (222 loc) · 9.14 KB

2주차-숙제.md

File metadata and controls

237 lines (222 loc) · 9.14 KB

안드로이드 스터디 2주차 과제

Card와 Deck를 모델링해보자! (cheggprep 패키지 안에 models 패키지를 생성하고 그 안에 작성)

  • Card를 구성하는 정보는 앞면과 뒷면의 텍스트입니다! 
    // Card.kt
data class Card(val front: String, val back: String)
  • Deck는 조금 복잡합니다.
  • 홈 화면에서 Bookmarks와 Created로 나누고, 학습 이력이 있는 것 또한 보여주기 때문에 우선 자신이 만든 것과 다른 사람이 만든 것을 구분하겠습니다 - deckType. 
    // Deck.kt
data class Deck(
  val deckType: Int, 
  val deckTitle: String, 
  val shared: Boolean,
  val bookmarked: Boolean,
  val cardList: List<Card> // deck에 포함된 Card의 리스트!
) 

//deckType 두 가지를 아래와 같이 선언하여 사용하겠습니다
const val DECK_CREATED = 0
const val DECK_ADDED = 1

이제 DeckItem 하나만으로 모든 Deck를 표현할 수 있다!

  • DeckItem에 Deck를 인자로 넘겨줍시다. + modifier도 전달할 수 있도록 만들어요. (인스타그램 UI에서 해봤던 거)

    @Composable
fun DeckItem(deck: Deck, modifier = Modifier = Modifier) {
    Column(
        modifier = modifier // Modifier -> 전달받은 modifier로 수정
            .fillMaxWidth()
            .border(
                width = 2.dp,
                color = Color.LightGray
            )
            .clickable {
            }
            .padding(16.dp)
    ) {
        Text(
            text = deck.deckTitle,
            style = MaterialTheme.typography.h5,
            fontWeight = FontWeight.Bold
        )
        Spacer(modifier = Modifier.height(4.dp))
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            Text(
                text = deck.cardList.size.toString() + if (deck.cardList.size > 1) " Cards" else "Card",
                style = MaterialTheme.typography.subtitle1,
                fontWeight = FontWeight.Bold,
                color = Color.Gray
            )
            // 아이콘 부분
            // deck를 이용해 어떤 아이콘을 넣을지 결정하려면 어떤 코드를 작성해야 할까요?? 잠깐 생각해보기!
        }
    }
}

  • Deck 종류를 생각해보면 아래와 같이 나눌 수 있습니다.

    1. 내가 만든 것 - 공유한 것 (visibility 아이콘) : shared == true
    2. 내가 만든 것 - 공유하지 않은 것 (visibilityoff 아이콘) : shared == false
    3. 다른 사람이 만든 것 - 북마크한 것 (bookmark 아이콘) : bookmarked == true
    4. 다른 사람이 만든 것 - 북마크하지 않은 것 (아이콘 X) : bookmarked == false

  • deckType으로 나눈 뒤에

    • DECK_CREATED인 경우에는 shared 가 true일 때 Visibility 아이콘, false일 때 VisibilityOff 아이콘
    • DECK_ADDED인 경우에는 bookmarked가 true일 때 Bookmark 아이콘, false일 때는 아이콘 X
    when(deck.deckType) {
  DECK_CREATED -> {
      if(deck.shared) {
          Icon(
              imageVector = Icons.Default.Visibility,
              contentDescription = "shared",
              tint = Color.Gray
          )
      }else {
          Icon(
              imageVector = Icons.Default.VisibilityOff,
              contentDescription = "not shared",
              tint = Color.Gray
          )
      }
  }
  DECK_ADDED -> {
      if(deck.bookmarked){
          Icon(
              imageVector = Icons.Default.Bookmark,
              contentDescription = "bookmark",
              tint = Color.Gray
          )
      }
  }
}

  • 이렇게 하면 됩니다! 이해되도록 따져보기

샘플 데이터로 DeckItem 목록 보여주기

  • MainActivity.kt와 같은 수준에 SampleDataSet.kt 파일을 생성합니다 
    object SampleDataSet {

    val deckSample = listOf(
        Deck(
            deckType = DECK_ADDED,
            deckTitle = "Computer Networks",
            shared = false,
            bookmarked = true,
            cardList = listOf(
                Card(
                    "Mesh topology",
                    "A network topology in which every node pair is connected by a point-to-point link"
                ),
                Card("Network topology", "The spatial organization of network devices"),
                Card(
                    "Logical topology",
                    "The path messages traverse as they travel between end and central network nodes."
                )
            )
        ),
        Deck(
            deckType = DECK_ADDED,
            deckTitle = "Information Systems",
            shared = false,
            bookmarked = false,
            cardList = listOf(
                Card("Iterations", "Repeated steps in an SDLC process"),
                Card(
                    "System development life cycle",
                    "The process for developing an information system"
                ),
            )
        ),
        Deck(
            deckType = DECK_CREATED,
            deckTitle = "jetpack compose",
            shared = false,
            bookmarked = false,
            cardList = listOf(
                Card("modifier", "Repeated steps in an SDLC process"),
                Card("side effects", "The process for developing an information system"),
                Card("modifier", "Repeated steps in an SDLC process"),
                Card("side effects", "The process for developing an information system"),
            )
        ),
        Deck(
            deckType = DECK_CREATED,
            deckTitle = "Room",
            shared = true,
            bookmarked = false,
            cardList = listOf(
                Card("DAO", "Repeated steps in an SDLC process"),
                Card("suspend", "The process for developing an information system"),
                Card("suspend", "The process for developing an information system"),
                Card("suspend", "The process for developing an information system"),
                Card("suspend", "The process for developing an information system"),
                Card("suspend", "The process for developing an information system"),
            )
        )
    )
}
    • HomeScreen의 LazyColumn에 SampleDataSet을 보여줍시다.
    LazyColumn(modifier = Modifier.padding(16.dp)) {
    SampleDataSet.deckSample.forEach { // forEach는 리스트의 각 아이템에 대해서 수행하는 함수입니다. 현재 아이템은 it에 있습니다.
        item {
            DeckItem(deck = it, modifier = Modifier.padding(bottom = 8.dp))
            // 기존에 Spacer로 줬던 여백을 Modifier.padding으로 전달해 보았습니다!
        }
    }
}

    • 이런 결과가 나와야 합니다!

HomeScreen이 가지고 있는 selectedFilterIndex로 필터링을 구현해보자!

  • 인덱스에 따라 LazyColumn 안에 보여줄 리스트를 다르게 조작하기

    • 인덱스 0 - 모든 리스트

    • 인덱스 1 - deck의 bookmarked가 true인 아이템들만으로 이루어진 리스트

    • 인덱스 2 - deck의 deckType이 DECK_CREATED인 아이템들만으로 이루어진 리스트

    • filter 확장 함수는 조건식(predicate)을 만족하는 아이템만으로 이루어진 리스트를 반환합니다.

      public inline fun <T> Iterable<T>.filter(
  predicate: (T) → Boolean
): List<T>

    • 코드를 어떻게 작성할지 생각해보고 기! (힌트 : when 문)

      .

      .

      .

      .

      .

      .

      LazyColumn(modifier = Modifier.padding(16.dp)) {

  when (selectedFilterIndex) {
      0 ->
          SampleDataSet.deckSample.forEach {
              item {
                  DeckItem(deck = it, modifier = Modifier.padding(bottom = 8.dp))
              }
          }
      1 ->
          SampleDataSet.deckSample.filter { it.bookmarked }.forEach {
              item {
                  DeckItem(deck = it, modifier = Modifier.padding(bottom = 8.dp))
              }
          }
      2 ->
          SampleDataSet.deckSample.filter { it.deckType == DECK_CREATED }.forEach {
              item {
                  DeckItem(deck = it, modifier = Modifier.padding(bottom = 8.dp))
              }
          }
    }
}

    • 이런 결과를 볼 수 있습니다!