Text
말 그대로 텍스트를 화면에 나타내고자 할 때 사용된다.
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
SOPTComposeStudyTheme {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
Text(text = "Hello World!")
}
}
}
}
}
Text도 Composable 함수이기 때문에 매개변수들을 살펴보자.오… 많다. 하나씩 하나씩 뽀개보자.
text
말 그대로 text 값이다.
String타입을 넣게 된다면 해당 글자가 출력된다.
Text( text = "이런값 저런값 넣어보세용" )
modifier
이건 할 말이 너무 많다.
따로 한번 글을 써야겠다.
color
말 그대로 color. 색깔을 조정하기 위한 친구다
Default값은 Theme에 따라 하나씩 있다.
Theme의 darkTheme가 false라면 검은색, true라면 흰색이다.
내가 원하는 색을 쓰기 위해서는 여러가지 방법이 있다.
1. 기본적으로 선언된 색상 사용
Text(
text = "Hello World!",
color = Color.Red
)이렇게 Color에 .으로 접근한다면 기본적으로 설정된 많은 색을 쓸 수 있다.
2. 직접 선언
Text(
text = "Hello World!",
color = Color(0xFF1C1B1F)
)색상 코드를 입력해서 원하는 색을 선언해서 쓸 수 있다.
색상 코드는 참고로 11223344 와 같은 8자리로 구성된다.
00 : 투명도? 선명도?
11 : Red값
22 : Green값
33 : Blue값
3. 미리 만들어 둔 값을 사용하기
Text(
text = "Hello World!",
color = Purple40
)이렇게 Color에 .으로 접근한다면 기본적으로 설정된 많은 색을 쓸 수 있다.
저 컬러 값은 어디 저장돼있는 걸까??
여기있는 Color파일에 들어있다. 내가 쓰고싶은 컬러를 저기에 미리 선언해두고, 나중에 쓰면 된다.
- 기존의 android를 할 때 처럼 xml에 저장해두고 쓰면 안되나요??
-> 가능은 합니다. 근데 권장되진 않아요. 코드상에 Color 객체를 정의하는 방식이 표준이 됐다고 하네요
- 그럼 기존의 방법은 왜 남겨뒀나요??
→ 한번에 다 고치기 번거로우니까. 기존 방법도 제공은 하니까 천천히 마이그레이션 하라는 갓드로이드의 세심한 배려~
4. 매번 설정하기 귀찮은 개고수들이 쓰는 방법
Theme로 이동해보자.
이 코드는 다크모드 혹은 라이트 모드일 때의 디폴트 컬러들을 설정해 둔 곳이다.
저렇게 설정을 한번 해둔다면 배경색과 그 위에 올라갈 모듈들의 배경색 등을 미리 설정해둘 수 있다. 해두면 상당히 편하기 때문에 이부분은 개인적으로들 공부해 보시는걸 추천한다.
fontSize
글자 크기를 나타낸다.
xml에서 하던 것과 같은 방법으로 sp로 나타낸다.
하지만, 숫자 뒤에 반드시.을 붙여야한다.
Text(
text = "Hello World!",
fontSize = 12.sp
)
fontSize
Normal과 Italic 두개가 있다. 기본값은 Normal이고, Italic을 적용하면 애가 기우뚱 한다.
대충 옆으로 넘어가는 글자 하고싶음 이탤릭 하면 된다.
Text(
text = "Hello World!",
fontStyle = FontStyle.Italic
)
/*
fontStyle = FontStyle(0) // 어떤 숫자가
fontStyle = FontStyle(1) // Italic일까요
위와 같은 방식으로 사용 가능하다.
하지만 좋은말로 할때 쓰지 말자...
*/
fontSize
글자의 두께를 설정할 때 사용한다
뭐 light는 가벼우니까 얇을거고 Bold는 두꺼울거고 W로 시작하는건 대충 숫자가 클수록 두껍다
fontFamily
폰트를 매번 모든 텍스트마다 설정하기 귀찮으니까 한번에 설정해두고 적용시키는 방법이다.
그럼 저건 어떻게 만들까?
2023.07.27 - [Android/Jetpack Compose] - [Jetpack Compose] 폰트 적용법
[Jetpack Compose] 폰트 적용법
안드로이드 어플을 개발하다보면 디자인이 참 중요하다. 사실 모든 프론트가 다 중요하다. 그중에서 큰 영향을 끼치는 것 중 하나가 폰트다. 예쁜디자인에 구린 폰트가 들어있는것만큼 화나는
naemamdaelo.tistory.com
과거의 내가 쓴 글을 참고해보자.
letterSpacing
텍스트 사이의 간격을 만드는 방식이다.
단위는 sp
Text(
text = "Hello World!",
letterSpacing = 5.sp
)
textDecoration
UnderLine이나 LineThrough를 설정하고자 할 때 사용된다.
Text(
text = "Hello World!",
textDecoration = TextDecoration.LineThrough
)
textDecoration
텍스트의 범위가 어느정도 있을 경우 어느 방향에 정렬을 할 지 정할 때 사용한다.
Text(
text = "Hello World!",
textAlign = TextAlign.End
)
이렇게 포인트가 오른쪽부터 글자가 채워지는게, 이런건 Align을 End로 설정하면 된다.
lineHeight
letter Spacing이 글자 사이의 간격을 만드는 방식이었다면 이것은 줄간 간격을 만드는 것이다.
이것도 단위는 sp
Text(
text = "First Line\nSecond Line",
lineHeight = 100.sp
)
overflow
글자가 특정 범위를 넘어갔을 때 자동으로 처리해주는 옵션이다.
Clip : 잘라서 보여주는 옵션(기본값)
Visible : 범위 밖으로 모두 보여주는 옵션
Ellipsis : …으로 표시
Text(
text = "Hello Kotlin",
modifier = Modifier
.size(100.dp, 65.dp)
.background(Color.Blue.copy(alpha = 0.5f)),
fontSize = 35.sp,
overflow = TextOverflow.Ellipsis
)
softWrap
자동 줄바꿈을 활성화 시키는 기능이다.
Text(
text = "Hello Kotlin",
fontSize = 92.sp,
softWrap = true
)
maxLines
최대 줄 수를 설정.
그 이상 넘어갈 경우 무시됨.
Text(
text = "Hello Kotlin\nHello Compose\nHello SOPT",
fontSize = 24.sp,
maxLines = 2
)
onTextLayout
텍스트가 화면에 그려진 후의 정보를 제공하는 함수다.
쉬운 예시와 함께 이해해보자.
글자의 가로 범위만 정해두고, 세로는 유동적으로 설정했다고 하자. 그렇다면 사용자의 입력에 따라 줄 수가 유동적으로 변경된다. 이때, onTextLayout에서 줄 수를 카운트해 줄 수 있다.
var lineCount by remember { mutableStateOf(0) }
Text(
text = "Jetpack Compose는 Android 개발을 위한 현대적인 선언적 UI 도구 키트입니다.",
onTextLayout = { layoutResult ->
lineCount = layoutResult.lineCount
}
)
Text(text = "Line count: $lineCount")
style
style글자를 꾸미기 위한 모든 방법을 다 쓸 수 있다.
사실 이거 하나면 위에있는 내용들이 어지간하면 다 해결된다.