Jetpack Compose Top Bar Animation

Merhaba sizlere bu yazımda dinamik bir topBar oluşturmayı anlatmaya çalışacağım.

class MainActivity : ComponentActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
      MainScreen()
    }
  }
}

@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MainScreen() {
  val lazyListState = rememberLazyListState()

  Scaffold(
    topBar = {
      TopBar(lazyListState = lazyListState)
    },
    content = {
      MainContent(lazyListState = lazyListState)
    }
  )
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TopBar(lazyListState: LazyListState) {
  TopAppBar(
    title = { Text(text = "Bahadır Eray", modifier = Modifier.fillMaxWidth().background(color = Color.LightGray), color = Color.Blue, textAlign = TextAlign.Center) },
    modifier = Modifier
      .fillMaxWidth()
      .background(color = Color.LightGray)
      .animateContentSize(animationSpec = tween(durationMillis = 300))
      .height(height = if (lazyListState.isScrolled) 0.dp else TOP_BAR_HEIGHT).padding(top = 20.dp, start = 0.dp)
  )
}

@Composable
fun MainContent(lazyListState: LazyListState) {
  val numbers = remember { List(size = 25) { it } }
  val padding by animateDpAsState(
    targetValue = if (lazyListState.isScrolled) 0.dp else TOP_BAR_HEIGHT,
    animationSpec = tween(durationMillis = 300), label = ""
  )

  LazyColumn(
    modifier = Modifier.padding(top = padding),
    state = lazyListState
  ) {
    items(
      items = numbers,
      key = { it }
    ) {
      NumberHolder(number = it)
    }
  }
}

@Composable
fun NumberHolder(number: Int) {
  Row(
    modifier = Modifier
      .fillMaxWidth()
      .padding(10.dp),
    verticalAlignment = Alignment.CenterVertically
  ) {
    Text(
      textAlign = TextAlign.Center,
      text = number.toString(),
      overflow = TextOverflow.Ellipsis,
      color = Color.DarkGray,
      style = MaterialTheme.typography.titleLarge,
      modifier = Modifier.weight(1f)
    )
  }
}

val TOP_BAR_HEIGHT = 56.dp
val LazyListState.isScrolled: Boolean
  get() = firstVisibleItemIndex > 0 || firstVisibleItemScrollOffset > 0

• MainActivity Sınıfı: Bu sınıf, bir Android aktivitesini temsil eder. onCreate fonksiyonu, aktivite başlatıldığında çalışır. setContent fonksiyonu ise Compose arayüzünü belirtilen MainScreen içeriği ile doldurur.

MainScreen Fonksiyonu: Bu Composable, ana ekranın tasarımını oluşturur. İlk olarak, kaydırma durumunu tutmak için bir LazyListState nesnesi oluşturulur (rememberLazyListState). Daha sonra Scaffold composable kullanılır. Bu, temel bir yapı taşıdır ve üst çubuk (app bar), ana içerik ve diğer bileşenleri düzenlemek için kullanılır.

• topBar parametresi, üst çubuğu tanımlayan bir fonksiyon çağrısını içerir. Bu fonksiyonun sonucu TopBar adlı fonksiyondur.
• content parametresi, ana içeriği belirleyen bir fonksiyon çağrısını içerir. Bu fonksiyonun sonucu MainContent adlı fonksiyondur.

TopBar Fonksiyonu: Bu Composable, üst çubuğu oluşturur. TopAppBar composable kullanılır.

• title parametresi, üst çubukta görünen başlığı belirler. Bu başlık, Text composable ile oluşturulur.
• modifier parametresi, üst çubuğun görünümünü ve davranışını ayarlar. animateContentSize ile yavaşça boyut değişiklikleri yapabiliriz.
• height parametresi, üst çubuğun yüksekliğini ayarlar. Eğer liste kaydırıldıysa (isScrolled), üst çubuğun yüksekliğini 0 yaparak gizler.
• padding parametresi, üst çubuğun üst kısmını biraz aşağı kaydırır.

MainContent Fonksiyonu: Bu Composable, ana içeriği oluşturur. LazyColumn composable kullanılır. Bu, bir liste görünümünü oluşturur.

• modifier parametresi, görünümü düzenlemek için kullanılır. Burada, görünümün üst kısmına padding eklenerek boşluk bırakılır.
• items parametresi, listenin elemanlarını döngüye alır ve her bir elemanı NumberHolder fonksiyonuna geçirerek temsil eden arayüzleri oluşturur.

NumberHolder Fonksiyonu: Bu Composable, her bir numarayı temsil eden bir satırı oluşturur. Row ve Text composable kullanılarak numara görüntülenir.

TOP_BAR_HEIGHT ve LazyListState'in isScrolled Özelliği: TOP_BAR_HEIGHT, üst çubuğun yüksekliğini belirten bir değerdir. isScrolled özelliği, liste görünümünün kaydırma durumunu izler. Eğer kaydırıldıysa veya ilk elemandan uzaklaşıldıysa, üst çubuğun yüksekliği sıfıra ayarlanır ve üst çubuk gizlenir.

Bu işlem adımlarıyla dinamik bir topBar oluşturabilirsiniz, Bir başka yazımda görüşmek üzere :)