[Kotlin] Compose

Compose? 구성하다, 조립하다

Composable? 구성 가능한

---

ComponentActivity

setContent {}

Text("apple")

@Composable

• Composable functions that return Unit should start with an uppercase letter

@Preview

• (Add the @Preview annotation before @Composable.)
• (the composable function must not take any parameters.)

shift + option + command + R

Column {}

Column(Modifier.padding(16.dp))

Image()

painterResource(R.drawable.header)

Modifier.height(180.dp)

Modifier.fillMaxWidth()

ContentScale.Crop : 알아서 비율에 맞게 잘림

Spacer(modifier = Modifier.height(16.dp))

Modifier.clip(shape = RoundedCornerShape(4.dp))

MaterialTheme {}

typography.h6

typography.body2

TextOverflow.Ellipsis

---

MainActivity.kt

package com.example.composeexample

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.MaterialTheme
import androidx.compose.material.MaterialTheme.typography
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            NewStory()
        }
    }
}

@Composable
fun NewStory() {
    MaterialTheme {
        Column(
            Modifier.padding(16.dp)
        ) {
            Image(
                painter = painterResource(R.drawable.header),
                contentDescription = null,
                modifier = Modifier
                    .height(180.dp)
                    .fillMaxWidth()
                    .clip(shape = RoundedCornerShape(4.dp)),
                contentScale = ContentScale.Crop
            )

            Spacer(modifier = Modifier.height(16.dp))

            Text("A day wandering through the sandhills " +
                    "in Shark Fin Cove, and a few of the " +
                    "sights I saw",
                style = typography.h6,
                maxLines = 2,
                overflow = TextOverflow.Ellipsis)
            Text("Davenport, California",
                style = typography.body2)
            Text("December 2018",
                style = typography.body2)
        }
    }
}

@Preview
@Composable
fun DefaultPreview() {
    NewStory()
}

프리뷰

 

 

 

 

 

 

 

 

참조

https://developer.android.com/jetpack/compose/tutorial

Android 개발자  |  Android Developers