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ü belirtilenMainScreen
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 sonucuTopBar
adlı fonksiyondur.content
parametresi, ana içeriği belirleyen bir fonksiyon çağrısını içerir. Bu fonksiyonun sonucuMainContent
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ınapadding
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 :)