Yazılım arayüzünde kullanıcı etkileşimi ve deneyimini arttırıcı animasyonlar, müşteriyi çeken en önemli unsurlardan biridir.
Bu makale Shared Element Transition animasyonu ile Android arayüz öğeleri arasındaki geçişlere dinamik ve ilgi çekici bir his vererek etkileşim kalitesini önemli ölçüde artırmayı örnekleyecek.
Örnek uygulama;
Proje kodlarına github linkinden, kodlarla ilgili açıklamalara da makaleden ulaşabilirsiniz.
1- Gerekli Kütüphanenin Eklenmesi
Android Studio Ide ile oluşturduğum projemin app dizinin altındaki build.gradle dosyasını açıyoruz. Dependencies kod bloklarının arasına aşağıdaki kodu yerleştirerek Animation kütüphanesini yüklüyoruz.
|
1 |
implementation(libs.androidx.compose.animation) |
2-Animasyonun Oluşturulması
Shared element transitions, farklı arayüz öğeleri arasında geçiş yapmanın kusursuz bir yoludur. Shared element transitions, genellikle gezinme için kullanılır ve kullanıcı farklı ekranlar arasında gezinirken görsel olarak birbirine bağlamanıza olanak tanır. Örnek projemizin kodlarını inceleyelim.
|
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 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 |
import android.os.Bundle import androidx.activity.* import androidx.activity.compose.setContent import androidx.compose.animation.* import androidx.compose.foundation.* import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.* import androidx.compose.foundation.shape.* import androidx.compose.material3.* import androidx.compose.runtime.* import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.res.painterResource import androidx.compose.ui.unit.* import com.smality.sharedelementtransition.ui.theme.* class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) enableEdgeToEdge() setContent { SharedElementTransitionTheme { Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding -> Surface( modifier = Modifier .fillMaxSize() .padding(innerPadding), color = MaterialTheme.colorScheme.background ) { SharedContentScreen() } } } } } } @OptIn(ExperimentalSharedTransitionApi::class) @Composable fun SharedContentScreen() { var showDetails by remember { mutableStateOf(false) } SharedTransitionLayout { AnimatedContent( showDetails, label = "basic_transition" ) { targetState -> if (!targetState) { //mainContent MainContent( onShowDetails = { showDetails = true }, sharedTransitionScope = this@SharedTransitionLayout, animatedVisibilityScope = this@AnimatedContent, ) } else { //detailsContent DetailsContent( onBack = { showDetails = false }, sharedTransitionScope = this@SharedTransitionLayout, animatedVisibilityScope = this@AnimatedContent, ) } } } } @OptIn(ExperimentalSharedTransitionApi::class) @Composable fun MainContent( onShowDetails: () -> Unit, animatedVisibilityScope: AnimatedVisibilityScope, sharedTransitionScope: SharedTransitionScope ) { Row( modifier = Modifier .padding(8.dp) .border( 1.dp, Color.Gray.copy(alpha = 0.5f), RoundedCornerShape(8.dp) ) .background( LavenderLight, RoundedCornerShape(8.dp) ) .clickable { onShowDetails() } .padding(8.dp) ) { with(sharedTransitionScope) { Image( modifier = Modifier .size(100.dp) .clip(CircleShape), contentScale = ContentScale.Crop, painter = painterResource(id = R.drawable.tugba), contentDescription = null ) Text( text = "Tuğba Üstündağ", fontSize = 21.sp, modifier = Modifier.sharedBounds( rememberSharedContentState(key = "title"), animatedVisibilityScope = animatedVisibilityScope ).padding(10.dp) ) } } } @OptIn(ExperimentalSharedTransitionApi::class) @Composable fun DetailsContent( modifier: Modifier = Modifier, onBack: () -> Unit, sharedTransitionScope: SharedTransitionScope, animatedVisibilityScope: AnimatedVisibilityScope ) { Column( modifier = modifier .padding(top = 50.dp, start = 16.dp, end = 16.dp) .border(1.dp, Color.Gray.copy(alpha = 0.5f), RoundedCornerShape(8.dp)) .background(RoseLight, RoundedCornerShape(8.dp)) .clickable { onBack() } .padding(8.dp) ) { with(sharedTransitionScope) { Image( painter = painterResource(id = R.drawable.tugba), contentDescription = "Tuğba Üstündağ", modifier = Modifier .sharedElement( rememberSharedContentState(key = "image"), animatedVisibilityScope = animatedVisibilityScope ) .size(200.dp) .clip(CircleShape), contentScale = ContentScale.Crop ) Text( "Tuğba Üstündağ", fontSize = 28.sp, modifier = Modifier.sharedBounds( rememberSharedContentState(key = "title"), animatedVisibilityScope = animatedVisibilityScope ).padding(10.dp) ) Text( "Web/Mobil uygulama geliştirme ve yazılım eğitmenliği alanlarında 2008’den bu yana toplamda yaklaşık 12 yıldır çalışmaktayım. Mobil uygulama geliştirme konusunda yoğunlukla Android uygulamalar geliştirmekteyim. Aynı zamanda Web yazılım alt yapısı olarak, Opencart ve WordPress ortamlarında çeşitli geliştirme ve güncellemeler yapmaktayım.\n" + "\n" + "Danışmanlık ve eğitim alanlarında ise; kurumsal firma ve kuruluşlarda Android Yazılım ağırlıklı olmak üzere eğitimler vermekteyim." ) } } } |
Proje kodlarına github linkinden, kodlarla ilgili açıklamalara da makaleden ulaşabilirsiniz.
