Carson带你学Android：淘宝、天猫都在用的UI框架V
V- Layout 是阿里出品的基础 UI 框架，用于快速实现页面的复杂布局，在手机天猫 Android版 内广泛使用电商图让人激动的是，在上个月V- Layout终于在Github上开源！Github今天，我对Github - alibaba - vlayout
V- Layout进行了详细分析，我将献上一份 V- Layout的使用攻略 & 源码分析，希望你们会喜欢。目录目录1. 为什么要使用 V - Layout阅读本文前请先看：Android Tangram模型：连淘宝、天猫都在用的UI框架模型你一定要懂Carson带你学Android开源库系列文章：Carson带你学Android：主流开源图片加载库对比(UIL、Picasso、Glide、Fresco)Carson带你学Android：主流开源网络请求库对比(Volley、OkHttp、Retrofit)Carson带你学Android：网络请求库Retrofit使用教程Carson带你学Android：网络请求库Retrofit源码分析Carson带你学Android：图片加载库Glide使用教程Carson带你学Android：图片加载库Glide源码分析Carson带你学Android：V-Layout，淘宝、天猫都在用的UI框架，赶紧用起来吧！
在讲解 V - Layout 前，我们先来搞懂一个问题：为什么要使用 V - Layout
Android中 UI 性能消耗主要来自于两个方面：布局层次嵌套导致多重 measure/layoutView控件的创建和销毁为了解决上述问题，现有的解决方式是：少用嵌套布局使用 ListView/GirdView/RecyclerView等基础空间来处理View的回收与复用。但是，很多时候我们需要在一个长列表下做多种类型的布局来分配各种元素,，特别是电商平台首页等页面，布局元素结构更加复杂多样。如下图：
电商图此时的解决方案有所变化：不采用子View的复用，只采用一个主要的复用容器（如ListView 或 RecyclerView+LinearLayoutManager），然后在其中使用嵌套方式直接用各个组件进行拼接，减少了复用的能力
这种做法还是会损失Android应用的性能。
1.3 解决方案通过自定义LayoutManager 管理所有的布局类型即阿里出品的基础 UI 框架项目 VirtualLayout就是采用该方式来解决上述问题2. 简介定义：VirtualLayout是阿里出品的基础 UI 框架项目作用：快速实现复杂的布局格式的混排 & 通过组件回收提高性能基于效果图3. 应用场景复杂的布局格式混排，如：浮动布局、栏格布局、通栏布局、一拖N布局、瀑布流布局，还可以组合使用这些布局具体场景是：如电商平台首页、活动页等等RecyclerView&LayoutManager扩展目前已在Github开源：Github - alibaba - vlayout
实际应用效果图4. 原理解析V - Layout 目前已在手机天猫 & 淘宝 Android 版内广泛使用
V - Layout的本质原理是：通过自定义一个VirtualLayoutManager（继承自 LayoutManager），用于管理一系列LayoutHelper，将具体的布局能力交给LayoutHelper来完成，从而 快速实现组合布局 的需求。
每个4.1 源码类说明LayoutHelper负责 页面某一个范围内的布局V - Layout默认实现了10种默认布局：（对应同名的LayoutHelper）布局类型
V - Layout的源码类图如下：
具体类说明
示意图V - Layout默认实现了10种默认布局：（对应同名的LayoutHelper）布局类型下面会进行详细介绍。
特别注意：每一种LayoutHelper负责布局一批组件范围内的组件，不同组件范围内的组件之间，如果类型相同，可以在滑动过程中回收复用。因此回收粒度比较细，且可以跨布局类型复用。支持扩展外部：即注册新的LayoutHelper，实现特殊的布局方式。下面会详细说明介绍完类之后，我将详细分析 V - Layout的工作流程。
V - Layout的工作流程分为 初始化 & 布局流程。如下图：工作流程下面我将对初始化 & 布局流程作详细分析。4.2.1 初始化在使用 V - layout 快速实现复杂布局前，需要先做一系列的初始化工作。初始化流程此处的初始化 实际上 就是 使用者在使用初始化流程与使用普通的 RecyclerView + LayoutManager 初始化流程基本一致：Vlayout的使用者
V - layout 时需要做的初始化工作。此处主要先讲解下数据列表的获取：本质上，是对页面实体 进行 卡片 & 组件的拆解，形成一个位置列表示意图其他初始化步骤将在下面实例讲解进行详细说明4.2.2 具体布局流程当完成初始化工作后，每当用户刚打开页面第一次渲染布局 或 用户滑动页面时，都会进行一次布局流程布局流程的本质是：自定义 VirtualLayoutManager持续获取页面状态，并通过LayoutHelperFinder找到对应的LayoutHelper从而实现对应的布局逻辑，从而快速实现组合布局 的需求具体流程如下布局流程总结下面用一张图总结 V - Layout 的原理 & 工作流程
在讲完原理后，接下来我将如何使用 V - Layout。
V - Layout的使用其实就是上面说的初始化工作使用步骤如下：使用步骤下面我将对每个步骤进行详细说明。
步骤1：创建RecyclerView & VirtualLayoutManager 对象并进行绑定recyclerView=(RecyclerView) findViewById(R.id.my_recycler_view); // 创建RecyclerView对象 VirtualLayoutManager layoutManager=new VirtualLayoutManager(this); // 创建VirtualLayoutManager对象 // 同时内部会创建一个LayoutHelperFinder对象，用来后续的LayoutHelper查找 recyclerView.setLayoutManager(layoutManager); // 将VirtualLayoutManager绑定到recyclerView如果一屏内相同类型的 View 个数比较多，需要设置一个合适的大小，防止来回滚动时重新创建 View）
// 设置组件复用回收池 RecyclerView.RecycledViewPool viewPool=new RecyclerView.RecycledViewPool(); recyclerView.setRecycledViewPool(viewPool); viewPool.setMaxRecycledViews(0, 10);设置 V - Layout的Adapter有两种方式:
方式1：继承 自DelegateAdapter方式2：继承 自 VirtualLayoutAdapter下面会进行详细说明：方式1：继承 自 DelegateAdapter
定义：DelegateAdapter是V - Layout专门为管理 LayoutHelper定制的 Adapter作用：通过管理不同布局的Adapter，继而管理不同的继承自VirtualLayoutAdapter
LayoutHelper，从而实现使用不同组合布局特别注意：虽不可直接绑定LayoutHelper，但是它内部有一个继承自RecyclerView.Adapter的内部类Adapter可以绑定LayoutHelper；即通过一个List把绑定好的Adapter打包起来，再放去DelegateAdapter，这样就可以实现组合使用不同的布局具体做法：
写法与复写系统自带的Adapter非常类似：只比系统自带的RecyclerAdapter需要多重载onCreateLayoutHelper方法，其余类似关于Android系统自带的RecyclerAdapter的使用具体请看我写的文章Android开发：ListView、AdapterView、RecyclerView全面解析
public class MyAdapter extends DelegateAdapter.Adapter<MyAdapter.MainViewHolder> {// 比系统自带的RecyclerAdapter需要多重载onCreateLayoutHelper（） @Override public LayoutHelper onCreateLayoutHelper() { return layoutHelper; }... // 其余写法与复写系统自带的Adapter相同}方式2：继承 自 VirtualLayoutAdapter
定义：当需要实现复杂需求时， 可以通过继承VirtualLayoutAdapter从而实现自定义Adapter
具体使用
public class MyAdapter extends VirtualLayoutAdapter { ...// 自定义Adapter逻辑}Item）以线性排布的布局示意图具体使用/** 设置线性布局 */ LinearLayoutHelper linearLayoutHelper=new LinearLayoutHelper(); // 创建对应的LayoutHelper对象 // 所有布局的公共属性（属性会在下面详细说明） linearLayoutHelper.setItemCount(4);// 设置布局里Item个数 linearLayoutHelper.setPadding(10,10,10,10);// 设置LayoutHelper的子元素相对LayoutHelper边缘的距离 linearLayoutHelper.setMargin(10,10,10,10);// 设置LayoutHelper边缘相对父控件（即RecyclerView）的距离 linearLayoutHelper.setBgColor(Color.GRAY);// 设置背景颜色 linearLayoutHelper.setAspectRatio(6);// 设置设置布局内每行布局的宽与高的比 // linearLayoutHelper特有属性 linearLayoutHelper.setDividerHeight(1); // 设置每行Item的距离 a. setItemCount属性
作用：设置整个布局里的Item数量示意图具体使用如设置的Item总数如与Adapter的getItemCount()方法返回的数量不同，会取决于后者
// 接口示意 public void setItemCount(int Count)// 具体使用 linearLayoutHelper.setItemCount(4);b. Adding & Margin属性
定义：都是边距的含义，但二者边距的定义不同：
Padding：是 LayoutHelper 的子元素相对 LayoutHelper 边缘的距离；Margin：是 LayoutHelper 边缘相对父控件（即RecyclerView）的距离。具体如下图：示意图具体使用
// 接口示意 public void setPadding(int leftPadding, int topPadding, int rightPadding, int bottomPadding) public void setMargin(int leftMargin, int topMargin, int rightMargin, int bottomMargin)// 具体使用 linearLayoutHelper.setPadding(10,10,10,10); // 设置LayoutHelper的子元素相对LayoutHelper边缘的距离 linearLayoutHelper.setMargin(10,10,10,10); // 设置LayoutHelper边缘相对父控件（即RecyclerView）的距离c. bgColor属性
作用：设置布局背景颜色具体使用：// 接口示意public void setBgColor(int bgColor)// 具体使用linearLayoutHelper.setBgColor(Color.YELLOW);d. aspectRatio属性
作用：设置布局内每行布局的宽与高的比。如下图示意图具体使用// 接口示意public void setAspectRatio(float aspectRatio);// LayoutHelper定义的aspectRatio((VirutalLayoutManager.LayoutParams) layoutParams).mAspectRatio// 视图的LayoutParams定义的aspectRatio// 在LayoutHelper计算出视图宽度之后，用来确定视图高度时使用的，它会覆盖通过LayoutHelper的aspectRatio计算出来的视图高度，因此具备更高优先级。// 具体使用 linearLayoutHelper.setAspectRatio(6); a. dividerHeight属性
作用：设置每行Item之间的距离示意图具体使用设置的间隔会与RecyclerView的addItemDecoration（）添加的间隔叠加
// 接口示意public void setDividerHeight(int dividerHeight)// 具体使用 linearLayoutHelper.setDividerHeight(1); /** 设置Grid布局 */ GridLayoutHelper gridLayoutHelper=new GridLayoutHelper(3); // 在构造函数设置每行的网格个数 // 公共属性 gridLayoutHelper.setItemCount(6);// 设置布局里Item个数 gridLayoutHelper.setPadding(20, 20, 20, 20);// 设置LayoutHelper的子元素相对LayoutHelper边缘的距离 gridLayoutHelper.setMargin(20, 20, 20, 20);// 设置LayoutHelper边缘相对父控件（即RecyclerView）的距离 gridLayoutHelper.setBgColor(Color.GRAY);// 设置背景颜色 gridLayoutHelper.setAspectRatio(6);// 设置设置布局内每行布局的宽与高的比 // gridLayoutHelper特有属性（下面会详细说明） gridLayoutHelper.setWeights(new float[]{40, 30, 30});//设置每行中 每个网格宽度 占 每行总宽度 的比例 gridLayoutHelper.setVGap(20);// 控制子元素之间的垂直间距 gridLayoutHelper.setHGap(20);// 控制子元素之间的水平间距 gridLayoutHelper.setAutoExpand(false);//是否自动填充空白区域 gridLayoutHelper.setSpanCount(3);// 设置每行多少个网格 // 通过自定义SpanSizeLookup来控制某个Item的占网格个数 gridLayoutHelper.setSpanSizeLookup(new GridLayoutHelper.SpanSizeLookup() { @Override public int getSpanSize(int position) { if (position > 7 ) { return 3; // 第7个位置后,每个Item占3个网格 }else { return 2; // 第7个位置前,每个Item占2个网格 } } });a. weights属性
作用：设置每行中每个网格宽度占每行总宽度的比例默认情况下，每行中每个网格中的宽度相等weights属性是一个float数组，每一项代表当个网格占每行总宽度的百分比；总和是100，否则布局会超出容器宽度；如果布局中有4列，那么weights的长度也应该是4；长度大于4，多出的部分不参与宽度计算；如果小于4，不足的部分默认平分剩余的空间。示意图具体使用// 接口示意public void setWeights(float[] weights)// 具体使用gridLayoutHelper.setWeights(new float[]{40, 30, 30});b. vGap、hGap属性
作用：分别控制子元素之间的垂直间距 和 水平间距。示意图具体使用// 接口示意 public void setHGap(int hGap) public void setVGap(int vGap)// 具体使用 gridLayoutHelper.setVGap(20);// 控制子元素之间的垂直间距 gridLayoutHelper.setHGap(20);// 控制子元素之间的水平间距c. spanCount、spanSizeLookup属性
作用：spanCount：设置每行多少个网格spanSizeLookup：设置每个 Item占用多少个网格（默认=1）示意图具体使用// 接口示意public void setSpanCount(int spanCount)public void setSpanSizeLookup(SpanSizeLookup spanSizeLookup)// 具体使用 gridLayoutHelper.setSpanCount(5);// 设置每行多少个网格 // 通过自定义SpanSizeLookup来控制某个Item的占网格个数 gridLayoutHelper.setSpanSizeLookup(new GridLayoutHelper.SpanSizeLookup() { @Override public int getSpanSize(int position) { if (position > 7 ) { return 3; // 第7个位置后,每个Item占3个网格 }else { return 2; // 第7个位置前,每个Item占2个网格 } } });d. autoExpand属性
作用：当一行里item的个数 < （每行网格列数 - spanCount值/ 每个Item占有2个网格-setSpanSizeLookup ）时，是否自动填满空白区域若autoExpand=true，那么视图的总宽度会填满可用区域；否则会在屏幕上留空白区域。示意图具体使用
// 接口示意public void setAutoExpand(boolean isAutoExpand)// 具体使用gridLayoutHelper.setAutoExpand(false);固定布局具体使用固定在屏幕某个位置，且不可拖拽 & 不随页面滚动而滚动。如下图：（左上角）
/** 设置固定布局 */ FixLayoutHelper fixLayoutHelper=new FixLayoutHelper(FixLayoutHelper.TOP_LEFT,40,100); // 参数说明: // 参数1:设置吸边时的基准位置(alignType) - 有四个取值:TOP_LEFT(默认), TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT // 参数2:基准位置的偏移量x // 参数3:基准位置的偏移量y // 公共属性 fixLayoutHelper.setItemCount(1);// 设置布局里Item个数 // 从设置Item数目的源码可以看出，一个FixLayoutHelper只能设置一个// @Override// public void setItemCount(int itemCount) {// if (itemCount > 0) {// super.setItemCount(1);// } else {// super.setItemCount(0);// }// } fixLayoutHelper.setPadding(20, 20, 20, 20);// 设置LayoutHelper的子元素相对LayoutHelper边缘的距离 fixLayoutHelper.setMargin(20, 20, 20, 20);// 设置LayoutHelper边缘相对父控件（即RecyclerView）的距离 fixLayoutHelper.setBgColor(Color.GRAY);// 设置背景颜色 fixLayoutHelper.setAspectRatio(6);// 设置设置布局内每行布局的宽与高的比 // fixLayoutHelper特有属性 fixLayoutHelper.setAlignType(FixLayoutHelper.TOP_LEFT);// 设置吸边时的基准位置(alignType) fixLayoutHelper.setX(30);// 设置基准位置的横向偏移量X fixLayoutHelper.setY(50);// 设置基准位置的纵向偏移量Ya. AlignType、x、y属性
作用：alignType：吸边基准类型x：基准位置的横向偏移量y：基准位置的纵向偏移量示意图作用对象：FixLayoutHelper, ScrollFixLayoutHelper, FloatLayoutHelper的属性共有4个取值：TOP_LEFT(默认), TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT，具体请看下面示意图
// 接口示意public void setAlignType(int alignType)public void setX(int x)public void setY(int y)// 具体使用fixLayoutHelper.setAlignType(FixLayoutHelper.TOP_LEFT);fixLayoutHelper.setX(30);fixLayoutHelper.setY(50);固定在屏幕某个位置，且不可拖拽 & 不随页面滚动而滚动（继承自固定布局（FixLayoutHelper））唯一不同的是，可以自由设置该Item什么时候显示（到顶部显示 / 到底部显示），可如下图：（左上角）需求场景：到页面底部显示”一键到顶部“的按钮功能
以下示意图为：滑动到底部，布局才在左上角显示
滑动到底部才在左上角显示具体使用/** 设置可选固定布局 */ ScrollFixLayoutHelper scrollFixLayoutHelper=new ScrollFixLayoutHelper(ScrollFixLayoutHelper.TOP_RIGHT,0,0); // 参数说明: // 参数1:设置吸边时的基准位置(alignType) - 有四个取值:TOP_LEFT(默认), TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT // 参数2:基准位置的偏移量x // 参数3:基准位置的偏移量y // 公共属性 scrollFixLayoutHelper.setItemCount(1);// 设置布局里Item个数 // 从设置Item数目的源码可以看出，一个FixLayoutHelper只能设置一个// @Override// public void setItemCount(int itemCount) {// if (itemCount > 0) {// super.setItemCount(1);// } else {// super.setItemCount(0);// }// } scrollFixLayoutHelper.setPadding(20, 20, 20, 20);// 设置LayoutHelper的子元素相对LayoutHelper边缘的距离 scrollFixLayoutHelper.setMargin(20, 20, 20, 20);// 设置LayoutHelper边缘相对父控件（即RecyclerView）的距离 scrollFixLayoutHelper.setBgColor(Color.GRAY);// 设置背景颜色 scrollFixLayoutHelper.setAspectRatio(6);// 设置设置布局内每行布局的宽与高的比 // fixLayoutHelper特有属性 scrollFixLayoutHelper.setAlignType(FixLayoutHelper.TOP_LEFT);// 设置吸边时的基准位置(alignType) scrollFixLayoutHelper.setX(30);// 设置基准位置的横向偏移量X scrollFixLayoutHelper.setY(50);// 设置基准位置的纵向偏移量Y scrollFixLayoutHelper.setShowType(ScrollFixLayoutHelper.SHOW_ON_ENTER);// 设置Item的显示模式a. AlignType、x、y属性
作用：alignType：吸边基准类型x：基准位置的横向偏移量y：基准位置的纵向偏移量示意图具体使用共有4个取值：TOP_LEFT(默认), TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT，具体请看下面示意图
// 接口示意public void setAlignType(int alignType)public void setX(int x)public void setY(int y)// 具体使用ScrollFixLayoutHelper.setAlignType(FixLayoutHelper.TOP_LEFT);ScrollFixLayoutHelper.setX(30);ScrollFixLayoutHelper.setY(50);b. ShowType属性
作用：设置Item的显示模式具体使用共有三种显示模式
SHOW_ALWAYS：永远显示(即效果同固定布局)SHOW_ON_ENTER：默认不显示视图，当页面滚动到该视图位置时才显示；SHOW_ON_LEAVE：默认不显示视图，当页面滚出该视图位置时才显示
// 接口示意public void setShowType(int showType)// 具体使用scrollFixLayoutHelper.setShowType(ScrollFixLayoutHelper.SHOW_ON_ENTER);可随意拖动，但最终会被吸边到两侧不随页面滚动而移动示意图具体使用
/** 设置浮动布局 */ FloatLayoutHelper floatLayoutHelper=new FloatLayoutHelper(); // 创建FloatLayoutHelper对象 // 公共属性 floatLayoutHelper.setItemCount(1);// 设置布局里Item个数 // 从设置Item数目的源码可以看出，一个FixLayoutHelper只能设置一个// @Override// public void setItemCount(int itemCount) {// if (itemCount > 0) {// super.setItemCount(1);// } else {// super.setItemCount(0);// }// } floatLayoutHelper.setPadding(20, 20, 20, 20);// 设置LayoutHelper的子元素相对LayoutHelper边缘的距离 floatLayoutHelper.setMargin(20, 20, 20, 20);// 设置LayoutHelper边缘相对父控件（即RecyclerView）的距离 floatLayoutHelper.setBgColor(Color.GRAY);// 设置背景颜色 floatLayoutHelper.setAspectRatio(6);// 设置设置布局内每行布局的宽与高的比 // floatLayoutHelper特有属性 floatLayoutHelper.setDefaultLocation(300,300);// 设置布局里Item的初始位置 示意图可理解为只有一行的线性布局
/** 设置栏格布局 */ ColumnLayoutHelper columnLayoutHelper=new ColumnLayoutHelper(); // 创建对象 // 公共属性 columnLayoutHelper.setItemCount(3);// 设置布局里Item个数 columnLayoutHelper.setPadding(20, 20, 20, 20);// 设置LayoutHelper的子元素相对LayoutHelper边缘的距离 columnLayoutHelper.setMargin(20, 20, 20, 20);// 设置LayoutHelper边缘相对父控件（即RecyclerView）的距离 columnLayoutHelper.setBgColor(Color.GRAY);// 设置背景颜色 columnLayoutHelper.setAspectRatio(6);// 设置设置布局内每行布局的宽与高的比 // columnLayoutHelper特有属性 columnLayoutHelper.setWeights(new float[]{30, 40, 30});// 设置该行每个Item占该行总宽度的比例 // 同上面Weigths属性讲解/** 设置通栏布局 */ SingleLayoutHelper singleLayoutHelper=new SingleLayoutHelper(); // 公共属性 singleLayoutHelper.setItemCount(3);// 设置布局里Item个数 singleLayoutHelper.setPadding(20, 20, 20, 20);// 设置LayoutHelper的子元素相对LayoutHelper边缘的距离 singleLayoutHelper.setMargin(20, 20, 20, 20);// 设置LayoutHelper边缘相对父控件（即RecyclerView）的距离 singleLayoutHelper.setBgColor(Color.GRAY);// 设置背景颜色 singleLayoutHelper.setAspectRatio(6);// 设置设置布局内每行布局的宽与高的比 /** 设置1拖N布局 */ OnePlusNLayoutHelper onePlusNLayoutHelper=new OnePlusNLayoutHelper(5); // 在构造函数里传入显示的Item数 // 最多是1拖4,即5个 // 公共属性 onePlusNLayoutHelper.setItemCount(3);// 设置布局里Item个数 onePlusNLayoutHelper.setPadding(20, 20, 20, 20);// 设置LayoutHelper的子元素相对LayoutHelper边缘的距离 onePlusNLayoutHelper.setMargin(20, 20, 20, 20);// 设置LayoutHelper边缘相对父控件（即RecyclerView）的距离 onePlusNLayoutHelper.setBgColor(Color.GRAY);// 设置背景颜色 onePlusNLayoutHelper.setAspectRatio(3);// 设置设置布局内每行布局的宽与高的比布局说明：布局只有一个Item，显示逻辑如下：
当它包含的组件处于屏幕可见范围内时，像正常的组件一样随页面滚动而滚动当组件将要被滑出屏幕返回的时候，可以吸到屏幕的顶部或者底部，实现一种吸住的效果示意图（吸在顶部）
示意图具体使用 /** 设置吸边布局 */ StickyLayoutHelper stickyLayoutHelper=new StickyLayoutHelper(); // 公共属性 stickyLayoutHelper.setItemCount(3);// 设置布局里Item个数 stickyLayoutHelper.setPadding(20, 20, 20, 20);// 设置LayoutHelper的子元素相对LayoutHelper边缘的距离 stickyLayoutHelper.setMargin(20, 20, 20, 20);// 设置LayoutHelper边缘相对父控件（即RecyclerView）的距离 stickyLayoutHelper.setBgColor(Color.GRAY);// 设置背景颜色 stickyLayoutHelper.setAspectRatio(3);// 设置设置布局内每行布局的宽与高的比 // 特有属性 stickyLayoutHelper.setStickyStart(true); // true=组件吸在顶部 // false=组件吸在底部 stickyLayoutHelper.setOffset(100);// 设置吸边位置的偏移量 Adapter_StickyLayout=new MyAdapter(this, stickyLayoutHelper,1, listItem) { // 设置需要展示的数据总数,此处设置是1 // 为了展示效果,通过重写onBindViewHolder()将布局的第一个数据设置为Stick @Override public void onBindViewHolder(MainViewHolder holder, int position) { super.onBindViewHolder(holder, position); if (position==0) { holder.Text.setText("Stick"); } } }; adapters.add(Adapter_StickyLayout) ; // 将当前的Adapter加入到Adapter列表里作用：
stickyStart：设置吸边位置当视图的位置在屏幕范围内时，视图会随页面滚动而滚动；当视图的位置滑出屏幕时，StickyLayoutHelper会将视图固定在顶部（stickyStart=true）或 底部（stickyStart=false）
offset：设置吸边的偏移量具体使用
// 接口示意 public void setStickyStart(boolean stickyStart) public void setOffset(int offset)// 具体使用 stickyLayoutHelper.setStickyStart(true); // true=组件吸在顶部 // false=组件吸在底部 stickyLayoutHelper.setOffset(100);// 设置吸边位置的偏移量 /** 设置瀑布流布局 */ StaggeredGridLayoutHelper staggeredGridLayoutHelper=new StaggeredGridLayoutHelper(); // 创建对象 // 公有属性 staggeredGridLayoutHelper.setItemCount(20);// 设置布局里Item个数 staggeredGridLayoutHelper.setPadding(20, 20, 20, 20);// 设置LayoutHelper的子元素相对LayoutHelper边缘的距离 staggeredGridLayoutHelper.setMargin(20, 20, 20, 20);// 设置LayoutHelper边缘相对父控件（即RecyclerView）的距离 staggeredGridLayoutHelper.setBgColor(Color.GRAY);// 设置背景颜色 staggeredGridLayoutHelper.setAspectRatio(3);// 设置设置布局内每行布局的宽与高的比 // 特有属性 staggeredGridLayoutHelper.setLane(3);// 设置控制瀑布流每行的Item数 staggeredGridLayoutHelper.setHGap(20);// 设置子元素之间的水平间距 staggeredGridLayoutHelper.setVGap(15);// 设置子元素之间的垂直间距 除了使用系统提供的默认布局 LayoutHelper，开发者还可以通过自定义LayoutHelper从而实现自定义布局样式。有三种方式：
BaseLayoutHelper：从上而下排列的顺序 & 内部 View可以按行回收的布局；主要实现layoutViews()、computeAlignOffset()等方法继承
LinearLayoutHelper、GridLayoutHelper都是采用该方法实现
AbstractFullFillLayoutHelper：有些布局内部的 View 并不是从上至下排列的顺序（即 Adatper 里的数据顺序和物理视图顺序不一致，那么可能就不能按数据顺序布局和回收），需要一次性布局& 回收。主要实现layoutViews()等方法继承
OnePlusNLayoutHelper采用该方法实现
FixAreaLayoutHelper：fix 类型布局，子节点不随页面滚动而滚动。主要实现layoutViews()、beforeLayout()、afterLayout()等方法步骤5：将生成的LayoutHelper 交给Adapter，并绑定到RecyclerView 对象
FixLayoutHelper采用该方法实现
此处的做法会因步骤3中Adapter的设置而有所不同
<-- Adapter继承 自 DelegateAdapter -->// 步骤1：设置Adapter列表（同时也是设置LayoutHelper列表） List<DelegateAdapter.Adapter> adapters=new LinkedList<>();// 步骤2：创建自定义的Adapter对象 & 绑定数据 & 绑定上述对应的LayoutHelper// 绑定你需要展示的布局LayoutHelper即可，此处仅展示两个。 MyAdapter Adapter_linearLayout=new MyAdapter(this, linearLayoutHelper，ListItem)；// ListItem是需要绑定的数据（其实取决于你的Adapter如何定义） MyAdapter Adapter_gridLayoutHelper=new MyAdapter(this, gridLayoutHelper，ListItem)；// 步骤3：将创建的Adapter对象放入到DelegateAdapter.Adapter列表里 adapters.add（Adapter_linearLayout ) ; adapters.add（Adapter_gridLayoutHelper ) ;// 步骤4：创建DelegateAdapter对象 & 将layoutManager绑定到DelegateAdapterDelegateAdapter delegateAdapter=new DelegateAdapter(layoutManager);// 步骤5：将DelegateAdapter.Adapter列表绑定到DelegateAdapter delegateAdapter.setAdapters(adapters);// 步骤6：将delegateAdapter绑定到recyclerViewrecyclerView.setAdapter(delegateAdapter);<-- Adapter继承 自 VirtualLayoutAdapter -->// 步骤1：设置LayoutHelper列表 List<LayoutHelper> helpers=new LinkedList<>();// 步骤2：绑定上述对应的LayoutHelperhelpers.add（Adapter_linearLayout ）；helpers.add（Adapter_gridLayoutHelper ) ;// 步骤3：创建自定义的MyAdapter对象 & 绑定layoutManagerMyAdapter myAdapter=new MyAdapter(layoutManager);// 步骤4：将 layoutHelper 列表传递给 adaptermyAdapter.setLayoutHelpers(helpers);// 步骤5：将adapter绑定到recyclerViewrecycler.setAdapter(myAdapter);至此，使用过程讲解完毕。
6. 实例说明V-Layout的优点在于快速的组合不同布局下面，我将根据上面的步骤说明，用一个实例来使用V - Layout快速组合布局步骤1：在Android - Gradle加入依赖compile ('com.alibaba.android:vlayout:1.0.3@aar') { transitive=true }xml布局activity_main.xml
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="scut.carson_ho.v_layoutusage.MainActivity"> <android.support.v7.widget.RecyclerView android:id="@+id/my_recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" android:scrollbars="horizontal" /></RelativeLayout>RecyclerView每个子元素（ Item ）的xml布局item.xml
此处定义的
Item布局是常用的 上字下图
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="New Text" android:id="@+id/Item" /> <ImageView android:layout_alignParentRight="true" android:layout_gravity="center" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/Image"/></LinearLayout>DelegateAdapter继承 自此处主要以该方式进行演示
VirtualLayoutAdapter具体使用MyAdapter.java
public class MyAdapter extends DelegateAdapter.Adapter<MyAdapter.MainViewHolder> { // 使用DelegateAdapter首先就是要自定义一个它的内部类Adapter，让LayoutHelper和需要绑定的数据传进去 // 此处的Adapter和普通RecyclerView定义的Adapter只相差了一个onCreateLayoutHelper()方法，其他的都是一样的做法. private ArrayList<HashMap<String, Object>> listItem; // 用于存放数据列表 private Context context; private LayoutHelper layoutHelper; private RecyclerView.LayoutParams layoutParams; private int count=0; private MyItemClickListener myItemClickListener; // 用于设置Item点击事件 //构造函数(传入每个的数据列表 & 展示的Item数量) public MyAdapter(Context context, LayoutHelper layoutHelper, int count, ArrayList<HashMap<String, Object>> listItem) { this(context, layoutHelper, count, new RecyclerView.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 300), listItem); } public MyAdapter(Context context, LayoutHelper layoutHelper, int count, @NonNull RecyclerView.LayoutParams layoutParams, ArrayList<HashMap<String, Object>> listItem) { this.context=context; this.layoutHelper=layoutHelper; this.count=count; this.layoutParams=layoutParams; this.listItem=listItem; } // 把ViewHolder绑定Item的布局 @Override public MainViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { return new MainViewHolder(LayoutInflater.from(context).inflate(R.layout.item, parent, false)); } // 此处的Adapter和普通RecyclerView定义的Adapter只相差了一个onCreateLayoutHelper()方法 @Override public LayoutHelper onCreateLayoutHelper() { return layoutHelper; } // 绑定Item的数据 @Override public void onBindViewHolder(MainViewHolder holder, int position) { holder.Text.setText((String) listItem.get(position).get("ItemTitle")); holder.image.setImageResource((Integer) listItem.get(position).get("ItemImage")); } // 返回Item数目 @Override public int getItemCount() { return count; } // 设置Item的点击事件 // 绑定MainActivity传进来的点击监听器 public void setOnItemClickListener(MyItemClickListener listener) { myItemClickListener=listener; } //定义Viewholder class MainViewHolder extends RecyclerView.ViewHolder { public TextView Text; public ImageView image; public MainViewHolder(View root) { super(root); // 绑定视图 Text=(TextView) root.findViewById(R.id.Item); image=(ImageView) root.findViewById(R.id.Image); root.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { if (myItemClickListener !=null) myItemClickListener.onItemClick(v, getPosition()); } } //监听到点击就回调MainActivity的onItemClick函数 ); } public TextView getText() { return Text; } }}.Java文件里步骤5：创建RecyclerView & VirtualLayoutManager 对象并进行绑定步骤6：设置回收复用池大小步骤7：设置需要存放的数据步骤8：根据数据列表，创建对应的LayoutHelper步骤9：将生成的LayoutHelper 交给Adapter，并绑定到RecyclerView 对象
详细请看注释
MainActivity.java
public class MainActivity extends AppCompatActivity implements MyItemClickListener { RecyclerView recyclerView; MyAdapter Adapter_linearLayout,Adapter_GridLayout,Adapter_FixLayout,Adapter_ScrollFixLayout ,Adapter_FloatLayout,Adapter_ColumnLayout,Adapter_SingleLayout,Adapter_onePlusNLayout, Adapter_StickyLayout,Adapter_StaggeredGridLayout; private ArrayList<HashMap<String, Object>> listItem; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); /** * 步骤1：创建RecyclerView & VirtualLayoutManager 对象并进行绑定 * */ recyclerView=(RecyclerView) findViewById(R.id.my_recycler_view); // 创建RecyclerView对象 VirtualLayoutManager layoutManager=new VirtualLayoutManager(this); // 创建VirtualLayoutManager对象 // 同时内部会创建一个LayoutHelperFinder对象，用来后续的LayoutHelper查找 recyclerView.setLayoutManager(layoutManager); // 将VirtualLayoutManager绑定到recyclerView /** * 步骤2：设置组件复用回收池 * */ RecyclerView.RecycledViewPool viewPool=new RecyclerView.RecycledViewPool(); recyclerView.setRecycledViewPool(viewPool); viewPool.setMaxRecycledViews(0, 10); /** * 步骤3:设置需要存放的数据 * */ listItem=new ArrayList<HashMap<String, Object>>(); for (int i=0; i < 100; i++) { HashMap<String, Object> map=new HashMap<String, Object>(); map.put("ItemTitle", "第" + i + "行"); map.put("ItemImage", R.mipmap.ic_launcher); listItem.add(map); } /** * 步骤4:根据数据列表,创建对应的LayoutHelper * */ // 为了展示效果,此处将上面介绍的所有布局都显示出来 /** 设置线性布局 */ LinearLayoutHelper linearLayoutHelper=new LinearLayoutHelper(); // 创建对应的LayoutHelper对象 // 公共属性 linearLayoutHelper.setItemCount(4);// 设置布局里Item个数 linearLayoutHelper.setPadding(20, 20, 20, 20);// 设置LayoutHelper的子元素相对LayoutHelper边缘的距离 linearLayoutHelper.setMargin(20, 20, 20, 20);// 设置LayoutHelper边缘相对父控件（即RecyclerView）的距离 // linearLayoutHelper.setBgColor(Color.GRAY);// 设置背景颜色 linearLayoutHelper.setAspectRatio(6);// 设置设置布局内每行布局的宽与高的比 // linearLayoutHelper特有属性 linearLayoutHelper.setDividerHeight(10); // 设置间隔高度 // 设置的间隔会与RecyclerView的addItemDecoration（）添加的间隔叠加. linearLayoutHelper.setMarginBottom(100); // 设置布局底部与下个布局的间隔 // 创建自定义的Adapter对象 & 绑定数据 & 绑定对应的LayoutHelper进行布局绘制 Adapter_linearLayout=new MyAdapter(this, linearLayoutHelper, 4, listItem) { // 参数2:绑定绑定对应的LayoutHelper // 参数3:传入该布局需要显示的数据个数 // 参数4:传入需要绑定的数据 // 通过重写onBindViewHolder()设置更丰富的布局效果 @Override public void onBindViewHolder(MainViewHolder holder, int position) { super.onBindViewHolder(holder, position); // 为了展示效果,将布局的第一个数据设置为linearLayout if (position==0) { holder.Text.setText("Linear"); } //为了展示效果,将布局里不同位置的Item进行背景颜色设置 if (position < 2) { holder.itemView.setBackgroundColor(0x66cc0000 + (position - 6) * 128); } else if (position % 2==0) { holder.itemView.setBackgroundColor(0xaa22ff22); } else { holder.itemView.setBackgroundColor(0xccff22ff); } } }; Adapter_linearLayout.setOnItemClickListener(this); // 设置每个Item的点击事件 ....// 还有其他布局，由于代码量就较多就不贴出来了。 /** *步骤5:将生成的LayoutHelper 交给Adapter，并绑定到RecyclerView 对象 **/ // 1. 设置Adapter列表（同时也是设置LayoutHelper列表） List<DelegateAdapter.Adapter> adapters=new LinkedList<>(); // 2. 将上述创建的Adapter对象放入到DelegateAdapter.Adapter列表里 adapters.add(Adapter_linearLayout) ; adapters.add(Adapter_StickyLayout) ; adapters.add(Adapter_ScrollFixLayout) ; adapters.add(Adapter_GridLayout) ; adapters.add(Adapter_FixLayout) ; adapters.add(Adapter_FloatLayout) ; adapters.add(Adapter_ColumnLayout) ; adapters.add(Adapter_SingleLayout) ; adapters.add(Adapter_onePlusNLayout) ; adapters.add(Adapter_StaggeredGridLayout) ; // 3. 创建DelegateAdapter对象 & 将layoutManager绑定到DelegateAdapter DelegateAdapter delegateAdapter=new DelegateAdapter(layoutManager); // 4. 将DelegateAdapter.Adapter列表绑定到DelegateAdapter delegateAdapter.setAdapters(adapters); // 5. 将delegateAdapter绑定到recyclerView recyclerView.setAdapter(delegateAdapter); /** *步骤6:Item之间的间隔 **/ recyclerView.addItemDecoration(new RecyclerView.ItemDecoration() { public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) { outRect.set(5, 5, 5, 5); } }); } /** *步骤7:实现Item点击事件 **/ // 点击事件的回调函数 @Override public void onItemClick(View view, int postion) { System.out.println("点击了第"+postion+"行"); Toast.makeText(this, (String) listItem.get(postion).get("ItemTitle"), Toast.LENGTH_SHORT).show(); }}Carson_Ho的Github地址：V - Layout
7. 总结看完本文，你应该非常了解阿里出品的参考文档：https://github.com/alibaba/vlayouthttp://pingguohe.net/2017/02/28/vlayout-design.html
V - Layout 的使用 & 原理但该开源库还是存在许多小Bug，我在Github上也提交了一些，希望大家能一起在Github - alibaba - vlayout 上进行完善，共同为开源事业做贡献吧！欢迎关注Carson_Ho的简书Carson带你学Android开源库系列文章：Carson带你学Android：主流开源图片加载库对比(UIL、Picasso、Glide、Fresco)Carson带你学Android：主流开源网络请求库对比(Volley、OkHttp、Retrofit)Carson带你学Android：网络请求库Retrofit使用教程Carson带你学Android：网络请求库Retrofit源码分析Carson带你学Android：图片加载库Glide使用教程Carson带你学Android：图片加载库Glide源码分析Carson带你学Android：V-Layout，淘宝、天猫都在用的UI框架，赶紧用起来吧！
不定期分享关于安卓开发的干货，追求短、平、快，但却不缺深度。
请点赞！因为你的鼓励是我写作的最大动力！前言
现在很多App里都内置了Web网页（Hybrid App），比如说很多电商平台，淘宝、京东、聚划算等等，如下图上述功能是由Android的WebView实现的，其中涉及到Android客户端与Web网页交互的实现今天我将全面介绍Android通过WebView与JS交互的全面方式
阅读本文前请先阅读：Android开发：最全面、最易懂的Webview详解
目录
1. 交互方式总结
Android与JS通过WebView互相调用方法，实际上是：
Android去调用JS的代码JS去调用Android的代码二者沟通的桥梁是WebView
对于Android调用JS代码的方法有2种：
1. 通过WebView的loadUrl（）
2. 通过WebView的evaluateJavascript（）
对于JS调用Android代码的方法有3种：
1. 通过WebView的addJavascriptInterface（）进行对象映射
2. 通过 WebViewClient 的shouldOverrideUrlLoading ()方法回调拦截 url
3. 通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回调拦截JS对话框alert()、confirm()、prompt（） 消息
2. 具体分析
2.1 Android通过WebView调用 JS 代码
对于Android调用JS代码的方法有2种：
1. 通过WebView的loadUrl（）
2. 通过WebView的evaluateJavascript（）
方式1：通过WebView的loadUrl（）
实例介绍：点击Android按钮，即调用WebView JS（文本名为javascript）中callJS（）具体使用：步骤1：将需要调用的JS代码以.html格式放到src/main/assets文件夹里
为了方便展示，本文是采用Andorid调用本地JS代码说明；实际情况时，Android更多的是调用远程JS代码，即将加载的JS代码路径改成url即可需要加载JS代码：javascript.html
// 文本名：javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Carson_Ho</title>
// JS代码
<script>
// Android需要调用的方法
function callJS(){
alert("Android调用了JS的callJS方法");
}
</script>
</head>
</html>
12345678910111213141516171819步骤2：在Android里通过WebView设置调用JS代码
Android代码：MainActivity.java
注释已经非常清楚
public class MainActivity extends AppCompatActivity {
WebView mWebView;
Button button;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWebView=(WebView) findViewById(R.id.webview);
WebSettings webSettings=mWebView.getSettings();
// 设置与Js交互的权限
webSettings.setJavaScriptEnabled(true);
// 设置允许JS弹窗
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
// 先载入JS代码
// 格式规定为:file:///android_asset/文件名.html
mWebView.loadUrl("file:///android_asset/javascript.html");
button=(Button) findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 通过Handler发送消息
mWebView.post(new Runnable() {
@Override
public void run() {
// 注意调用的JS方法名要对应上
// 调用javascript的callJS()方法
mWebView.loadUrl("javascript:callJS()");
}
});
}
});
// 由于设置了弹窗检验调用结果,所以需要支持js对话框
// webview只是载体，内容的渲染需要使用webviewChromClient类去实现
// 通过设置WebChromeClient对象处理JavaScript的对话框
//设置响应js 的Alert()函数
mWebView.setWebChromeClient(new WebChromeClient() {
@Override
public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
AlertDialog.Builder b=new AlertDialog.Builder(MainActivity.this);
b.setTitle("Alert");
b.setMessage(message);
b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
result.confirm();
}
});
b.setCancelable(false);
b.create().show();
return true;
}
});
}
}
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869特别注意：JS代码调用一定要在 onPageFinished（） 回调之后才能调用，否则不会调用。
onPageFinished()属于WebViewClient类的方法，主要在页面加载结束时调用
方式2：通过WebView的evaluateJavascript（）
优点：该方法比第一种方法效率更高、使用更简洁。因为该方法的执行不会使页面刷新，而第一种方法（loadUrl ）的执行则会。Android 4.4 后才可使用具体使用// 只需要将第一种方法的loadUrl()换成下面该方法即可
mWebView.evaluateJavascript（"javascript:callJS()", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
//此处为 js 返回的结果
}
});
}
123456782.1.2 方法对比
2.1.3 使用建议
两种方法混合使用，即Android 4.4以下使用方法1，Android 4.4以上方法2
// Android版本变量
final int version=Build.VERSION.SDK_INT;
// 因为该方法在 Android 4.4 版本才可使用，所以使用时需进行版本判断
if (version < 18) {
mWebView.loadUrl("javascript:callJS()");
} else {
mWebView.evaluateJavascript（"javascript:callJS()", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
//此处为 js 返回的结果
}
});
}
123456789101112132.2 JS通过WebView调用 Android 代码
对于JS调用Android代码的方法有3种：
1. 通过WebView的addJavascriptInterface（）进行对象映射
2. 通过 WebViewClient 的shouldOverrideUrlLoading ()方法回调拦截 url
3. 通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回调拦截JS对话框alert()、confirm()、prompt（） 消息
2.2.1 方法分析
方式1：通过 WebView的addJavascriptInterface（）进行对象映射
步骤1：定义一个与JS对象映射关系的Android类：AndroidtoJs
AndroidtoJs.java（注释已经非常清楚）
// 继承自Object类
public class AndroidtoJs extends Object {
// 定义JS需要调用的方法
// 被JS调用的方法必须加入@JavascriptInterface注解
@JavascriptInterface
public void hello(String msg) {
System.out.println("JS调用了Android的hello方法");
}
}
12345678910步骤2：将需要调用的JS代码以.html格式放到src/main/assets文件夹里
需要加载JS代码：javascript.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Carson</title>
<script>
function callAndroid(){
// 由于对象映射，所以调用test对象等于调用Android映射的对象
test.hello("js调用了android中的hello方法");
}
</script>
</head>
<body>
//点击按钮则调用callAndroid函数
<button type="button" id="button1" onclick="callAndroid()"></button>
</body>
</html>
12345678910111213141516171819步骤3：在Android里通过WebView设置Android类与JS代码的映射
详细请看注释
public class MainActivity extends AppCompatActivity {
WebView mWebView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWebView=(WebView) findViewById(R.id.webview);
WebSettings webSettings=mWebView.getSettings();
// 设置与Js交互的权限
webSettings.setJavaScriptEnabled(true);
// 通过addJavascriptInterface()将Java对象映射到JS对象
//参数1：Javascript对象名
//参数2：Java对象名
mWebView.addJavascriptInterface(new AndroidtoJs(), "test");//AndroidtoJS类对象映射到js的test对象
// 加载JS代码
// 格式规定为:file:///android_asset/文件名.html
mWebView.loadUrl("file:///android_asset/javascript.html");
123456789101112131415161718192021222324特点
优点：使用简单缺点：存在严重的漏洞问题，具体请看文章：你不知道的 Android WebView 使用漏洞仅将Android对象和JS对象映射即可
方式2：通过 WebViewClient 的方法shouldOverrideUrlLoading ()回调拦截 url
具体原理： Android通过 WebViewClient 的回调方法shouldOverrideUrlLoading ()拦截 url解析该 url 的协议如果检测到是预先约定好的协议，就调用相应方法具体使用： 步骤1：在JS约定所需要的Url协议 JS代码：javascript.html即JS需要调用Android的方法
以.html格式放到src/main/assets文件夹里
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Carson_Ho</title>
<script>
function callAndroid(){
/*约定的url协议为：js://webview?arg1=111&arg2=222*/
document.location="js://webview?arg1=111&arg2=222";
}
</script>
</head>
<!-- 点击按钮则调用callAndroid（）方法 -->
<body>
<button type="button" id="button1" onclick="callAndroid()">点击调用Android代码</button>
</body>
</html>
1234567891011121314151617181920当该JS通过Android的mWebView.loadUrl("file:///android_asset/javascript.html")加载后，就会回调shouldOverrideUrlLoading （），接下来继续看步骤2：
步骤2：在Android通过WebViewClient复写shouldOverrideUrlLoading （）
MainActivity.java
public class MainActivity extends AppCompatActivity {
WebView mWebView;
// Button button;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWebView=(WebView) findViewById(R.id.webview);
WebSettings webSettings=mWebView.getSettings();
// 设置与Js交互的权限
webSettings.setJavaScriptEnabled(true);
// 设置允许JS弹窗
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
// 步骤1：加载JS代码
// 格式规定为:file:///android_asset/文件名.html
mWebView.loadUrl("file:///android_asset/javascript.html");
// 复写WebViewClient类的shouldOverrideUrlLoading方法
mWebView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
// 步骤2：根据协议的参数，判断是否是所需要的url
// 一般根据scheme（协议格式） & authority（协议名）判断（前两个参数）
//假定传入进来的 url="js://webview?arg1=111&arg2=222"（同时也是约定好的需要拦截的）
Uri uri=Uri.parse(url);
// 如果url的协议=预先约定的 js 协议
// 就解析往下解析参数
if ( uri.getScheme().equals("js")) {
// 如果 authority=预先约定协议里的 webview，即代表都符合约定的协议
// 所以拦截url,下面JS开始调用Android需要的方法
if (uri.getAuthority().equals("webview")) {
// 步骤3：
// 执行JS所需要调用的逻辑
System.out.println("js调用了Android的方法");
// 可以在协议上带有参数并传递到Android上
HashMap<String, String> params=new HashMap<>();
Set<String> collection=uri.getQueryParameterNames();
}
return true;
}
return super.shouldOverrideUrlLoading(view, url);
}
}
);
}
}
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960特点
优点：不存在方式1的漏洞；缺点：JS获取Android方法的返回值复杂。如果JS想要得到Android方法的返回值，只能通过 WebView 的 loadUrl （）去执行 JS 方法把返回值传递回去，相关的代码如下：
// Android：MainActivity.java
mWebView.loadUrl("javascript:returnResult(" + result + ")");
// JS：javascript.html
function returnResult(result){
alert("result is" + result);
}
1234567方式3：通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回调拦截JS对话框alert()、confirm()、prompt（） 消息
在JS中，有三个常用的对话框方法：
方式3的原理：Android通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回调分别拦截JS对话框
（即上述三个方法），得到他们的消息内容，然后解析即可。
下面的例子将用拦截 JS的输入框（即prompt（）方法）说明 ：
常用的拦截是：拦截 JS的输入框（即prompt（）方法）因为只有prompt（）可以返回任意类型的值，操作最全面方便、更加灵活；而alert（）对话框没有返回值；confirm（）对话框只能返回两种状态（确定 / 取消）两个值步骤1：加载JS代码，如下：
javascript.html
以.html格式放到src/main/assets文件夹里
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Carson_Ho</title>
<script>
function clickprompt(){
// 调用prompt（）
var result=prompt("js://demo?arg1=111&arg2=222");
alert("demo " + result);
}
</script>
</head>
<!-- 点击按钮则调用clickprompt() -->
<body>
<button type="button" id="button1" onclick="clickprompt()">点击调用Android代码</button>
</body>
</html>
12345678910111213141516171819202122当使用mWebView.loadUrl("file:///android_asset/javascript.html")加载了上述JS代码后，就会触发回调onJsPrompt（），具体如下：
如果是拦截警告框（即alert()），则触发回调onJsAlert（）；如果是拦截确认框（即confirm()），则触发回调onJsConfirm（）；步骤2：在Android通过WebChromeClient复写onJsPrompt（）
public class MainActivity extends AppCompatActivity {
WebView mWebView;
// Button button;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWebView=(WebView) findViewById(R.id.webview);
WebSettings webSettings=mWebView.getSettings();
// 设置与Js交互的权限
webSettings.setJavaScriptEnabled(true);
// 设置允许JS弹窗
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
// 先加载JS代码
// 格式规定为:file:///android_asset/文件名.html
mWebView.loadUrl("file:///android_asset/javascript.html");
mWebView.setWebChromeClient(new WebChromeClient() {
// 拦截输入框(原理同方式2)
// 参数message:代表promt（）的内容（不是url）
// 参数result:代表输入框的返回值
@Override
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
// 根据协议的参数，判断是否是所需要的url(原理同方式2)
// 一般根据scheme（协议格式） & authority（协议名）判断（前两个参数）
//假定传入进来的 url="js://webview?arg1=111&arg2=222"（同时也是约定好的需要拦截的）
Uri uri=Uri.parse(message);
// 如果url的协议=预先约定的 js 协议
// 就解析往下解析参数
if ( uri.getScheme().equals("js")) {
// 如果 authority=预先约定协议里的 webview，即代表都符合约定的协议
// 所以拦截url,下面JS开始调用Android需要的方法
if (uri.getAuthority().equals("webview")) {
//
// 执行JS所需要调用的逻辑
System.out.println("js调用了Android的方法");
// 可以在协议上带有参数并传递到Android上
HashMap<String, String> params=new HashMap<>();
Set<String> collection=uri.getQueryParameterNames();
//参数result:代表消息框的返回值(输入值)
result.confirm("js调用了Android的方法成功啦");
}
return true;
}
return super.onJsPrompt(view, url, message, defaultValue, result);
}
// 通过alert()和confirm()拦截的原理相同，此处不作过多讲述
// 拦截JS的警告框
@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
return super.onJsAlert(view, url, message, result);
}
// 拦截JS的确认框
@Override
public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
return super.onJsConfirm(view, url, message, result);
}
}
);
}
}
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778Demo地址 上述所有代码均存放在：Carson_Ho的Github地址 ： WebView Demo
2.2.2 三种方式的对比 & 使用场景
3. 总结
本文主要对Android通过WebView与JS的交互方式进行了全面介绍关于WebView的系列文章对你有所帮助 Android开发：最全面、最易懂的Webview详解 Android：你不知道的 WebView 使用漏洞 手把手教你构建 Android WebView 的缓存机制 & 资源预加载方案接下来我会继续讲解其他安卓开发的知识，有兴趣可以继续关注Carson_Ho的安卓开发笔记！！！！
请评论点赞！因为你们的赞同/鼓励是我写作的最大动力！
发表评论