如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

身为设计师，我们习惯性的埋头专攻自己的专业，思考着像素级的细节，拿捏着细微的交互体验，讨论着新的动效方式，却常常忽略着我们所处的大环境，产品所面临的新困境。

就像，目前流量红利逐渐消失的互联网行业，各大产品想要获取新用户的成本越来越高，而且很多产品在获取一二线城市用户时，遇到了天花板。

然而，对于商业公司来说，如果用户停止增长，就很容易面临产品一路下滑的小下坡儿。因此，各大公司也都呈现出焦虑到头秃的状态。

这就是为什么今年我们经常会看到跟「用户增长」相关的一些资讯或分享。同时，「用户下沉带来高速增长」这件事儿，也随着拼多多和趣头条等产品通过「下沉」尝到甜头后，被大家激烈讨论。

今天，我也来跟大家分享一下，自己的一些相关思考。

一、什么是用户下沉？

用户下沉指的是，企业为了给产品带来更多的新增用户、扩大自己的规模，产品功能或者运营方式从满足一二线城市用户需求，到拓展或者专注于三四线城市、乃至农村用户的需求。

用「说人话」的方式解释就是：从以前的高格调，到慢慢的接地气儿。

二、为什么需要下沉？

一直以来，互联网的主流人群都是集中在一线城市，他们最早接触互联网，有着互联网的话语权，他们精致、高知，是主流产品的目标群体，也是大多数互联网产品的第一波目标用户。

但不可否认，目前这波用户的渗透率，到达了天花板。

然而，还有另外一群人往往被互联网所忽视，他们生活在非一二线城市，受教育程度低，收入低。这个群体，还是一片蓝海，有很大的撬动（下沉）空间。

有的同学会好奇，那些非一二线城市的人，生活中需要这些互联网产品么，下沉后他们会买账么？

下面我们就从2个维度来分析，现阶段「下沉」的可行性：需求、潜力。

1. 需求

从今年年初，宣布 GMV 突破千亿的拼多多、到短短18个月内，从0成长为一家估值18亿美元的趣头条，再到注册用户7亿，闷声发大财的快手，就可以明显的反映出，非一二线城市人群，对互联网产品所呈现出的强烈需求。

难道用户的需求是随着这些互联网产品才开始有的么？

并不是。比如：在没有拼多多之前，城镇的人们就有购买低价商品的需求，他们会一般通过集市购买、2元超市等等的渠道。

而在拼多多上，很容易看到3元的抹胸、8块的加绒打底裤、49元的冬季羽绒服……

可能你会认为，这种价格的我才不会买，质量肯定不好。

但是，我们不得不承认，不同层次的人有不一样的需求，并不是大家在谈论消费升级了，便宜商品就没人要了。

同时，对他们来说能通过互联网获得更多品类的选择，通过更低价格买到跟之前使用的产品质量基本相同，甚至稍稍优于以前的产品，本来就是一种消费升级。

再比如：没有糖豆广场舞APP 以前，大家只能跟着领舞大姐学，现在有了这个 APP，大妈们可以自己在家好好练，不蒸馒头争口气，努力成为广场上的C位女王，人群中独领风骚。

年轻时可以学习不好，工作时可以不如别人，成为大妈后在舞场上还不勇得第一，就得好好反思反思了。

总的来说，非一二线城市用户对互联网产品有较大的需求量，所谓的「下沉」并不是创造出新的需求形式，而是对既有需求在既有方式上某种程度的替代，或提供更优解决方案。

2. 潜力

除了满足需求以外，企业还需要关注下沉市场未来的前景如何，潜力怎么样，这个盘子能不能越做越大。

通过分析发现，目前「下沉用户」正处在中国整体经济增长、城市化以及消费升级的大进程中，未来会成为这个国家最为庞大的基石人群，也就是说，现在的「下沉用户」会成为未来「中坚用户」。

今天美国的农业人口只占整体人口的2%，日本农业人口也只有9.7%，中国很显然在短期内还很难达到这样的水平，但历史的趋势和方向不会变化。

因此，可以看出，不管是从需求方面，还是未来的潜力方面，互联网产品中「用户下沉」这件事儿上，在现阶段都是一个可行的方案。

三、如何下沉？

当我们确定了自己产品有下沉的需求和潜力时，接下来就要开干了。那么「下沉」时哪些事情，需要针对三四五线城市进行差异化处理呢？

我觉得可以分为3个维度：运营层面、产品层面、设计层面。

1. 运营层面

运营的目的，一般是为了给产品拉新和促活。那么想要扎了四五六线城市的父老乡亲们的心，我们的运营活动需要注意：要有利可图、要通俗易懂。

要有利可图

下沉用户有个明显特征就是时间充足、价格敏感。如果有一些小便宜可以占，哪怕多浪费一些时间，他们还是愿意接受的。因此针对「下沉用户」的运营活动，要格外放大利益点。

比如：受五六线用户喜爱的拼多多，打开APP，满屏的「1元秒杀」，「6.6元秒杀」，「只抢1天」，「新人1元购」……这种紧迫的氛围，让人感觉不买就亏了。

映射到线下场景，就是「最后1天大甩卖」的商店，每天都是「最后一天」，一甩就是十年（微笑脸）。

再比如：趣头条，当你刚打开 APP 时，直接弹出一个红包（很懂用户占便宜的小心思）。不像有些产品的活动写的是「优惠券」或「代金券」，写多少元这种很人民币的感觉对他们来说，才是最大的诱惑。

有同学会说，上来就给18块钱，公司不亏死嘛！所以亲爱的朋友们，你们睁大眼睛看一下「18元」右面的小字「最多」，套路深啊。

然后，通过用红包的方式，吸引用户提现，但是这个时候会弹出来手机号登录页面。（用红包吊着用户去登录。）

对于一二线用户，或许对这种运营方式比较反感，感觉在耍人，浪费时间，觉得这就是套路我嘛。

但是针对五六线的用户，他们对互联网的东西存在距离感，敬畏心，会下意识的认为存在即合理。同时他们很闲，感觉点一点也并没有什么，而且占了些小便宜。这就是他们跟一二线城市用户差异的地方。

同时，趣头条通过邀好友、收徒弟、徒收徒的裂变方式获得金币/现金的运营手段，不断的吸引用户的好奇心和金钱的诱惑，以及阅读就能赚钱的卖点，给产品带来了迅猛的新增。

总的来说，下沉用户，对有利可图的运营活动，是愿意花大量的时间成本，从而间接的为产品做贡献的。

要通俗易懂

不像一二线城市用户，觉得产品的运营文案写的高级、有格调、很杜蕾斯、挺网易云音乐的，觉得符合自己独特的气质，恨不得立马翻它的牌子。

三四五六线城市的用户，受教育程度有限，对一件事情的分析耐心有限，文案上要尽可能通俗易懂、直白，才能使他们短时间get到你的点。

比如：趣头条，被邀请的朋友看到的页面。

没有拐弯抹角的诗和远方，直接就是「教你轻松赚现金」，而且底下有一排小字「不会的可以来问我，大家一起赚」。

多么直接、易懂、质朴的语言，但这些就够了，因为只有让对方明白了这是干嘛的，且有吸引力，参与度（转化率）才比较高。

再比如，针对下沉城镇的一些线下刷墙的运营宣传。

知道用户关注什么、在意什么，并以合理的表达出来，让他们看懂才是最重要的，整些虚的都没用。

以上可以看出，针对非一二线城市用户的运营，要放大占小便宜的利益点，同时还要更通俗易懂，才能让用户更快理解、吸引从而参与。

2. 产品层面

如果把运营活动，理解为塞门缝里的「包小姐」小卡片（运营banner），进行拉新（拉客），那么产品层面就是要看「包小姐本人」的服务了，影响着用户的体验，关乎着用户的留存。

那么，针对三四五六线城市的用户，产品层面应该做到哪些呢？我觉得最重要的一点就是：简单易用，避免懵逼。

比如：前段时间在朋友圈刷屏的「她face+」，只有简单的几个功能，而且很土嗨，就能在小程序排行榜上名列前茅。

打开应用你只需要做两个选择：要么拍照，要么从相册中选择照片。

我抱着试一试的心态，去体验了一波产品，然后我被变成这样了。

嗯，看到这样的自己，说实话还是有点小兴奋的。然后，我膨胀了，我开始想探索更多可能性了……

这个时候，我只需要点右下角的「我变」，就可以换不同的风格。

可以看出，这款产品戳中用户痛点的同时，将功能操作做的如此简单易用，因此，在「下沉市场」中非常火爆（当然运营做的也不错）。

再比如：悟空问答，可以称它为「下沉」版的知乎，这款产品是今日头条做的针对四五六线用户的问答社区。

从产品的功能层面来看，针对下沉用户的「悟空问答」，明显的更加简单易操作，没有像知乎一样的「想法」，「大学」等功能，上来看到的就是「推荐」的 feed。

同时在产品内容层面，也针对下沉用户做了跟知乎差异化推荐。

因为针对四五六线用户，「有用」只是他网络生活中一部分，更大的部分是「有趣」，也就是「杀时间」的产品。因此，产品推荐的问题大多是「你见过最美的女人是什么样？」，「如何不被传销组织骗？」之类更符合他们认知层面的内容。

不过，知乎目前也从早起努力经营，且引以为傲的精英氛围，明显意识到这一策略在用户增长方面的短板，所以能从近期产品推荐给用户的更接地气的内容来看，他们也在做「用户下沉」的事情。

以上可以看出，针对非一二线用户产品方面，功能要尽可能的简单易用，避免懵逼；内容层面，也要更符合下沉用户的认知，更有趣，帮助他们消磨时间。

3. 设计层面

在这个时候，设计师们会说，难道我们的设计也要做成土嗨+乡村迪斯科风，来迎合五六线城市用户的审美嘛？

不可否认，下沉用户的审美还停留在，「多就是好，颜色丰富就是好」的阶段。因此，他们往往会被「拼多多」所代表的那种复杂，信息高度密集的设计风格所吸引。

你可能会说：这不符合设计师们所推崇的「极简，留白」的高格调设计追求。但是，这正是身为设计师的我们，需要平衡的客观存在的问题。

比如：下面的案例，就可以看出信息密集，颜色丰富，但是，也可以做出高品质的设计。

再比如：抖音目前已经下沉到农村用户，但是 UI设计上也不是非要土嗨风，依然不输给一二线主流产品，然而五六线用户也没有因此而无法接受。

所以，我们不能因为个别针对五六线产品的设计做的 LOW，而故意做出葬爱家族般的设计。

我们应该平衡他们审美的同时，兼顾着设计美学，从而肩负着提升国民审美水平的使命。

因为，人人都有享受高品质设计的权利，这需要一代又一代设计师去努力的。这一点，我们需要像日本设计学习。

总结

总的来说，生活在一二线城市、过着快节奏的生活、用着新颖的产品、从事着互联网的我们，时常觉得自己的感受就能代表所有人，感觉我们都将进入并将长期处于人工智能时代了，怎么还有人不懂互联网呢。这就如黄峥（拼多多创始人）所说「五环内的人」无法理解「五环外」的世界。

通过最近思考发现，不管从「用户需求」还是「增长潜力」方面，「用户下沉」都是互联网产品可行的事儿，但是，我们需要针对「下沉用户」在运营、产品、设计层面做差异化处理，使它更容易被非一二线用户接受并使用。

同时，深处互联网行业的我们，应该在低头琢磨小功能的时候，抬头看一下大环境，多研究下用户真实处境及场景，避免沉浸在自嗨的方案中。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

蓝蓝注

在设计龙泉大藏经时，是由贤度法师主持的，一起开会沟通相关事宜，是位高僧，总是随喜赞叹设计的工作，激发了我们的热情，也很开心。

如今贤度法师因8月的事件，离开龙泉寺，是没有想到的。

本文系贤度法师5月26日在杭州2050大会“我带佛陀上火星”论坛上演讲的文字整理稿。

贤度法师，毕业于中科院计算所，现任龙泉寺人工智能与信息技术中心主任。

在演讲中，贤度法师通过人工智能技术在贤二机器僧、龙泉大藏经智能校勘平台等项目中的应用，为大家介绍了当代佛教的科技实践。法师谈到，科学更侧重于对外在世界的探索，而佛教侧重于对内心世界的开发。只有不断向内心深处觉醒，才能够消弭物质和精神的隔膜，才能够在技术飞速发展的今天，找回人本身的价值和尊严。

大家下午好！非常高兴有这样一个机会跟大家一起探讨一些佛法与科技方面的话题。刚刚杨赛给我做了一个简单的介绍，她说她什么都没做好，实际上我在计算机方面也什么都没做好，所以最后选择了做和尚，希望自己把出家这个事情做好，尽其一辈子。我给大家演讲的主题是：佛法的内涵+科技的翅膀=心灵的觉悟。我想先诠释一下这个主题和“我带佛陀上火星”这个大主题之间的关系，因为佛陀嘛——那么佛法，龙泉寺是一个落地的道场，而龙泉寺的科技实践我觉得可以看作是我带佛陀来北京龙泉寺，未来可能还会去上火星。

我先介绍我们现在的一个状况。龙泉寺的科技实践最早要从寺院的方丈学诚大和尚说起。学诚大和尚有一句话，叫“佛教是古老的，但佛教徒是现代的”，我们龙泉寺很多的科技实践都是基于这样一个理念开展的，这是一个总的指导思想。科技实践应该包括两方面，一是科技应用，二是科技研发。我先从应用讲起。

最早龙泉寺，我们学诚大和尚最早用技术干了些什么事呢？第一个就是博客法门，这是科技之用。这个PPT可以看得见，在2006年的时候，师父学诚大和尚用博客不断发龙泉寺生活的点点滴滴——可以看见，左侧的目录——每天大概会有两篇左右的文章。

这些文章都是记录龙泉寺活动的点点滴滴。我们可以内窥一下其中的一些细节。我可以念一小段给大家，看看这些博客到底是些什么。

“为了配合夏安居，我们乙班的教室由内院搬到了现在的斋堂。为了让斋堂的环境更适合作为教室来用，便发心整理一下斋堂的卫生和布局。真正开始干起来，发现活还是挺多的，看来晚殿也就泡汤了，不过心里还是很高兴做这件事情，庄严道场，令僧欢喜，师欢喜！当正在埋头洗钵的时候，听到师父的声音从门口传来，仰起头来时，发现师父和几位法师已经到了斋堂。师父看到我在忙乎，就笑着问：‘你在做什么？’‘师父，我在洗钵，准备腾出一个钵架来，放一个书柜，专门放我们平日里要诵的经书。’”——念到这里可以看得见实际是一些很生活的东西。修行认为就是在学习工作生活之中完成的。不是说要离开生活而修行，就是要在生活之中修行觉悟。我们再往下看，“与师父接触久了，就会发现师父有一个很突出的特点，就是常爱问我们这些弟子一些问题。看起来一些问题的答案是很明确的，但师父还是会问”。比如像刚才这个问题，弟子明明在洗钵，但还是问弟子在做什么。实际上这样的事情发生在很多地方，师父有时候还会发短信问弟子，“你在干什么？”这个问题“你在干什么”就如同禅宗的当头棒喝，你在干什么，然后你就立马回到现实，我不应该打妄想，我应该活在当下。其实这个小问题就是修行。我们弟子被师父问到这个问题之后，后面这些就是内心活动，一些所思所想。这个法师写到师父通过这样简单的一问一答可以了解很多深广的事实，并且能够了解对方内心的所思所想及心理状态。后面我就不再细念了，我想说的是什么——这些博文都是龙泉寺学修生活里头的点点滴滴。

这些博文后来我们把它结集成册，结集成书，有100本。这100本书，我们送到国内国外很多图书馆和大学，让大家能够通过这些博文了解在北京西郊的一个道场里头的学习、修行，依照佛陀的教导修行的（出家人）生活的点点滴滴。

这样一些法门，有哪些人从中受益了呢？首先，让社会更加了解现代化的佛教修行方式是什么样的。不是很神秘的，也不是很悬乎的，是很真实的内心的点点滴滴，（内心的）提升与感悟，所以这是一个很真实的修行和生活，是内心的感悟。第二呢，我们编辑成册送到海内外，也扩大了汉文化的影响力。因此2016年的时候，师父被评为中国佛教界博客第一人——这个第一，这是第一次我今天给大家介绍的第一，后面还会有。

第二个，微博法门，这还是科技之用。这是师父微博上的一个截图，可以看得见粉丝量已经有98万多了。同步发布了大概16个语种的微博，就是同一个汉语言微博发出来以后，我们龙泉寺有专门的翻译团队，翻译中心把这些汉语翻译成16个语言向全球发布。

我们再来内窥一下微博的一些细节。有人问，也就是我们的网友在微博上问师父，“顶礼师父，请问我参加了公务员考试，笔试成绩出来之前，一直很焦虑，想看，如何面对查成绩的那一刻，该怎么办？”我不知道大家会不会有这样的问题？当你在面对高考，焦急地等待某个结果，很重要的时候，你内心的焦虑、期待，这种心情该怎么去平复？怎么让自己在那个时间还能有一份快乐。看看师父是怎么回答的，“若是尚可为，云何不欢喜？若已不济事，忧能有何益？一件事情，你担忧也好，害怕也好，它总会来到，也总会过去。做好手里的事，每一个过程，每一个当下，都尽心尽力就好了。”所以能够看得见，就这样一句短短的回复，让我们的心在一种期待、紧张、焦虑的状态当中走向平静，能够活在当下。所以这个就是佛法能够给我们带来的一些好处。

第二个例子，有人问，他说，“请问师父，如何面对职业乞讨者？几乎天天碰到。”大家会有这样的问题吗？走在大街上的时候，面对一个乞讨者，你内心是怎样的作意，去思考？你会不会觉得是真是假？要不要给他钱，要不要帮助他？有人就问了这样的问题，师父讲：“看自己的发心，对方是假乞丐，自己也可以真修行。如果不愿意布施财物，也可以布施其它的，比如微笑、鼓励、劝勉、书籍等等，乃至于自己什么都不愿给的话，也可以心里默默发一个愿，未来能够帮助到对方。”所以面对一个境界，看看自己起什么心，是烦恼的心，还是觉悟的心，和佛法相应的心，这个非常重要。所以修行呢，它此时此刻，外在的真和假你很难去判断，但你自己的起心动念，是真实的，善良的还是恶毒的，你自己可以去把控。这是内窥一下微博的细节。那么这个微博的法门呢，一个是更方便地每天发布寺内动态，第二个师父每天早上坚持在互联网上，在微博上去回复社会上各行各业的网友问题，现在也快100万粉丝。并且我们成立了翻译中心，同步发布各种语种的微博，也结集成册《微博答问录》，都是可以在书店里看得到的。

第三个，动漫的法门。这个卡通人物大家认识吗？大家认识贤二吗？这个是贤二的配角，就是和贤二打擂台的，叫赵小翠。贤二是怎么说赵小翠的，“虽然你有缺点，但勇于改正，所以大家更喜欢你。”其实我觉得我们说贤二，都讲，人人都是贤二，因为贤二他是一个有缺点的人，不是一个圣人，他周围的人都是活生生的人，他也有自己的性格特点，也有他的缺点，但是他勇于改正，所以它是不断的鼓励大家，通过修行来提升自己。贤二这个动漫法门我们也是做了很多，像不断地出动漫，然后动漫的视频啊。这是一个动漫的视频叫《谎言的代价》，它是在教育孩子不要去说谎。这是贤二律师以及孩子他爸，他讲不爱读书，但经过教育以后呢，他就喜欢上读书，并且不说谎。贤二动漫是龙泉寺的出家法师在师父的指导之下，以社会大众喜闻乐见的方式向社会传播佛法。讲到这儿，这三个法门其实都还是科技之用，后面要进入到科技的研究乃至于去研发。

贤二机器僧的法门。接下来就介绍贤二机器僧，底下这两个是一代的、酷酷的贤二，第二个是贤二二代，比较高个，胖胖的贤二。

机器僧2015年10月份一代亮相。16年的时候，突然人们发现北京西郊寺院里面竟然有一个人工智能机器僧，大家猛然就觉得这个寺院是怎么回事，怎么会在人工智能元年的时候就已经于此之前研发出来一款人工智能机器僧，非常的好奇。贤二也因此被广泛关注和报道，成为网红，并且于16年10月份的时候发布了二代。我们也即将发布第三代，贤二开始在不断升级。这是贤二实体的机器僧，同时我们还有虚拟的机器僧，就是基于微信公号的聊天机器人。在我们门口有贤二的二维码，大家可以去扫，扫完以后去关注它。不要以为它只是一个简单的公号，它背后有强大的对话能力。对话的基本语料是前面介绍的师父在博客、微博上和网友互动的问答对，同时加上我们义工的补充，成为贤二的大脑。然后我们再用人工智能、用深度学习、用自然语言理解，把这些语料加工之后，你可以去互动。所以一会儿大家可以去关注一下，和他去聊天。除了中文之外，还可以用英文来聊天。这是后台用户的数据分析，目前有139万粉丝，快到140万粉丝了。每月的增长量在1万7千人左右，所以大家也可以贡献一份啊。

这个对话机器人，它其实就是因为佛法能够帮助我们解决学习、生活、工作中种种烦恼。并且除了这些社会大众从中受益之外，我们的义工团队在参与过程中，也学会了像贤二一样说话，不去伤害别人，给人鼓励、给人抚慰、给人慰藉，所以这些义工们从中收获非常非常大。而且我们即将推出3D聊天小程序，敬请期待。

我们接下来说到科技之研究，因为前面是讲科技的应用。大藏经就是我们龙泉寺利用科学技术整理佛教的文献。

大藏经是佛教文献的总集。佛陀所讲的法最根本的依据就是来自于大藏经。我们希望把古来历朝历代的大藏经都进行比较完整系统的整理，然后发布到网上去。这个过程如果搞古籍的同学可能会比较了解，包括版本校对、校勘、标点等等。这个过程当中哪个可以用得上人工智能呢？大家可以看一下这个视频。这个视频展示的是我们做的一个古籍OCR的人工智能引擎。用人工智能的方法对古籍进行识别。目前我们已经把《永乐北藏》《乾隆大藏经》和《六十华严》进行了处理。

可能大家不是特别了解大藏经。我简单说几个数字——大藏经大概有二三十个版本，少的有5000多字，多的1.25亿字，所以这个规模是非常庞大的。我们现在有OCR技术，非常成熟，但是一旦把这个技术应用到古籍领域，就会发现它处理不了，为什么？古籍所面对的字种，古人所用的生僻字非常的多，大概有几万字，而我们现在常用的字，根据国家通用汉字规范表，一级字表也就三千多字，二级字表有六七千字，足以覆盖我们日常说话、写书、出版用到的，这些字也就六七千个。但是实际上这个事情一旦到古籍领域就打不住，它有几万个字，这些都给OCR带来非常大的难度。能看得见，这个是我们利用技术对版面进行分析并且进行切割以后的一个效果。这是我们不同版本的大藏经，每个字都用算法技术切出来，然后把它们转化成对应的文字。这个视频左侧是一个自动处理的过程，能看得见红色的框在往前进，右侧文字自动识别。这是为了动态展示的一个效果，所以做成这样，实际上它一张照片处理的速度比这个要快。

另外我们也研发了龙泉字库。为了解决生僻字的问题，我们自主研发了龙泉字库，比如遇到这样的字，大家认识吗？如果遇到这样的字需要解决，怎么办？那么我们自己研发了一款龙泉字库，可以看得见这个字库的工作界面。我在检索框里只需要输入单人旁和部首，左侧的部件面板可以帮助我们，能看见包含这两个部件的所有字，大概有342个。这是两个部件，部件笔画输入法的长处是，除了输入部件之外，对于你无法输入的部件你还可以输入笔划，比如说剩余笔划是0，输入0以后，表示除了这两个部件外，我不包含任何部件了，因此马上结果只有一个，可以很迅速、地找到我想要的字。这个字库背后的总量有16万字，非常的庞大。可以看得见，进一步这个字会把我引导到字典的界面，它是“佛”的异体字，在古人来讲这个字就是“佛”字。

然后我们研发了一个基于藏经的工作平台，把人工智能和人结合起来，一起去完成古籍的校对、校勘这样一个工作。这边是几个界面的展示。

那么实际上我们做这个事情也花了好些年头。最早也和藏经、古籍的工作单位交流，比如台湾的法鼓山、佛光山等等。我们也和国内知名的高校、企业就人工智能进行藏经古籍电子化这个主题进行交流和合作。龙泉字库和藏经工作平台是我们自主研发的，这个基于人工智能的OCR引擎是我们合作研发的。

以上就是龙泉寺科技应用与实践的一个概览。我再进一步给大家介绍一下，我们龙泉寺，一个寺庙，一个道场，出家人为什么会去做这个事情？它背后是怎样一个理念？也就是我们师父是怎么想的？贤二机器僧是出家法师创造出来的，适合现代人审美的佛法符号，也就是说贤二机器僧它实际上是一个传播佛法的符号，一个IP。它的目的是什么？是希望提醒我们用自己的内心来创造，服务于我们的生活和社会。如果忽略内心世界的建设，我们所开创的所有科技事业都有可能成为伤害和毁灭我们的技术。贤二机器僧提醒我们，科技要服务于人类，服务于内心。我们希望建立、探索和完善汉传佛教体系。大藏经这个工作只是目标的起点，首先做文献的整理，它背后更希望能够建立汉传佛教的修学体系，让佛法能够广为传播。

那么出家人和在家人一样，其实在接受科学带来便利和物质利益的同时，也在接受着前所未有的挑战。比如说互联网时代下的群体性孤独。互联网时代有一句谚语，叫“世界上最远的距离，就是我们俩虽然在一起，但是你却在玩手机”。就是科技给我们带来便利的同时，也会带来很多的问题，我们怎么去认识科技？从佛法的角度，我们不是要抛弃科技，或者贬低它的价值，而是给它找到正确的定位。我们应该思考如何享受现代文明带给我们利益、便捷、的同时，不让科技带来负面乃至于有害的影响。科技有工具的价值，但是缺乏目的的价值。只有不断向内心深处觉醒，才能够消灭物质和精神的隔膜，才能够在技术飞速发展的今天，找回人本身的价值和尊严。

其实走到现在这样一个时间节点上，人们常常会去思考这样一个问题，人工智能的到来，会让我们很多人都失去工作，我们人的价值何在？那么我们这边也有一个提法，或者是从佛教的角度能给出一些参考。

科学更侧重于对外在世界的探索，侧重于物质的发展，而佛教侧重于对内心世界的开发，侧重于心灵的发展。其实佛教和科学从来不矛盾，它们各有侧重，它们却同样面对我刚才所提到的这个问题。科学和佛教一起面对这个社会的问题。什么样的问题？就是科技过度发展带来的问题，比如说环境污染，环境的问题，比如说工作压力带来的紧张、焦虑、自闭等等精神的问题。这些环境的问题也好，精神的问题也好，不光科技要去面对，整个社会都要去面对，佛教也要去面对。共同面对这样的问题的时候，佛教能给出什么样的建议？给出什么样的参考呢？

我们回过头去看一看人类的发展历史。在农业时代的时候，我们是一种神文化。大家对于自然现象无法理解，就有这样一种神文化的存在。那时候人们的价值体现何在？体力，就是不断去耕种、劳作。在工业时代，乃至于现在信息时代，文化是物文化，物质发展的一种文化，对物质的发展、追逐。那么人的价值何在？当工业时代把人从体力之中解放出来以后，人的价值从体力劳动转向了脑力劳动，不断去发展这种知识、发展科技。那么现在人工智能时代来临以后，会发现人的脑力劳动也将被取代。翻译呀，各种简单的流水线上的工作，都将被取代。脑力已经不再成为人的价值的一种体现以后，会走向哪里？

从佛教角度，我们提出了心文化。学诚大和尚提出心文化的概念，就是说你会发现还是有些问题无法解决，就是我前面所讲的共同面对的这些问题，环境、心理、精神这些问题，谁去解决？佛教可以去解决，心文化可以去解决。人的价值何在？心力。

佛教对于心的认识，从佛教唯识的角度上讲，就是八识，眼耳鼻舌身意。前六识都比较好理解，佛教还有末那识和阿赖耶识，就是说在我们这些浅表的意识之下，我们每天会有所思所想。面对各种人事物的境界，在这些浅表的思维意识之下还有更加深广的内心世界。在佛法唯识的角度，就是末那识和阿赖耶识，那里蕴藏着宇宙人生的奥妙，而这是佛教可以贡献的。当然今天由于时间的关系，我不再展开，到底八识是什么。

所以当面对这样共同问题的时候，我觉得佛教与科技应该携手，理应携手。回到我的标题，佛教的内涵+科技的翅膀=走向心灵的觉悟，好，我的介绍就到这里。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

一、Weinre 说明



Weinre的本意是Web Inspector Remote，它是一种远程调试工具。功能与Firebug、Webkit inspector类似，可以帮助我们即时更改页面元素、样式，调试JS等。



使用Weinre工具，Weinre的本意是Web Inspector Remote，它是一种远程调试工具:



1.它可以将远程的页面经过代理在PC上调试页面元素、样式，JS。



2.可以监听页面内部的Ajax请求等。



3.可以监听页面加载成功时候的Console控制台输出



官网首页：http://people.apache.org/~pmuellr/weinre/docs/latest/



Weinre的原理







三个端的含义：客户端(client)：本地的WebInspector，远程调试客户端。服务端(agent)：本地的HTTPServer，为目标页面与客户端建立通信。目标页面(target)：被调试的页面，页面已嵌入weinre的远程js。



调试过程：



客户端将指令(请求DOM、执行js)post到代理服务端，目标页面定时(大概5s)从服务端get指令，然后将结果post回服务端，最终客户端定时从服务端get结果。



PS：由于Weinre的客户端是基于Web Inspector开发，而Web Inspector只兼容WebKit核心的浏览器，所以只能在Chrome/Safari浏览器打开Weinre客户端进行调试。





二、Weinre安装和使用



1.weinre是基于NodeJs，因此首先要安装NodeJs，然后使用npm命令安装weinre



npm -g install weinre

2.运行，启动weinre服务器，默认端口8080



node.exe node_modules\weinre\weinre --boundHost -all-

node.exe node_modules\weinre\weinre --boundHost  192.168.1.125 

在windows下，系统防火墙可能会弹出是否允许其访问网络的提示，点击充许即可。

3.从浏览器访问,http://localhost:8080,或者，http://192.168.1.125:8080，显示如下表示启动服务器监视成功











三、Weinre需要监听调试的Web页面配置处理



1.在所有页面引入js文件



2.特别说明，当前js文件的域名需要指定为本机的IP地址，因为在手机模拟器中无法访问电脑‘localhost’



















更多：



cordova-plugin-whitelist 协议白名单配置整理 



VS Code插件安装位置



Visual Studio Code插件之Atom One Dark Syntax Theme



相关参考文章：



http://blog.csdn.net/freshlover/article/details/42640253



http://www.cnblogs.com/diva/p/3995674.html

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

这是一个 app从获取获取数据 用于显示的经典实践项目，数据来源于 豆瓣官方公开的api接口：https://developers.douban.com/wiki/?title=movie_v2

先上图：

      

   





项目使用了如下第三方library：

下拉刷新：Android-PullToRefresh

网络数据加载：android-async-http

图片加载：universal-image-loader



后面的博客，会把项目的制作流程发出来

豆瓣API实践项目-前言-0（可下载源码）: http://blog.csdn.net/mario_faker/article/details/79618210

豆瓣API实践项目-数据api接口-1：http://blog.csdn.net/mario_faker/article/details/79618235

豆瓣API实践项目-搭建项目基本框架-2：http://blog.csdn.net/mario_faker/article/details/79618245

豆瓣API实践项目-导入第三方library-3：http://blog.csdn.net/mario_faker/article/details/79618261

豆瓣API实践项目-单页细讲4: http://blog.csdn.net/mario_faker/article/details/79618272

豆瓣API实践项目-apk打包:http://blog.csdn.net/mario_faker/article/details/79618291





项目源代码下载地址：

http://download.csdn.net/download/mario_faker/10253201

或github：https://github.com/MarioFaker/DBMovie

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

作者：鲁米

做人就象是一家客栈

每个早晨，都是一位新来的客人

喜悦、沮丧、卑鄙

一瞬的觉悟来临

就像一个意外的访客

欢迎和招待每一位客人！

即使他们是一群悲伤之徒

来扫荡你的客房

将家具一扫而光

但你要款待每一位宾客

他或许会为你打扫

并带来新的喜悦

如果是阴暗的思想、 羞耻和怨恨

你也要在门口笑脸相迎

邀请他们进来

无论谁来，都要感激

因为每一位都是

由世外派来

指引你的向导

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

5.0以后，materialDesign风格，出现了立体这种概念，高光，阴影，也就是Z轴，凸显层次；同时，裁剪view也变得方便简单了很多。
1，先说说阴影的实现。
方案1：在xml中设置 
xml中设置有两个方式，android:elevation="2dp" 
android:translationZ="2dp"这两句代码是可以同时并存的，而且是叠加的效果；当然只使用其中一个属性进行z轴的阴影设置也是OK的。

方案2：在代码中设置 
（下面说这个实现方式，其实就是轮廓的实现）

设置阴影，有一个需要注意的地方：
①：view的大小要比它的父布局小，才会有阴影效果，如果相同大小，是看不到阴影效果的； 
②：给图片设置阴影的时候，如果这种图片的background属性是shape，那直接通过xml设置阴影是OK的，但是，如果是一张png或者其他格式的图片，直接通过xml设置android:elevation="2dp" 
android:translationZ="2dp"阴影是看不到效果的，得通过其他代码设置才行。。。**

2，view的轮廓，轮廓其实也是阴影
默认情况下，所有的view都是矩形的，虽然可以给view设置背景圆形的图片，即可以在界面显示出圆形的内容，但是view的大小实际上依然是矩形，并且设置的图片实际上也是矩形的，只是圆形以外的区域是透明色。 
如果根据view大小来生成对应的阴影，就会出现很奇怪的效果，（一个看起来圆形的view展示出的确实一个矩形的阴影）我了解决这个问题，view增加了一个新的描述来指明内容显示的形状，这就是 轮廓

轮廓的实现
①通过shape设置的背景，view会自动根据shape的形状进行轮廓判定，
②通过color设置的背景，view默认其轮廓和view的大小一样。
③但是通过图片进行背景设置，view则无法获知轮廓的形状，这个时候就需要手动进行指定了。
1
2
3
一：在xml中可以通过android：outlineProvider来指定轮廓的判定方式： 
1，none即使设置了Z属性，也不会显示阴影 
2，background会按照背景来设置阴影形状 
3，bounds会按照view的大小来描绘阴影

**对于①和②这种情况，也是可以通过设置`android：outlineProvider`
来改变阴影的形状以及轮廓外观的。**

对于③这种背景是一张png或者其他格式的图片的情况，
`android：outlineProvider=“background”`
是没有效果的，属性设置成`android：outlineProvider=bounds`
虽然也是有效果的，但是阴影轮廓是一个方形的轮廓，
并不是我们想要的效果了。

不设置`android：outlineProvider`属性就更没有效果了。
1
2
3
4
5
6
7
8
9
10
对于这种使用了png图片作为背景的view加阴影轮廓的时候情况解决办法也非常简单，解决办法就是：
就通过Java代码设置，也就是说，一个圆形的png图（我们知道，看起来是圆形的，
但是它其实还是方形的图片，只是圆形之外的区域是透明不可见的），
 通过Java代码设置轮廓，就会显示出圆形的阴影轮廓了。
1
2
3
具体实现，继续看： 
二：在代码中，课通过setOutlineProvider来指定一个view的轮廓。 
对于③这种情况在代码中设置轮廓才会有效果。

TextView textView= findViewById(R.id.tv);
ViewOutlineProvider viewOutlineProvider=new ViewOutlineProvider() {
            @Override
            public void getOutline(View view, Outline outline) {
         //x，y轴表示位置，后两个参数表示长，宽 
               outline.setOval(0,0,textView.getWidth(),textView.getHeight());
            }
        };
textView.setOutlineProvider(viewOutlineProvider);
1
2
3
4
5
6
7
8
9
强调：
如果采用圆形图片作为背景，即使在xml布局中指定android：outlineProvider=“background”，也不会显示阴影，设置为android：outlineProvider=bounds，虽然也有效果，但是效果很差，所以一般都是通过代码来指定轮廓显示。

1，一个shape圆形作为背景，设置阴影，设置android：outlineProvider的4种属性的效果：


2，一个圆形png作为背景，设置阴影，设置android：outlineProvider的4种属性的效果：


3，一个png作为背景，设置阴影，通过代码设置的效果：


3，view的裁剪
裁剪，默认的ImageView是矩形的，很多时候，需要的是圆角的ImageView或者圆形的ImageView，这就需要裁剪view了。

实现，裁剪圆形：

final TextView textView= findViewById(R.id.tv);

ViewOutlineProvider viewOutlineProvider=new ViewOutlineProvider() {
            @Override
            public void getOutline(View view, Outline outline) {
                //设置圆形oval
                outline.setOval(0,0,textView.getWidth(),textView.getHeight());
            }
        };
//设置裁剪
textView.setClipToOutline(true);
1
2
3
4
5
6
7
8
9
10
11
实现，裁剪圆角矩形：

final TextView textView= findViewById(R.id.tv);

ViewOutlineProvider viewOutlineProvider=new ViewOutlineProvider() {
            @Override
            public void getOutline(View view, Outline outline) {
                //设置圆角矩形
               outline.setRoundRect(0,0,view.getWidth(),view.getHeight(),25);
            }
        };
textView.setOutlineProvider(viewOutlineProvider);
//设置裁剪
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

一、简介

TabLayout提供了一个水平布局用于展示tabs，继承自HorizontalScrollView。一般与Viewpager结合使用实现页面和标签联动的效果，是时下APP中非常常用的一个控件



二、基本用法

1. 添加design依赖
   
   compile 'com.android.support:design:25.3.1'
   
   1
   
2. xml引用
   
3. xml中添加tab
   
   <android.support.design.widget.TabLayout
   
       android:id="@+id/tab_layout"
   
       android:layout_width="match_parent"
   
       android:layout_height="wrap_content">
   
       <android.support.design.widget.TabItem
   
           android:layout_width="wrap_content"
   
           android:layout_height="wrap_content"
   
           android:text="Tab1"/>
   
       <android.support.design.widget.TabItem
   
           android:layout_width="wrap_content"
   
           android:layout_height="wrap_content"
   
           android:text="Tab2"/>
   
       <android.support.design.widget.TabItem
   
           android:layout_width="wrap_content"
   
           android:layout_height="wrap_content"
   
           android:text="Tab3"/>
   
       <android.support.design.widget.TabItem
   
           android:layout_width="wrap_content"
   
           android:layout_height="wrap_content"
   
           android:text="Tab4"/>
   
   </android.support.design.widget.TabLayout>
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   10
   
   11
   
   12
   
   13
   
   14
   
   15
   
   16
   
   17
   
   18
   
   19
   
   20
   
   21
   
4. 代码中添加tab
   
   <android.support.design.widget.TabLayout
   
       android:id="@+id/tab_layout"
   
       android:layout_width="match_parent"
   
       android:layout_height="wrap_content">
   
   </android.support.design.widget.TabLayout>
   
   1
   
   2
   
   3
   
   4
   
   5
   
   // tablayout，Tab是TabLayout的内部类，且Tab的构造方法是包访问权限
   
   TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
   
   tabLayout.addTab(tabLayout.newTab().setText("Tab1"));
   
   tabLayout.addTab(tabLayout.newTab().setText("Tab2"));
   
   tabLayout.addTab(tabLayout.newTab().setText("Tab3"));
   
   tabLayout.addTab(tabLayout.newTab().setText("Tab4"));
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   
   
   
   
   三、属性详解
   
   <declare-styleable name="TabLayout">
   
       <!--指示器颜色-->
   
       <attr name="tabIndicatorColor" format="color"/>
   
       <!--指示器高度-->
   
       <attr name="tabIndicatorHeight" format="dimension"/>
   
       <!--tabs距TabLayout开始位置的偏移量，但app:tabMode="scrollable"才生效-->
   
       <attr name="tabContentStart" format="dimension"/>
   
       <!--仅是Tab背景，设置TabLayout背景用android:background-->
   
       <attr name="tabBackground" format="reference"/>
   
       <!--默认fixed，所有Tab只能在屏幕内显示，超出会被挤压；scrollable,tab数量多会超出屏幕，可滑动-->
   
       <attr name="tabMode">
   
           <enum name="scrollable" value="0"/>
   
           <enum name="fixed" value="1"/>
   
       </attr>
   
       <!--默认fill，tab填满TabLayout,但tabMode=“fixed”才生效；center，tabs位于TabLayout的中间-->
   
       <attr name="tabGravity">
   
           <enum name="fill" value="0"/>
   
           <enum name="center" value="1"/>
   
       </attr>
   
       <!--Tab的最小宽度-->
   
       <attr name="tabMinWidth" format="dimension"/>
   
       <!--Tab的最大宽度-->
   
       <attr name="tabMaxWidth" format="dimension"/>
   
       <!--Tab文本设置样式-->
   
       <attr name="tabTextAppearance" format="reference"/>
   
       <!--Tab未选中字体颜色-->
   
       <attr name="tabTextColor" format="color"/>
   
       <!--Tab选中字体颜色-->
   
       <attr name="tabSelectedTextColor" format="color"/>
   
       <!--Tab内填充相关-->
   
       <attr name="tabPaddingStart" format="dimension"/>
   
       <attr name="tabPaddingTop" format="dimension"/>
   
       <attr name="tabPaddingEnd" format="dimension"/>
   
       <attr name="tabPaddingBottom" format="dimension"/>
   
       <attr name="tabPadding" format="dimension"/>
   
   </declare-styleable>
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   10
   
   11
   
   12
   
   13
   
   14
   
   15
   
   16
   
   17
   
   18
   
   19
   
   20
   
   21
   
   22
   
   23
   
   24
   
   25
   
   26
   
   27
   
   28
   
   29
   
   30
   
   31
   
   32
   
   33
   
   34
   
   35
   
   36
   
   使用示例
   
   
   
    <android.support.design.widget.TabLayout
   
       android:id="@+id/tab_layout"
   
       android:layout_width="match_parent"
   
       android:layout_height="wrap_content"
   
       app:tabIndicatorColor="@color/colorPrimaryDark"
   
       app:tabIndicatorHeight="2dp"
   
       app:tabContentStart="50dp"
   
       app:tabBackground="@color/colorAccent"
   
       app:tabMode="scrollable"
   
       app:tabGravity="fill"
   
       app:tabTextAppearance="@style/MyTabTextAppearance"
   
       app:tabTextColor="@android:color/black"
   
       app:tabSelectedTextColor="@android:color/white"/>
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   10
   
   11
   
   12
   
   13
   
   <style name="MyTabTextAppearance" parent="TextAppearance.Design.Tab">
   
       <item name="textAllCaps">false</item>
   
       <item name="android:textSize">18sp</item>
   
   </style>
   
   1
   
   2
   
   3
   
   4
   
   
   
   
   
   四、图文混排，Tab中添加图片
   
5. 通过SpannableString设置图片
   
   @NonNull
   
   private SpannableString setImageSpan(String string,int drawableId) {
   
       SpannableString ss = new SpannableString("  "+string);
   
       Drawable drawable = ContextCompat.getDrawable(this, drawableId);
   
       drawable.setBounds(0,0,drawable.getIntrinsicWidth(),drawable.getIntrinsicHeight());
   
       ImageSpan imageSpan = new ImageSpan(drawable);
   
       ss.setSpan(imageSpan,0,1, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
   
       return ss;
   
   }
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
   
   tabLayout.addTab(tabLayout.newTab().setText(setImageSpan("Tab1",R.drawable.ic_home)));
   
   tabLayout.addTab(tabLayout.newTab().setText(setImageSpan("Tab2",R.drawable.ic_info)));
   
   ……
   
   1
   
   2
   
   3
   
   4
   
   
   
   
   
   我们会发现个问题，通过ImageSpan设置的图片和文字没有对齐，先百度到一个可用方法解决：重写ImageSpan的draw()方法
   
   
   
   package com.strivestay.tablayoutdemo;
   
   
   
   import android.graphics.Bitmap;
   
   import android.graphics.Canvas;
   
   import android.graphics.Paint;
   
   import android.graphics.drawable.Drawable;
   
   import android.support.annotation.NonNull;
   
   import android.text.style.ImageSpan;
   
   
   
   public class CenterImageSpan extends ImageSpan {
   
       public CenterImageSpan(Drawable drawable) {
   
           super(drawable);
   
   
   
       }
   
   
   
       public CenterImageSpan(Bitmap b) {
   
           super(b);
   
       }
   
   
   
       @Override
   
       public void draw(@NonNull Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom,
   
                        @NonNull Paint paint) {
   
   
   
           Drawable b = getDrawable();
   
           Paint.FontMetricsInt fm = paint.getFontMetricsInt();
   
           int transY = (y + fm.descent + y + fm.ascent) / 2 - b.getBounds().bottom / 2;//计算y方向的位移
   
           canvas.save();
   
           canvas.translate(x, transY);//绘制图片位移一段距离
   
           b.draw(canvas);
   
           canvas.restore();
   
       }
   
   }
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   10
   
   11
   
   12
   
   13
   
   14
   
   15
   
   16
   
   17
   
   18
   
   19
   
   20
   
   21
   
   22
   
   23
   
   24
   
   25
   
   26
   
   27
   
   28
   
   29
   
   30
   
   31
   
   32
   
   33
   
   将上面的ImageSpan替换为现在的CenterImageSpan，即可实现图文混排时对齐
   
   
   
   
   
   
   
6. 通过Tab.setCustomView()设置图片
   
7. 自定义view布局
   
   <?xml version="1.0" encoding="utf-8"?>
   
   <LinearLayout
   
       xmlns:android="http://schemas.android.com/apk/res/android"
   
       android:layout_width="wrap_content"
   
       android:layout_height="wrap_content"
   
       android:orientation="vertical"
   
       android:gravity="center">
   
       <ImageView
   
           android:id="@+id/iv"
   
           android:layout_width="wrap_content"
   
           android:layout_height="wrap_content"
   
           android:src="@drawable/ic_home"/>
   
       <TextView
   
           android:id="@+id/tv"
   
           android:layout_width="wrap_content"
   
           android:layout_height="wrap_content"
   
           android:layout_margin="2dp"
   
           android:textSize="16sp"
   
           android:text="首页"/>
   
   </LinearLayout>
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   10
   
   11
   
   12
   
   13
   
   14
   
   15
   
   16
   
   17
   
   18
   
   19
   
   20
   
8. 代码设置
   
    TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
   
   tabLayout.addTab(tabLayout.newTab().setCustomView(setCustomView(R.drawable.ic_home,"首页")));
   
   tabLayout.addTab(tabLayout.newTab().setCustomView(setCustomView(R.drawable.ic_info,"资讯")));
   
   tabLayout.addTab(tabLayout.newTab().setCustomView(setCustomView(R.drawable.ic_live,"直播")));
   
   tabLayout.addTab(tabLayout.newTab().setCustomView(setCustomView(R.drawable.ic_me,"我")));
   
   1
   
   2
   
   3
   
   4
   
   5
   
    private View setCustomView(int drawableId,String tabText) {
   
       View view = View.inflate(this, R.layout.item_tab, null);
   
       ImageView iv = (ImageView) view.findViewById(R.id.iv);
   
       TextView tv = (TextView) view.findViewById(R.id.tv);
   
       iv.setImageResource(drawableId);
   
       tv.setText(tabText);
   
       return view;
   
   }
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   
   
   
   
   五、TabLayout与Viewpager联动
   
9. xml设置TabLayout和Viewpager
   
   第一种：TabLayout放置在Viewpager的上方，放在AppbarLayout中会有阴影效果
   
   
   
   <?xml version="1.0" encoding="utf-8"?>
   
   <android.support.design.widget.CoordinatorLayout
   
       xmlns:android="http://schemas.android.com/apk/res/android"
   
       xmlns:app="http://schemas.android.com/apk/res-auto"
   
       xmlns:tools="http://schemas.android.com/tools"
   
       android:id="@+id/main_content"
   
       android:layout_width="match_parent"
   
       android:layout_height="match_parent"
   
       android:fitsSystemWindows="true"
   
       tools:context="com.strivestay.tablayoutdemo.MainActivity">
   
   
   
       <android.support.design.widget.AppBarLayout
   
           android:id="@+id/appbar"
   
           android:layout_width="match_parent"
   
           android:layout_height="wrap_content"
   
           android:paddingTop="@dimen/appbar_padding_top"
   
           android:theme="@style/AppTheme.AppBarOverlay">
   
   
   
           <android.support.v7.widget.Toolbar
   
               android:id="@+id/toolbar"
   
               android:layout_width="match_parent"
   
               android:layout_height="?attr/actionBarSize"
   
               android:background="?attr/colorPrimary"
   
               app:layout_scrollFlags="scroll|enterAlways"
   
               app:popupTheme="@style/AppTheme.PopupOverlay">
   
   
   
           </android.support.v7.widget.Toolbar>
   
   
   
           <android.support.design.widget.TabLayout
   
               android:id="@+id/tab_layout"
   
               android:layout_width="match_parent"
   
               android:layout_height="wrap_content"
   
               app:tabIndicatorColor="@color/colorAccent"
   
               app:tabIndicatorHeight="2dp"
   
               app:tabBackground="@android:color/white"
   
               app:tabTextAppearance="@style/MyTabTextAppearance"
   
               app:tabTextColor="@android:color/black"
   
               app:tabSelectedTextColor="@android:color/holo_blue_light">
   
           </android.support.design.widget.TabLayout>
   
   
   
       </android.support.design.widget.AppBarLayout>
   
   
   
       <android.support.v4.view.ViewPager
   
           android:id="@+id/container"
   
           android:layout_width="match_parent"
   
           android:layout_height="match_parent"
   
           app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
   
   
   
       <android.support.design.widget.FloatingActionButton
   
           android:id="@+id/fab"
   
           android:layout_width="wrap_content"
   
           android:layout_height="wrap_content"
   
           android:layout_gravity="end|bottom"
   
           android:layout_margin="@dimen/fab_margin"
   
           app:srcCompat="@android:drawable/ic_dialog_email"/>
   
   
   
   </android.support.design.widget.CoordinatorLayout>
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   10
   
   11
   
   12
   
   13
   
   14
   
   15
   
   16
   
   17
   
   18
   
   19
   
   20
   
   21
   
   22
   
   23
   
   24
   
   25
   
   26
   
   27
   
   28
   
   29
   
   30
   
   31
   
   32
   
   33
   
   34
   
   35
   
   36
   
   37
   
   38
   
   39
   
   40
   
   41
   
   42
   
   43
   
   44
   
   45
   
   46
   
   47
   
   48
   
   49
   
   50
   
   51
   
   52
   
   53
   
   54
   
   55
   
   56
   
   57
   
   58
   
   
   
   
   
   第二种：TabLayout直接放在Viewpager，无阴影
   
   
   
   <android.support.v4.view.ViewPager
   
       android:id="@+id/container"
   
       android:layout_width="match_parent"
   
       android:layout_height="match_parent"
   
       app:layout_behavior="@string/appbar_scrolling_view_behavior">
   
       <android.support.design.widget.TabLayout
   
           android:id="@+id/tab_layout"
   
           android:layout_width="match_parent"
   
           android:layout_height="wrap_content"
   
           app:tabIndicatorColor="@color/colorAccent"
   
           app:tabIndicatorHeight="2dp"
   
           app:tabBackground="@android:color/white"
   
           app:tabTextAppearance="@style/MyTabTextAppearance"
   
           app:tabTextColor="@android:color/black"
   
           app:tabSelectedTextColor="@android:color/holo_blue_light">
   
       </android.support.design.widget.TabLayout>
   
   </android.support.v4.view.ViewPager>
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   10
   
   11
   
   12
   
   13
   
   14
   
   15
   
   16
   
   17
   
   
   
   
   
10. 为Viewpager创建适配器
    
    /
    
      fragment
    
     /
    
    public static class PlaceholderFragment extends Fragment {
    
        private static final String ARG_SECTION = "section";
    
    
    
        public PlaceholderFragment() {
    
        }
    
    
    
        public static PlaceholderFragment newInstance(String section) {
    
            PlaceholderFragment fragment = new PlaceholderFragment();
    
            Bundle args = new Bundle();
    
            args.putString(ARG_SECTION, section);
    
            fragment.setArguments(args);
    
            return fragment;
    
        }
    
    
    
        @Override
    
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
    
                                 Bundle savedInstanceState) {
    
            View rootView = inflater.inflate(R.layout.fragment_main, container, false);
    
            TextView textView = (TextView) rootView.findViewById(R.id.section_label);
    
            textView.setText(getArguments().getString(ARG_SECTION));
    
            return rootView;
    
        }
    
    }
    
    
    
    /
    
      pagerAdapter
    
     /
    
    public class SectionsPagerAdapter extends FragmentPagerAdapter {
    
        String[] tabs = {"首页","资讯","直播","我"};
    
    
    
        public SectionsPagerAdapter(FragmentManager fm) {
    
            super(fm);
    
        }
    
    
    
        @Override
    
        public Fragment getItem(int position) {
    
            return PlaceholderFragment.newInstance(tabs[position]);
    
        }
    
    
    
        @Override
    
        public int getCount() {
    
            return tabs.length;
    
        }
    
    
    
        @Override
    
        public CharSequence getPageTitle(int position) {
    
            return tabs[position];
    
        }
    
    }
    
    1
    
    2
    
    3
    
    4
    
    5
    
    6
    
    7
    
    8
    
    9
    
    10
    
    11
    
    12
    
    13
    
    14
    
    15
    
    16
    
    17
    
    18
    
    19
    
    20
    
    21
    
    22
    
    23
    
    24
    
    25
    
    26
    
    27
    
    28
    
    29
    
    30
    
    31
    
    32
    
    33
    
    34
    
    35
    
    36
    
    37
    
    38
    
    39
    
    40
    
    41
    
    42
    
    43
    
    44
    
    45
    
    46
    
    47
    
    48
    
    49
    
    50
    
    51
    
    52
    
    主要是重写getPageTitle()方法
    
    
    
11. 代码设置 TabLayout和Viewpager绑定
    
     // tablayout
    
    TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
    
    
    
    // vp
    
    mViewPager = (ViewPager) findViewById(R.id.container);
    
    mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());
    
    mViewPager.setAdapter(mSectionsPagerAdapter);
    
    
    
    // 绑定，要在viewpager设置完数据后，调用此方法，否则不显示 tabs文本
    
    tabLayout.setupWithViewPager(mViewPager);
    
    1
    
    2
    
    3
    
    4
    
    5
    
    6
    
    7
    
    8
    
    9
    
    10
    
    调用setupWithViewPager()方法，则使用TabLayout.addtab()方法无效，TabLayout会清除之前添加的所有tabs，并将根据Viewpager的页数添加Tab，Tab标题为对应页通过getPageTitle()返回的文本
    
    
    
    
    
    
    
12. 图文混排
    
13. 同上，使用SpannableString
    
    修改Adapter如下：
    
    
    
    /*
    
      pagerAdapter
    
     */
    
    public class SectionsPagerAdapter extends FragmentPagerAdapter {
    
    
    
        String[] tabs = {"首页","资讯","直播","我"};
    
        int[] imgs = {R.drawable.ic_home,R.drawable.ic_info,R.drawable.ic_live,R.drawable.ic_me};
    
    
    
        public SectionsPagerAdapter(FragmentManager fm) {
    
            super(fm);
    
        }
    
    
    
        @Override
    
        public Fragment getItem(int position) {
    
            return PlaceholderFragment.newInstance(tabs[position]);
    
        }
    
    
    
        @Override
    
        public int getCount() {
    
            return tabs.length;
    
        }
    
    
    
        @Override
    
        public CharSequence getPageTitle(int position) {
    
    //            return tabs[position];
    
            return setImageSpan(tabs[position],imgs[position]);
    
        }
    
    }
    
    1
    
    2
    
    3
    
    4
    
    5
    
    6
    
    7
    
    8
    
    9
    
    10
    
    11
    
    12
    
    13
    
    14
    
    15
    
    16
    
    17
    
    18
    
    19
    
    20
    
    21
    
    22
    
    23
    
    24
    
    25
    
    26
    
    27
    
    28
    
    setImageSpan()方法同上
    
    
    
    
    
    
    
14. 同上，使用Tab.setCustomView()
    
    修改pagerAdapter如下：
    
    
    
    /
    
      pagerAdapter
    
     /
    
    public class SectionsPagerAdapter extends FragmentPagerAdapter {
    
    
    
        String[] tabs = {"首页","资讯","直播","我"};
    
        int[] imgs = {R.drawable.ic_home,R.drawable.ic_info,R.drawable.ic_live,R.drawable.ic_me};
    
    
    
        public SectionsPagerAdapter(FragmentManager fm) {
    
            super(fm);
    
        }
    
    
    
        @Override
    
        public Fragment getItem(int position) {
    
            return PlaceholderFragment.newInstance(tabs[position]);
    
        }
    
    
    
        @Override
    
        public int getCount() {
    
            return tabs.length;
    
        }
    
    
    
        @Override
    
        public CharSequence getPageTitle(int position) {
    
    //            return tabs[position];
    
    //            return setImageSpan(tabs[position],imgs[position]);
    
            return null;
    
        }
    
    
    
        /
    
          设置自定义view
    
          @param position
    
          @return
    
         /
    
        public View setCustomView(int position) {
    
            View view = View.inflate(getApplicationContext(), R.layout.item_tab, null);
    
            ImageView iv = (ImageView) view.findViewById(R.id.iv);
    
            TextView tv = (TextView) view.findViewById(R.id.tv);
    
            iv.setImageResource(imgs[position]);
    
            tv.setText(tabs[position]);
    
            return view;
    
        }
    
    }
    
    1
    
    2
    
    3
    
    4
    
    5
    
    6
    
    7
    
    8
    
    9
    
    10
    
    11
    
    12
    
    13
    
    14
    
    15
    
    16
    
    17
    
    18
    
    19
    
    20
    
    21
    
    22
    
    23
    
    24
    
    25
    
    26
    
    27
    
    28
    
    29
    
    30
    
    31
    
    32
    
    33
    
    34
    
    35
    
    36
    
    37
    
    38
    
    39
    
    40
    
    41
    
    42
    
    43
    
    代码修改如下：
    
    
    
    …………
    
    // 绑定，要在viewpager设置完数据后，调用此方法，否则不显示 tabs文本
    
    tabLayout.setupWithViewPager(mViewPager);
    
    
    
    // 为绑定viewpager后的TabLayout的tabs设置自定义view
    
    for (int i = 0; i < mSectionsPagerAdapter.getCount(); i++) {
    
        tabLayout.getTabAt(i).setCustomView(mSectionsPagerAdapter.setCustomView(i));
    
    }
    
    1
    
    2
    
    3
    
    4
    
    5
    
    6
    
    7
    
    8
    
    发现问题：我使用的仍然是上面的item_tab,但是只显示图片，不显示文字如下
    
    
    
    
    
    
    
    翻了翻源码，也没发现有对Tab的标题有特别的设置；后来，就感觉是不是颜色问题，给item_tab中的textview加上属性android:textColor="@android:color/black",就显示出来了
    
    
    
    
    
    
    
    六、FlycoTabLayout
    
    这是一个不错的TabLayout开源项目，效果挺好，可以了解一下。
    
    
    
    
    
    蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。