[Android][Compose]Compose기초 (2) - Compose Text(TextView)

텍스트 속성 정리 -- (1)

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {

    var lineCount = 0
    var hasVisualOverflow = false
    var sizeWidth = 0
    var sizeHeight = 0
    var lineStartIndex = 0

    Text(
        text = "Hello $name!",                      //텍스트에 들어갈 내용
        fontSize = 60.sp,                           //텍스트 사이즈
        lineHeight = 60.sp,                         //텍스트 라인 높이
        color = Color.Black,                        //텍스트 색상
        textAlign = TextAlign.Center,               //텍스트 정렬
        fontFamily = FontFamily.Serif,              //텍스트 폰트 지정
        letterSpacing = 2.sp,                       //글자간 간격
        overflow = TextOverflow.Ellipsis,           //영역 초과시 말줄임(..)처리
        textDecoration = TextDecoration.Underline,  //텍스트 밑줄 처리
        softWrap = true,                            //줄바꿈 허용
        modifier = modifier                         //modifier객체
            .fillMaxWidth()                         //width를 화면 가득 채움
            .wrapContentHeight()                    //height를 내용만큼만 채움
            .padding(10.dp, 0.dp, 10.dp, 0.dp),     //텍스트 바깥 여백 설정 (Left, Top, Right, Bottom)
        onTextLayout = { result ->                  //텍스트가 그려진 후 호출되는 콜백
            lineCount = result.lineCount            //텍스트가 몇줄로 표시됐는지 리턴
            hasVisualOverflow = result.hasVisualOverflow    //텍스트가 잘렸는지 여부를 리턴 (...이 표시되는 경우 true)
            sizeWidth = result.size.width           //텍스트 width
            sizeHeight = result.size.height         //텍스트 height
            Log.d("onTextLayout","lineCount: ${lineCount}")
            Log.d("onTextLayout","hasVisualOverflow: ${hasVisualOverflow}")
            Log.d("onTextLayout","sizeWidth: ${sizeWidth}")
            Log.d("onTextLayout","sizeHeight: ${sizeHeight}")
        }
    )

onTextLayout -> 로그를 찍어보면 두번 호출되는것을 확인 할 수 있다. 

초기 레이아웃 예측 시 호출 -> 레이아웃 완료 후 호출 총 두번 호출 된다. 

텍스트가 다 그려진 후에 더보기 버튼이나 접기 버튼이 노출되어야 하는 상황이라면 onTextLayout안에서 노출을 시키면 될 듯 한데 동일한 코드가 두번 호출된다는게 비효율적인게 아닌가 싶다... 할거면 다 그려진 다음 한번만 호출하지 왜 두번호출되게 했을까?

두번 호출 하는 이유 

- 한 번만 호출하는 경우 예측이 틀린 경우 레이아웃 깨짐이나 재조정이 발생 할 가능성이 있음

- 두 번 호출함으로써 초기 렌더링 지연을 줄이고 렌더링 이후 정확한 상태 업데이트를 보장함

 

두번 째 호출에서 UI변경사항을 처리하고 싶은 경우에는
상태 플래그 변수를 저장해서 사용하는 방법과 LaunchedEffect를 사용하는 방법이 있는데 해당 방법은 천천히 알아보도록 하자

---

텍스트 위치 조정하기 -- (2)

화면 전체 가운데 정렬을 위해 Box를 추가하고 Alignment.Center값을 추가해주면 된다.

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {

    Box(modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = "Hello $name!",                      //텍스트에 들어갈 내용
            fontSize = 20.sp,                           //텍스트 사이즈
            color = Color.Black,                        //텍스트 색상
        )
    }
}

contentAlignment --> Alignment.CenterStart, Center, BottomCenter 등 속성값을 통해 텍스트의 위치를 제어할 수 있다.