Skip to content

Commit de28777

Browse files
fornewidfornewid
authored
Add hyperlink demo (#110)
* Add hyperlink demo * spotlessApply
1 parent 0ca1798 commit de28777

7 files changed

Lines changed: 292 additions & 9 deletions

File tree

‎sample/src/main/java/com/webtoonscorp/android/readmore/sample/compose/foundation/BasicReadMoreTextDemo.kt‎

Lines changed: 73 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,22 +30,27 @@ import androidx.compose.material.MaterialTheme
3030
import androidx.compose.material.Scaffold
3131
import androidx.compose.material.Text
3232
import androidx.compose.material.TopAppBar
33+
import androidx.compose.material.rememberScaffoldState
3334
import androidx.compose.runtime.Composable
3435
import androidx.compose.runtime.CompositionLocalProvider
3536
import androidx.compose.runtime.mutableStateOf
37+
import androidx.compose.runtime.rememberCoroutineScope
3638
import androidx.compose.runtime.saveable.rememberSaveable
3739
import androidx.compose.ui.Modifier
3840
import androidx.compose.ui.graphics.Color
3941
import androidx.compose.ui.platform.LocalLayoutDirection
4042
import androidx.compose.ui.res.stringResource
43+
import androidx.compose.ui.text.LinkAnnotation
4144
import androidx.compose.ui.text.SpanStyle
45+
import androidx.compose.ui.text.TextLinkStyles
4246
import androidx.compose.ui.text.TextStyle
4347
import androidx.compose.ui.text.buildAnnotatedString
4448
import androidx.compose.ui.text.font.FontFamily
4549
import androidx.compose.ui.text.font.FontStyle
4650
import androidx.compose.ui.text.font.FontWeight
4751
import androidx.compose.ui.text.style.TextDecoration
4852
import androidx.compose.ui.text.style.TextDirection
53+
import androidx.compose.ui.text.withLink
4954
import androidx.compose.ui.text.withStyle
5055
import androidx.compose.ui.tooling.preview.PreviewLightDark
5156
import androidx.compose.ui.unit.LayoutDirection
@@ -55,14 +60,20 @@ import com.webtoonscorp.android.readmore.foundation.BasicReadMoreText
5560
import com.webtoonscorp.android.readmore.foundation.ReadMoreTextOverflow
5661
import com.webtoonscorp.android.readmore.foundation.ToggleArea
5762
import com.webtoonscorp.android.readmore.sample.R
63+
import kotlinx.coroutines.launch
5864

5965
@Composable
6066
fun BasicReadMoreTextDemo() {
67+
val scaffoldState = rememberScaffoldState()
68+
val coroutineScope = rememberCoroutineScope()
6169
Scaffold(
70+
scaffoldState = scaffoldState,
6271
topBar = {
63-
TopAppBar(title = {
64-
Text(text = stringResource(id = R.string.compose_foundation_title))
65-
})
72+
TopAppBar(
73+
title = {
74+
Text(text = stringResource(id = R.string.compose_foundation_title))
75+
},
76+
)
6677
},
6778
content = {
6879
val scrollState = rememberScrollState()
@@ -76,7 +87,7 @@ fun BasicReadMoreTextDemo() {
7687
Divider()
7788
Item_Hyperfocus()
7889
Divider()
79-
ItemReunion()
90+
Item_Reunion()
8091
Divider()
8192
Item_TheWorldAfterTheFall()
8293
Divider()
@@ -88,6 +99,12 @@ fun BasicReadMoreTextDemo() {
8899
Divider()
89100
Item_Emoji()
90101
Divider()
102+
Item_Hyperlink { message ->
103+
coroutineScope.launch {
104+
scaffoldState.snackbarHostState.showSnackbar(message = message)
105+
}
106+
}
107+
Divider()
91108
}
92109
},
93110
)
@@ -164,7 +181,7 @@ private fun Item_Hyperfocus() {
164181
}
165182

166183
@Composable
167-
private fun ItemReunion() {
184+
private fun Item_Reunion() {
168185
val (expanded, onExpandedChange) = rememberSaveable { mutableStateOf(false) }
169186
Column {
170187
Text(
@@ -426,6 +443,57 @@ private fun Item_Emoji() {
426443
}
427444
}
428445

446+
@Composable
447+
private fun Item_Hyperlink(showMessage: (String) -> Unit) {
448+
val (expanded, onExpandedChange) = rememberSaveable { mutableStateOf(false) }
449+
Column {
450+
Text(
451+
text = stringResource(id = R.string.title_hyperlink),
452+
modifier = Modifier
453+
.fillMaxWidth()
454+
.padding(start = 18.dp, end = 18.dp, top = 16.dp),
455+
color = MaterialTheme.colors.onSurface,
456+
fontSize = 18.sp,
457+
fontWeight = FontWeight.Bold,
458+
)
459+
BasicReadMoreText(
460+
text = buildAnnotatedString {
461+
repeat(30) { index ->
462+
withLink(
463+
LinkAnnotation.Clickable(
464+
tag = "TAG$index",
465+
styles = TextLinkStyles(style = SpanStyle(color = Color.Blue)),
466+
) {
467+
showMessage("#TAG$index Clicked!")
468+
},
469+
) {
470+
append("#TAG$index")
471+
}
472+
append(' ')
473+
}
474+
append("END")
475+
},
476+
expanded = expanded,
477+
onExpandedChange = onExpandedChange,
478+
modifier = Modifier
479+
.fillMaxWidth()
480+
.padding(start = 18.dp, top = 5.dp, end = 18.dp, bottom = 18.dp),
481+
style = TextStyle.Default.copy(
482+
color = MaterialTheme.colors.onSurface,
483+
fontSize = 15.sp,
484+
fontStyle = FontStyle.Normal,
485+
lineHeight = 22.sp,
486+
),
487+
readMoreMaxLines = 3,
488+
readMoreText = stringResource(id = R.string.read_more),
489+
readMoreStyle = SpanStyle(
490+
textDecoration = TextDecoration.Underline,
491+
),
492+
readLessText = stringResource(id = R.string.read_less),
493+
)
494+
}
495+
}
496+
429497
@PreviewLightDark
430498
@Composable
431499
private fun Preview() {

‎sample/src/main/java/com/webtoonscorp/android/readmore/sample/compose/material/ReadMoreTextDemo.kt‎

Lines changed: 64 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,20 +30,25 @@ import androidx.compose.material.MaterialTheme
3030
import androidx.compose.material.Scaffold
3131
import androidx.compose.material.Text
3232
import androidx.compose.material.TopAppBar
33+
import androidx.compose.material.rememberScaffoldState
3334
import androidx.compose.runtime.Composable
3435
import androidx.compose.runtime.CompositionLocalProvider
3536
import androidx.compose.runtime.mutableStateOf
37+
import androidx.compose.runtime.rememberCoroutineScope
3638
import androidx.compose.runtime.saveable.rememberSaveable
3739
import androidx.compose.ui.Modifier
3840
import androidx.compose.ui.graphics.Color
3941
import androidx.compose.ui.platform.LocalLayoutDirection
4042
import androidx.compose.ui.res.stringResource
43+
import androidx.compose.ui.text.LinkAnnotation
4144
import androidx.compose.ui.text.SpanStyle
45+
import androidx.compose.ui.text.TextLinkStyles
4246
import androidx.compose.ui.text.buildAnnotatedString
4347
import androidx.compose.ui.text.font.FontFamily
4448
import androidx.compose.ui.text.font.FontStyle
4549
import androidx.compose.ui.text.font.FontWeight
4650
import androidx.compose.ui.text.style.TextDecoration
51+
import androidx.compose.ui.text.withLink
4752
import androidx.compose.ui.text.withStyle
4853
import androidx.compose.ui.tooling.preview.PreviewLightDark
4954
import androidx.compose.ui.unit.LayoutDirection
@@ -53,10 +58,14 @@ import com.webtoonscorp.android.readmore.foundation.ReadMoreTextOverflow
5358
import com.webtoonscorp.android.readmore.foundation.ToggleArea
5459
import com.webtoonscorp.android.readmore.material.ReadMoreText
5560
import com.webtoonscorp.android.readmore.sample.R
61+
import kotlinx.coroutines.launch
5662

5763
@Composable
5864
fun ReadMoreTextDemo() {
65+
val scaffoldState = rememberScaffoldState()
66+
val coroutineScope = rememberCoroutineScope()
5967
Scaffold(
68+
scaffoldState = scaffoldState,
6069
topBar = {
6170
TopAppBar(title = {
6271
Text(text = stringResource(id = R.string.compose_material_title))
@@ -74,7 +83,7 @@ fun ReadMoreTextDemo() {
7483
Divider()
7584
Item_Hyperfocus()
7685
Divider()
77-
ItemReunion()
86+
Item_Reunion()
7887
Divider()
7988
Item_TheWorldAfterTheFall()
8089
Divider()
@@ -86,6 +95,12 @@ fun ReadMoreTextDemo() {
8695
Divider()
8796
Item_Emoji()
8897
Divider()
98+
Item_Hyperlink { message ->
99+
coroutineScope.launch {
100+
scaffoldState.snackbarHostState.showSnackbar(message = message)
101+
}
102+
}
103+
Divider()
89104
}
90105
},
91106
)
@@ -156,7 +171,7 @@ private fun Item_Hyperfocus() {
156171
}
157172

158173
@Composable
159-
private fun ItemReunion() {
174+
private fun Item_Reunion() {
160175
val (expanded, onExpandedChange) = rememberSaveable { mutableStateOf(false) }
161176
Column {
162177
Text(
@@ -395,6 +410,53 @@ private fun Item_Emoji() {
395410
}
396411
}
397412

413+
@Composable
414+
private fun Item_Hyperlink(showMessage: (String) -> Unit) {
415+
val (expanded, onExpandedChange) = rememberSaveable { mutableStateOf(false) }
416+
Column {
417+
Text(
418+
text = stringResource(id = R.string.title_hyperlink),
419+
modifier = Modifier
420+
.fillMaxWidth()
421+
.padding(start = 18.dp, end = 18.dp, top = 16.dp),
422+
color = MaterialTheme.colors.onSurface,
423+
fontSize = 18.sp,
424+
fontWeight = FontWeight.Bold,
425+
)
426+
ReadMoreText(
427+
text = buildAnnotatedString {
428+
repeat(30) { index ->
429+
withLink(
430+
LinkAnnotation.Clickable(
431+
tag = "TAG$index",
432+
styles = TextLinkStyles(style = SpanStyle(color = Color.Blue)),
433+
) {
434+
showMessage("#TAG$index Clicked!")
435+
},
436+
) {
437+
append("#TAG$index")
438+
}
439+
append(' ')
440+
}
441+
append("END")
442+
},
443+
expanded = expanded,
444+
onExpandedChange = onExpandedChange,
445+
modifier = Modifier
446+
.fillMaxWidth()
447+
.padding(start = 18.dp, top = 5.dp, end = 18.dp, bottom = 18.dp),
448+
color = MaterialTheme.colors.onSurface,
449+
fontSize = 15.sp,
450+
fontStyle = FontStyle.Normal,
451+
lineHeight = 22.sp,
452+
readMoreMaxLines = 3,
453+
readMoreText = stringResource(id = R.string.read_more),
454+
readMoreTextDecoration = TextDecoration.Underline,
455+
readLessText = stringResource(id = R.string.read_less),
456+
)
457+
}
458+
}
459+
398460
@PreviewLightDark
399461
@Composable
400462
private fun Preview() {

0 commit comments

Comments
 (0)