JetpackCompose를 사용한 맞춤형 뷰

최근 화제가 된 제팩 컴포즈는 한 화면의 대응이 불안해 사용자 정의 시각으로 대응하고 싶어 기록을 시도했다.
움직인 수준이라 오류나 추천하지 않는 코드도 있을 수 있습니다

Build.gradle

코드 랩 및 Setup도 참조

buildscript {
    ext {
        compose_version = '1.0.0-alpha03'
    }
    ext.kotlin_version = "1.4.10"
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:4.2.0-alpha12'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}

allprojects {
    repositories {
        google()
        jcenter()
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

이것은 코드 실험실을 직접 사용하는 물건이다.
코튼 버전이 1.4 이상이면 괜찮을 거예요.

plugins {
    id 'com.android.application'
    id 'kotlin-android'
}

android {
    compileSdkVersion 30
    buildToolsVersion "30.0.0"

    defaultConfig {
        applicationId "com.example.statecodelab"
        minSdkVersion 21
        targetSdkVersion 30
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }
    kotlinOptions {
        jvmTarget = '1.8'
        useIR = true
        allWarningsAsErrors = false
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    buildFeatures {
        compose true
        viewBinding true
    }
    composeOptions {
        kotlinCompilerExtensionVersion "$compose_version"
        kotlinCompilerVersion "$kotlin_version"
    }
}

dependencies {
〜略〜
    implementation "androidx.compose.animation:animation:$compose_version"
    implementation "androidx.compose.foundation:foundation:$compose_version"
    implementation "androidx.compose.foundation:foundation-layout:$compose_version"
    implementation "androidx.compose.material:material:$compose_version"
    implementation "androidx.compose.material:material-icons-extended:$compose_version"
    implementation "androidx.compose.runtime:runtime-livedata:$compose_version"
    implementation "androidx.compose.runtime:runtime:$compose_version"
    implementation "androidx.compose.ui:ui:$compose_version"
    implementation "androidx.ui:ui-tooling:$compose_version"
}

tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinCompile).configureEach {
    kotlinOptions {
        jvmTarget = "1.8"
        freeCompilerArgs += [
                "-Xopt-in=kotlin.RequiresOptIn"
        ]
    }
}

이쪽도 코드 실험실과 거의 같지만 사용된 다른 프로그램 라이브러리의 영향allWarningsAsErrors이 사실로 설정되면 구축이 통과되지 않아 가짜로 변경되었다.

사용자 정의 보기

다만 Layout Inflater에서 Framelayout의 Layout을 발표했다.xml 불러오기
거기에 customView() 방법으로 만든 레이아웃이 삽입되어 있다.
나는 xml을 읽는 것은 소용없다고 생각하지만, 다른 방법을 찾지 못하기 때문에 이렇게 한다.
Fragment의 onCreateView처럼 View를 반환하면 그리는 경우ComposeView에 이런 반이 있습니다.

import android.content.Context
import android.util.AttributeSet
import android.view.LayoutInflater
import android.view.ViewGroup
import android.widget.FrameLayout
import androidx.compose.foundation.Text
import androidx.compose.material.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.Recomposer
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.setContent
import sobaya.example.allflow.R

class ComposeSample @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0,
    defStyleRes: Int = 0
) : FrameLayout(context, attrs, defStyleAttr, defStyleRes) {

    init {
        val view = LayoutInflater.from(context).inflate(R.layout.compose, this, true)
        (view as ViewGroup).setContent(Recomposer.current(), null) {
            MaterialTheme {
                customView()
            }
        }
    }

    @Composable
    fun customView() {
        Text(text = "TEST", color = Color.Black)
    }
}

이런 느낌에 쓸 수 있다.
※ CompooseView를 View로 건네면 그릴 수 있습니다

Layout.xml

ComposeView(requireContext()).apply {
    setContent {
	Text(text = "TEST", color = Color.Black)
    }

정말 아무것도 안 적혀있어요.

스크린

이렇게 표시

신경 쓰여서 포석의 구성을 봤는데 이런 내용이지만 상당히 깊어졌어요...

샘플 코드

https://github.com/sobaya-0141/AllFlow/tree/compose