Arayüz tasarımında kullanıcıyı etkileyebilmek için bazı tasarım efektleri kullanılmaktadır.
Bu makale Jetpack Compose ile Paralaks efektini kullanarak scroll yapılan içeriği nasıl soluklaştırabileceğimizi örnekleyecektir.
Dilerseniz Jetpack Compose ile Adım Adım Tasarım makalemi okuyarak Jetpack Compose hakkında detaylı bilgi edinebilirsiniz.
Örnek projemizin ekran görüntüsü
Proje kodlarına github linkinden, kodlarla ilgili açıklamalara da makaleden ulaşabilirsiniz.
1-Compose Proje Oluşturma
Compose kullanabilmek için Android Studio Arctic Fox veya üst sürümlerden birini indirmeniz gerekir. Android Studio’da File > New yolunu takip edip New Project ekranında Empty Compose Activity arayüz taslağını seçmelisiniz. Next yapıp projenizi oluşturun.
2- Paralaks Efektini Oluşturma
Örneği incelediğimizde scroll yapıldığında paralaks efektinin aktif olduğunu görmekteyiz. Bu yüzden ilk hedefimiz scroll yapmayı aktif hale getirmektir. Bunun içinde scroll yapacağımız Column ‘da vertcalScroll(state) ve Modifier tanımlamamız gerekir. Bu bölüm için örnek kod;
1 2 3 4 5 6 |
Column( //Y ekseninde scrolling yapabilmek için verticalScroll tanımlıyoruz modifier = Modifier .verticalScroll(scrollState) .fillMaxSize() ) { } |
Diğer bir konu; resmin soluklaştırarak kaybolmasıdır. Bu işlem için Modifier.graphicsLayer {} özelliğinden faydalanacağız. graphicsLayer, alpha, elevation, shape vb. özellikleri bulunmaktadır. Soluklaştırma işlemini de alpha özelliği sağlamaktadır. ParallaxEffect adında kotlin dosyası oluşturdum. Şimdiye kadar anlattığım bölümleri ParallaxEffect fonksiyonunda uyguladım. Yorum satırları içeren kodları inceleyebilirsiniz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
import androidx.compose.foundation.* import androidx.compose.foundation.layout.* import androidx.compose.material.* import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.* import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.res.painterResource import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.FontFamily import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.* import kotlin.math.* @Composable fun ParallaxEffect(scrollState: ScrollState) { val text = "Bartın il merkezine 17 km uzaklıkta, tarihle doğanın iç içe olduğu Güzelcehisar köyü, Karadeniz sahilinde orman alanları, denizi, kumu eşsiz gün batımı ile görenleri büyüleyen, görülmesi gereken önemli bir cazibe merkezidir. Güzelcehisar sahilinde bulunan ve 80 milyon yıllık olduğu tahmin edilen lav sütunları görsel bir şölen sunmaktadır. Güzelcehisar'ın 850 metre uzunluğundaki kumsalın batı ucundan başlayan ve denizden bir duvar gibi yükselen sütun yapılı lav kayalıkları deniz kıyısı boyunca uzanarak Mugada'ya kadar ulaşmaktadır. \nTürkiye'de ise Bartın'ın tarih ve doğanın iç içe olduğu Güzelcehisar ilçesinde bulunan lav sütunları, \"Bartın İli Güzelcehisar Lav Sütunları ve Sahilinin Turizm ve Rekreasyon Amaçlı Peyzaj Uygulama Projesi\" kapsamında hazırlanan projeyle geçen yıl turizme kazandırıldı. Batı Karadeniz Kalkınma Ajansının (BAKKA) Mali Destek Programı kapsamında, İl Kültür ve Turizm Müdürlüğünün projesiyle uluslararası ölçekte turizme kazandırılması hedeflenen lav sütunları, projenin uygulanmasının ardından ziyaretçilerin uğrak noktalarından biri haline geldi." Box( modifier = Modifier.fillMaxWidth() ) { Column { TopAppBar( //TopAppBar alanındaki başlık stilinin tanımlanması title = { Text( text = "Bartın Lav Sütunları", modifier = Modifier.fillMaxWidth(), textAlign = TextAlign.Center, color = Color.Black ) } ) Column( //Y ekseninde scrolling yapabilmek için verticalScroll tanımlıyoruz modifier = Modifier .verticalScroll(scrollState) .fillMaxSize() ) { val height = 320.dp Image( //Kullanılan resmi belirliyoruz. painter = painterResource(id = R.drawable.image), contentDescription = "Banner Image", contentScale = ContentScale.FillBounds, modifier = Modifier .fillMaxWidth() .height(height) .graphicsLayer { //kaydırma esnasında soluklaştırma görüntüsünü oluşturduğmuz bölüm //scrollState ve height değerlerini matematiksel işlemlerle bu işlemi yapıyoruz. alpha = min( 1f, max( 0.0f, 1 - (scrollState.value / ((height.value * 2) + (height.value / 1.5f))) ) ) } ) //İçerik yazısıyla ilgili still özelliklerinin tanımlanması Text( text = text, fontSize = 18.sp, fontFamily = FontFamily.Serif, modifier = Modifier.padding(10.dp), style = TextStyle( lineHeight = 25.sp, textAlign = TextAlign.Justify ) ) } } } } |
Son olarak ParallaxEffect fonksiyonunu MainActivity sınıfında çağırma işlemi yaptım.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.rememberScrollState import androidx.compose.material.* import com.jetpack.parallaxeffect.ui.theme.ParallaxEffectTheme class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { //ParallaxEffect fonk kullanmak için scroll yapma durumunu tanımlıyoruz. val scrollState = rememberScrollState() ParallaxEffectTheme { Surface(color = MaterialTheme.colors.background) { Scaffold() { ParallaxEffect(scrollState) } } } } } } |
Tüm işlemlerimiz bitti. En sade haliyle Paralaks efektini örneklemiş oldum. Dilerseniz farklı tasarımlara bu özelliği ekleyebilirsiniz.
Proje kodlarına github linkinden ulaşabilirsiniz.