search

fornewid / ConfDocs

Conference 내용 끄적끄적
4 stars 0 forks source link

Styling text in Compose #26

Closed fornewid closed 1 year ago

fornewid commented 1 year ago

https://youtu.be/_qls2CEAbxI

0

fornewid commented 1 year ago

2

이 세션에서는 샘플 채팅 앱인 Jetchat을 사용하여 채팅 말풍선의 스타일을 지정하고 다운로드 가능한 가변 글꼴을 사용하여 글꼴을 사용자 지정합니다. 또한 메시지가 특정 줄 수보다 길면 확장 가능하도록 만들 것입니다.

3

그런 다음 Message Box 스타일 지정으로 이동합니다. 그라데이션 테두리, 입력할 때 색상이 변하는 커서 또는 Custom Decoration Box를 제공하는 것은 어떻습니까?

fornewid commented 1 year ago

Text Typography block and Text parameters

시작하겠습니다.

4

디자이너가 Material 3 구성 요소를 사용하여 디자인을 제공했습니다.

5

앱의 타이포그래피를 구성하는 것으로 시작하여 디자인에 맞게 Material 기본 텍스트 스타일을 조정할 수 있습니다.

6

bodyLarge, Medium 및 Small과 같이 지정해야 하는 스타일에 대해 TextStyle 블록을 만들고 필요한 항목을 변경하여 이 작업을 수행합니다.

8

각 TextStyle을 사용하면 fontFamily, Weight, Size와 같은 매개변수를 사용하여 전체 텍스트의 스타일을 지정할 수 있을 뿐만 아니라 lineHeight, letterSpacing 등을 사용하여 전체 단락의 스타일을 지정할 수 있습니다. 이제 이러한 모든 매개변수로 구성된 bodyLarge 스타일이 있습니다.

9

채팅 bubble을 시작할 시간입니다. 구현하려는 디자인은 위와 같습니다.

10

따라서 채팅 메시지의 Text Composable을 열고 style 매개변수를 MaterialTheme.typography.bodyLarge로 설정합니다.

12

텍스트에 대한 특정 매개변수(예: 색상)를 사용자 지정해야 하는 경우, 데이터 클래스와 유사하게 스타일을 copy하고 필요한 항목을 custom할 수 있습니다. 또는 텍스트 컴포저블은 color, fontSize, fontFamily와 같은 가장 일반적인 스타일 지정 속성을 매개변수로 노출하므로 직접 설정할 수 있습니다.

fornewid commented 1 year ago

Material implementation

13

다음은 보내기 버튼입니다.

15

우리는 이것을 Button과 내부 Text Composable로 구현합니다. 앱을 실행하면 스타일을 구성하지 않고도 텍스트가 버튼으로 스타일을 지정하는 방법을 알고 있음을 알 수 있습니다. 굵은 흰색, 심지어 다른 문자 간격도 있습니다.

16

Material Button이 어떻게 작동하는지 살펴보겠습니다. Compose의 한 가지 좋은 점은 소스 코드를 탐색할 수 있고 모두 매우 읽기 쉬운 Kotlin 코드라는 것입니다. Button 컴포저블 내부에는 LocalTextStyle.current를 labelLarge로 구성하는 컴포지션 로컬을 생성하는 ProvideTextStyle에 대한 코드가 있습니다.

17

이제 Text 컴포저블을 살펴보면 해당 스타일이 LocalTextStyle.current로 기본 설정되어 있음을 알 수 있습니다. 즉, 컴포지션의 현재 부분에 구성된 스타일(이 경우 버튼의 labelLarge)을 채택합니다. 마찬가지로 기본 텍스트 색상은 버튼의 색상에 따라 LocalContentColor에서 제공하므로 자동으로 어두운 버튼에 밝은 텍스트를 표시하고 그 반대의 경우도 마찬가지입니다.

이 메커니즘을 사용하면 명시하지 않아도 앱 전체에 Material 구성 요소의 스타일을 지정할 수 있습니다.

fornewid commented 1 year ago

onTextLayout() API

이제 추가로 말풍선을 custom해 보겠습니다. 텍스트가 사용 가능한 공간에 맞지 않으면 줄임표와 전체 텍스트를 볼 수 있는 버튼을 표시합니다.

20

따라서 먼저 두 개의 매개 변수(8줄로 설정된 maxLines 및 오버플로 유형 줄임표)로 텍스트를 구성합니다. 이제 텍스트가 8줄보다 길면 줄임표가 표시됩니다.

8줄 이상의 텍스트가 있으면 어떻게 됩니까? 풍선을 확장하고 전체 메시지를 볼 수 있는 버튼을 추가합니다.

22

이를 위해 레이아웃 단계 후에 캡처된 측정 정보와 함께 텍스트 레이어 결과를 반환하는 onTextLayout lambda를 사용할 수 있습니다. hasVisualOverflow를 쿼리하면 적시에 UI를 변경하여 자세히 버튼을 표시할 수 있습니다.

23

이 호출은 컴포지션의 일부가 아니기 때문에 onTextLayout lambda 내부에서 UI를 허용하지 않습니다.

25

대신 재구성을 트리거하는 상태 변수를 변경한 다음, 이 상태 변수의 값에 따라 버튼을 표시할지 여부를 결정할 수 있습니다.

fornewid commented 1 year ago

Downloadable fonts

자, 이제 글꼴을 조금 가지고 놀면서 채팅 메시지 글꼴을 구성해 보겠습니다.

26

다음과 같은 Lobster Two 글꼴을 사용해 봅시다.

27

APK에 번들로 font를 추가하거나, 새로운 downloadable font API를 사용할 수 있습니다. 이렇게 하면 글꼴이 필요한 다른 앱에서도 글꼴을 사용할 수 있습니다.

그것을 사용하는 방법을 보자.

28

Google Font Provider를 구성하고 Google Font를 선택한 다음, Font가 로드되지 않는 경우를 대비하여 Font Fallback을 구축하기만 하면 됩니다. 그리고 타이포그래피 또는 개별 텍스트에 글꼴을 설정합니다.

콜백에 대해 걱정할 필요 없이 필요할 때 글꼴이 다운로드됩니다.

32

선택적으로 글꼴을 미리 가져와서 처음 사용하기 전에 사용할 수 있는지 확인할 수 있습니다.

이렇게 하려면 컴포지션에서 로컬 fontFamilyResolver를 가져오고 preload 메서드를 비동기적으로 사용합니다. 이 메서드는 Font Family가 완전히 미리 로드되거나 실패할 때까지 일시 중단됩니다.

성공하면 글꼴이 캐시되고 사용할 준비가 됩니다. 글꼴이 시간 초과되는 데 최대 몇 초가 걸릴 수 있습니다. fontFamilyResolver API에 대해 자세히 알아보려면 문서를 확인하세요.

fornewid commented 1 year ago

Variable Fonts

33 mov

가변 글꼴을 사용하면 동일한 글꼴 파일을 가져와 다양한 방식 또는 축으로 구성하여 완전히 다른 스타일을 만들 수 있습니다.

여기에서는 Weight 및 Slant와 같은 표준 축뿐만 아니라 Casual, Monospace 및 Cursive와 같은 사용자 정의 축이 있는 recursive라는 가변 글꼴을 사용하고 있습니다.

코드에서 가변 글꼴을 어떻게 구성합니까?

34

파일을 로컬로 다운로드하고 FontVariation API를 사용하여 필요한 축을 설정합니다. 그런 다음 이 글꼴을 글꼴 모음에 추가합니다. 예를 들어, 무게, 기울기 및 이와 같은 맞춤형 캐주얼 축을 설정하면 이 디자인이 됩니다.

자세한 내용은 FontVariation API 문서를 확인하세요.

fornewid commented 1 year ago

AnnotatedString

36

채팅 말풍선에 대한 기능이 하나 더 있습니다.

37

``로 감싼 텍스트의 스타일을 지정하고 font family와 배경색을 변경하여\ 코드 포맷과 다르게 스타일을 지정할 수 있기를 원합니다.

TextStyle을 사용하여 전체 텍스트의 스타일을 지정하는 방법에 대해 이야기했습니다. 이제 AnnotatedString을 사용하면 텍스트 또는 단락의 일부에 스타일을 지정할 수 있습니다.

fornewid commented 1 year ago

Styling TextField

41

이제 메시지 상자를 customize할 차례입니다.

42

TextField는 모든 기본 색상 재정의를 포함하여 여러 가지 스타일 지정 옵션을 허용합니다. 여기서는 이 TextField에 대해 focused/unfocused indicator 색상을 녹색과 주황색으로 설정합니다.

커서, 내용, 레이블, 아이콘, 선택 핸들 색상과 같은 선택 색상과 같은 모든 TextField 구성 요소의 색상과 모든 상태(포커스, 비포커스, 비활성화, 오류 모드)를 사용자 정의할 수 있습니다.

43

하지만 여기에 전체 테두리가 있는 이 디자인이 있다면 어떨까요? 이를 위해 outlinedTextField를 사용할 수 있고 이전에 outlinedTextFieldColors를 사용하여 했던 것처럼 모든 색상을 구성할 수 있습니다.

44

상자의 테두리를 더욱 사용자 지정하려는 경우 테두리 수정자가 도움이 될 것입니다. 여기서 우리는 TextField를 사용하고 있습니다. 브러시를 받는 border stroke를 생성할 때(이 경우에는 그래디언트 브러시를 사용함) 테두리의 두께와 모양을 CutCornerShape로 구성합니다.

fornewid commented 1 year ago

Styling BasicTextField

45

그러나 사용자 지정 색상, 커서, 장식을 포함하여 Material에서 완전히 벗어난 디자인을 받을 수 있습니다. 이 경우 다른 구성 요소를 함께 사용할 수 있습니다.

46

지금까지 Material Theme 구성 요소이며 Compose 아키텍처의 최상위 레이어에 있는 Text 또는 TextField로 작업했습니다. 그러나 더 많은 사용자 지정이 필요한 경우, 기본 레이어에서 BasicText 및 BasicTextField를 드롭다운하여 사용할 수 있습니다.

47

여기에 입력할 때 커서 색상이 녹색에서 빨간색으로 바뀌고 줄 끝에 가까워질수록 커서 색상이 바뀌는 디자인이 있습니다. BasicTextField에는 브러시 API로 커서 색상의 스타일을 지정하고 단색을 정의할 수 있는 cursorBrush 매개변수가 있습니다. gradient를 정의한 후, 글자 수 제한에 가까워지면 커서 색상이 바뀝니다.

49

마지막으로 TextField의 표시를 완전히 사용자 정의하려면 어떻게 해야 합니까?

여기에서는 custom background 및 leading icon을 설정합니다. 이를 위해 BasicTextField를 다시 사용하고 decorationBox를 설정할 수 있습니다. 이렇게 하면 TextField 주위에 아이콘, 구분선, 자리 표시자 등을 추가할 수 있습니다. background와 같은 modifier가 있는 행을 만들어 모양, 색상 및 패딩을 구성하고 Jetchat 아이콘을 추가한 다음 그 옆에 input을 추가합니다.

fornewid commented 1 year ago

50

자세히 알아보려면 다음 링크에서 문서와 Jetchat의 코드를 확인하십시오.

51

또한 새로운 LineHeight API, TextField 상태 관리, 텍스트 스타일 및 애니메이션과의 brush API 통합에 대한 텍스트 블로그 게시물을 확인할 수 있습니다.