深海游弋的鱼 – 默默的点滴

com.android.dex.DexIndexOverflowException

现象描述

注意，本文描述的方案，仅在Android Studio 1.5,Gradle插件版本1.3.1中测试成立！

同时在工程中引入了多个第三方jar包，导致调用的方法数超过了android设定的65536个（DEX 64K problem），进而导致dex无法生成，也就无法生成APK文件。

编译时候产生如下的异常信息：

Error:Execution failed for task ':xxx:dexRelease'.
> com.android.ide.common.internal.LoggedErrorException: Failed to run command:
    C:\Android\sdk\android-sdk\build-tools\23.0.1\dx.bat --dex --output D:\Source\android\build\intermediates\dex\release --input-list=D:\Source\android\build\intermediates\tmp\dex\release\inputList.txt
Error Code:
Output:
    UNEXPECTED TOP-LEVEL EXCEPTION:
    com.android.dex.DexIndexOverflowException: method ID not in [0, 0xffff]: 65536
        at com.android.dx.merge.DexMerger$6.updateIndex(DexMerger.java:502)
        at com.android.dx.merge.DexMerger$IdMerger.mergeSorted(DexMerger.java:277)
        at com.android.dx.merge.DexMerger.mergeMethodIds(DexMerger.java:491)
        at com.android.dx.merge.DexMerger.mergeDexes(DexMerger.java:168)
        at com.android.dx.merge.DexMerger.merge(DexMerger.java:189)
        at com.android.dx.command.dexer.Main.mergeLibraryDexBuffers(Main.java:454)
        at com.android.dx.command.dexer.Main.runMonoDex(Main.java:302)
        at com.android.dx.command.dexer.Main.run(Main.java:245)
        at com.android.dx.command.dexer.Main.main(Main.java:214)
        at com.android.dx.command.Main.main(Main.java:106)

Error:Execution failed for task ':xxx:dexRelease'.

> com.android.ide.common.internal.LoggedErrorException: Failed to run command:

C:\Android\sdk\android-sdk\build-tools\23.0.1\dx.bat --dex --output D:\Source\android\build\intermediates\dex\release --input-list=D:\Source\android\build\intermediates\tmp\dex\release\inputList.txt

Error Code:

Output:

UNEXPECTED TOP-LEVEL EXCEPTION:

com.android.dex.DexIndexOverflowException: method ID not in [0, 0xffff]: 65536

at com.android.dx.merge.DexMerger$6.updateIndex(DexMerger.java:502)

at com.android.dx.merge.DexMerger$IdMerger.mergeSorted(DexMerger.java:277)

at com.android.dx.merge.DexMerger.mergeMethodIds(DexMerger.java:491)

at com.android.dx.merge.DexMerger.mergeDexes(DexMerger.java:168)

at com.android.dx.merge.DexMerger.merge(DexMerger.java:189)

at com.android.dx.command.dexer.Main.mergeLibraryDexBuffers(Main.java:454)

at com.android.dx.command.dexer.Main.runMonoDex(Main.java:302)

at com.android.dx.command.dexer.Main.run(Main.java:245)

at com.android.dx.command.dexer.Main.main(Main.java:214)

at com.android.dx.command.Main.main(Main.java:106)

解决方案

Google给出的解决方案就是使用MultiDexApplication

Multidex Apps

1.在项目的build.gradle文件的dependencies 节中添加分包设置：

build.gradle
Vim

dependencies { ... compile 'com.android.support:multidex:1.0.1' ... }

1
2
3
4
5

dependencies {
...
   compile 'com.android.support:multidex:1.0.1'
   ...
}

2.通过在defaultConfig节中设置multiDexEnabled标签为true，开启multi-dexing支持.

build.gradle
Vim

defaultConfig { ... multiDexEnabled true ... }

1
2
3
4
5

defaultConfig {
   ...
multiDexEnabled true
...
}

3.如果没有创建自己的Application.class，直接在AndroidManifest.xml文件的Application声明中添加：

AndroidManifest.xml
Vim

android:name="android.support.multidex.MultiDexApplication"

1

android:name="android.support.multidex.MultiDexApplication"

如果实现了自己的Application.class，则修改继承的父类为
android.support.multidex.MultiDex.MultiDexApplication

Multidex Apps单元测试

1.在项目的build.gradle文件的dependencies 节中添加分包设置：

build.gradle
Vim

dependencies { ... androidTestCompile 'com.android.support:multidex-instrumentation:1.0.1' ... }

1
2
3
4
5

dependencies {
...
      androidTestCompile 'com.android.support:multidex-instrumentation:1.0.1'
   ...
}

2.通过在defaultConfig节中设置multiDexEnabled标签为true，开启multi-dexing支持.

build.gradle
Vim

defaultConfig { ... multiDexEnabled true testInstrumentationRunner "com.android.test.runner.MultiDexTestRunner" ... }

1
2
3
4
5
6

defaultConfig {
   ...
multiDexEnabled true
testInstrumentationRunner "com.android.test.runner.MultiDexTestRunner"
...
}

参考链接

JS-call apply bind

经常碰到JS中的这三兄弟，记一下他们的用法和区别。

1.改变函数上下文

2.就算不为了改变，但JS那坑爹的作用域下，也为了能够明确知道函数上下文

（为什么要改变请参考JS的作用域链）

区别：

call与apply

call与apply用法很相似，区别就是一个是一个一个传参数，一个是传一个参数数组

fun().call(object, p1, p2);

fun().apply(object, [p1,p2]);

或者经常直接继承父函数参数

fun().apply(object, arguments);

call和apply都会立刻执行，只是改变了fun()里面的this

bind不会立刻执行，bind会返回一个指定上下文的函数

var fun1 = fun().bind(object, p1, p2); //参数传递跟call一样

bind最适合作为回调函数使用，尤其是setTimeout

func(function(){}.bind(this));

我们知道，setTimeout的回调函数上下文会被置为window（use strict下是null），在setTimeout中没办法使用原有实例，bind就可以了

setTimeout(function(){}.bind(this), 1000);

JS-使用canvas绘制动画

HTML5中提供了transform transition等动画方式，已经能够满足绝大部分动画需求。

但在移动端，使用Transform等还是会出现不流畅的情况，比如背景上一个无限循环的动画，不管是使用setInterval 还是捕捉每次的AnimationEnd来实现，都会有一定的问题，因为我们设定的延时还是动画时间都不能得到保证，并且会影响页面性能。

优化是无尽的，所以学习使用Canvas

使用Canvas能做什么？

1.知道/控制每帧的绘制

2.预加载img来绘制

3.canvas保证了性能

如何使用Canvas？

http://www.w3school.com.cn/html5/html_5_canvas.asp

W3C等有canvas的简单介绍，使用Canvas的基本步骤就是

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");

1 2	var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d");

拿到canvas标签的dom，调用dom的getContext接口拿到Canvas类，就可以使用canvas的各种接口了

Canvas接口手册：http://www.w3school.com.cn/tags/html_ref_canvas.asp

canvas简单使用

1.绘制矩形

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

1 2	cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75);

2.绘制线

cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();

cxt.moveTo(10,10);

cxt.lineTo(150,50);

cxt.lineTo(10,50);

cxt.stroke();

3.绘制圆形

cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

cxt.fillStyle="#FF0000";

cxt.beginPath();

cxt.arc(70,18,15,0,Math.PI*2,true);

cxt.closePath();

cxt.fill();

4.绘制渐变

var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);

var grd=cxt.createLinearGradient(0,0,175,50);

grd.addColorStop(0,"#FF0000");

grd.addColorStop(1,"#00FF00");

cxt.fillStyle=grd;

cxt.fillRect(0,0,175,50);

5.绘制图

var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);

var img=new Image()

img.src="flower.png"

cxt.drawImage(img,0,0);

这些绘制组合使用基本上可以满足我们的一般绘制需求。

绘制动画基本流程

But，如果要绘制动画，还需要配合另一个神接口，

requestAnimationFrame

1	requestAnimationFrame

requestAnimationFrame的用法请自行google。大概原理就是，requestAnimationFrame需要传入一个函数，浏览器每绘制一帧都会通过requestAnimationFrame来调用这个函数。通常，我们把这个函数命名为step，在step中，放入我们的draw函数（这里与Android的draw流程很类似，不过Android更方便些）。

draw与requestAnimationFrame绑定

this.show = function() {
    var step = function() {
        this.draw();
        this.animationId = requestAnimationFrame(step.bind(this));
    };
    this.animationId = requestAnimationFrame(step.bind(this));
    this.element.style.visibility = "visible";
};

this.show = function() {

var step = function() {

this.draw();

this.animationId = requestAnimationFrame(step.bind(this));

};

this.animationId = requestAnimationFrame(step.bind(this));

this.element.style.visibility = "visible";

};

解绑（这里把绑定与show/hide放到了一起）

this.hide = function() {
    cancelAnimationFrame(this.animationId);
    this.element && (this.element.style.visibility = "hidden");
};

this.hide = function() {

cancelAnimationFrame(this.animationId);

this.element && (this.element.style.visibility = "hidden");

};

draw函数

this.draw = function() {
    this.flash++;
    this.context.clearRect(0, 0, this.element.width, this.element.height);
    this.rect0.update();
    this.rect0.draw(this.context);
};

this.draw = function() {

this.flash++;

this.context.clearRect(0, 0, this.element.width, this.element.height);

this.rect0.update();

this.rect0.draw(this.context);

};

draw函数中我们把绘制分为两步，一步是update（和Android类比就是在这里做mesure，确定View中各个元素的位置），第二步是绘制。

子View中实现各自的update和draw

需要注意的是，Canvas的使用宽高默认为300 150，我们设定的宽高只会对Canvas进行缩放。

update-动画曲线

使用css动画时，可以方便的给一个动画曲线，比如easeinout等，使用canvas绘制就需要我们不断的update绘制范围。

this.update = function() {
    if (!this.isAnimating) {
        return;
    }
    this.t += 0.05;
    switch (this.direction) {
        case "right":
            this.x = easeInOutQuint(this.t) * 70;
            break;
        case "down":
            this.y = easeInOutQuint(this.t) * 70;
            break;
        case "left":
            this.x = (1 - easeInOutQuint(this.t)) * 70;
            break;
        case "up":
            this.y = (1 - easeInOutQuint(this.t)) * 70;
            break;
    }
    if (this.t >= 1) {
        this.nextDirection();
        this.t = 0;
    }
};

this.update = function() {

if (!this.isAnimating) {

return;

}

this.t += 0.05;

switch (this.direction) {

case "right":

this.x = easeInOutQuint(this.t) * 70;

break;

case "down":

this.y = easeInOutQuint(this.t) * 70;

break;

case "left":

this.x = (1 - easeInOutQuint(this.t)) * 70;

break;

case "up":

this.y = (1 - easeInOutQuint(this.t)) * 70;

break;

}

if (this.t >= 1) {

this.nextDirection();

this.t = 0;

}

};

在update里面，我们完成让一个矩形以指定动画曲线在四个方向转圈的位移。

缓动函数就负责返回位移的值

下面的easeInOutQuint按照步进返回值

var easeInOutQuint = function (t) {
    return t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t;
};

var easeInOutQuint = function (t) {

return t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t;

};

更高明的做法，比如Jquery中，以时间为参数

function easeOutBounce(progress, currentTime, begin, change, duration) {
    if ((currentTime/=duration) < (1/2.75)) {
        return change*(7.5625*currentTime*currentTime) + begin;
    } else if (currentTime < (2/2.75)) {
        return change*(7.5625*(currentTime-=(1.5/2.75))*currentTime + .75) + begin;
    } else if (currentTime < (2.5/2.75)) {
        return change*(7.5625*(currentTime-=(2.25/2.75))*currentTime + .9375) + begin;
    } else {
        return change*(7.5625*(currentTime-=(2.625/2.75))*currentTime + .984375) + begin;
    }
}

function easeOutBounce(progress, currentTime, begin, change, duration) {

if ((currentTime/=duration) < (1/2.75)) {

return change*(7.5625*currentTime*currentTime) + begin;

} else if (currentTime < (2/2.75)) {

return change*(7.5625*(currentTime-=(1.5/2.75))*currentTime + .75) + begin;

} else if (currentTime < (2.5/2.75)) {

return change*(7.5625*(currentTime-=(2.25/2.75))*currentTime + .9375) + begin;

} else {

return change*(7.5625*(currentTime-=(2.625/2.75))*currentTime + .984375) + begin;

}

draw就比较简单了

this.draw = function(ctx) {
    ctx.fillStyle = this.color;
    ctx.fillRect(this.x, this.y, 70, 70);
};

this.draw = function(ctx) {

ctx.fillStyle = this.color;

ctx.fillRect(this.x, this.y, 70, 70);

};

2015 年 11 月
一	二	三	四	五	六	日
						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

现象描述

解决方案

Multidex Apps

Multidex Apps单元测试

参考链接