Card, WebView, Surface 사용하기

1. Card 사용하기

MainActivity를 아래와 같이 수정한다.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ChromeApplicationTheme {
                Column() {
                    CardPractice("1")
                    CardPractice("2")
                }
            }
        }
    }
}

@Composable
fun CardPractice(text : String) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .height(100.dp)
            .padding(10.dp),
        shape = RoundedCornerShape(50.dp),
        border = BorderStroke(1.dp, Color.Black),
        elevation = CardDefaults.cardElevation(
            defaultElevation = 15.dp
        )
    ) {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(Color.Cyan),
            contentAlignment =  Alignment.Center
        ) {
            Text(
                text = text,
                fontSize = 20.sp
            )
        }
    }
}


@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    ChromeApplicationTheme {
        Column() {
            CardPractice("1")
            CardPractice("2")
        }
    }
}

• RoundedCornerShape: 꼭짓점을 둥글게 만드는 데 사용되는 속성으로, dp 값은 둥근 모퉁이의 반지름을 의미한다.
• BorderStroke: 테두리의 스타일과 두께를 지정한다.
• elevation: Card에 음영(elevation) 효과를 적용한다.

2. WebView 사용하기

WebView란, 모바일 애플리케이션 내에서 웹 콘텐츠를 표시하고 웹 페이지를 렌더링하기 위한 컴포넌트 또는 위젯을 의미한다. WebView를 사용하는 방법을 아래의 코드를 통해 학습해보자.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ChromeApplicationTheme {
                FirstWebView("https://www.naver.com/")
            }
        }
    }
}

@Composable
fun FirstWebView(url : String) {
    AndroidView(factory = {
        WebView(it).apply {
            loadUrl(url)
        }
    })
}


@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    ChromeApplicationTheme {
        FirstWebView("https://www.naver.com/")
    }
}

앱을 실행하자마자 네이버 웹 페이지로 연결된다.

3. Surface 사용하기

1) Surface 기본 사용법

Surface는 UI 요소의 배경을 정의하고 그림자 효과를 적용할 수 있는 요소이다. 이번에도 마찬가지로 바로 코드를 보면서, Surface 사용법을 알아보기로 하자.

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

@Composable
fun SurfacePractice() {
    Surface(
        modifier = Modifier
            .fillMaxWidth()
            .padding(10.dp),
        color = Color.DarkGray,
        shape = RoundedCornerShape(20.dp),
        shadowElevation = 20.dp
    ) {
        Button(
            onClick = {

            },
            colors = ButtonDefaults.outlinedButtonColors(
                contentColor = Color.Yellow
            )
        ) {
            Text(
                text = "버튼"
            )
        }
    }
}


@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    ChromeApplicationTheme {
        SurfacePractice()
    }
}

• ButtonDefaults.outlinedButtonColors: 버튼의 Surface 색상과 동일한 색을 적용한다.

2) Surface를 활용한 Layout

SurfacePractice()를 아래와 같이 수정한다.

@Composable
fun SurfacePractice() {
    Surface(
        modifier = Modifier.fillMaxSize(),
        color = Color.LightGray,
        border = BorderStroke(3.dp, Color.Blue)
    ) {
        Column (
            modifier = Modifier
                .fillMaxSize()
                .padding(20.dp),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Surface(
                modifier = Modifier
                    .size(200.dp),
                color = Color.Red
            ) {
                Text(
                    text = "Surface 사용법"
                )
            }
            Spacer(
                modifier = Modifier
                    .height(20.dp),

            )
            Text(
                text = "숙지 완료!"
            )
        }
    }
}