您现在的位置: 首页 > 网站导航收录 > 百科知识百科知识

4月4号全国禁娱，各大App是如何实现界面换色的？

界面,都是,控件4月4号全国禁娱，各大App是如何实现界面换色的？

发布时间：2019-02-08加入收藏来源：互联网点击：

问题补充： 请从技术的角度帮忙解释一下实现的方法和原理

回答于 2019-09-11 08:43:50

回答于 2019-09-11 08:43:50

你好，曾经做过一段时间的安卓开发，我来回答这个问题。




为表达对抗击新冠肺炎疫情牺牲烈士和逝世同胞的深切哀悼，今天很多主流的App都统一换装为灰色以示庄重，虽然这些App的功能和界面千差万别，但是其由彩色变灰色的原理都是一样的。不过要解释其中的技术原理，就得补充一点主流的App开发模式的知识，下面我先简单介绍下三种主流的开发模式，然后讲一下三种开发模式的App分别如何实现界面变灰色。

App开发的三种主流模式：Native APP、Web APP、Hybrid APP

目前主流的App的开发模式可以分为三类：Native APP、Web APP和Hybrid APP，其中Hybrid APP是业界主流，三种开发模式各有优缺点，所面向的应用场景各有不同。

（1）Native APP

Native APP也叫原生App开发，是指开发者使用官方提供的编程语言、JDK、开发工具进行App开发，比如Android应用就采用Java语言使用谷歌提供的开发工具Android studio（早期也支持Eclipse作为IDE工具，后来谷歌不再支持）来开发，IOS应用就采用Objective-C语言使用苹果的开发工具Xcode来开发。

Native APP开发的优点是App运行流畅、可以调用手机所有能力、兼容性好，但是缺点也很明显，那就是开发周期比较长，成本高，可移植性差，同样功能的App需要在Android和IOS上各自开发和维护。

（2）Web APP

Web App开发类似于开发网页，使用的都是纯Web技术，比如HTML5、JavaScript、CSS等，开发完的App需要浏览器的支持才能进行展示和用户交互。Web App的优点是跨平台（一套代码可以同时在Android、IOS、Windows上运行）、开发成本低周期短、格式丰富，特别适合新闻类的App。其缺点是开发出的App无法离线使用、功能有限（Web技术无法访问设备的硬件）、APP反应速度慢。

（3）Hybrid APP

Hybrid APP也叫混合App开发或者融合App开发，是Native APP和Web APP模式的结合，算是一种取长补短的开发模式，使用安卓原生控件或者其他框架为HTML5提供容器，具体的界面展示和业务呈现由Web技术来实现。即HTML5云网站+APP应用客户端。目前主流的App，如今日头条、淘宝、京东、拼多多等都是采用混合开发模式。

Hybrid APP开发模式的优点是开发效率高、同一套代码Android和IOS基本上都可使用、更新和部署比较方便、可以实现的功能多、支持离线运行。其缺点是所有内容都是固定的导致不能换界面或增加功能、加载缓慢、安全性比较低，对开发人员的技能要求比较高，为了解决这些问题，字节跳动和阿里巴巴投入了大量的技术资源来优化App的流畅性和安全性。

Native APP如何实现界面变灰？

在Native APP开发模式中，所有的控件都是采用安卓原生的，以你提问时发的这张图为例，这张界面其实是一个Activity控件结合ViewPager 、Fragment控件来实现的，Fragment控件里面又嵌入了Imageview。其中Activity负责主框架，ViewPager 、Fragment用来实现内容动态加载和刷新，而Imageview负责展示具体的图片。

以图片变灰为例，解释下程序员具体怎么做。为了实现图片变灰，最简单的办法就是直接通过ImageView调用安卓系统的setColorFilter方法来实现，也可以创建一个ColorFilter ，然后把它设置给ImageView，原理都一样。

参考代码：ImageView.setColorFilter(Color.GRAY, PorterDuff.Mode.MULTIPLY);

其中ImageView代表某张图片，setColorFilter代表安卓提供的处理图片的接口，Color.GRAY代表把图片转换为灰度图片。

除了图片以外，整个App界面都是由类似ImageView的控件组成的，如图所示，在Android里面，如果要展示文字，程序员会创建TextView；如果想播放视频，那么程序员就会创建一个Surfaceview ，每个控件都可以单独控制其背景颜色，开发人员只需要对控件进行处理即可，这里不再赘述。

Web APP如何实现界面变灰？

Web App实现界面变灰实现起来更简单，App界面中的展示的内容都对应着HTML5的元素，比如<img>标签就代表图片，想将Web页面的图片变为灰色的方法有很多，通过CSS、JavaScript都可以做到，以CSS为例，对<img>标签做如下CSS处理即可：

img {-webkit-filter: grayscale(1);filter: gray;filter: grayscale(1);}
同样的，这里以比较常见的图片变灰为例，在Web App界面中所有的元素都跟<img>一样，对应着HTML5中的某类标签，开发者如果想改某种元素的显示效果，直接在其对应的CSS文件中修改其属性即可。

Hybrid APP如何实现界面变灰？

Hybrid APP并非新的事物，只不过是融合了Native APP和Web APP各自的优点而已，所以想控制Hybrid APP界面变灰，只需要看想变灰的部分是由原生安卓控件来实现的还是由Web技术来实现的，然后按照上面介绍的方法对应处理即可。




总而言之，无论是Native APP、Web APP还是Hybrid APP，用户界面的背后都对应着安卓原生的控件或者HTML5的元素，想改变界面的显示效果，只需要找对控件，然后按照控件所支持的方法进行设置即可。这些在开发人员眼里并非难事，对于没有软件开发背景的朋友来说，需要一定时间来消化。希望我的回答有帮到你。

回答于 2019-09-11 08:43:50

实现方式很简单，拿网站举例。

有一个知名的可以让网页变为灰度的Javascript脚本：grayscale.js，因此只需要2行代码：

引用grayscale.js

利用CSS将grayscale的应用到特定的类

比如想让整个网站变为黑白色，只需要对html应用grayscale效果即可，代码如下（使用了Bilibili的js源，添加到header中即可）：

<style>html{-webkit-filter:grayscale(.95)}</style>

<script src="//s1.hdslb.com/bfs/static/jinkela/long/js/utils/grayscale.js"></script>

其中，grayscale(.95)指的是脚本遮罩度。比如设置为.50，那么就会叠加50%灰色。

该脚本的工作原理是：利用客户的浏览器完成灰度计算。因此不会改变原网页内容，也不会增加多少流量消耗。当然，对于大型网站，可能需要对灰度版本的网页进行缓存。

grayscale可以应用在特定的类上，比如对其它类应用，但对用户头像（有专门的类名）不应用。这样就可以起到全站黑白，同时用户头像彩色的效果。

 1/3    1 2 3 下一页 尾页