原文地址: Jetpack Compose學習(3)——圖標(Icon) 按鈕(Button) 輸入框(TextField) 的使用 | Stars-One的雜貨小窩
本篇分別對常用的組件:圖標(Icon) 按鈕(Button) 輸入框(TextField)的使用方法及各參數使用進行講解,參考了不少文章,且費了不少時間去時間去一一實踐,希望對各位帶來些幫助 😊
本系列以往文章請查看此分類鏈接jetpackcompose學習
圖標Icon使用
Icon接收三種參數,如下圖
//第一種就不多說,就是一個drawble對象
//獲取圖片資源,R.drawble.xx或R.mipmap.xx
Icon(painter = painterResource(id = R.drawable.head1_1024), null)
//自帶的圖標
Icon(Icons.Filled.Search, null)
Compose內置了幾十個常用的圖標,我們使用枚舉類型即可使用
Icons里面定了5種類型Outlined Filled Sharp TwoTone Rounded,可以根據自己的需要選擇不同的類型,如填充型(Filled)或者是輪廓型(Outlined)
Icon的構造方法參數簡單說明下
contentDescription是給無障礙人使用的文本描述,考慮到一些視覺障礙的人使用,所以有個這個屬性,會使用TTS語音播放將contentDescription屬性讀出來,告知用戶此按鈕的作用
tint則是圖標顏色的設置
Row() {
Icon(Icons.Outlined.Settings, contentDescription = null, tint = Color.Red)
Icon(Icons.Filled.Settings, contentDescription = null, tint = Color.Blue)
Icon(Icons.Sharp.Settings, contentDescription = null, tint = Color.Green)
Icon(Icons.TwoTone.Settings, contentDescription = null, tint = Color.Red)
Icon(Icons.Rounded.Settings, contentDescription = null, tint = Color.Black)
}
效果如下圖所示
PS:具體的圖標名稱寫的時候會有代碼提示
不過默認常用的就那40幾個,其他的圖標就沒有包含在內,當然,如果你想用的話,也有方法實現,需要導入material-icons-extended依賴即可
dependencies {
...
implementation "androidx.compose.material:material-icons-extended:$compose_version"
}
但是全套圖標會導致打包后的apk文件過大,所以官方推薦使用導入圖標文件的方法,詳情可參考官方文檔
按鈕 Button
Button這個組件,官方已經實現了Material Design的效果,一般來說我們直接使用這個即可
除此之外,官方也是給我們封裝了不同類型的Button,分別為IconButton TextButton OutlinedButton IconToggleButton
上面我們剛講了圖標,下面就先講些圖標按鈕IconButton的使用方式吧
基本使用
和以往我們使用的按鈕不一樣,這里的按鈕可以看做是一個布局控件,我們需要設置文字也就是往里面添加一個Text組件,這就是compose和傳統Android的xml的不同之處
由上面這點,所以我們在代碼層面就十分靈活,可以實現各種效果(如帶有圖標的按鈕),下面來個例子
Button(onClick = { println("點擊了按鈕")}){
Icon(Icons.Default.Search,contentDescription = null)
Text(text = "測試")
}
上面的代碼實現的效果就是有個圖標在左側
參數講解
我們先看下Button的定義,其實封裝好的方法,代碼如下所示
fun Button(
onClick: () -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
elevation: ButtonElevation? = ButtonDefaults.elevation(),
shape: Shape = MaterialTheme.shapes.small,
border: BorderStroke? = null,
colors: ButtonColors = ButtonDefaults.buttonColors(),
contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
content: @Composable RowScope.() -> Unit
)
Button的content參數(也就是上面lambda),傳入多個組件,Button會將其按照水平方式排列(即Button可視為Row布局)
由於kotlin的語法特性,所以我們可以在后面以花括號寫個lambda函數
這里先講下比較簡單的參數:
onClick是點擊事件.也是接收一個函數modifier是修飾符,本章先不使用,之后出個篇文章,專門講解下這個的用法enabled按鈕是否可用(不可用默認是灰色，可用默認是藍色),當然這里的默認的禁用和可用的顏色可可以調整,詳情請見下面的colors參數
接下來就是稍微有點復雜的參數說明了,因為用法與之前原生Button有所區別,這里特別分成一小節講解,方便目錄查閱
1.elevation 陰影
Button的陰影參數是有有默認值的,我們也可以使用下面的方法進行數值的修改
ButtonDefaults.elevation(defaultElevation,pressedElevation,disabledElevation)
defaultElevation表示默認的陰影pressedElevation表示按下時的陰影disabledElevation表示未啟用時候的陰影
Button(
enabled = true,
onClick = { /*TODO*/ },
elevation = ButtonDefaults.elevation(4.dp, 10.dp, 0.dp)
) {
Text(text = "陰影按鈕")
}
Button(
enabled = false,
onClick = { /*TODO*/ },
elevation = ButtonDefaults.elevation(4.dp, 10.dp, 0.dp)
) {
Text(text = "禁用狀態的陰影按鈕")
}
PS:使用的時候,發現導包會失敗,給了些奇怪的東西...建議復制下ButtonDefaults.elevation(),再輸入參數
2.shape 形狀
Android官方給我們提供了以下四種形狀,我從代碼提示里只看到有這四種147
RoundedCornerShape圓角形狀CutCornerShape切角形狀AbsoluteRoundedCornerShape絕對圓角形狀AbsoluteCutCornerShape絕對切角形狀
這里從字面翻譯知道其的意思,但是具體圓角形狀和絕對圓角形狀有什么區別,實際測試也有,但是沒法看出來有什么區別,官方的文檔也是解釋的有點模糊
后來者如果知道,可以在評論區回復下,感謝~
上面四種類的接收參數其實是一樣的,這里就截個圖給大家看看
我們常用就是使用dp定位進行設置,如
RoundedCornerShape(10.dp) //設置10dp的圓角
RoundedCornerShape(topStart = 5.dp,topEnd = 6.dp,bottomEnd = 10.dp,bottomStart = 10.dp)
topStart左上角topEnd右上角bottomStart左下角bottomEnd右下角
PS: 記住start是左,end是右,上面就比較好記了
Button(
onClick = { /*TODO*/ },
elevation = ButtonDefaults.elevation(4.dp, 10.dp, 0.dp),
shape = RoundedCornerShape(topStart = 5.dp,topEnd = 6.dp,bottomEnd = 10.dp,bottomStart = 10.dp)
) {
Text(text = "按鈕")
}
我們可以實現如下圖的效果
代碼如下:
Modifier.size(50.dp,50.dp)是用來設置寬高的
Row() {
//固定長寬一樣,圓角設置為50%即為圓形
Button(
modifier = Modifier.size(50.dp,50.dp),
onClick = { /*TODO*/ },
shape = RoundedCornerShape(50),
) {
Text(text = "")
}
//固定長寬一樣,切角設置為50%即為菱形
Button(
modifier = Modifier.size(50.dp,50.dp),
onClick = { /*TODO*/ },
shape = CutCornerShape(50.dp),
) {
Text(text = "")
}
//左上角設置圓角
Button(
onClick = { /*TODO*/ },
shape = RoundedCornerShape(topStart = 20.dp),
) {
Text(text = "按鈕")
}
//圓角設置為50%
Button(
onClick = { /*TODO*/ },
shape = RoundedCornerShape(50),
border = BorderStroke(1.dp, Color.Green),
colors = ButtonDefaults.buttonColors(),
) {
Text(text = "按鈕111")
}
Button(
modifier = Modifier.size(50.dp,50.dp),
onClick = { /*TODO*/ },
shape = CutCornerShape(25),
border = BorderStroke(1.dp, Color.Green),
colors = ButtonDefaults.buttonColors(),
) {
Text(text = "按鈕111")
}
}
3.border 邊框
邊框就簡單了,使用BorderStroke,接收兩個參數,一個是邊框的寬度,另外一個則是邊框的顏色
BorderStroke(1.dp,color = Color.Black)
Button(
onClick = { /*TODO*/ },
elevation = ButtonDefaults.elevation(4.dp, 10.dp, 0.dp),
shape = RoundedCornerShape(topStart = 5.dp,topEnd = 6.dp,bottomEnd = 10.dp,bottomStart = 10.dp),
border = BorderStroke(1.dp, Color.Green)
) {
Text(text = "邊框按鈕")
}
4.colors 顏色
可以通過下面的方法進行顏色的參數的設置
ButtonDefaults.buttonColors(backgroundColor,contentColor,disabledBackgroundColor,disabledContentColor)
backgroundColor表示設置背景顏色contentColor表示設置內容顏色這里比如說是登錄文本的顏色disabledBackgroundColor表示enable等於false的時候的背景顏色disabledContentColor表示enable等於false時候的內容的顏色
PS:這個和之前的一樣,直接導包會報錯,使用復制大法
ButtonDefaults.buttonColors()解決
5.contentPadding 內容內邊距
contentPadding參數接收一個PaddingValues對象,這個對象的構造方法如下:
PaddingValues(all)PaddingValues(horizontal: Dp, vertical: Dp)PaddingValues(start: Dp = 0.dp,top: Dp = 0.dp,end: Dp = 0.dp,bottom: Dp = 0.dp)
PaddingValues(10.dp) //所有內邊距為10dp
PaddingValues(10.dp,20.dp) //左右內邊距ge10dp,上下內邊距各20dp
PaddingValues(10.dp,15.dp,20.dp,25.dp) //左內邊距10dp,上內邊距15dp,右內邊距20dp,下內邊距25dp
6.interactionSource 狀態變化
這個主要是用來按鈕的狀態說明,我們可以使用這個來達到動態切換按鈕樣式的效果(如按下按鈕的樣式效果,松開后按鈕的樣式),類似我們之前常用selector的xml文件給按鈕設置樣式
可以處理狀態的，比如按下的時候什么效果，正常時候什么效果。類似之前再布局文件里寫Selector
interactionSource是一個接口,我們需要使用其的實現類MutableInteractionSource
MutableInteractionSource中提供了三個屬性用來獲取狀態
collectIsPressedAsState按壓狀態collectIsDraggedAsState拖動狀態collectIsFocusedAsState焦點狀態
我們可以可以此狀態來動態更改按鈕的樣式,如下面的代碼
@Preview(showBackground = true)
@Composable
fun DefaultPreview2() {
val myInteractionSource = remember {
MutableInteractionSource()
}
val pressState = myInteractionSource.collectIsPressedAsState()
//如果是按壓狀態則是切角形狀,否則則是圓角形狀
val myShape = if(pressState.value) CutCornerShape(10.dp) else RoundedCornerShape(10.dp)
Column(
Modifier.padding(20.dp)
) {
Button(
onClick = { /*TODO*/ },
//設置我們定義的shape
shape = myShape,
//設置創建的MutableInteractionSource對象
interactionSource = myInteractionSource
) {
Text("你好")
}
}
}
效果如下(要按住才會變化):
補充:
構造一個可觀察的狀態對象可以使用下面的三種方法,唯一有所區別的是,返回值不一樣
val mutableState = remember { mutableStateOf(default) }
var value by remember { mutableStateOf(default) }
val (value, setValue) = remember { mutableStateOf(default) }
如下面有個例子:
val mutableState = remember { mutableStateOf("") } //mutableState是State<String>對象
var value by remember { mutableStateOf("") } //value是String對象
val (value, setValue) = remember { mutableStateOf("") }
一般選用by關鍵字的那種,代碼就比較方便,如果是第一種的話,需要通過mutableState.value才能拿到其保存的數值
這里強烈建議看下官方的文檔狀態和Jetpack Compose
圖標按鈕IconButton
IconButton 可以幫助我們生成一個可點擊的圖標按鈕,點擊按鈕默認會有水波漣漪的點擊效果
IconButton(onClick = { /*TODO*/ }) {
Icon(Icons.Filled.Search, null)
}
其實這里里面也可以傳多個組件,但是效果可能會變得怪怪的,所以我們就是按照規范來使用吧
TextButton
這個其實是扁平按鈕,之前有個FlatButton,然后改名成這個了,用法和Button一樣,就是樣式有所調整
TextButton(onClick = { /*TODO*/ }) {
Icon(Icons.Default.Search,contentDescription = null)
Text(text = "測試")
}
OutlinedButton
這個的話,看效果覺得應該是帶有邊框的按鈕,我們也可以根據實際需求改造
OutlinedButton(onClick = { /*TODO*/ }) {
Text(text = "測試")
}
TextField
TextField在第一篇登錄頁面也是有提及到,這里再深入了解下各個屬性
TextField 實現分為兩個級別：
1.TextField 是 Material Design 實現。我們建議您選擇此實現，因為它遵循的是 Material Design 指南：
- 默認樣式為填充
OutlinedTextField是輪廓樣式版本
2.BasicTextField 允許用戶通過硬件或軟件鍵盤編輯文字，但沒有提供提示或占位符等裝飾
TextField(value = "", onValueChange = {},label = {Text("用戶名")})
OutlinedTextField(value = "", onValueChange = {},label = {Text("用戶名")})
BasicTextField(value = "", onValueChange = {})
簡單來說,就是BasicTextField是超級原生的輸入框,其什么樣式都沒有,可以讓我們進行高度的自定義,而TextField和OutlinedTextField則是Android官方給我們封裝好Material Design樣式的控件
1.label
獲得輸入焦點,頂頭的文字提示,接收一個組件的lambda表達式,一般傳Text,示例代碼如下
TextField(value = "", onValueChange = {},label = {Text("用戶名")})
效果如下圖所示
2.leadingIcon
輸入框左邊顯示內容,leadingIcon接收來自一個組件的lambda表達式,可以是圖標、文本或者其他組件
TextField(
value = text,
onValueChange = {
text = it
},
leadingIcon = {
Icon(Icons.Filled.Search, null)
},
)
3.trailingIcon
輸入框右邊的內容，和上面的leadingIcon一樣的使用,這里不再贅述
PS:可以在右邊放個x的圖標,點擊刪除輸入全部文本功能哦 😉
4.singleLine
設置是否單行,接收一個boolean值
注: 此參數不能和
maxLines參數聯用
TextField(
value = text,
onValueChange = {
text = it
},
singleLine =true,
)
5.color
設置各種顏色,參數如下(參數真的多,應該夠靈活了吧🤣)
@Composable
fun textFieldColors(
// 輸入的文字顏色
textColor: Color = LocalContentColor.current.copy(LocalContentAlpha.current),
// 禁用 TextField 時，已有的文字顏色
disabledTextColor: Color = textColor.copy(ContentAlpha.disabled),
// 輸入框的背景顏色，當設置為 Color.Transparent 時，將透明
backgroundColor: Color = MaterialTheme.colors.onSurface.copy(alpha = BackgroundOpacity),
// 輸入框的光標顏色
cursorColor: Color = MaterialTheme.colors.primary,
// 當 TextField 的 isError 參數為 true 時，光標的顏色
errorCursorColor: Color = MaterialTheme.colors.error,
// 當輸入框處於焦點時，底部指示器的顏色
focusedIndicatorColor: Color = MaterialTheme.colors.primary.copy(alpha = ContentAlpha.high),
// 當輸入框不處於焦點時，底部指示器的顏色
unfocusedIndicatorColor: Color = MaterialTheme.colors.onSurface.copy(alpha = UnfocusedIndicatorLineOpacity),
// 禁用 TextField 時，底部指示器的顏色
disabledIndicatorColor: Color = unfocusedIndicatorColor.copy(alpha = ContentAlpha.disabled),
// 當 TextField 的 isError 參數為 true 時，底部指示器的顏色
errorIndicatorColor: Color = MaterialTheme.colors.error,
// TextField 輸入框前頭的顏色
leadingIconColor: Color = MaterialTheme.colors.onSurface.copy(alpha = IconOpacity),
// 禁用 TextField 時 TextField 輸入框前頭的顏色
disabledLeadingIconColor: Color = leadingIconColor.copy(alpha = ContentAlpha.disabled),
// 當 TextField 的 isError 參數為 true 時 TextField 輸入框前頭的顏色
errorLeadingIconColor: Color = leadingIconColor,
// TextField 輸入框尾部的顏色
trailingIconColor: Color = MaterialTheme.colors.onSurface.copy(alpha = IconOpacity),
// 禁用 TextField 時 TextField 輸入框尾部的顏色
disabledTrailingIconColor: Color = trailingIconColor.copy(alpha = ContentAlpha.disabled),
// 當 TextField 的 isError 參數為 true 時 TextField 輸入框尾部的顏色
errorTrailingIconColor: Color = MaterialTheme.colors.error,
// 當輸入框處於焦點時，Label 的顏色
focusedLabelColor: Color = MaterialTheme.colors.primary.copy(alpha = ContentAlpha.high),
// 當輸入框不處於焦點時，Label 的顏色
unfocusedLabelColor: Color = MaterialTheme.colors.onSurface.copy(ContentAlpha.medium),
// 禁用 TextField 時，Label 的顏色
disabledLabelColor: Color = unfocusedLabelColor.copy(ContentAlpha.disabled),
// 當 TextField 的 isError 參數為 true 時，Label 的顏色
errorLabelColor: Color = MaterialTheme.colors.error,
// Placeholder 的顏色
placeholderColor: Color = MaterialTheme.colors.onSurface.copy(ContentAlpha.medium),
// 禁用 TextField 時，placeholder 的顏色
disabledPlaceholderColor: Color = placeholderColor.copy(ContentAlpha.disabled)
)
代碼使用:
TextField(
value = text,
onValueChange = {
text = it
},
leadingIcon = {
Icon(Icons.Filled.Search, null)
},
colors = TextFieldDefaults.textFieldColors(
textColor = Color(0xFF0079D3),
backgroundColor = Color.Transparent
)
)
效果:
6.visualTransformation 視圖變化
視圖變化是我自己翻譯出來的,也不知道准不准確,個人更傾向於理解成輸入類型(inputType) 😃
這個有點類似之前原生的inputType,可以改變輸入的字符串（如密碼或者是輸入手機號時候多個-),不過官方目前只實現了PasswordVisualTransformation,其他的需要我們自定義
使用的話也很簡單
var inputText by remember { mutableStateOf("") }
TextField(value = inputText, onValueChange = {value-> inputText= value},visualTransformation = PasswordVisualTransformation())
我們如果想實現Android那種帶有個圖標,點擊可以顯示密碼的輸入框,該怎么實現呢?
其實也很簡單,設置個可觀察的boolean值,點擊圖標改變數值即可,具體可參考下面代碼
//密碼內容
var inputText by remember { mutableStateOf("") }
//是否展示密碼(默認是false)
var isShowPwd by remember { mutableStateOf(false) }
//顯示效果(true:顯示內偶然你 false:顯示密碼的"*"好
val myVisualTransformation =
if (isShowPwd) VisualTransformation.None else PasswordVisualTransformation()
TextField(
value = inputText,
colors=TextFieldDefaults.textFieldColors(backgroundColor = Color.Transparent),
onValueChange = { value -> inputText = value },
visualTransformation = myVisualTransformation,
trailingIcon = {
//根據表示不同,顯示不同的圖標
if (isShowPwd) {
//當前是顯示密碼,則圖標為眼睛
IconButton(onClick = {
//更改標志
isShowPwd = !isShowPwd
}) {
Icon(painter = painterResource(id = R.drawable.eye_show), null)
}
} else {
//當前是隱藏密碼,則圖標為眼睛禁止
IconButton(onClick = {
//更改標志
isShowPwd = !isShowPwd
}) {
Icon(painter = painterResource(id = R.drawable.eye_hide), null)
}
}
})
上面的兩個圖標是我自己去iconfont-阿里巴巴矢量圖標庫上找,效果如下:
補充(自定義VisualTransformation)
注意: 經過實踐發現,這個只是改變了顯示的數值而已😅,實際上你輸入什么,保存的數值還是那個,單純只是TextField沒顯示而已,不是很清楚這個操作,那這樣是不能實現限制長度的功能,密碼顯示星號這種效果應該沒啥問題
此功能有待討論,或者是可能官方后面會更新長度限制等功能?
上面說到官方只實現了一個簡單的密碼輸入類型,那如果我們想自定義該如何實現呢?
好在官方也是在API文檔中給了個例子,可以實現輸入信用卡號,以-隔開的效果
我們先看下官方的代碼及效果(有點坑,官方只給出了一部分代碼,稍微琢磨了一番才知道它是實現了VisualTransformation接口,並重寫了filter()方法)
class CardVisualTransformation : VisualTransformation{
override fun filter(text: AnnotatedString): TransformedText {
// Making XXXX-XXXX-XXXX-XXXX string.
val trimmed = if (text.text.length >= 16) text.text.substring(0..15) else text.text
var out = ""
for (i in trimmed.indices) {
out += trimmed[i]
if (i % 4 == 3 && i != 15) out += "-"
}
/**
* The offset translator should ignore the hyphen characters, so conversion from
* original offset to transformed text works like
* - The 4th char of the original text is 5th char in the transformed text.
* - The 13th char of the original text is 15th char in the transformed text.
* Similarly, the reverse conversion works like
* - The 5th char of the transformed text is 4th char in the original text.
* - The 12th char of the transformed text is 10th char in the original text.
*/
val creditCardOffsetTranslator = object : OffsetMapping {
override fun originalToTransformed(offset: Int): Int {
if (offset <= 3) return offset
if (offset <= 7) return offset + 1
if (offset <= 11) return offset + 2
if (offset <= 16) return offset + 3
return 19
}
override fun transformedToOriginal(offset: Int): Int {
if (offset <= 4) return offset
if (offset <= 9) return offset - 1
if (offset <= 14) return offset - 2
if (offset <= 19) return offset - 3
return 16
}
}
return TransformedText(AnnotatedString(out), creditCardOffsetTranslator)
}
}
之后我們將TextField設置為上面的對象,代碼如下
//密碼內容
var inputText by remember { mutableStateOf("") }
//我們定義的卡號VisualTransformation
val myVisualTransformation = CardVisualTransformation()
TextField(
value = inputText,
label={
Text(text = "卡號")
},
colors=TextFieldDefaults.textFieldColors(backgroundColor = Color.Transparent),
onValueChange = { value -> inputText = value },
visualTransformation = myVisualTransformation
)
效果如下:
可以看見,每輸入4個字符,后面會自動加上-,且輸入了16個字符后,就無法繼續輸入了,刪除的時候,也會自動將-刪除,我們分析下代碼
//這里的text是之前提到的AnnotatedString類型
//最大程度過濾,只要16個字符,大於16個字符,后面的字符就忽略掉
val trimmed = if (text.text.length >= 16) text.text.substring(0..15) else text.text
//TextFiel顯示的數據,滿足條件即追加"-"
var out = ""
for (i in trimmed.indices) {
out += trimmed[i]
//最后個字符不需要加"-"(即中間每隔四個字符追加"-")
if (i % 4 == 3 && i != 15) out += "-"
}
接下來是實現了一個接口OffsetMapping
官方文檔關於此類說明: 提供原始文本和轉換文本(transformed text)之間的雙向偏移映射
看到這里,相信各位對原理已經有了一定的了解,VisualTransformation這個類其實就是將原始文本轉為轉換文本,所以我們看到filter(text: AnnotatedString)最后是返回的一個TransformedText對象
val creditCardOffsetTranslator = object : OffsetMapping {
//原始文本對應的轉換文本的下標映射
override fun originalToTransformed(offset: Int): Int {
if (offset <= 3) return offset
if (offset <= 7) return offset + 1
if (offset <= 11) return offset + 2
if (offset <= 16) return offset + 3
//轉換文本最大長度為19
return 19
}
//轉換文本對應的原始文本下標映射
override fun transformedToOriginal(offset: Int): Int {
//4 9 14都是"-"的下標位置
if (offset <= 4) return offset
if (offset <= 9) return offset - 1
if (offset <= 14) return offset - 2
if (offset <= 19) return offset - 3
//原始文本的最大長度為16
return 16
}
}
映射這里稍微想下就明白了,如有個
abcdefgh,其對應的轉換文本就為abcd-efgh,其中,a-d是下標沒變,都對應得上,但從e開始,由於多了個-,所以原始文本中e的下標為4,而在轉換文本中,e的下標變為了5,后面的以此類推,反過來也是同理
我們根據官方的,改下手機號的,代碼如下
class PhoneVisualTransformation : VisualTransformation{
override fun filter(text: AnnotatedString): TransformedText {
val trimmed = if (text.text.length >= 11) text.text.substring(0,11) else text.text
var out = ""
for (i in trimmed.indices) {
out += trimmed[i]
if (i==2 || i==6 ) out += "-"
}
// 147-9611-3406
// 14796113406
val creditCardOffsetTranslator = object : OffsetMapping {
override fun originalToTransformed(offset: Int): Int {
if (offset <= 2) return offset
if(offset<=6) return offset + 1
if (offset <= 11) return offset + 2
return 13
}
override fun transformedToOriginal(offset: Int): Int {
if (offset <= 3) return offset
if (offset <= 8) return offset - 1
if (offset <= 14) return offset - 2
return 11
}
}
return TransformedText(AnnotatedString(out), creditCardOffsetTranslator)
}
}
效果如下所示:
