『下拉显示网页来源』的实现

在最开始先简单介绍一下该效果的实现方式。

这个功能我们在微信中打开链接时、一些手机浏览器中会经常看到,效果如下图:

下拉显示网页来源

  • UI实现

    在做之前查了一下实现方式,常见的一种是将Webview的背景色设为透明,在Webview下层添加一个同样大小的View,用此View的背景色来模拟Webview背景色,在这个View层上贴一个Label用于显示文字。这样在Webview向下滑动时,就会露出后面的网页来源文字。

    上面的方法比较直观,但是比较繁琐。我们知道UIWebView对象有一个属性是scrollView,所以可以这样来实现:使用insertSubview方法,在scrollView下面插入一个UILabel。即可实现和上面一样的效果。

    1
    2
    3
    UIWebView *webview = [[UIWebView alloc] init];
    UILabel *label = [[UILabel alloc] init];
    [webview insertSubview:label belowSubview:webview.scrollView];
  • 来源文本加载

    显示的文本我们一般都会只截取URL的host部分。这里可以使用webview的URL中host部分。

    1
    label.text = webview.request.URL.host;

    文本的加载时机一般选择在webviewrequest加载完成之后。注意对URL字符串进行空判断,如果此时URL为空,则不为文本赋值,也就是此时不显示label。

为Hybrid框架添加此特性

功能实现之后,就开始重点了,为框架添加此特性。也就是前端在进行Hybrid App开发时,可以通过Schema或者插件Plugin的方式,对自己的Webview设置是否下拉显示来源。

关于Hybrid入门这里有一篇文章,大家可以先阅读一下。Hybrid入门

实现方式是在Webview的基类中暴露一个属性,通过调用该属性对应的setter,来对是否显示进行调整。

关于这部分,我总结了以下几点收获。

  • 使用枚举类型表示选项、状态、状态码

    这是我在《Effective Objective-C 2.0》中读到过的一个建议,顺便向大家推荐一下这本书,书中讲到的52个方法对于我们培养良好的iOS编码习惯有很大的帮助。

    在对是否显示此特性进行设置时,我们会用到一些状态码。

    1
    2
    3
    4
    5
    typedef NS_ENUM(NSInteger, WebSourceShowSate)
    {
    WebSourceShowSateNo = 1,
    WebSourceShowSateYes = 2
    };

    使用枚举类型的状态码,我们可以通过代码很直观地表示状态。

    关于iOS枚举类型的学习,大家可以看这篇 iOS枚举应用

  • 框架接口设计时,尽量不对外暴露UI相关属性

    我们在对框架的接口进行设计时,应该努力追求直观、清晰,尽量少暴露内部实现细节。努力让使用者只需关注最简单最直观的内容。所以在这个特性中,我们可以选择将一个上述的状态码或者BOOL类型的属性暴露出来,而非将显示文本的Label对外暴露。

  • 框架接口设计时,单个参数暴露为属性,多个参数暴露为方法

    在接口中提供对单个的参数进行设置时,将其设置为属性,使用该属性的setter。

    提供对多个参数同时设置时,暴露一个带多个参数的方法。

  • 利用属性的setter完成一些操作

    有时候,我们可以通过重写属性的setter,在setter中加入一些操作,使得这些操作能在合适的时机进行。比如本例中,

    • Webview实例化之前,想要对此刻还未实例化的Label是否显示进行设置。我们就可以在webview所在类中添加一个标记Label是否进行显示的参数属性。在webview实例化之前,调用该参数属性的setter对其进行赋值,然后在webview的初始化部分对该属性值进行检查,作相应的设置。
    • Webview实例化之后,想要在框架接口中,提供对已经实例化的Label是否显示进行设置。我们可以利用前文讲到过的暴露出来的状态码或BOOL型属性,重写该属性的setter,然后在该方法中加入对Label是否显示进行设置的代码。这样就可以在对该状态码赋值的同时,完成相关的UI更新。