开始

1
2
3
dependencies {
compile 'com.facebook.fresco:fresco:0.1.0+'
}

使用

简单的下载网络图片

  • 在Application中初始化
    1
    Fresco.initialize(context);

在XML中使用SimpleDraweeView,需要键入命名空间xmlns:fresco="http://schemas.android.com/apk/res-auto"

1
2
3
4
5
<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/my_image_view"
android:layout_width="20dp"
android:layout_height="20dp"
fresco:placeholderImage="@drawable/my_drawable" />

加载

1
draweeView.setImageURL("http://site.com/uri");

URLs

Fresco不支持相对路径,所有URL必须是绝对路径
|类型|Scheme|
|:—|:—–|
|远程图片|http://,https://|
|本地文件|file://|
|ContentProvider|content://|
|asset目录下资源|asset://|
|res目录下资源|res://|

更多请见http://fresco-cn.org/

JQuery是一个JavaScript函数库,包含以下功能:

  • HTML元素选取
  • HTML元素操作
  • CSS操作
  • HTML事件函数
  • JavaScript特效和动画
  • HTML DOM遍历和修改
  • AJAX
  • Utilties

    jQuery安装

    1
    2
    3
    4
    <head>
    <script src="jquery-1.10.2.min.js" />
    <!-- <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> -->
    </head>

语法

jQuery语法是通过选取HTML元素,并对选取的元素执行某些操作

基础语法

$(selector).action()

  • 美元符定义jQuery
  • 选取符(selector)查询和查找HTML元素
  • jQuery的action()执行元素的操作

    文档就绪事件

    1
    2
    3
    $(document).ready(function(){
    // 为了防止文档在完全加载就绪之前运行jQuery代码
    });

简洁的写法可以是这样的:

1
2
3
$(function(){
//
});

选择器

jQuery选择器用于对HTML元素组或者单个元素进行操作
基于元素的id、类、类型、属性、属性值等”查找”HTML元素
所有选择器都以美元符开头:$()

  • 基于元素名选取元素

    1
    2
    3
    4
    5
    $(function(){
    $("button").click(function(){
    $("p").hide();
    })
    })
  • 基于id选择

    1
    2
    3
    4
    5
    $(function(){
    $("button").click(function()){
    $("# test").hide();
    }
    })
  • 基于class选择

    1
    2
    3
    4
    5
    $(function(){
    $("button").click(function(){
    $(".test").hide();
    });
    })

更多实例

语法 描述
$(“*”) 所有元素
$(this) 当前元素
$(“p.intro”) class为intro的<p>元素
$(“p:first”) 第一个<p>元素
$(“ul li:first” <ul>元素的第一个<li>元素
$(“ul li:first-child” 每一个<ul>元素的第一个<li>元素
$(“[href]”) 选取所有带href属性的元素
$(“a[target=’_blank’]”) 所有target属性不等于"_blank"<a>元素
$(“a[target!=’_blank’]”) 选取所有 target 属性值不等于 "_blank"<a>元素
$(“:button”) 选取所有 type=”button” 的<input>元素和<button>元素
$(“tr:even”) 选取偶数位置的<tr>元素
$(“tr:odd”) 选取奇数位置的<tr>元素

jQuery事件

鼠标事件 键盘事件 表单事件 文档/窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload

常用事件

  • $(document).ready() 文档准备完毕
  • click() 按钮点击事件
  • dblclick() 双击元素事件
  • mouseenter() 当鼠标指针穿过元素时
  • mouseleave() 当鼠标离开元素时
  • mousedown() 当鼠标移动到元素上并按下鼠标时
  • mouseup() 当鼠标移动到元素上并松开鼠标时
  • hover() 模拟光标悬停事件
  • focus() 元素获得焦点事件
  • blur() 元素失去焦点事件

hide()和show()

用于元素的隐藏和显示

1
2
$(selector).hide(speed,callback)	//speed 可以使slow fast或毫秒用于规定隐藏/显示的速度
$(selector).show(speed,callback)

toggle()

用于切换hide()和show()

1
$(selector).toggle(speed,callback)

淡入淡出效果

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()
    1
    $(selector).fadeIn(speed,callback);

fadeIn为淡入,fadeOut为淡出,fadeToggle()为切换
fadeTo允许为给定的不透明度(值为0到1之间)

1
$(selector).fadeTo(speed,opacity,callback)

滑动效果

1
2
3
$(selector).slideDown(speed,callback)	// 用于向下滑动元素
$(selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback)

自定义动画

1
$(selector).animate({params},speed,callback);

params为定义形成动画的CSS属性

1
2
3
$("button").click(function(){
$("div").animate({left:'250px'});
});

也可以同时操作多个属性

1
2
3
4
5
6
7
8
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});

使用相对值

1
2
3
4
5
6
7
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});

使用预定值

1
2
3
4
5
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});

使用队列

1
2
3
4
5
6
7
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});

停止动画

stop()方法用于停止动画或效果
$(selector).stop(stopAll,goToEnd)
可选的stopAll指定是否应该清除动画队列,默认是false,即仅停止活动的动画,允许任何排入队列的动画向后执行
可选的goToEnd参数指定是否立即完成当前动画,默认是false

1
2
3
$("# stop").click(function(){
$("# pancel").stop();
});

准备工作

  1. 下载NDK
  2. 配置环境变量,在~/.bash_profile文件下添加
    1
    2
    3
    #  根据自己存放的位置指定
    export NDK_ROOT=/Users/UserName/Documents/Android/android-ndk-r10
    export PATH=$NDK_ROOT:$PATH

新建一个项目

创建一个MathKit

1
2
3
4
5
6
7
public class MathKit {
public static native int square(int num);

static {
System.loadLibrary("JniDemo");
}
}

在命令行中进入目录,使用javah命令生成.h文件

将.h文件存放至jni文件夹下,并新建.cpp文件

根据头文件,编写cpp文件

1
2
3
4
5
6
7
# include <com_zoe_ndkdemo_jni_MathKit.h>

JNIEXPORT jint JNICALL Java_com_zoe_ndkdemo_jni_MathKit_square
(JNIEnv * env, jclass cls, jint num)
{
return num * num;
}

local.properties文件添加ndk路径

1
ndk.dir=/Users/UserName/Documents/Android/android-ndk-r10

在app项目中的build.gradle中的defaultConfig中添加

1
2
3
ndk {
moduleName "JniDemo"
}

之后就可以在代码中调用

1
2
3
4
5
6
7
8
9
private TextView textView;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
textView = (TextView) findViewById(R.id.text);
textView.setText("2*2="+ MathKit.square(2));
}

示例https://github.com/SeniorZhai/NdkDemo

  • shape
    android:shape[“rectagle”|”oval”|”line”|”ring”]
    • rectagle 矩形
    • oval椭圆
    • line水平直线
    • ring环形
  • gradient 渐变
    • android:startColor 起始颜色
    • android:endColor 结束颜色
    • android:angle 渐变角度,0从上到下,90从左到右,数值必须为45的倍数,默认为0
    • android:type 渐变样式 line线性渐变,radial环形渐变,sweep扫描渐变
  • solid 填充颜色
    • android:color 填充颜色
  • stroke 描边
    • android:width 描边的宽度
    • android:color 描边的颜色
    • android:dashWidth 间隔线的宽度
    • android:dashGap 间隔线的间隔
  • corners 圆角
    • android:radius 圆角的半径,值越大越圆
    • android:topRightRadius 右上角半径
    • android:bottomLeftRadius 左下角半径
    • android:topLeftRadius 右上角半径
    • android:bottomRightRadius 右下角半径