Android Jetpack Compose — 탐색

이 기사는 Android 개발자가 작성했습니다.

Android 개발자라면 이미 Compose에 대해 들어봤을 것입니다. 어디에나 있으며 Android 커뮤니티가 이에 열광하는 모습을 보니 반갑습니다. 아직 들어보지 못한 사람들을 위해 Compose는 Android에서 UI 개발을 단순화하고 가속화하기를 희망하는 기본 UI를 빌드하기 위한 Android의 최신 툴킷입니다. 이 모든 것이 Kotlin에 있으므로 XML로 UI 코드를 작성하는 것을 잊어버릴 수 있습니다. 그것만으로도 😄에 흥분할 것입니다. official page을 확인하고 아직 시도하지 않았다면 시도하십시오.

그러나 잡담으로 충분하고 그것이 당신이 여기있는 이유이기 때문에 주제에 대해 이야기합시다.

Compose에서 탐색을 처리하는 방법

이미 알고 계시겠지만 Compose를 사용하여 탐색을 수행하는 공식적인 방법은 없습니다. 완전한 Compose를 사용하려면 직접 처리해야 하며 고통스럽습니다 🔨.

최소한 하나의 Activity(적어도 현재로서는)를 사용하지 않고 Compose로 앱을 수행할 수 없으므로 이를 이점으로 사용하고 Navigation jetpack 구성 요소를 사용합시다. 많은 멋진 기능이 있으며 현재 공식 권장 사항입니다. Android 앱에서 탐색을 처리하는 방법. 우리가 이것을 할 수 있는 방법을 확인합시다.

탐색 구성 요소 사용

Navigation 구성 요소를 시작하는 방법은 이 문서의 범위를 벗어나지만 official getting started 자습서를 따를 수 있습니다.

시작 대상 조각과 함께 MainActivity 설정이 있다고 가정합니다.
MainActivity의 레이아웃 파일은 다음과 같아야 합니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.fragment.app.FragmentContainerView 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:id="@+id/host_fragment_container"
    android:name="androidx.navigation.fragment.NavHostFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:defaultNavHost="true"
    app:navGraph="@navigation/nav_graph"
    tools:context=".ui.screens.MainActivity" />

그것이 우리에게 필요한 유일한 레이아웃 파일입니다. 약속해요 😂 .

조각 레이아웃 파일을 삭제하고 코드를 다음과 같이 업데이트할 수 있습니다.

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

    @Composable
    fun AwesomeComposable() {
        ...
    }
}

마법이 일어나는 곳입니다. 프래그먼트에 ComposeView을 사용하고 싶다고 말하고 setContent을 호출하여 Compose UI를 설정합니다. 레이아웃 파일이나 다른 보기가 필요하지 않습니다 👍.

그런 다음 이와 같은 조각을 더 만들고 nav_graph.xml 파일에 destinations 으로 추가하기만 하면 됩니다.

이제 다음을 호출하여 구성 가능한 함수 내에서 해당 대상으로 이동할 수 있습니다.
findNavController().navigate(R.id.your_action_here)
다음과 같이 기본 프래그먼트 클래스를 생성하여 이를 더욱 개선할 수 있습니다.

abstract class ComposeFragment : Fragment() {
    @Composable
    abstract fun ComposeContent()

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? = ComposeView(requireContext()).apply {
        setContent { ComposeContent() }
    }
}

다음과 같이 조각에 사용하십시오.

class SomeFragment : ComposeFragment() {
    @Composable
    override fun ComposeContent() {
        // your compose layout
    }
}

정돈된! 이제 조각을 사용하고 있다는 사실을 잊고 Compose에 집중하여 아름다운 UI 🌠를 작성하는 데 집중할 수 있습니다. 미치다!

전체 작성을 하려면 어떻게 합니까?

현재로서는 다음과 같은 2가지 옵션이 있습니다.

Jetpack Compose에 라우팅 기능을 추가하는 compose-router 라이브러리를 사용해 볼 수 있습니다.

내비게이션 시스템을 작성하세요. 이 작업을 수행하는 방법에 대한 몇 가지 예는 Jetpack Compose Samples을 확인하십시오.

그러나 현재로서는 여기에서 제안한 것처럼 성숙한 Navigation 구성 요소를 사용하고 Compose에서 탐색을 처리하는 공식적인 방법이 나올 때까지 기다리는 것이 가장 좋은 방법이라고 생각합니다. 물론, ComposeView (Compose에 비해 오래되었거나 구식 인 것 같습니다)와 함께 조각을 사용하지만 구성 가능한 기능의 내용을 설정하기 위해 프로젝트 어딘가에 항상 MainActivity가 있습니다. 잘 활용하십시오.

작성 코드를 바로 작성할 수 있는 main() 함수가 있으면 좋지 않을까요? 활동이나 조각이 필요하지 않습니까? 꿈을 꾸자 😄!

읽어 주셔서 감사합니다!

읽어주셔서 감사합니다. 저희에게 큰 의미가 있습니다! 또한 계속해서 여러 기술에 대한 흥미로운 기사를 계속해서 게시하는 것을 잊지 마십시오.

혹시 모르니, Coletiv는 Porto의 Elixir, Web, App(iOS & Android) 개발 전문 소프트웨어 개발 스튜디오입니다. 그러나 우리는 모든 종류의 일을 합니다. UX/UI 디자인, 소프트웨어 개발, 보안까지 책임집니다.

그래서 let’s craft something together?