coverFlow


coverFlow实现了3D图片流效果和逼真的倒影,类似于苹果将多首歌曲的封面以3D界面的形式显示出来的形式。用户手指划动图片,图片将不断以3D的形式切换。开发者可自定义图片。通过rd.require('coverFlow')调用对象。

UI展示
image

方法:

  • setFrame : 设置coverFlow视图边框
  • setViewStyle : 设置coverFlow视图样式
  • show : 打开coverFlow视图
  • hide : 隐藏显示的coverFlow视图
  • isShowing : 判断coverFlow视图是否显示
  • remove : 移除coverFlow视图

对象:

回调方法:

setFrame


设置coverFlow视图边框

custom_cover.setFrame(rect);        
说明:

coverFlow视图通过rect设置视图边框。

参数:
  • rect: ( Rect ) 必选 frame,如果width为0,延伸到屏幕右边,如果height为0,延伸到屏幕下面
返回值:

无返回值

示例:
var custom_cover = rd.require('coverFlow');
custom_cover.setFrame({x:0,y:200,width:320,height:200});

setViewStyle


设置coverFlow视图样式

custom_cover.setViewStyle(option,callback);            
说明:

coverFlow视图可通过option设置参数,点击coverFlow视图可通过callback回调函数返回。

参数:
返回值:

无返回值

示例:
function onCallback(index) {
    alert(index);
}

var option = {imageWidth:200,imageHeight:200,bgColor:'#000000',isReflected:'true',images:['cpts://main/img/pic1.jpg','cpts://main/img/pic2.jpg','cpts://main/img/pic3.jpg','cpts://main/img/pic4.jpg','cpts://main/img/pic5.jpg', 'cpts://main/img/pic6.jpg']};

custom_cover.setViewStyle(option,onCallback);

show


打开coverFlow视图

custom_cover.show();            
说明:

打开coverFlow视图,如果视图是隐藏状态,将会显示视图。

参数:

返回值:

无返回值

示例:
custom_cover.show();

hide


隐藏显示的coverFlow视图

custom_cover.hide();
说明:

只是隐藏显示的coverFlow视图,并没有从内存里清除。

参数:

返回值:

无返回值

示例:
custom_cover.hide();

isShowing


判断coverFlow视图是否显示

var result = custom_cover.isShowing();
说明:

判断coverFlow视图是否显示。

参数:

返回值:
  • result: (Boolean) 如果视图显示,返回值为true;如果视图隐藏或者已经移除,返回false。
示例:
var result = custom_cover.isShowing();

remove


移除coverFlow视图

custom_cover.remove();
说明:

移除coverFlow视图。

参数:

返回值:

无返回值

示例:
custom_cover.remove();

CoverFlowOption


JSON对象 设置coverFlow视图参数

CoverFlowOption {

  property Number imageWidth,
  property Number imageHeight,
  property String bgColor,
  property Boolean isReflected,
  property Array images

}
说明:

用于设置coverFlow视图参数。

属性:
  • imageWidth : (Number ) 必选 coverFlow视图显示图片的宽度值
  • imageHeight : (Number ) 必选 coverFlow视图显示图片的高度值
  • bgColor : (String ) 必选 coverFlow视图背景颜色值
  • isReflected : (Boolean ) 必选 coverFlow视图是否显示倒影,true为显示倒影
  • images : (Array ) 必选 coverFlow视图显示的图片,由图片路径组成数组

Rect


JSON对象,frame参数

Rect 
{
    property Number x;
    property Number y;
    property Number width;
    property Number height;
}
说明:

坐标系统,左上角为(0,0),位于第四象限

属性:
  • x: ( Number ) 必选 x轴开始坐标 仅支持整型
  • y: ( Number ) 必选 y轴开始坐标 仅支持整型
  • width: ( Number ) 必选 如果width为0,延伸到屏幕右边 仅支持整型
  • height: ( Number ) 必选 如果height为0,延伸到屏幕下面 仅支持整型

CoverFlowCallback


点击coverFlow视图的回调函数

function CoverFlowCallback( index ) {
}
参数:
  • index: ( Number ) 必选 点击coverFlow视图的图片索引值,从0开始。
返回值:

无返回值