美文网首页iOS资料iOS--开发技巧iOS学习集--网上转载
iOS邮箱登录后缀下拉提示的实现(附源码)

iOS邮箱登录后缀下拉提示的实现(附源码)

作者: XinStar | 来源:发表于2016-06-05 15:58 被阅读1402次

    前言

    之前要做一个类似微博那样输入邮箱登录时出现相关联的邮箱后缀提示,就是下面这种效果。

    textFieldResult.gif

    没找到很好用的第三方库,只能自己写一个,花费了不少时间,现在贡献出来,希望能够帮到大家。

    具体实现

    首先,实现邮箱下拉提示这个效果思路还是比较简单明确的,就是一个监听textField的状态,每当用户输入或删除文字时做出判断,如果里面含有“@”,就显示一个tableView,并用NSPredicate过滤显示相关后缀,但具体实现封装时还是费了一番功夫。
    首先自定义一个UITextField的子类,将下拉提示的tableView作为它的一个属性,并且用这个TextField作为tableView的代理对象

    .h文件
    @interface AZXEmailTextField : UITextField
    .m文件
    @interface AZXEmailTextField ()<UITableViewDataSource, UITableViewDelegate>
    // 邮箱下拉提示列表
    @property (strong, nonatomic) UITableView *promptTableView;
    

    先把最重要的初始化方法写好,这里因为考虑到大家要面临不同的情况,所以我让开发者自己决定要把这个TextField加到那个View里面作为其超类,当然frame这个参数也是在那个View中的frame,至于setUpInView这个方法有点长我就不在这里贴出来了,大家对具体实现感兴趣的可以把源码下载下来看一下

    - (instancetype)initWithFrame:(CGRect)frame InView:(UIView *)view {
        if (self = [super initWithFrame:frame]) {
            return [self setUpInView:view];
        }
        return nil;
    }
    

    然后就是要监听用户的改变textField文字的动作了,这里有两种方法,可以用UITextField的代理方法,但是为了能把这个类尽量封装的简单点,我使用的是另一种方法,直接监听其状态的改变(注意,这里的self就是我自定义的那个AZXEmailTextField)

    [self addTarget:self action:@selector(textFieldDidChanged) forControlEvents:UIControlEventEditingChanged];
    

    下面就是实现提示相关后缀的功能了,首先判断,只要用户已输入“@”字符,就将下拉列表显示出来(默认是hidden的),然后使用NSArray的filteredArrayUsingPredicate方法,过滤出匹配用户输入邮箱的提示

    - (void)textFieldDidChanged {
        if ([self.text containsString:@"@"]) {
            self.promptTableView.hidden = NO;
            // @后面的subString
            NSString *latterStr = [self.text substringFromIndex:[self.text rangeOfString:@"@"].location+1];
            if ([latterStr isEqualToString:@""]) {
                self.matchedSuffixArray = self.emailSuffixArray;
            } else {
                self.matchedSuffixArray = [self.emailSuffixArray filteredArrayUsingPredicate:[NSPredicate predicateWithFormat:@"self beginswith %@", [self deleteSpacesInString:latterStr]]];
                if (self.matchedSuffixArray.count == 0) {
                    self.promptTableView.hidden = YES;
                }
            }
            
            [self.promptTableView reloadData];
        } else {
            self.promptTableView.hidden = YES;
        }
    }
    

    再然后,就是显示下拉邮箱列表的具体样式了,考虑到大家具体的需求可能都不一样,我留下许多API供大家高度的自定义下拉样式,比如下拉列表的高度,邮箱后缀的内容,文字离列表左边的距离,文字的字体大小颜色,分割线的左右距离等等。如果想要上图中的默认样式效果,那只要简单的一句代码就搞定了,然后把它加到你想加的View里,剩余的都不用你操心!

    AZXEmailTextField *textField = [[AZXEmailTextField alloc] initWithFrame:frame InView:self.view];
    

    源代码在https://github.com/XinStar1/AZXEmailTextField
    下载下来之后直接把“邮箱下拉提示”那个文件夹拖到项目里就可以了,这个demo是我认真花费了精力去写的,希望可以帮到大家。如果觉得好用的话,可以给我一个star,当做对我的鼓励!

    相关文章

      网友评论

      • o_Cooper_o:我看了一下 我觉得应该在刚输入的时候就应该提示邮箱类型 而不是在输入@之后才提示
        希望能优化一下
        一个小勺子:@XinStar 其实你司产品也是这么想的
        XinStar:@寄忧谷 你好,首先非常感谢你的建议,我这个输入框开始的想法是登录名可能不只是邮箱,也可以是其他的用户名之类的,所以当用户输入@后才认为他要输入的是邮箱,弹出提示。参考的是微博登录的逻辑,不过确实也可以做一个专门的一开始就弹提示的,有时间会写一个,谢谢建议!
      • 华之曦:支持
        XinStar:@Huazhixi 感谢支持~
      • xxttw:不错 不错 给力
        XinStar:@Unc1eWang 谢谢鼓励
      • 叶舞清风:谢谢分享
        XinStar:@叶舞清风 感谢支持~
      • o_Cooper_o:效果不错
        XinStar:@寄忧谷 谢谢
      • 瑞廷:不错不错
        XinStar:@瑞廷 谢谢鼓励
      • 9f94d02340f1:不错不错,明天回公司下下来看看。
        XinStar:@JamesYea 感谢支持~

      本文标题:iOS邮箱登录后缀下拉提示的实现(附源码)

      本文链接:https://www.haomeiwen.com/subject/czqrdttx.html