Hybrid-iOS『下拉显示网页来源特性的添加』

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

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

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

下拉显示网页来源
下拉显示网页来源
  • UI实现

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

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

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

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

    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编码习惯有很大的帮助。

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

    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更新。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,390评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,821评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,632评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,170评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,033评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,098评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,511评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,204评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,479评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,572评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,341评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,893评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,171评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,486评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,676评论 2 335

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,497评论 18 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,050评论 25 707
  • 果然,会闹的孩子有糖吃。 我是家里的姐姐,下面还有一个比我小四岁的弟弟。小时候,爸妈每次离开家的时候都会嘱咐说:“...
    小猫在逃阅读 507评论 1 1
  • 一到两岁的幼儿,体能发展迅速,他们有能力到处跑,到处走动,还喜欢碰碰这个,摸摸那个,表现的很淘气。孩子淘气好还是不...
    旦暮朝夕阅读 389评论 0 0
  • 因为经常在朋友圈跑步打卡,很多人都问我,小杏子,你居然爱上跑步了?(怀疑脸) 嗯,对,我也怀疑自己,那么懒,又说话...
    南杏18阅读 382评论 1 2