Как использовать Jetpack Compose в проектах с XML?

Интеграция Jetpack Compose в XML проекты

Jetpack Compose можно постепенно внедрять в существующие проекты с XML разметкой. Google специально разработал инструменты для гибридных приложений, где коэкзистируют Compose и традиционные View.

Способ 1: ComposeView для встраивания Compose в XML

Это основной метод — вы добавляете Compose компоненты в существующие XML лаауты:

<!-- activity_main.xml -->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Traditional XML layout" />
    
    <!-- Контейнер для Compose -->
    <androidx.compose.ui.platform.ComposeView
        android:id="@+id/compose_view"
        android:layout_width="match_parent"
        android:layout_height="300dp" />
        
</LinearLayout>

В коде Activity инициализируйте Compose:

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        val composeView = findViewById<ComposeView>(R.id.compose_view)
        composeView.setContent {
            MaterialTheme {
                Column {
                    Text("Hello from Compose!")
                    Button(onClick = { /* ... */ }) {
                        Text("Click me")
                    }
                }
            }
        }
    }
}

Способ 2: AbstractComposeView для переиспользуемых компонентов

Для более сложных случаев создайте кастомный ComposeView:

class MyComposeView(context: Context, attrs: AttributeSet? = null) :
    AbstractComposeView(context, attrs) {
    
    override fun Content() {
        MaterialTheme {
            // Ваша Compose UI
            Column {
                Text("Reusable Compose Component")
                Button(onClick = { }) {
                    Text("Action")
                }
            }
        }
    }
}

Теперь используйте в XML как обычный View:

<com.example.app.MyComposeView
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

Способ 3: Fragments с Compose

Создайте Fragment, который использует ComposeView как корневой элемент:

class ComposeFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View = ComposeView(requireContext()).apply {
        setContent {
            MaterialTheme {
                ComposeUI()
            }
        }
    }
}

@Composable
fun ComposeUI() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
    ) {
        Text("Fragment with Compose", style = MaterialTheme.typography.headlineMedium)
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = { /* ... */ }) {
            Text("Click")
        }
    }
}

Обмен данными между XML Views и Compose

Передача данных в Compose:

class MainActivity : AppCompatActivity() {
    private val viewModel: MyViewModel by viewModels()
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        val composeView = findViewById<ComposeView>(R.id.compose_view)
        composeView.setContent {
            val uiState by viewModel.uiState.collectAsState()
            
            MaterialTheme {
                MyComposeScreen(uiState) { action ->
                    viewModel.handleAction(action)
                }
            }
        }
    }
}

Обратные вызовы из Compose в Activity:

composeView.setContent {
    MaterialTheme {
        Button(onClick = {
            // Вызов методов Activity
            (context as? MainActivity)?.showToast("Clicked")
        }) {
            Text("Click me")
        }
    }
}

Лучше использовать ViewModel для связи

class MainActivity : AppCompatActivity() {
    private val viewModel: SharedViewModel by viewModels()
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        val composeView = findViewById<ComposeView>(R.id.compose_view)
        composeView.setContent {
            val state by viewModel.state.collectAsState()
            
            MaterialTheme {
                ComposeScreen(
                    state = state,
                    onAction = { viewModel.onAction(it) }
                )
            }
        }
    }
}

@Composable
fun ComposeScreen(state: UIState, onAction: (Action) -> Unit) {
    Column {
        Text(state.title)
        Button(onClick = { onAction(Action.ButtonClicked) }) {
            Text("Click")
        }
    }
}

Зависимости в build.gradle

dependencies {
    // Compose
    implementation 'androidx.compose.ui:ui:1.5.0'
    implementation 'androidx.compose.material3:material3:1.0.0'
    implementation 'androidx.compose.ui:ui-tooling:1.5.0'
    
    // Integration with Activities
    implementation 'androidx.activity:activity-compose:1.7.0'
    
    // ComposeView для встраивания
    implementation 'androidx.compose.runtime:runtime:1.5.0'
}

Разница между подходами

Migration Strategy

Основная стратегия миграции проекта:

1. Фаза 1 — добавьте Compose для новых экранов
2. Фаза 2 — постепенно встраивайте Compose компоненты в существующие экраны через ComposeView
3. Фаза 3 — перепишите целые экраны на Compose
4. Финал — полная миграция на Compose

Важные замечания

• ComposeView создаёт отдельный Composition для каждого экземпляра
• Убедитесь, что используется одна версия Compose Runtime во всём проекте
• ViewModel и LiveData/StateFlow работают отлично с Compose
• Производительность гибридных приложений зависит от количества ComposeView экземпляров

Заключение: Compose легко встраивается в XML проекты через ComposeView, что позволяет постепенную миграцию без переписывания всего приложения сразу.