EFL Widget (1): Action Slider.

Action slider

 

 

 

 

1.  Edc 定义

 

//////////////////////////////////////////////////////////////////////////////// // actionslider //////////////////////////////////////////////////////////////////////////////// group { name: "elm/actionslider/base/default"; images { image: "shelf_inset.png" COMP; image: "ilist_1.png" COMP; } parts { part { name: "base"; //background的定义: 大小，范围，用什么图片填充，以及填充时的一些参数 mouse_events: 0; // 表明是否可以接受mouse event description { state: "default" 0.0; // 这里的状态名字，以及与之对应的数字，可以由你自己定义；只要你的C代码和EDC对应就可以 //max: 99999 30; //max/min其实是定义一个rectangle大致的像素范围，max horizontal/vertical pixels size // 后面的rel1/rel2再具体定义左上角/右下角 max: 9999 30; min: 150 30; // min horizontal/vertical pixels size rel1.offset: 1 1; // rel1: 左上角坐标; rel2: 右下角坐标； offet HORIZ_OFF, VERT_OFF, 代表水平偏移，垂直偏移 // 水平如果为正，则相对于左上角向右偏移几个像素，如果为负，则相对于左上角向左偏移 // 垂直如果为正，则相对于右下角向右偏移，反之； rel2.offset: -2 -2; image { normal: "ilist_1.png"; //指定图像的名字，在显示动画时，这是第一，最后一幅图 //normal: "tooltip-base.png"; border: 2 2 2 2; //border LEFT RIGHT TOP BOTTOM , 对图片的四周进行缩放 //border: 10 10 10 10; } fill.smooth: 0; //填充时，是否平滑， } } part { name: "conf_over"; mouse_events: 0; description { state: "default" 0.0; rel1.to: "base"; //左上角和background的左上角重合 rel2.to: "base"; // image { normal: "shelf_inset.png"; border: 7 7 7 7; // 保留7个像素，这样边框看起来，有立体感 //border: 1 1 1 1; middle: 1; } fill.smooth : 0; } } part { name: "icon.dragable.area"; //定义一个可拖拽区域，和background大小一样，主要是为了下面的组件做一个参考 type: RECT; mouse_events: 0; description { state: "default" 0.0; visible: 0; //visible: 1; //不要可见，否则会覆盖掉前面精心装饰的background/conf_over的 rel1.to: "base"; rel2.to: "base"; } } part { name: "elm.text.left"; //居左的文本 type: TEXT; mouse_events: 0; scale: 1; description { state: "default" 0.0; color: 0 0 0 255; // color指定文本或者rect的颜色，r,g,b,a格式；0 0 0 255:black // color2指定text的shadow颜色 // color3指定text的outline颜色 //color2: 255 0 0 255; //color3: 255 0 0 255; text { font: "Sans,Edje-Vera"; // Font used is Sans,Edje-Vera.ttf found in the evas font path size: 10; align: 0.05 0.5; // align: x_align, y_align; 这里是水平: 靠左；垂直: 居中 min: 1 1; } } } part { name: "elm.text.center"; type: TEXT; mouse_events: 0; scale: 1; description { state: "default" 0.0; color: 0 0 0 255; text { font: "Sans,Edje-Vera"; size: 10; align: 0.5 0.5; // 水平居中，垂直居中 min: 1 1; } } } part { name: "elm.text.right"; type: TEXT; mouse_events: 0; scale: 1; description { state: "default" 0.0; color: 0 0 0 255; text { font: "Sans,Edje-Vera"; size: 10; align: 0.95 0.5; //水平靠用，垂直居中 min: 1 1; } } } part { name: "elm.swallow.icon"; type: SWALLOW; // SWALLOW是个非常特殊的，http://blog.youkuaiyun.com/EFL_GUI/archive/2011/05/06/6399230.aspx // swallow是允许你在C代码中，把external object加入到这个edje object. // mouse_events: 1; // 可以接收事件 scale: 1; description { state: "default" 0.0; min: 64 30; fixed: 1 1; align: 0.5 0.5; rel1.to: "icon.dragable.area"; rel2 { relative: 0.0 1.0; //相对于右下角的相对位置? to: "icon.dragable.area"; } } dragable { // EFL 新增加的 confine: "icon.dragable.area"; //confine限制，在拖拽区 x: 1 1 1530; // 具体什么意思? y: 1 1 1; } } } } group { name: "elm/actionslider/icon/default"; alias: "elm/actionslider/icon/bar"; images { image: "bt_bases.png" COMP; image: "bt_basew.png" COMP; image: "bt_hilightw.png" COMP; } parts { part { name: "button"; type: RECT; mouse_events: 1; description { state: "default" 0.0; color: 255 255 255 0; } } //下面这两个button是相互依赖， // button0, button2是基本重合的，button3是附于button2的上半部，程序中控制下半部，从而有立体效果 part { name: "button0"; mouse_events: 0; description { state: "default" 0.0; rel1.to: "button2"; rel1.offset: -4 -4; rel2.to: "button2"; rel2.offset: 3 3; image { normal: "bt_bases.png"; border: 11 11 11 11; //很关键，是的黑色的button0,"隐身于" 白色的button2下面，用户看到的是button3叠加与button2的效果 //border: 1 1 11 11; //可以填不同的值，试验效果 middle: SOLID; //0/1/NONE/DEFAULT/SOLID; } color: 255 255 255 128; //白色，半透明; alpha: alpha透明就是和背景融合，一般范围是0~255，数值越小背景越明显, 255（不透明）。 } } part { name: "button2"; mouse_events: 0; description { state: "default" 0.0; rel1.to: "button"; rel2.to: "button"; image { normal: "bt_basew.png"; border: 7 7 7 7; // 这里要比button0的border要小，因为button2是覆盖在button0之上的 //border: 1 1 1 1; middle: SOLID; } color: 255 255 255 210; // 透明设置, 比半透多些 } } part { name: "button3"; mouse_events: 0; description { state: "default" 0.0; rel1.to: "button2"; rel2.to: "button2"; rel2.relative: 1.0 0.5; image { normal: "bt_hilightw.png"; border: 4 4 4 0; } color: 255 255 255 190; } } } } group { name: "elm/actionslider/base/bar"; //这是另外一种slider的形式(style)，左边填充黑色，右边白色 // 程序中，调用者在创建默认action slider后，可以用函数elm_object_style_set(ms, "bar") // 指定这个形式的 images { image: "shelf_inset.png" COMP; image: "ilist_1.png" COMP; } parts { part { name: "base"; mouse_events: 0; description { state: "default" 0.0; max: 99999 30; min: 150 30; rel1.offset: 1 1; rel2.offset: -2 -2; image { normal: "ilist_1.png"; border: 2 2 2 2; } fill.smooth: 0; } } part { name: "conf_over"; mouse_events: 0; description { state: "default" 0.0; rel1.to: "base"; rel2.to: "base"; image { normal: "shelf_inset.png"; border: 7 7 7 7; middle: 0; } fill.smooth : 0; } } part { name: "icon.dragable.area"; type: RECT; mouse_events: 0; description { state: "default" 0.0; visible: 0; rel1.to: "base"; rel2.to: "base"; } } part { name: "elm.text.left"; type: TEXT; mouse_events: 0; scale: 1; description { state: "default" 0.0; color: 0 0 0 255; text { font: "Sans,Edje-Vera"; size: 10; align: 0.05 0.5; min: 1 1; } } } part { name: "elm.text.center"; type: TEXT; mouse_events: 0; scale: 1; description { state: "default" 0.0; color: 0 0 0 255; text { font: "Sans,Edje-Vera"; size: 10; align: 0.5 0.5; min: 1 1; } } } part { name: "elm.text.right"; type: TEXT; mouse_events: 0; scale: 1; description { state: "default" 0.0; color: 0 0 0 255; text { font: "Sans,Edje-Vera"; size: 10; align: 0.95 0.5; min: 1 1; } } } //看看这个特殊的bar, 如何在拖动的时候，变化左边的背景填充色的 // 是C代码完成还是，这里 part { name: "bar"; type: RECT; mouse_events: 0; description { state: "default" 0.0; //左上角，固定 rel1.to: "base"; rel1.offset: 0 2; //右下角，是变化的 rel2 { relative: 0 1; //左下角 offset: 3 -3; to_x: "elm.swallow.icon"; to_y: "base"; //elm.swallow.icon } color: 0 0 255 180; //指定左边填的颜色 } } part { name: "elm.swallow.icon"; //它的x是变化的 type: SWALLOW; mouse_events: 1; scale: 1; description { state: "default" 0.0; min: 64 30; fixed: 1 1; align: 0.5 0.5; rel1.to: "icon.dragable.area"; // icon.dragable.area的X是变化的 rel2 { relative: 0.0 1.0; to: "icon.dragable.area"; } } dragable { confine: "icon.dragable.area"; x: 1 1 1530; y: 0 0 0; } } } }

 

2. 用到的图片

 

 (ilist_1.png) // 用于填充slider背景条

 

  （shelf_inset.png)

 

 // 用于拖动条

 （bt_bases.png)

  (bt_basew.png)

 

 (bt_hilightw.png)

 

//

 

3. 运行效果