Android Jetpack Compose(Beta)의 Pathway 노트 대략적인 이해

배경.

Jetpack Compose의 Dev Challenge가 열리고 있습니다.

이거요.　 https://developer.android.com/dev-challenge

사은품 받고 싶으니까 도전해보세요.

픽셀5를 원하지만 엄격한 것 같아요.

이번 주 건 냈으니까 미리 메모해 둬.

컨텐트

Jetpack Compose의 Pathway

Pathway 여기 있습니다.
https://developer.android.com/courses/pathways/compose

개요

1.Compose 소개

지금까지는 XML을 정의하여 상태를 결합하는 형식이었습니다.

시야와 상태의 연관성을 잊기 쉽거나 예상치 못한 시간에 업데이트를 하여 유지보수성을 떨어뜨린다.

따라서 선언 UI로 이동합니다.

Compose의 장점은 컨디션이 없다는 것입니다.도중에 데이터를 교환하고 행동을 바꾸지 않습니다.imutable의 곳

상태가 변경되면 Compose 함수를 다시 호출하여 UI에 새 데이터가 다시 생성됩니다

.

UI 트리 전체를 다시 호출하면 비용이 많이 듭니다.Compose에서 새 입력에 따라 다시 컴파일하면 수정될 수 있는 함수나 λ만 호출하고 나머지는 건너뜁니다.너는 정말 아이큐구나.

따라서 재조합 정지는 건너뛸 가능성이 있음을 식별하고 변환 가능한 함수의 집행에 의존하여 발생하는 부작용에 의존할 수 없다.

예를 들어 아래의 동작은 모두 위험한 부작용이다.승멱 등성을 유지하세요.

일시 중지된 공유 객체에 쓰기

일시 중단 시 데이터 모니터링 및 업데이트

확인 중 공유 설정 업데이트

조합할 수 있는 함수는 임의의 순서에 따라 호출되기 때문에 순서대로 조합할 수 없다.

여러 번 불려올 수도 있어요.부작용 안돼.

2. Compose의 기본 사용 방법

첫 번째 설정은 여기를 참조하십시오.
https://developer.android.com/jetpack/compose/setup

Android Studio는 Canary(2021/26시) 사용

build.gradle의 설정은 쓴 설정에 따라

다음은 New->New Project->Compose Activity
및 Compose를 사용하는 buildgradle은 기본적으로 다 준비되었으니 이쪽으로 쓰세요.

기본적으로 setContext{}에 Compose 함수를 설정하면 UI를 알릴 수 있습니다.

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Text("Hello world!")
        }
    }
}

방법에 @Compoosable를 추가하여 변환 가능한 함수로 처리할 수 있습니다.

@Composable
fun Greeting(name: String) {
    Text (text = "Hello $name!")
}

@Compoosable 방법으로 UI를 선포하고 데이터에 따라 이 @Compoosable 방법을 기본 형식으로 부른다.

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Greeting("Android")
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text (text = "Hello $name!")
}

3. Compose 구성 요소

다음 어셈블리 그룹이 자주 나타납니다.

Surface

요소의 배경색을 설정할 수 있습니다.

        setContent {
            ComposeSampleTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.primary) {
                    Greeting("Android")
                }
            }
        }

이렇게 하면 배경색이 이렇습니다.

colors.백 그라운드로 만들어주세요.

        setContent {
            ComposeSampleTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background) {
                    Greeting("Android")
                }
            }
        }

자동으로 문자 색상이 됩니다.이는 primary 설정을 했기 때문에 Theme 클래스의 onProimary를 적용한 것이다.여기 설정을 하려면 Theme 레벨을 변경할 필요가 있어요.
그런 게 있어.

fun lightColors(
    primary: Color = Color(0xFF6200EE),
    primaryVariant: Color = Color(0xFF3700B3),
    secondary: Color = Color(0xFF03DAC6),
    secondaryVariant: Color = Color(0xFF018786),
    background: Color = Color.White,
    surface: Color = Color.White,
    error: Color = Color(0xFFB00020),
    onPrimary: Color = Color.White,
    onSecondary: Color = Color.Black,
    onBackground: Color = Color.Black,
    onSurface: Color = Color.Black,
    onError: Color = Color.White
): Colors

Modifiers

UI의 요소에 Padding 등이 표시되도록 지시할 수 있습니다.

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!", modifier = Modifier.padding(24.dp))
}

지정하면 이런 느낌이에요.

기타

와이드 디스플레이의 fillMaxWidth()(fillMaxHeight)

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!", modifier = Modifier.padding(24.dp).fillMaxWidth())
}

클릭 이벤트의clicable 설정 ()

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!", modifier = Modifier.padding(24.dp).fillMaxWidth().clickable {
        /* TODO */
    })
}

스크롤 가능한 Scrollable

설정

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!", modifier = Modifier
        .padding(24.dp)
        .fillMaxWidth()
        .scrollable(
            rememberScrollState(),
            orientation = Orientation.Horizontal
        ) 
        .clickable {
            /* TODO */
        })
}

조정align

 Column(
            modifier = Modifier
                .padding(start = 8.dp)
                .align(Alignment.CenterVertically)
        ) 

clip

있다

    Row(modifier
        .padding(8.dp)
        .clip(RoundedCornerShape(4.dp)) // 4dp角丸
        .background(MaterialTheme.colors.surface)
        .clickable(onClick = { /* Ignoring onClick */ })
        .padding(16.dp)
    ) {
     

등.자주 나오는 것 같아요.

Column (Row)

선언에 의하면 이 요소는 세로로 축적되어야 한다고 한다.Lierlayout의 oricontation과 같은 분위기.또한 Row는 horizontal입니다.

Surface(color = MaterialTheme.colors.primary) {
    Column {
        Greeting("Android")
        Divider(color = Color.Black)
        Greeting("there")
    }
}

Divider

분할선 그은 놈.Color를 지정할 수 있습니다.

animateColorAsState

상태에 따라 색상을 추가하여 애니메이션 변경

@Composable
fun Greeting(name: String) {

    var isSelected by remember { mutableStateOf(false) }
    val backgroundColor by animateColorAsState(if (isSelected) Color.Red else Color.Transparent)

    Text(text = "Hello $name!", modifier = Modifier
        .padding(24.dp)
        .fillMaxWidth()
        .scrollable(
            rememberScrollState(),
            orientation = Orientation.Horizontal
        )
        .background(backgroundColor)
        .clickable(onClick = { isSelected = !isSelected }))
}

Box

어셈블리를 중첩하려면 를 사용합니다.

Shape

익숙한 Shape.어셈블리 모양을 변경하려면 다음을 수행합니다.

@Composable
fun PhotographerCard() {
    Row {
        Surface(
            modifier = Modifier.size(50.dp),
            shape = CircleShape,
            color = MaterialTheme.colors.onSurface.copy(alpha = 0.2f)
        ) {
            // Image goes here
        }
        Column {
            Text("Alfred Sisley", fontWeight = FontWeight.Bold)
            CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
                Text("3 minutes ago", style = MaterialTheme.typography.body2)
            }
        }
    }
}

CircleShape은 Rounded Corner Shape(58)의 정의입니다.각환을 각환으로 만들려면 라운드 코너 셰이프(8.dp)를 넣으면 된다.

Scaffold

비계이걸 착용하면 소재 디자인이 적용됩니다.

    Scaffold(
        topBar = {
            TopAppBar(
                title = {
                    Text(text = "LayoutsCodelab")
                },
                actions = {
                    IconButton(onClick = { /* doSomething() */ }) {
                        Icon(Icons.Filled.Favorite, contentDescription = null)
                    }
                }
            )
        }
    ) { innerPadding ->
        BodyContent(Modifier.padding(innerPadding))
    }

topBar

툴바 같은 놈.타이틀과 액션이 추가되었습니다.

Compose 상태 정보

무상태라지만 지금 클릭했는지도 갖고 싶은 게 있어요.
이 경우 mutaate Of와 remember를 사용하면 재조종되더라도 상태가 유지된다.

    var isSelected by remember { mutableStateOf(false) }
    val backgroundColor by animateColorAsState(if (isSelected) Color.Red else Color.Transparent)

또한 피질도 복원하고 싶으면 리멤버Saveable 사용

    var isSelected by rememberSaveable { mutableStateOf(false) }
    val backgroundColor by animateColorAsState(if (isSelected) Color.Red else Color.Transparent)

상태 응답

내용이 이런 상태를 유지하면 재활용과 테스트가 어렵기 때문에 상태 응답이 필요하다.

@Composable
fun screen() {
  var isSelected by rememberSaveable { mutableStateOf(false) } 
  content(isSelected = isSelected)
}

@Composable
fun Content(isSelected : Boolean) {
  val backgroundColor by animateColorAsState(if (isSelected) Color.Red else Color.Transparent)
}

상태는 다음과 같은 세 가지 방법으로 선포할 수 있다.

val mutableState = remember { mutableStateOf(default) }
var value by remember { mutableStateOf(default) }
val (value, setValue) = remember { mutableStateOf(default) }

Desuger로 얻기(value,setValue)는 아래를 가리킨다.

value = 現在の値
setValue = 今から代入する値

UI 구성에서 내부 상태 분리

예를 들어 처음부터 복선상자에 값을 입력하려는 요구가 생길 수 있습니다.다만 그것은 사용하는 사람에 따라 다르다.이 경우 과부하 시 제어할 수 있는 함수를 정의한 다음 무상태 함수와 상태 완전 함수로 나뉜다.

재생성 후 UI 상태 복원

Compose의 Layout에 주목

Modifier의 순서가 매우 중요하다.

clickable 다음이padding인지 padding 다음이clicable인지 클릭할 수 있는 범위가 다르다

SlotsAPI를 사용하여 구성 요소를 도안화할 수 있습니다.

같은 Buton에서 안에 있는 것만 바꾸고 싶을 때가 많죠

매번 정의하면 어딘가에서 실패하겠죠

그래서 템플릿을 만들 수 있다

Scaffold를 사용하면 기본 소재 디자인의 레이아웃 구조에서 UI를 실현할 수 있다.

에도 툴바의 탑앱바가 있다.액션도 추가할 수 있어요.

Scroll을 간단하게 구현할 경우 설정이 Colum 설정으로 스크롤됩니다.

하지만 화면에 보이지 않는 부분을 재현하는 것이어서 좋지 않다.

이 문제를 회피하려면 레이지콜럼을 사용하세요.

scrollState.animateScrollToItem()에서 지정된 위치로 스크롤할 수 있습니다.

응용 프로그램 특유의 레이아웃을 만들고 싶을 때 사용자 정의 레이아웃을 만들 수 있다.

코스트레인Layout도 할 수 있어요.

Compoose의 규칙 중 하나로서 두 번 이상 아이를 측정하지 않는 경우가 있다.

아이를 미리 측정하고 싶다면.preferredHeight()를 사용하여 측정합니다.

요약(소감)

느낌이 좋아요.좋다

미리보기가 너무 느려서 지금 보통 실행하는 게 더 빠를 수도 있어요.

Composie에도 Navigation이 있는데 이걸 쓰면 Fragment가 필요 없을 것 같은데 그게 무엇보다 중요해요.

추기

아직 절반 정도밖에 하지 못했기 때문에 조금만 더 앞으로 가면 추서한다.