Jetpack Compose 시작 단계
18717 단어 AndroidJetpackJetpack Composetech
독자 대상
안드로이드 개발을 조금 배웠지만, 제팩 컴포즈를 거의 시도하지 않은 엔지니어를 대상으로 한 글입니다.입문도 입문이야, 정말 첫걸음이야.
!
그나저나 젠은 이번이 처음이야.나는 앞으로 Compose 주위의 보도를 조금씩 쓰고 싶다.
컨텐트
환경 구조
아래를 보는 것이 가장 좋다.
그럼에도 불구하고 나는 이번에 쓸 것들을 좀 더 간단하게 쓸 것이다.
Android Studio 메뉴 File -> New Project -> Enpty Compose Activity 를 선택하고 Next 를 누릅니다.
프로젝트를 만들기 위해 적당한 값을 입력하십시오.
만들어진 소스
이런 소스를 만들 수 있다.
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
SampleComposeTheme {
// A surface container using the 'background' color from the theme
Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background) {
Greeting("Android")
}
}
}
}
}
@Composable
fun Greeting(name: String) {
Text(text = "Hello $name!")
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
SampleComposeTheme {
Greeting("Android")
}
}
뷰 미리 보기
Jetpack Compose에서는 애플리케이션을 장치에 설치하지 않더라도 Android Studio 미리 보기 화면에서 UI를 확인할 수 있습니다.여러 미리보기를 동시에 볼 수 있습니다.
MainActivity.kt 파일을 열고 스플릿을 마우스 오른쪽 버튼으로 클릭하면 미리보기 화면이 표시됩니다.여기서 Build & Refresh를 누르면 미리보기 화면을 볼 수 있습니다.
이것은
@Preview의 변형 함수의 결과를 보여 준다.현재의 미리보기는'Hello Android'와 같은 Text 보기만 보일 뿐, 전체적인 화면을 볼 수 있도록 다음과 같은 내용을 바꾸어 보세요.SampleComposeTheme만 Greeting() 함수로 이동합니다.class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
Greeting("Android")
}
}
}
@Composable
fun Greeting(name: String) {
SampleComposeTheme {
Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background) {
Text(text = "Hello $name!")
}
}
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
Greeting("Android")
}
참고로 ②왼쪽 아이콘은 상호작용 모드입니다.
이 글은 처리하지 않지만 상호작용 모드는
샌드박스 환경(다른 미리보기와 분리된 상태)에서 실행됩니다.요소를 클릭하거나 사용자를 입력하거나 미리보기에서 애니메이션을 재생할 수 있습니다.이 모드를 사용하면 여러 가지 호환 가능한 상태와 조작을 간단하게 테스트할 수 있습니다. 예를 들어 복선상자를 열고 닫는 것입니다.
!
상호작용 모드의 제한 사항
여러 미리보기를 설명할 수 있습니다.
예를 들어, 어두운 모드의 ON/OFF를 동시에 확인할 수 있습니다.
@Preview(
uiMode = Configuration.UI_MODE_NIGHT_NO,
showBackground = true
)
@Composable
fun DefaultPreview() {
Greeting("Android")
}
@Preview(
uiMode = Configuration.UI_MODE_NIGHT_YES,
showBackground = true
)
@Composable
fun DarkPreview() {
Greeting("Android")
}
소스 설명
기본적
@Composable 초대장이 있는 함수를 UI로 변환합니다.onCreate() 내의 매개 변수setContent에서 반드시 @Composable의 함수를 지정해야 한다.@Composable 초대장이 있는 함수에 매개 변수를 전달할 수 있습니다.@Composable 초대장이 있는 함수에서 초대장이 있는 함수를 호출하여 UI의 수준을 구성합니다.이 계층 구조를 사용하면 복잡한 UI를 구현할 수 있습니다.@Composable 초대가 있는 함수는 멱이다.같은 매개 변수를 가진 함수가 같은 결과를 되돌려줍니다.@Composable 초대된 함수는 부작용이 없습니다.이 함수는 글로벌 변수와 Instan 변수 등을 변경할 수 없습니다.SampleComposieTheeme 함수 정보
이것도 단지
@Composable 함수일 뿐이다.@Composable 함수MaterialTheme.Compose에서 이러한 함수를 만드는 것은 Color, Shape, Type 등을 관리하는 것이 일반적인 수단이다.
private val DarkColorPalette = darkColors(
primary = Purple200,
primaryVariant = Purple700,
secondary = Teal200
)
private val LightColorPalette = lightColors(
primary = Purple500,
primaryVariant = Purple700,
secondary = Teal200
/* Other default colors to override
background = Color.White,
surface = Color.White,
onPrimary = Color.White,
onSecondary = Color.Black,
onBackground = Color.Black,
onSurface = Color.Black,
*/
)
@Composable
fun SampleComposeTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
content: @Composable () -> Unit
) {
val colors = if (darkTheme) {
DarkColorPalette
} else {
LightColorPalette
}
MaterialTheme(
colors = colors,
typography = Typography,
shapes = Shapes,
content = content
)
}
서피스 함수 について
는 재료 설계에서 서피스를 나타내는 함수입니다.
재료 디자인의 중심 은유.Surface는 높이가 있어 다른 Surface와의 시각적 관계, 그리고 Surface의 그림자를 관리한다.
재료 설계에서 Surface의 자세한 내용은 다음 URL에 기재되어 있습니다.
Surface의 역할은 문서에서 다음과 같습니다.
modifier 정보
@Composable 함수 (= 이후 가용성) 는 거의 모두modifier 파라미터를 가지고 있다.일본어로 쓰면 수식자.코리페 장식이 가능합니다.
아래와 같이 할 수 있다.
이번에는
@Composable로 기술되어 있기 때문에 Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background)에 따라 모든 종횡용 서브레이아웃을 매립한다.!
modifier의 순서를 지정하는 것이 중요합니다.예컨대
fillMaxSize()패딩도 클릭 구역에 있습니다.Modifier.clickable(onClick = onClick).padding(padding) 클립 영역에는 패딩이 포함되지 않습니다.총결산
간단한 소스지만 하나하나 읽어보면 많은 걸 배울 수 있을 거예요.
우선 기본을 간단하게 기억하고 각 요소에 조금씩 깊이 들어가면 더욱 잘 기억할 수 있다.
이 보도의 코드에서 본 장점은
이 보도를 나는 모른다. 이외에
이러한 선언적 UI는 매우 큰 이점을 제공합니다.
이 기사를 계기로 Jetpack Compose에 사람이 늘었으면 좋겠다.
다음에도 초보자를 위한 기사를 쓰고 싶어요.
Reference
이 문제에 관하여(Jetpack Compose 시작 단계), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/ko2ic/articles/0a141f9e5a0d39텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
