Yazılım geliştirirken bir önceki teknolojiden yeni yapıya geçiş yapma sürecinin kolaylaştırılması önemlidir.
Bu makalede Android View yapısıyla tasarlanan projenize Jetpack Compose elementlerini nasıl ekleyeceğimizi açıklayacağım.
Dilerseniz Jetpack Compose ile Adım Adım Tasarım makalemi okuyarak Jetpack Compose hakkında detaylı bilgi edinebilirsiniz.
Örnek uygulama görüntüsü;
Proje kodlarına github linkinden ulaşabilirsiniz.
1-Projede Bazı Ayarlar
Projemin app dizinin altındaki build.gradle dosyasını açıyoruz. Dependencies kod bloklarının arasına aşağıdaki kodu yerleştirerek Compose kütüphanelerini yüklüyoruz.
|
1 2 3 4 |
implementation "androidx.compose.ui:ui:1.1.1" implementation "androidx.compose.material:material:1.1.1" implementation "androidx.compose.ui:ui-tooling-preview:1.1.1" implementation 'androidx.activity:activity-compose:1.4.0' |
Aynı build.gradle dosyasında android parantezinin arasına aşağıdaki kodu eklemeliyiz. Böylelikle binding özelliğini aktif etmiş ve compose option eklemiş olacağız.
|
1 2 3 4 5 6 7 |
buildFeatures { viewBinding true compose true } composeOptions { kotlinCompilerExtensionVersion '1.1.1' } |
2- Arayüz Xml Yapısına ComposeView Ekleme
ComposeView, Jetpack Compose UI içeriğini barındırabilen bir android.view.View yapısıdır. ComposeView yapısına istediğiniz Compose özelliklerini yükleyerek, Xml ile Compose birlikte çalışmasını sağlayabilirsiniz Projenizde kullandığınız Xml yapısını açın. Compose kullanmak istediğiniz alana aşağıdaki kodu ekleyin.
|
1 2 3 4 |
<androidx.compose.ui.platform.ComposeView android:id="@+id/compose_view" android:layout_width="match_parent" android:layout_height="wrap_content"/> |
Örneğimizin arayüz kodu;
|
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 |
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <TextView android:id="@+id/xml_t" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Hello XML TextView!" android:textAlignment="center" android:textColor="@color/black" android:textSize="25sp" app:layout_constraintBottom_toTopOf="@id/compose_view" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_chainStyle="packed" /> <androidx.compose.ui.platform.ComposeView android:id="@+id/compose_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="16dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintTop_toBottomOf="@id/xml_t" /> </androidx.constraintlayout.widget.ConstraintLayout> |
3- Xml’e Compose Elementini Yükleme
Kotlin tarafında, ComposeView elementinin apply özelliği içerisinde Xml’e eklemek istediğimiz compose elementlerini oluşturabiliriz.
|
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 |
import androidx.appcompat.app.AppCompatActivity import android.os.Bundle import androidx.compose.foundation.layout.* import androidx.compose.material.Text import androidx.compose.ui.Modifier import androidx.compose.ui.platform.ViewCompositionStrategy import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.sp import com.smality.androidviewswithcompose.databinding.ActivityMainBinding class MainActivity : AppCompatActivity() { private lateinit var binding: ActivityMainBinding override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) binding = ActivityMainBinding.inflate(layoutInflater) setContentView(binding.root) //ComposeView id'si üzerinden apply özelliğini çağırıyoruz binding.composeView.apply { setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed) //Compose oluşumu için setContent özelliğini çağırıyoruz setContent { Column(modifier = Modifier.fillMaxWidth()) { //Text Compose oluşturuyoruz... Text( text = "Hello Compose Text!", modifier = Modifier.fillMaxWidth(), textAlign = TextAlign.Center, fontSize = 20.sp ) } } } } } |
4- Compose Kullanırken Xml Elementini Ekleme
Dilersek setContent compose alanında Android View Xml elementlerini de ekleyerek kullanabiliriz. Bunu yapabilmek için AndroidView() özelliğinden faydalanmalıyız. Örnek kodumuzda AndroidView() fonkrsiyonunu ComposeView içine ekledim. Fakat bunu yapmak zorunda değilsiniz. AndroidView() ‘i sadece setContent içinde kullanmanız yeterlidir.
|
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 |
import android.graphics.Color import androidx.appcompat.app.AppCompatActivity import android.os.Bundle import android.view.View import android.widget.TextView import androidx.compose.foundation.layout.* import androidx.compose.material.Text import androidx.compose.ui.Modifier import androidx.compose.ui.platform.ViewCompositionStrategy import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.* import androidx.compose.ui.viewinterop.AndroidView import androidx.constraintlayout.widget.ConstraintLayout import com.smality.androidviewswithcompose.databinding.ActivityMainBinding class MainActivity : AppCompatActivity() { private lateinit var binding: ActivityMainBinding override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) binding = ActivityMainBinding.inflate(layoutInflater) setContentView(binding.root) //ComposeView id'si üzerinden apply özelliğini çağırıyoruz binding.composeView.apply { setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed) //Compose oluşumu için setContent özelliğini çağırıyoruz setContent { Column(modifier = Modifier.fillMaxWidth()) { //Text Compose oluşturuyoruz... Text( text = "Hello Compose Text!", modifier = Modifier.fillMaxWidth(), textAlign = TextAlign.Center, fontSize = 20.sp ) //16dp lık bir boşluk bırakalım Spacer(modifier = Modifier.height(16.dp)) //Compose içindeyken TextView elementini ekleyelim AndroidView( modifier = Modifier.fillMaxWidth(), factory = { context -> TextView(context) }) { textView -> //TextView boyutlandırma özellikleri textView.apply { textView.layoutParams = ConstraintLayout.LayoutParams( ConstraintLayout.LayoutParams.MATCH_PARENT, ConstraintLayout.LayoutParams.WRAP_CONTENT ) text = "This is a TextView inside compose" textSize = 20F setTextColor(Color.BLACK) textAlignment = View.TEXT_ALIGNMENT_CENTER } } } } } } } |
Proje kodlarına github linkinden ulaşabilirsiniz.
Kaynaklar
1- https://developer.android.com/jetpack/compose/interop/interop-apis
