iOS、Android 实现电话号码格式化操作

作者: l蓝色梦幻 | 来源:发表于2018-07-05 18:25 被阅读208次

iOS、Android 实现电话号码格式化操作
在线工具网站
当你写爬虫抓不到APP请求包的时候该怎么办？【中级篇】
自适应文字大小的TextView
六、Flutter之数据库
IOS UITextField 内容格式化
卓越智驾实现效果展示
String格式化及String 值动态替换
Python 格式化输出
ios - android - web emoji互通方案及实现

控件简介

最近研究如何根据配置好的字符串去格式化电话号码等信息。由于项目要求，我们格式化的字符串是客户在网页端自定义的。因此要求我们这边需要针对不同的配置进行动态的格式化字符串。例如：需要格式化为 +86 XXX-XXXX-XXXX, X 替换为 number 去格式化字符串。网络上搜索了一下，基本上没有成熟的代码可用。索性，自己实现一套。

思路：

在 TextField 的代理方法中，func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool。我们可以在这个方法中拦截掉输入请求，自己管理字符串的键入与显示。这样就可以实现任意功能。在方法中，我的思路是：

根据当前未做变化前的显示字符串中计算出未格式化的数字字符串
根据当前显示字符串中的 Range 计算在数字字符串中的 Range
操作数字字符串中的 Range，并获取在数字字符串上的光标停留位置
生成显示的字符串，根据数字字符串的光标位置计算显示字符串的光标位置。

iOS 代码部分

代码部分：

根据原来的字符串生成未格式化的数字字符串

private func getOriString() -> String {
    var str = ""
    for index in 0..<phoneFormate.count {
        let start = phoneFormate.index(phoneFormate.startIndex, offsetBy:index)
        let end = phoneFormate.index(start, offsetBy:1)
        let x = String(phoneFormate[start..<end])
        if textField.text!.count > index {
            let y = String(textField.text![start..<end])
            if String(x) == "X" {
                str += y
            }
        }
    }
    return str
}

根据字符串操作的 Range 计算在未格式化字符串上操作的 Range。

 private func getOriRange(_ range: NSRange) -> NSRange {
     var myLocation = 0
     var richLocation = false
     var currentLength: Int?
     var oriLength: Int?
     for index in 0..<phoneFormate.count {
         let start = phoneFormate.index(phoneFormate.startIndex, offsetBy:index)
         let end = phoneFormate.index(start, offsetBy:1)
         let x = String(phoneFormate[start..<end])
         
         if range.length == currentLength {
             return NSRange(location: myLocation, length: oriLength ?? 0)
         }
         if range.location == index {
             richLocation = true
             currentLength = 0
             oriLength = 0
             if range.length == 0 {
                 return NSRange(location: myLocation, length: 0)
             }
         }
         if String(x) == "X" {
             if !richLocation {
                 myLocation += 1
             }
             if oriLength != nil {
                 oriLength = oriLength! + 1
             }
         }
         
         if currentLength != nil {
             currentLength = currentLength! + 1
         }
     }
     return NSRange(location: myLocation, length: oriLength ?? 0)
 }

操作未格式化的字符串，并返回最终光标在未格式化字符串上的位置

private func operationOriString(oriStr: String, oriRange: NSRange, string: String) -> Int {
    var selectedIndex = 0
    if string.count == 0 {
        origineString = (oriStr as NSString).replacingCharacters(in: oriRange, with: string)
        selectedIndex = oriRange.location
    } else {
        let start = oriStr.index(oriStr.startIndex, offsetBy:oriRange.location + oriRange.length)
        let firstStr = String(oriStr[oriStr.startIndex..<start])
        let lastStr = String(oriStr[start..<oriStr.endIndex])
        
        selectedIndex = firstStr.count + 1
        origineString = firstStr + string + lastStr
    }
    if origineString.count > formateInfo.numberCount {
        origineString = String(origineString[origineString.startIndex..<origineString.index(origineString.startIndex, offsetBy:formateInfo.numberCount)])
    }
    return selectedIndex
}

生成格式化后的字符串，并根据原始字符串的光标位置生成格式化后字符串的光标

private func generateStr(_ oriIndex: Int) -> (String, Int) {
    var showStr = ""
    var index = 0
    var selectedIndex = 0
    for f in 0..<phoneFormate.count {
        let start = phoneFormate.index(phoneFormate.startIndex, offsetBy:f)
        let end = phoneFormate.index(start, offsetBy:1)
        let x = String(phoneFormate[start..<end])
        if oriIndex == index {
            selectedIndex = f
        }
        if String(x) == "X" {
            if origineString.count > index {
                let start = origineString.index(origineString.startIndex, offsetBy:index)
                if origineString.count > 1 {
                    let end = origineString.index(start, offsetBy:1)
                    showStr += String(origineString[start..<end])
                } else {
                    showStr += origineString
                }
                index += 1
            } else {
                break
            }
        } else {
            if origineString.count > index {
                showStr += x
            } else {
                break
            }
        }
    }
    if oriIndex == index && selectedIndex == 0 {
        selectedIndex = phoneFormate.count
    }
    return (showStr, selectedIndex)
}

总的调用函数。

func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
    // 没有格式化，当做普通的 TextField 使用
    if self.phoneFormate == "" && self.regularFormate == "" {
        return true
    }
    
    // 字符串超长，并且当前操作是输入操作，光标放置到最后。
    if origineString.count >= formateInfo.numberCount && string.count > 0 {
        textField.selectedTextRange = textField.textRange(from: textField.endOfDocument, to: textField.endOfDocument)
        return false
    }
    // 手动管理修改字符串。
    self.modifyValueIn(range: range, string: string)
    // 发送事件，外部可以获取实时字符串
    sendActions(for: .editingChanged)
    
    return false
}

public func modifyValueIn(range: NSRange, string: String)  {
    // 1. 提取原始字符串
    let oriStr = self.getOriString()
    
    // 2. 根据 range 生成原始字符串 range
    let oriRange: NSRange = self.getOriRange(range)
    
    // 3. 操作原始字符串, 并获取在显示字符串中字符光标的位置
    let selectedIndex = self.operationOriString(oriStr: oriStr, oriRange: oriRange, string: string)
    
    // 4. 生成显示字符串
    let showStr = self.generateStr(selectedIndex)
    
    // 5. 计算最终的光标移位
    textField.insertText(showStr.0)
    textField.text = showStr.0
    if string.count == 0 {
        textField.selectedTextRange = textField.textRange(from: textField.endOfDocument, to: textField.endOfDocument)
    } else {
        let newPosition = textField.position(from: textField.beginningOfDocument, offset: showStr.1)
        textField.selectedTextRange = textField.textRange(from: newPosition!, to: newPosition!)
    }
}

Android 代码部分

Android 思路与 iOS 版本的思路相同。不过不同之处在于，iOS 使用的是代理方法中的 func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool。拦截掉输入请求。而 Android 中并没有对应的方法。但是 Android 有着 TextWatcher 与 iOS 的代理方法类似。经过一些测试，我对 TextWatcher 的实现做了一部分修改，可以实现与 iOS 类似的功能。

针对 TextWatcher 做出计算类的修改, 在 afterTextChanged 方法中实现计算方法就可以了。

private class PhoneFormateInfo(var numberCount: Int = 0)
private class NSRange(var location: Int, var length: Int)
private class GenerateStringStatus(var showStr: String, var selectedIndex: Int)

private var beginStr: String? = null
private var replacementString: String = ""
private var range: NSRange? = null

private fun reset() {
    range = null
    beginStr = null
    replacementString = ""
}

override fun afterTextChanged(s: Editable?) {
    if (phoneFormate == "" && regularFormate == "") {
        reset()
        return
    }
    if (origineString.length >= formateInfo.numberCount && replacementString!!.isNotEmpty()) {
        editView.removeTextChangedListener(this)
        editView.setText(beginStr!!)
        editView.setSelection(beginStr!!.length)
        textUpdateListener?.textDidChanged(beginStr!!)
        judgeRegular()
        editView.addTextChangedListener(this)
        reset()
        return
    }

    modifyValueIn(range!!, replacementString!!)
    reset()

    judgeRegular()
}


// 输入框的原内容字符串S，从索引位置start开始，有count个字符即将被替换，替换这个count个字符的新的字符个数为after。注意：S是变化之前的输入框内容。
override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {
    beginStr = s.toString()
    range = if (count > 0) {
        NSRange(start, count)
    } else {
        NSRange(start, 0)
    }
}

// 在变化时的新的字符串S里，从索引位置start开始，有count个字符，是替换了原来的before个字符的。注意：S是变化之后的输入框内容
override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
    if (count > 0) {
        val string = s.toString().substring(start, start + count)
        for (index in 0 until string.length) {
            val charStr = string[index]
            val num = charStr.toInt()
            if (num in 48..57) {
                replacementString += charStr.toString()
            }
        }
    }
}

同样的思路，实现格式化字符串

/// 生成原始字符串
private fun getOriString(): String {
    var str = ""
    for (index in 0 until phoneFormate.length) {
        val x = phoneFormate[index].toString()
        if (beginStr!!.length > index) {
            val y = beginStr!![index].toString()
            if (x == "X") {
                str += y
            }
        }
    }
    return str
}

// 根据字符串操作范围生成原始字符串操作范围
private fun getOriRange(range: NSRange): NSRange {
    var myLocation = 0
    var richLocation = false
    var currentLength: Int? = null
    var oriLength: Int? = null
    for (index in 0 until phoneFormate.length) {
        val x = phoneFormate[index].toString()

        if (currentLength != null && range.length == currentLength) {
            return NSRange(myLocation, oriLength ?: 0)
        }
        if (range.location == index) {
            richLocation = true
            currentLength = 0
            oriLength = 0
            if (range.length == 0) {
                return NSRange(myLocation, 0)
            }
        }
        if (x == "X") {
            if (!richLocation) {
                myLocation += 1
            }
            if (oriLength != null) {
                oriLength = oriLength!! + 1
            }
        }

        if (currentLength != null) {
            currentLength = currentLength!! + 1
        }
    }
    return NSRange(myLocation, oriLength ?: 0)
}

private fun generateStr(oriIndex: Int): GenerateStringStatus {
    var showStr = ""
    var index = 0
    var selectedIndex = 0
    for (f in 0 until phoneFormate.length) {
        val x = phoneFormate[f].toString()

        if (oriIndex == index) {
            selectedIndex = f
        }
        if (x == "X") {
            if (origineString.length > index) {
                if (origineString.length > 1) {
                    showStr += origineString[index].toString()
                } else {
                    showStr += origineString
                }
                index += 1
            } else {
                break
            }
        } else {
            if (origineString.length > index) {
                showStr += x
            } else {
                break
            }
        }
    }
    if (oriIndex == index && selectedIndex == 0) {
        selectedIndex = phoneFormate.length
    }
    return GenerateStringStatus(showStr, selectedIndex)
}

private fun operationOriString(oriStr: String, oriRange: NSRange, string: String): Int {
    var selectedIndex = 0
    if (string.isEmpty()) {
        origineString = oriStr.replaceRange(oriRange.location, oriRange.location + oriRange.length, string)
        selectedIndex = oriRange.location
    } else {

        val firstStr = oriStr.substring(0, oriRange.location + oriRange.length).toString()
        val lastStr = oriStr.substring( oriRange.location + oriRange.length, oriStr.length).toString()

        selectedIndex = firstStr.length + 1
        origineString = firstStr + string + lastStr
    }
    if (origineString.length > formateInfo.numberCount) {
        origineString = origineString.substring(0, formateInfo.numberCount)
    }
    return selectedIndex
}

private fun modifyValueIn(range: NSRange, string: String)  {
    // 1. 提取原始字符串
    val oriStr = getOriString()

    // 2. 根据 range 生成原始字符串 range
    val oriRange: NSRange = getOriRange(range)

    // 3. 操作原始字符串, 并获取在显示字符串中字符光标的位置
    val selectedIndex = operationOriString(oriStr, oriRange, string)

    // 4. 生成显示字符串
    val showStr = generateStr(selectedIndex)
    editView.removeTextChangedListener(this)

    // 5. 计算最终的光标移位
    editView.setText(showStr.showStr)
    if (string.isEmpty()) {
        editView.setSelection(showStr.showStr.length)
    } else {
        editView.setSelection(showStr.selectedIndex)
    }
    textUpdateListener?.textDidChanged(showStr.showStr)
    editView.addTextChangedListener(this)
}

由于 Android 版本在复制粘贴可能存在问题，因此需要禁止掉它的复制粘贴功能

fun canPaste(): Boolean {
    return false
}

fun canCut(): Boolean {
    return false
}

fun canCopy(): Boolean {
    return false
}

fun canSelectAllText(): Boolean {
    return false
}

fun canSelectText(): Boolean {
    return false
}

fun textCanBeSelected(): Boolean {
    return false
}

override fun onTextContextMenuItem(id: Int): Boolean {
    return true
}

init {
    isLongClickable = false
    setTextIsSelectable(false)

    inputType = InputType.TYPE_CLASS_NUMBER
    filters = listOf(InputFilter { _, _, _, _, _, _ -> null }).toTypedArray()

    customSelectionActionModeCallback = object: ActionMode.Callback {
        override fun onActionItemClicked(mode: ActionMode?, item: MenuItem?): Boolean {
            return false
        }

        override fun onCreateActionMode(mode: ActionMode?, menu: Menu?): Boolean {
            return false
        }

        override fun onPrepareActionMode(mode: ActionMode?, menu: Menu?): Boolean {
            return false
        }

        override fun onDestroyActionMode(mode: ActionMode?) {
        }
    }
}

至此，Android 功能也就完成了。

Android 注意点：在代码中设置 text 值的时候，TextWatcher 同样调用了。因此我在设置 text 的时候拿掉了 TextWatcher 代理，设置完成后加上了 TextWatcher 代理。目前来看还算 ok。

总结

这么写的好处在于可以自定义格式，并且代码通用。不需要一个格式写一套格式代码。

Android 是由于公司同事没有时间实现，因此我就看了一下 Android 的 TextEdit 的原理实现了一下。可能存在问题，敬请指教。

iOS、Android 实现电话号码格式化操作
控件简介最近研究如何根据配置好的字符串去格式化电话号码等信息。由于项目要求，我们格式化的字符串是客户在网页端自定...
在线工具网站
在线Photoshop Android&iOS图标在线生成 JSON在线格式化校验 JSON格式化、加密解密等等非...
当你写爬虫抓不到APP请求包的时候该怎么办？【中级篇】
文中均为Android环境下，iOS实现同样的操作需要越狱，复杂度比Android高得多，强烈建议使用Androi...
自适应文字大小的TextView
有些产品就是变态 ios 能实现的他一定要让 android 实现，android 能实现的非要ios实现，...
六、Flutter之数据库
Flutter中操作数据库可以通过sqflite来实现，支持事务和批量操作，支持在Android、iOS后台线程执...
IOS UITextField 内容格式化
电话号码，银行卡号等内容格式化途径：通过UITextFiled 的delegate实现废话少说，上代码解释：...
卓越智驾实现效果展示
Android原生实现效果 IOS原生实现效果 React Native实现效果 1.Android上运行效果 2...
String格式化及String 值动态替换
日期格式化普通格式化 android中TextView与Html结合使用实现字体和颜色的不同，并且换行 %n$m...
Python 格式化输出
1.%操作符 %操作可以实现字符串格式化 >>>print("%o" % 10)12>>>print("%d" %...
ios - android - web emoji互通方案及实现
ios - android - web emoji互通方案及实现