ReadMoreTextView

2025년 06월 17일 (화) 드로이드나이츠 2025 발표자료입니다.
"ReadMoreTextView: 텍스트 '더보기' 기능 구현하기"
https://www.droidknights.dev/

Transcript

1. ReadMoreTextView: 텍스트 '더보기' 기능 구현하기 Sungyong An NAVER WEBTOON
2. Sungyong An NAVER WEBTOON GDE @fornewid
3. Link: https://github.com/webtoon/ReadMoreTextView ! য়ט ઱ઁח ਢొ Android য়೑ࣗझ ۄ੉࠳۞ܻ ҙ۲
4. 목차 C. Introduction G. View H. Compose M. Additional features
5. 목차 C. Introduction G. View H. Compose M. Additional features 요구사항 제품 ❌ 사용방법, 배포 ✅ 진행과정, 구현
6. C. Introduction
7. ؊ࠁӝ UXܳ ઁҕೞח ఫझ౟ ஹನք౟ Collapsed Expanded ReadMoreTextView?
8. ழޭפ౭
9. N઴ ੉࢚੉ݶ ݈઴੐ ֢୹. చ ೡٸ݃׮ ಟஜ/੽൨ ࢚కо ߸҃ػ׮. ӝദ ਃҳࢎ೦
10. ੽ഃ૓ ޙҳীࢲ …җ more੄ ࢚࢝җ ఫझ౟ ௼ӝо ׮ܰ׮. ٣੗ੋ ਃҳࢎ೦
11. SNS ীࢲ ൔ൤ ࠁ੉ח UX ۨಌ۠झ ఐ࢝
12. SNS ীࢲ ൔ൤ ࠁ੉ח UX ۨಌ۠झ ఐ࢝ ൔ൤ ࢎਊغח UX, ೞ૑݅ ೒ۖಬ ૑ਗ਷ হ׮. যڌѱ ҳഅ೧ঠ ೡө? $
13. Githubীࢲ য়೑ࣗझ ۄ੉࠳۞ܻܳ ଺ইࠄ׮. ۄ੉࠳۞ܻ ఐ࢝
14. Usage <com.borjabravo.readmoretextview.ReadMoreTextView android:layout_width="match_parent" android:layout_height="wrap_content" app:trimCollapsedText="Read more" app:colorClickableText="@color/colorPrimary" app:trimLines="2" app:trimMode="trimModeLine" /> bravoborja <kr.co.prnd.readmore.ReadMoreTextView android:layout_width="match_parent" android:layout_height="wrap_content" app:readMoreText="... Read more" app:readMoreColor="@color/colorPrimary" app:readMoreMaxLine="2" /> PRNDcompany
15. PRNDcompany ⚠ ӯ߅੉ח അ࢚੉ ੓׮
16. class ReadMoreTextView : AppCompatTextView { override fun setText(text: CharSequence?, type: BufferType?) { super.setText(text, type) doOnLayout { post { setupReadMore() } } } private fun setupReadMore() { if (needSkipSetupReadMore()) return originalText = text val adjustCutCount = getAdjustCutCount(readMoreMaxLine, readMoreText) val maxTextIndex = layout.getLineVisibleEnd(readMoreMaxLine - 1) val originalSubText = originalText.substring(0, maxTextIndex - 1 - adjustCutCount) text = buildSpannedString { append(originalSubText) color(readMoreColor) { append("… ؊ࠁӝ") } } } } PRNDcompany/ReadMoreTextView (4) (2) (3) (5) (1) Library
17. setText(originalText) setText(collapsedText) next frame skip next frame (1) (4) (5) PRNDcompany/ReadMoreTextView Library
18. bravoborja ✅
19. public class ReadMoreTextView extends TextView { @Override public void setText(CharSequence text, BufferType type) { this.text = text; bufferType = type; super.setText(getDisplayableText(), bufferType); } private CharSequence getDisplayableText() { return getTrimmedText(text); } private CharSequence getTrimmedText(CharSequence text) { if (text != null && lineEndIndex > 0) { if (readMore) { if (getLayout().getLineCount() > trimLines) { return updateCollapsedText(); } } else { return updateExpandedText(); } } return text; } bravoborja/ReadMoreTextView (1) (2) (3) Library
20. getDisplayableText() setText(collapsedText) same frame (1) (3) bravoborja/ReadMoreTextView Library
21. ׮নೠ ҙ੼ীࢲ Ҋ۰غযঠ ೠ׮. Ӓۢ ۄ੉࠳۞ܻܳ ࢎਊ೧ب ؼө? 유지보수 Maintenance 안정성 Stability 호환성 Compatibility 기능 Functionality ⚠ ⚠ bravoborja class ReadMoreTextView : AppCompatTextView { ... } PRNDcompany class ReadMoreTextView : TextView { ... } Link: https://developer.android.com/jetpack/androidx/releases/appcompat#1.4.0 Emoji ૑ਗ
22. “૒੽ ҳഅೞח Ѫਵ۽ Ѿ੿೮׮ݶ”
23. G. View
24. • Android ೒ۖಬীࢲ ఫझ౟ח ؀ࠗ࠙ TextView۽ ҳഅೠ׮. • AppCompatTextViewܳ ࢚ࣘೞח Custom View ௿ېझ۽ ؊ࠁӝ UXܳ ҳഅೠ׮. Custom View ҳഅೞӝ <TextView android:id="@+id/text_view_id" android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="@string/hello" />
25. class ReadMoreTextView : AppCompatTextView { override fun setText(text: CharSequence?, type: BufferType?) { this.originalText = text this.bufferType = type updateText(text ?: "", width) } private fun updateText(text: CharSequence, width: Int) { this.collapseText = ... invalidateText() } private fun invalidateText() { if (expanded) { ... } else { super.setText(collapseText, bufferType) super.setMaxLines(readMoreMaxLines) } } } Library
26. setText(originalText) skip super.setText(collapsedText) Library next frame same frame
27. class ReadMoreTextView : AppCompatTextView { override fun setText(text: CharSequence?, type: BufferType?) { this.originalText = text this.bufferType = type updateText(text ?: "", width) } override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) { super.onSizeChanged(w, h, oldw, oldh) if (w != oldw) { originalText?.let { originalText -> updateText(originalText, w) } } } ... } Library
28. Collapsed Text Original Text ఫझ౟ ҅࢑ೞӝ 2઴ ੉࢚਷ ؊ࠁӝ ಴द
29. ఫझ౟ ҅࢑ೞӝ فߣ૩ ઴ ఫझ౟ܳ ӝળਵ۽, ؊ࠁӝ ޙҳо ֢୹ؼ ࣻ ੓ח ఫझ౟ ࣻܳ ҅࢑೧ঠ ೠ׮.
30. ఫझ౟ ҅࢑ೞӝ TextView੄ ୭؀ ց࠺ܳ ҅࢑ೠ׮.
31. ఫझ౟ ҅࢑ೞӝ فߣ૩ ઴ ఫझ౟ ց࠺৬ ؊ࠁӝ ޙҳ ց࠺ܳ ؊ೞҊ, ୭؀ ց࠺৬ ࠺Үೠ׮.
32. ఫझ౟ ҅࢑ೞӝ ୭؀ ց࠺ܳ ֈ૑ ঋب۾ فߣ૩ ઴ ఫझ౟ীࢲ ੜܻח ఫझ౟ ࣻܳ ҅࢑ೠ׮.
33. ఫझ౟ ҅࢑ೞӝ ✅
34. val maximumTextWidth = width - (paddingLeft + paddingRight) this.collapseText = buildSpannedString { val overflowText = buildOverflowText() // "…" val overflowTextWidth = StaticLayoutCompat .Builder(overflowText, paint, maximumTextWidth) .build() .getLineWidth(0).toInt() val readMoreText = buildReadMoreText() // " Read more" val readMoreTextWidth = StaticLayoutCompat .Builder(readMoreText, readMorePaint, maximumTextWidth) .build() .getLineWidth(0).toInt() val readMoreWidth = overflowTextWidth + readMoreTextWidth val replaceCount = text .substringOf(layout, line = readMoreMaxLines) // 2nd Line Text .calculateReplaceCountToBeSingleLineWith(maximumTextWidth - readMoreWidth) append(text.subSequence(0, countUntilMaxLine - replaceCount)) append(overflowText) append(readMoreText) } Library
35. val maximumTextWidth = this.collapseText = buildSpannedString { val overflowText = buildOverflowText() // "…" val overflowTextWidth = StaticLayoutCompat .Builder(overflowText, paint, maximumTextWidth) .build() .getLineWidth(0).toInt() val readMoreText = buildReadMoreText() // " Read more" val readMoreTextWidth = StaticLayoutCompat .Builder(readMoreText, readMorePaint, maximumTextWidth) .build() .getLineWidth(0).toInt() val readMoreWidth = overflowTextWidth + readMoreTextWidth val replaceCount = text .substringOf(layout, line = readMoreMaxLines) // 2nd Line Text .calculateReplaceCountToBeSingleLineWith(maximumTextWidth - readMoreWidth) append(text.subSequence(0, countUntilMaxLine - replaceCount)) append(overflowText) append(readMoreText) } Library
36. val maximumTextWidth = this.collapseText = buildSpannedString { val overflowText = buildOverflowText() // "…" val overflowTextWidth = StaticLayoutCompat .Builder(overflowText, paint, maximumTextWidth) .build() .getLineWidth(0).toInt() val readMoreText = buildReadMoreText() // " Read more" val readMoreTextWidth = StaticLayoutCompat .Builder(readMoreText, readMorePaint, maximumTextWidth) .build() .getLineWidth(0).toInt() val readMoreWidth = val replaceCount = text .substringOf(layout, line = readMoreMaxLines) // 2nd Line Text .calculateReplaceCountToBeSingleLineWith(maximumTextWidth - readMoreWidth) append(text.subSequence(0, countUntilMaxLine - replaceCount)) append(overflowText) append(readMoreText) } Library
37. val maximumTextWidth = this.collapseText = buildSpannedString { val overflowText = buildOverflowText() // "…" val overflowTextWidth = StaticLayoutCompat .Builder(overflowText, paint, maximumTextWidth) .build() .getLineWidth(0).toInt() val readMoreText = buildReadMoreText() // " Read more" val readMoreTextWidth = StaticLayoutCompat .Builder(readMoreText, readMorePaint, maximumTextWidth) .build() .getLineWidth(0).toInt() val readMoreWidth = val replaceCount = text .substringOf(layout, line = readMoreMaxLines) // 2nd Line Text .calculateReplaceCountToBeSingleLineWith(maximumTextWidth - readMoreWidth) append(text.subSequence(0, countUntilMaxLine - replaceCount)) append(overflowText) append(readMoreText) } Library
38. val maximumTextWidth = this.collapseText = buildSpannedString { val overflowText = buildOverflowText() // "…" val overflowTextWidth = StaticLayoutCompat .Builder(overflowText, paint, maximumTextWidth) .build() .getLineWidth(0).toInt() val readMoreText = buildReadMoreText() // " Read more" val readMoreTextWidth = StaticLayoutCompat .Builder(readMoreText, readMorePaint, maximumTextWidth) .build() .getLineWidth(0).toInt() val readMoreWidth = val replaceCount = text .substringOf(layout, line = readMoreMaxLines) // 2nd Line Text .calculateReplaceCountToBeSingleLineWith(maximumTextWidth - readMoreWidth) append(text.subSequence(0, countUntilMaxLine - replaceCount)) append(overflowText) append(readMoreText) } Library
39. private fun CharSequence.calculateReplaceCountToBeSingleLineWith( maximumTextWidth: Int, ): Int { val currentTextBounds = Rect() var replacedCount = -1 do { replacedCount++ val replacedText = substring(0, this.length - replacedCount) paint.getTextBounds(substring(0, this.length - replacedCount)) } while (replacedCount < this.length && currentTextBounds.width() >= maximumTextWidth) ... return replacedCount } TextPaint#getTextBounds Library
40. val maximumTextWidth = width - (paddingLeft + paddingRight) this.collapseText = buildSpannedString { val overflowText = buildOverflowText() // "…" val overflowTextWidth = StaticLayoutCompat .Builder(overflowText, paint, maximumTextWidth) .build() .getLineWidth(0).toInt() val readMoreText = buildReadMoreText() // " Read more" val readMoreTextWidth = StaticLayoutCompat .Builder(readMoreText, readMorePaint, maximumTextWidth) .build() .getLineWidth(0).toInt() val readMoreWidth = overflowTextWidth + readMoreTextWidth val replaceCount = text .substringOf(layout, line = readMoreMaxLines) // 2nd Line Text .calculateReplaceCountToBeSingleLineWith(maximumTextWidth - readMoreWidth) append(text.subSequence(0, countUntilMaxLine - replaceCount)) append(overflowText) append(readMoreText) } Library
41. val maximumTextWidth = width - (paddingLeft + paddingRight) this.collapseText = buildSpannedString { val overflowText = buildOverflowText() // "…" val overflowTextWidth = StaticLayoutCompat .Builder(overflowText, paint, maximumTextWidth) .build() .getLineWidth(0).toInt() val readMoreText = buildReadMoreText() // " Read more" val readMoreTextWidth = StaticLayoutCompat .Builder(readMoreText, readMorePaint, maximumTextWidth) .build() .getLineWidth(0).toInt() val readMoreWidth = overflowTextWidth + readMoreTextWidth val replaceCount = text .substringOf(layout, line = readMoreMaxLines) // 2nd Line Text .calculateReplaceCountToBeSingleLineWith(maximumTextWidth - readMoreWidth) append( ) append( ) append( ) } Library
42. <com.webtoonscorp.android.readmore.ReadMoreTextView android:layout_width="match_parent" android:layout_height="wrap_content" // Set maximum lines to show 'read more' text. app:readMoreMaxLines="3" app:readMoreOverflow="ellipsis" // Set 'read more' text and styles. app:readMoreText="@string/read_more" app:readMoreTextColor="?colorPrimary" app:readMoreTextFontFamily="sans-serif" app:readMoreTextSize="12sp" app:readMoreTextStyle="bold" app:readMoreTypeface="normal" app:readMoreTextUnderline="true" // Set textAppearance to 'read more' text. app:readMoreTextAppearance="@style/TextAppearance.AppCompat.Small" // If you want to use custom OnClickListener, you must be set this attribute to false. app:readMoreToggleEnabled="false" /> Usage • ୭؀ ઴ ࣻ • ؊ࠁӝ ޙҳ झఋੌ
43. • Android ೒ۖಬীࢲ ఫझ౟ח ؀ࠗ࠙ TextView۽ ҳഅೠ׮. • AppCompatTextViewܳ ࢚ࣘೞח Custom View ௿ېझ۽ ؊ࠁӝ UXܳ ҳഅೠ׮. • ఫझ౟ ҅࢑: StaticLayout, TextPaint API Custom View ҳഅೞӝ <TextView android:id="@+id/text_view_id" android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="@string/hello" />
44. ੘о ழޭפ౭ > ೐۽೙ ࣻ੿ > ੘оࣗѐ ӡѱ ١۾ > read more ੜܿ ੉ग #1. e
45. private fun CharSequence.calculateReplaceCountToBeSingleLineWith( maximumTextWidth: Int, ): Int { val currentTextBounds = Rect() var replacedCount = -1 do { replacedCount++ val replacedText = substring(0, this.length - replacedCount) paint.getTextBounds(replacedText, 0, replacedText.length, currentTextBounds) } while (replacedCount < this.length && currentTextBounds.width() >= maximumTextWidth) ... return replacedCount } TextPaint#getTextBounds Library
46. private fun CharSequence.calculateReplaceCountToBeSingleLineWith( maximumTextWidth: Int, ): Int { var replacedTextWidth: Float var replacedCount = -1 do { replacedCount++ val replacedText = substring(0, this.length - replacedCount) replacedTextWidth = paint.measureText(replacedText) } while (replacedCount < this.length && replacedTextWidth >= maximumTextWidth) ... return replacedCount } * Special thanks to @hyeonu1258 TextPaint#measureText Library
47. private fun CharSequence.calculateReplaceCountToBeSingleLineWith( maximumTextWidth: Int, ): Int { var replacedTextWidth: Float var replacedCount = -1 do { replacedCount++ replacedTextWidth = paint.measureText(substring(0, this.length - replacedCount)) } while (replacedCount < this.length && replacedTextWidth >= maximumTextWidth) ... return replacedCount } * Special thanks to @hyeonu1258 TextPaint#measureText Library +3 +5 +3 +2 +3 +5
48. ੘ࢿೠ Ӗী ౠࣻޙ੗!о ನೣػ ҃਋, moreо ׮਺ ઴۽ ֢୹ؽ ੉ग #2.
49. ੘ࢿೠ Ӗী ౠࣻޙ੗!о ನೣػ ҃਋, Read moreо 2઴۽ ֢୹ؽ ੉ग #2.
50. private fun buildMoreText(): CharSequence { return buildSpannedString { append("… ") append(readMoreText) // Read more } } private fun buildMoreText(): CharSequence { return buildSpannedString { append('…') append(nbsp) // non-breaking space append(readMoreText) // Read more } } Link: h!ps://en.wikipedia.org/wiki/Non-breaking_space
51. ࠄޙ ӡѱ ੘ࢿೞৈ ݈઴੐غח ҃਋ ੉ݽ૑ ӵ૗ ੉ग #3.
52. ࠄޙ ӡѱ ੘ࢿೞৈ ݈઴੐غח ҃਋ ੉ݽ૑ ӵ૗ ੉ग #3. & 0xDC9B 0xD83D high surrogate low surrogate U+DC00 U+DFFF U+D800 U+D8FF
53. private fun CharSequence.calculateReplaceCountToBeSingleLineWith( replaceText: CharSequence, maximumTextWidth: Int ): Int { val currentTextBounds = Rect() var replacedCount = -1 do { replacedCount++ val subText = substring(0, this.length - replacedCount) val replacedText = subText + replaceText paint.getTextBounds(replacedText, 0, replacedText.length, currentTextBounds) } while (currentTextBounds.width() >= maximumTextWidth) return replacedCount }
54. private fun CharSequence.calculateReplaceCountToBeSingleLineWith( replaceText: CharSequence, maximumTextWidth: Int ): Int { val currentTextBounds = Rect() var replacedCount = -1 do { replacedCount++ val subText = substring(0, this.length - replacedCount) val replacedText = subText + replaceText paint.getTextBounds(replacedText, 0, replacedText.length, currentTextBounds) } while (currentTextBounds.width() >= maximumTextWidth) val subText = substring(0, this.length - replacedCount) if (subText.isNotEmpty() && subText.last().isSurrogate()) { val index = subText.indexOfLast { it.isHighSurrogate() } return length - index } return replacedCount } Link: h!ps://engineering.linecorp.com/ko/blog/the-7-ways-of-counting-characters/
55. H. Compose
56. • Composeীࢲח BasicText۽ ఫझ౟ܳ ҳഅೡ ࣻ ੓׮. • BasicText ೣࣻܳ ഐ୹ೞח Custom Composable ೣࣻ۽ ؊ࠁӝ UXܳ ҳഅೠ׮. Jetpack Compose ૑ਗೞӝ BasicText(text = "Text") @Composable fun BasicText( text: String, modifier: Modifier = Modifier, ... ) { ... }
57. @Composable public fun BasicReadMoreText( text: String, ... ) { val state = remember(text, readMoreMaxLines) { ReadMoreState( originalText = AnnotatedString(text), readMoreMaxLines = readMoreMaxLines ) } val collapsedText = state.collapsedText val currentText = ... BasicText( text = currentText, onTextLayout = { it -> // TextLayoutResult state.onTextLayout(it) }, maxLines = if (expanded) Int.MAX_VALUE else readMoreMaxLines ) } Library
58. state.onTextLayout(it) BasicText(originalText) skip BasicText(collapsedText) Library state.onTextLayout(it) ⚠ ఫझ౟о Ӓ۰૓ റীঠ ց࠺ܳ ঌ ࣻ ੓׮.
59. BasicText( text = overflowText, // "…" onTextLayout = { state.onOverflowTextLayout(it) }, modifier = Modifier.notDraw(), style = style ) BasicText( text = readMoreText, // " Read more" onTextLayout = { state.onReadMoreTextLayout(it) }, modifier = Modifier.notDraw(), style = style.merge(readMoreStyle) ) Library ⚠ ؊ࠁӝ ޙҳب ੉۠ җ੿੉ ೙ਃೞ׮.
60. @Composable public fun BasicReadMoreText( text: String, ... ) { val state = remember(...) { ReadMoreState(...) } val currentText = ... Box(...) { BasicText(text = currentText, ...) if (expanded.not()) { BasicText(text = overflowText, ...) // "…" BasicText(text = readMoreText, ...) // " Read more" } } } Library (BasicTextܳ 3ѐա ࢎਊ೧ঠ ೠ׮…)
61. state.onTextLayout(it) BasicText(originalText) skip BasicText(collapsedText) Library state.onTextLayout(it) ( ... ) BasicText(overflowText) state.onOverflowTextLayout(it) state.onReadMoreTextLayout(it) BasicText(readMoreText)
62. BasicText( text = overflowText, // "…" onTextLayout = { state.onOverflowTextLayout(it) }, modifier = Modifier.notDraw(), style = style ) BasicText( text = readMoreText, // " Read more" onTextLayout = { state.onReadMoreTextLayout(it) }, modifier = Modifier.notDraw(), style = style.merge(readMoreStyle) ) Library (ࢎਊ੗ীѱ ֢୹غ૑ ঋب۾ ऀӣ ୊ܻ)
63. private fun Modifier.notDraw(): Modifier { return then(NotDrawModifier) } private object NotDrawModifier : DrawModifier { override fun ContentDrawScope.draw() { // not draws content. } } Library (ࢎਊ੗ীѱ ֢୹غ૑ ঋب۾ ऀӣ ୊ܻ)
64. @Stable private class ReadMoreState( private val originalText: AnnotatedString, private val readMoreMaxLines: Int ) { fun onTextLayout(result: TextLayoutResult) { val lastLineIndex = readMoreMaxLines - 1 val previous = textLayout val old = previous != null && previous.lineCount <= readMoreMaxLines && previous.isLineEllipsized(lastLineIndex) val new = result.lineCount <= readMoreMaxLines && result.isLineEllipsized(lastLineIndex) val changed = previous != result && old != new if (changed) { textLayout = result updateCollapsedText() } } ... } Library (୭؀ೠ সؘ੉౟ പࣻܳ ઴੉۰Ҋ ઑѤਸ ୶о ')
65. private fun updateCollapsedText() { ... val countUntilMaxLine = textLayout.getLineEnd(readMoreMaxLines - 1, visibleEnd = true) val readMoreWidth = overflowTextLayout.size.width + readMoreTextLayout.size.width val maximumWidth = textLayout.size.width - readMoreWidth var replacedEndIndex = countUntilMaxLine + 1 var currentTextBounds: Rect do { replacedEndIndex -= 1 currentTextBounds = textLayout.getCursorRect(replacedEndIndex) } while (currentTextBounds.left > maximumWidth) collapsedText = originalText.subSequence(startIndex = 0, endIndex = replacedEndIndex) } Library ⚠ ಞ૘ೠ ఫझ౟ ց࠺ܳ ஏ੿ೡ ࣻ ੓ח ߑߨب হ׮. TextLayoutResult#getCursorRect
66. ఫझ౟ ҅࢑ೞӝ فߣ૩ ઴੄ ݃૑݄ o"setਸ ଺ח׮. getLineEnd(0) = 37 getLineEnd(1) = 37 + 36 = 73 getLineEnd(2) = 37 + 36 + 25 = 98
67. ఫझ౟ ҅࢑ೞӝ ୭؀ ց࠺ীࢲ ؊ࠁӝ ޙҳ ց࠺ܳ ࡒ ೲਊ ց࠺ܳ ҳೠ׮.
68. ఫझ౟ ҅࢑ೞӝ ழࢲ੄ le"о ೲਊ ց࠺ܳ ֈ૑ ঋਸ ٸө૑ O"setਸ ઴ੋ׮.
69. ఫझ౟ ҅࢑ೞӝ ழࢲ੄ le"о ೲਊ ց࠺ܳ ֈ૑ ঋਸ ٸө૑ O"setਸ ઴ੋ׮.
70. ఫझ౟ ҅࢑ೞӝ ழࢲ੄ le"о ೲਊ ց࠺ܳ ֈ૑ ঋਸ ٸө૑ O"setਸ ઴ੋ׮.
71. ఫझ౟ ҅࢑ೞӝ ழࢲ੄ le"о ೲਊ ց࠺ܳ ֈ૑ ঋਸ ٸө૑ O"setਸ ઴ੋ׮.
72. ఫझ౟ ҅࢑ೞӝ ✅ '
73. ReadMoreText( text = "Original Text", expanded = false, onExpandedChange = null, modifier = Modifier.fillMaxWidth(), readMoreMaxLines = 3, readMoreOverflow = ReadMoreTextOverflow.Ellipsis, readMoreText = "Read more", readMoreColor = Color.Black, readMoreFontFamily = FontFamily.Default, readMoreFontSize = 15.sp, readMoreFontWeight = FontWeight.Bold, readMoreFontStyle = FontStyle.Normal, readMoreTextDecoration = TextDecoration.Underline, readMoreStyle = SpanStyle( // ... ) ) Usage • ୭؀ ઴ ࣻ • ؊ࠁӝ ޙҳ झఋੌ
74. • Composeীࢲח BasicText۽ ఫझ౟ܳ ҳഅೡ ࣻ ੓׮. • BasicText ೣࣻܳ ഐ୹ೞח Custom Composable ೣࣻ۽ ؊ࠁӝ UXܳ ҳഅೠ׮. • ఫझ౟ ҅࢑: TextLayoutResult API Jetpack Compose ૑ਗೞӝ BasicText(text = "Text")
76. • Kotlin Multipla#orm ߂ Jetpack Composeܳ ӝ߈ਵ۽ ೞח ৈ۞ ೒ۖಬীࢲ UIܳ ҕਬೡ ࣻ ੓ח ࢶ঱ഋ ೐ۨ੐ਕ௼ • ૑ਗೞח ೒ۖಬ: Compose Multiplatform? Link: jb.gg/compose
77. • forked from androidx/androidx Compose Multiplatform Core commonMain androidMain jbMain ... nativeMain desktopMain … webMain or skikoMain Jetpack Compose Compose Multiplatform Link: https://github.com/JetBrains/compose-multiplatform-core
78. • ۄ੉࠳۞ܻ ߸҃੼: • Kotlin plugin • ೒ۖಬ Targetਸ ࢶ঱ೠ׮. • Jetbrains Compose۽ ੹ജೠ׮. Compose Multiplatform ب੹ೞӝ
79. • ۄ੉࠳۞ܻ ߸҃੼: • Kotlin plugin • ೒ۖಬ Targetਸ ࢶ঱ೠ׮. • Jetbrains Compose۽ ੹ജೠ׮. • ௏٘ܳ commonMainਵ۽ ৤ӟ׮. Compose Multiplatform ب੹ೞӝ Kotlin 1.8 ੉੹ Kotlin 1.8 ੉റ Android
80. • ۄ੉࠳۞ܻ ߸҃੼: • Kotlin plugin • ೒ۖಬ Targetਸ ࢶ঱ೠ׮. • Jetbrains Compose۽ ੹ജೠ׮. • ௏٘ܳ commonMainਵ۽ ৤ӟ׮. • ౠ੿ ೒ۖಬী ઙࣘػ APIܳ ઁѢೠ׮. (ex. android.util.Log) Compose Multiplatform ب੹ೞӝ
81. • ۄ੉࠳۞ܻ ߸҃੼: • Kotlin plugin • ೒ۖಬ Targetਸ ࢶ঱ೠ׮. • Jetbrains Compose۽ ੹ജೠ׮. • ௏٘ܳ commonMainਵ۽ ৤ӟ׮. • ౠ੿ ೒ۖಬী ઙࣘػ APIܳ ઁѢೠ׮. (ex. android.util.Log) • (non-JVM) value classܳ ੌ߈ class۽ ߸҃ೠ׮. Compose Multiplatform ب੹ೞӝ
82. • iOS Compose Multiplatform ب੹ೞӝ ❌
83. • Desktop (JVM) Compose Multiplatform ب੹ೞӝ ❌
84. • TextLayoutResult#isLineEllipsized о ೦࢚ falseܳ ߈ജೠ׮. ਗੋ਷...? Link: https://youtrack.jetbrains.com/issue/CMP-3074 commonMain androidMain skikoMain nativeMain desktopMain webMain
85. • ! ইۉযীࢲ “Read More” ޙҳо ୶оغ૑ ঋणפ׮. RTL ੉ग View Compose
86. • TextLayoutResult#getLineEnd RTL ੉ग فߣ૩ ઴੄ ݃૑݄ o"setਸ ଺ח׮.
87. • TextLayoutResult#size RTL ੉ग ୭؀ ց࠺ীࢲ ؊ࠁӝ ޙҳ ց࠺ܳ ࡒ ೲਊ ց࠺ܳ ҳೠ׮.
88. • TextLayoutResult#getCursorRect RTL ੉ग ழࢲ੄ le"о ೲਊ ց࠺ܳ ֈ૑ ঋਸ ٸө૑ o"setਸ ઴ੋ׮.
89. • TextLayoutResult#getCursorRect RTL ੉ग ⚠ o%setਸ ઴ੌࣻ۾ ழࢲ੄ le#о ழ૓׮.
90. • TextLayoutResult#getCursorRect RTL ੉ग ( RTLীࢲח ழࢲ੄ right۽ ҅࢑ೠ׮? ❌ ఫझ౟ ೞաী RTL, LTR੉ ࢴੌ ࣻب ੓׮.
91. TextMeasurer ) Compose 1.3+ val textMeasurer: TextMeasurer = rememberTextMeasurer() ⚠ ఫझ౟ܳ Ӓܻӝ ੹ী ஏ੿೧ࠅ ࣻ ੓׮. Link: https://developer.android.com/reference/kotlin/androidx/compose/ui/text/TextMeasurer val result: TextLayoutResult = textMeasurer.measure( text = currentText, style = style, softWrap = softWrap, )
92. private fun CharSequence.calculateReplaceCountToBeSingleLineWith( maximumTextWidth: Int, ): Int { var replacedTextWidth: Float var replacedCount = -1 do { replacedCount++ replacedTextWidth = paint.measureText( substring(0, this.length - replacedCount) ) } while (replacedCount < this.length && replacedTextWidth >= maximumTextWidth) ... return replacedCount } TextPaint#measureText View
93. TextMeasurer#measure private fun AnnotatedString.calculateReplaceCountToBeSingleLineWith( maximumTextWidth: Int, ): Int { var replacedTextWidth: Int var replacedCount = -1 do { replacedCount++ replacedTextWidth = textMeasurer.measure( text = subSequence(0, this.length - replacedCount), style = style, softWrap = softWrap, ).size.width } while (replacedCount < this.length && replacedTextWidth >= maximumTextWidth) ... return replacedCount } Usage Compose ✅ View৬ Compose ۽૒ਸ ాੌೡ ࣻ ੓঻׮.
94. @Composable public fun CoreReadMoreText(text: AnnotatedString, ...) { ... val textMeasurer = rememberTextMeasurer() val state = remember { ReadMoreState() } val currentText = buildAnnotatedString { ... } BoxWithConstraints(...) { BasicText(text = currentText, ...) val constraints = Constraints(maxWidth = constraints.maxWidth) LaunchedEffect(...) { state.applyCollapsedText( textMeasurer = textMeasurer, text = text, constraints = constraints, ... ) } } } Compose
95. @Composable public fun CoreReadMoreText(text: AnnotatedString, ...) { ... val textMeasurer = rememberTextMeasurer() val state = remember { ReadMoreState() } val currentText = buildAnnotatedString { ... } BoxWithConstraints(...) { BasicText(text = currentText, ...) val constraints = Constraints(maxWidth = constraints.maxWidth) LaunchedEffect(...) { state.applyCollapsedText( textMeasurer = textMeasurer, text = text, constraints = constraints, ... ) } } } Compose
96. @Composable public fun CoreReadMoreText(text: AnnotatedString, ...) { ... val textMeasurer = rememberTextMeasurer() val state = remember { ReadMoreState() } val currentText = buildAnnotatedString { ... } BoxWithConstraints(...) { BasicText(text = currentText, ...) val constraints = Constraints(maxWidth = constraints.maxWidth) LaunchedEffect(...) { state.applyCollapsedText( textMeasurer = textMeasurer, text = text, constraints = constraints, ... ) } } } Compose
97. @Composable public fun CoreReadMoreText(text: AnnotatedString, ...) { ... val textMeasurer = rememberTextMeasurer() val state = remember { ReadMoreState() } val currentText = buildAnnotatedString { ... } BoxWithConstraints(...) { BasicText(text = currentText, ...) val constraints = Constraints(maxWidth = constraints.maxWidth) LaunchedEffect(...) { state.applyCollapsedText( textMeasurer = textMeasurer, text = text, constraints = constraints, ... ) } } } Compose ✅ BoxWithConstraints۽ ୭؀ ց࠺ܳ ҅࢑೧ঠ ೠ׮.
98. @Composable public fun CoreReadMoreText(text: AnnotatedString, ...) { ... val textMeasurer = rememberTextMeasurer() val state = remember { ReadMoreState() } val currentText = buildAnnotatedString { ... } BoxWithConstraints(...) { BasicText(text = currentText, ...) val constraints = Constraints(maxWidth = constraints.maxWidth) LaunchedEffect(...) { state.applyCollapsedText( textMeasurer = textMeasurer, text = text, constraints = constraints, ... ) } } } Compose ✅ ఫझ౟, ୭؀ ց࠺ ١ਵ۽ collapsed textܳ ҅࢑ೠ׮.
99. @Composable public fun CoreReadMoreText(text: AnnotatedString, ...) { ... val textMeasurer = rememberTextMeasurer() val state = remember { ReadMoreState() } val currentText = buildAnnotatedString { ... } BoxWithConstraints(...) { BasicText(text = currentText, ...) val constraints = Constraints(maxWidth = constraints.maxWidth) LaunchedEffect(...) { state.applyCollapsedText( textMeasurer = textMeasurer, text = text, constraints = constraints, Compose
100. @Composable public fun CoreReadMoreText(text: AnnotatedString, ...) { ... val textMeasurer = rememberTextMeasurer() val state = remember { ReadMoreState() } val currentText = buildAnnotatedString { if (expanded) { append(text) ... } else { append(state.collapsedText) ... } } BoxWithConstraints(...) { BasicText(text = currentText, ...) val constraints = Constraints(maxWidth = constraints.maxWidth) LaunchedEffect(...) { state.applyCollapsedText( textMeasurer = textMeasurer, text = text, constraints = constraints, Compose
101. @Composable public fun CoreReadMoreText(text: AnnotatedString, ...) { ... val textMeasurer = rememberTextMeasurer() val state = remember { ReadMoreState() } val currentText = buildAnnotatedString { ... } BoxWithConstraints(...) { BasicText(text = currentText, ...) val constraints = Constraints(maxWidth = constraints.maxWidth) LaunchedEffect(...) { state.applyCollapsedText( textMeasurer = textMeasurer, text = text, constraints = constraints, Compose
102. @Composable public fun CoreReadMoreText(text: AnnotatedString, ...) { ... val textMeasurer = rememberTextMeasurer() val state = remember { ReadMoreState() } val currentText = buildAnnotatedString { ... } BoxWithConstraints(...) { BasicText(text = currentText, ...) val constraints = Constraints(maxWidth = constraints.maxWidth) LaunchedEffect(...) { state.applyCollapsedText( textMeasurer = textMeasurer, text = text, constraints = constraints, ... ) } } } Compose
103. @Composable public fun CoreReadMoreText(text: AnnotatedString, ...) { ... val textMeasurer = rememberTextMeasurer() val state = remember { ReadMoreState() } val currentText = buildAnnotatedString { ... } BoxWithConstraints(...) { BasicText(text = currentText, ...) val constraints = Constraints(maxWidth = constraints.maxWidth) LaunchedEffect(...) { state.applyCollapsedText( textMeasurer = textMeasurer, text = text, constraints = constraints, ... ) } } } Compose ✅ keyо زੌ೧ࢲ, ೠߣ݅ সؘ੉౟ೠ׮.
104. state.applyCollapsedText(originalText) skip BasicText(collapsedText) Compose Text Measurer
105. • ఫझ౟ ҅࢑: • ❌ TextLayoutResult#getCursorRect • ✅ TextMeasurer (Compose 1.3+) Jetpack Compose ૑ਗೞӝ View Compose
106. • Composeীࢲח BasicText۽ ఫझ౟ܳ ҳഅೡ ࣻ ੓׮. • BasicText ೣࣻܳ ഐ୹ೞח Custom Composable ೣࣻ۽ ؊ࠁӝ UXܳ ҳഅೠ׮. • ఫझ౟ ҅࢑: TextMeasurer, BoxWithConstraints API Jetpack Compose ૑ਗೞӝ BasicText(text = "Text")
107. (؋࠙ী Compose Multiplatform ૑ਗ оמ) Link: https://github.com/webtoon/ReadMoreTextView/pull/104
108. Compose Multiplatform (iOS)
109. Compose Multiplatform (Desktop)
110. Compose Multiplatform (Web)
111. M. Additional features
112. Read Less Collapsed Expanded
113. val expandedText = buildSpannedString { append(originalText) append(' ') inSpans(spans = arrayOf( TextAppearanceSpan(...), UnderlineSpan(), )) { append(readLessText) } } Usage View
114. Usage Compose val expandedText = buildAnnotatedString { append(originalText) append(' ') withStyle(style = SpanStyle( ..., textDecoration = TextDecoration.Underline, )) { append(readLessText) } }
115. • All • More • None Toggle Area
116. // ToggleArea.All view.setOnClickListener { toggle() } View
117. // ToggleArea.All view.setOnClickListener { toggle() } // ToggleArea.More val currentText = buildSpannedString { ... inSpans(span = object : ClickableSpan() { override fun onClick(widget: View) { toggle() } }) { append(readMoreText) // "Read more" } } view.movementMethod = LinkMovementMethod.getInstance() View
118. // ToggleArea.All Box( modifier = modifier.clickable( onClick = { onExpandedChange(!expanded) } ) ) { ... Compose
119. // ToggleArea.More val currentText = buildAnnotatedString { ... withLink( LinkAnnotation.Clickable(tag = ReadMoreTag) { onExpandedChange(true) }, ) { append(readMoreText) // "Read more" } } // ToggleArea.All Box( modifier = modifier.clickable( onClick = { onExpandedChange(!expanded) } ) ) { ... Compose
120. Hyperlink Collapsed Expanded
121. view.text = buildSpannedString { ... inSpans(span = object : ClickableSpan() { override fun onClick(widget: View) { // #TAG click! } }) { append("#TAG") } } view.movementMethod = LinkMovementMethod.getInstance() View
122. view.text = buildSpannedString { ... inSpans(span = object : ClickableSpan() { override fun onClick(widget: View) { // #TAG click! } }) { append("#TAG") } } view.movementMethod = LinkMovementMethod.getInstance() view.setOnClickListener { view.toggle() } View
123. Hyperlink ⚠
124. view.text = buildSpannedString { ... inSpans(span = object : ClickableSpan() { override fun onClick(widget: View) { // #TAG click! } }) { append("#TAG") } } view.movementMethod = LinkMovementMethod.getInstance() view.setOnClickListener { view.toggle() } View ⚠ Click ೠߣী 2ѐ੄ ੉߮౟о ߊࢤೠ׮.
125. view.text = buildSpannedString { ... inSpans(span = object : ClickableSpan() { override fun onClick(widget: View) { // #TAG click! } }) { append("#TAG") } } view.movementMethod = LinkMovementMethod.getInstance() view.setOnClickListener { if (view.selectionStart == -1 && view.selectionEnd == -1) { view.toggle() } } View Link: https://stackoverflow.com/a/35694135 ⚠ Workaround۽ ೧Ѿೡ ࣻ ੓׮.
126. view.text = buildSpannedString { ... inSpans(span = object : ClickableSpan() { override fun onClick(widget: View) { // #TAG click! } }) { append("#TAG") } } view.movementMethod = LinkMovementMethod.getInstance() view.setOnClickListener { if (view.selectionStart == -1 && view.selectionEnd == -1) { view.toggle() } } View Link: https://stackoverflow.com/a/35694135
128. Hyperlink ✅
129. view.text = buildSpannedString { ... inSpans(span = object : ClickableSpan() { override fun onClick(widget: View) { // #TAG click! } }) { append("#TAG") } } view.movementMethod = LinkMovementMethod.getInstance() view.setOnClickListener { if (view.selectionStart == -1 && view.selectionEnd == -1) { view.toggle() } } View
130. val text = buildAnnotatedString { ... withLink(link = LinkAnnotation.Clickable("TAG") { // #TAG click! }) { append("#TAG") } } Compose
131. • 텍스트 더보기 UX 구현과정 • 요구사항 → (레퍼런스 탐색 → 라이브러리 탐색 / 분석 → 구현) → 테스트 • 사용한 API • View: TextPaint, StaticLayout • Compose: TextMeasurer, BoxWithConstraints • “더 구현할 것은 없을까?” • Stateful → Stateless? • 정말 정말 정말 긴 텍스트? 정리