JSRUN 用代码说话

CASlider(滑动条)

编辑教程

CASlider(滑动条)

类说明

CASlider是滚动条控件,主要作用是方便数值调节,如音量大小控制、缩放视图等操作。

CASlider 属性

属性 说明
TouchClick 触摸点击
Value
MinValue 最小值
MaxValue 最大值
TrackHeight 滚动条高度
MinTrackTintImage 设置前景图片(已经划过的部分)
MaxTrackTintImage 设置后景图片(未划过的部分)
ThumbTintImage 滚动块的图片

CASlider 方法

方法 说明
createWithFrame 创建,并指定其Frame,默认Frame为(0,0,0,0)
createWithCenter 创建,并指定其Center,默认Center为(0,0,0,0)
addTarget 添加回调事件
addTargetForTouchUpSide 添加回调事件的触摸
removeTarget 删除回调事件
setValue 设定值
setMinValue 设定最小值
setMaxValue 设定最大值
setTrackHeight 设置滚动条高度
setMinTrackTintImage 设置前景图片(已经划过的部分)
setMaxTrackTintImage 设置后景图片(未划过的部分)
setThumbTintImage 设置滚动块的图片
initWithFrame 初始化r,并指定其Frame
initWithCenter 初始化,并指定其Center
ccTouchBegan 触摸事件开始时的回调函数
ccTouchMoved 触摸事件中触点移动时的回调函数
ccTouchEnded 触摸事件结束时的回调函数
layoutSubViews 子视图布局

我们可以通过设置CASlider的最大值和最小值来确定其值的范围,可以通过设置图片改变滚动条的样子,我们这里就利用CASlider来控制一张图片的缩放大小,来演示一下CASlider的使用方法:

首先在FirstViewController.h中添加一个监听函数,用于监听CASlider的值的变化。

//监听函数
    void zoomViewBySliderValue(CAControl* control, DPoint point)

然后我们在FirstViewController.cpp中去实现CASlider来控制CAImageView的缩放变化。

void FirstViewController::viewDidLoad()
{
    //获得屏幕大小
    CCSize size = this->getView()->getBounds().size;

    //创建CAImageView
    CAImageView* imageView = CAImageView::createWithImage(CAImage::create("HelloWorld.png"));
    imageView->setCenter(DRect(size.width*0.5, size.height*0.5, 800, 1200));

    //设置tag
    imageView->setTag(1);

    //添加
    this->getView()->addSubview(imageView);

    //创建CASlider
    CASlider* slider = CASlider::createWithCenter(DRect(size.width*0.5, size.height*0.2, size.width*0.8, 20));

    //绑定监听
    slider->addTarget(this, CAControl_selector(FirstViewController::zoomViewBySliderValue));

    //添加
    this->getView()->insertSubview(slider, 1);

    //创建CALabel
    CALabel* label = CALabel::createWithCenter(DRect(size.width*0.5, size.height*0.1, size.width*0.8, 40));

    //设置文本
    char temptext[40];
    sprintf(temptext, "ScaleValue:%0.2f", slider->getValue());
    label->setText(temptext);

    //设置居中
    label->setTextAlignment(CATextAlignmentCenter);
    label->setVerticalTextAlignmet(CAVerticalTextAlignmentCenter);

    //设置Tag
    label->setTag(3);
    this->getView()->addSubview(label);
}

void FirstViewController::zoomViewBySliderValue(CAControl* control, DPoint point)
{
    //获得silder对象
    CASlider* slider = (CASlider*)control;

    //获得silder的当前值
    float zoomValue = slider->getValue();

    //根据tag值获得image
    CAImageView* image = (CAImageView*)this->getView()->getSubviewByTag(1);

    //设置image的缩放比
    image->setScale(zoomValue);

    //根据tag获得CALabel
    CALabel* label = (CALabel*)this->getView()->getSubviewByTag(3);

    //设置文本
    char temptext[40];
    sprintf(temptext, "ScaleValue:%0.2f", slider->getValue());
    label->setText(temptext);
}

我们通过addTarget来为CASlider绑定一个监听,我们又在监听函数中,根据CASlider的变化来改变CAImageView的缩放值,同样的原理我们也可以进行其它数值的改变,大家举一反三可以自己去尝试一下。


CASlider 属性说明

TouchClick

类型:bool

解释:触摸点击。is{}。

Value

类型:float

解释:值。get{}。

MinValue

类型:float

解释:最小值。get{}。

MaxValue

类型:float

解释:最大值。get{}。

TrackHeight

类型:float

解释:滚动条高度。get{}。

MinTrackTintImage

类型:CAImage*

解释:设置前景图片(已经划过的部分) 。get{}。

MaxTrackTintImage

类型:CAImage*

解释:设置后景图片(未划过的部分) 。get{}。

ThumbTintImage

类型:CAImage*

解释:滚动块的图片 。get{}。


CASlider 方法说明

static CASlider* createWithFrame(const DRect& rect);

返回值:static CASlider

参数:

类型 参数名 说明
DRect rect 区域大小

解释:创建,并指定其Frame,默认Frame为(0,0,0,0)

static CASlider* createWithCenter(const DRect& rect);

返回值:static CASlider

参数:

类型 参数名 说明
DRect rect 中心点的位置及大小

解释:创建,并指定其Center,默认Center为(0,0,0,0)

void addTarget(CAObject* target, SEL_CAControl selector);

返回值:void

参数:

类型 参数名 说明
CAObject* target 目标
SEL_CAControl selector 选择器

解释:添加回调事件

void addTargetForTouchUpSide(CAObject* target, SEL_CAControl selector);

返回值:void

参数:

类型 参数名 说明
CAObject* target 目标
SEL_CAControl selector 选择器

解释:添加回调事件的触摸

void removeTarget(CAObject* target, SEL_CAControl selector);

返回值:void

参数:

类型 参数名 说明
CAObject* target 目标
SEL_CAControl selector 选择器

解释:删除回调事件

virtual void setValue(float value);

返回值:virtual void

参数:

类型 参数名 说明
float value

解释:设定值

virtual void setMinValue(float minValue);

返回值:virtual void

参数:

类型 参数名 说明
float minValue 最小值

解释:设定最小值

virtual void setMaxValue(float maxValue);

返回值:virtual void

参数:

类型 参数名 说明
float maxValue 最大值

解释:设定最大值

virtual void setTrackHeight(float trackHeight);

返回值:virtual void

参数:

类型 参数名 说明
float trackHeight 滚动条高度

解释:设置滚动条高度

virtual void setMinTrackTintImage(CAImage* minTrackTintImage);

返回值:virtual void

参数:

类型 参数名 说明
CAImage* minTrackTintImage 前景图片(已经划过的部分)

解释:设置前景图片(已经划过的部分)

virtual void setMaxTrackTintImage(CAImage* maxTrackTintImage);

返回值:virtual void

参数:

类型 参数名 说明
CAImage* maxTrackTintImage 后景图片(未划过的部分)

解释:设置后景图片(未划过的部分)

virtual void setThumbTintImage(CAImage* thumbTintImage);

返回值:virtual void

参数:

类型 参数名 说明
CAImage* thumbTintImage 滚动块的图片

解释:设置滚动块的图片

void setContentSize(const CCSize & var);

返回值:void

参数:

类型 参数名 说明
CCSize var 内容大小

解释:设置内容大小

bool initWithFrame(const DRect& rect);

返回值:bool

参数:

类型 参数名 说明
const DRect& rect 区域大小

解释:初始化,并指定其Frame

bool initWithCenter(const DRect& rect);

返回值:bool

参数:

类型 参数名 说明
const DRect& rect 中心点的位置及大小

解释:初始化,并指定其Center

virtual bool ccTouchBegan(CATouch pTouch, CAEvent pEvent);

返回值:virtual bool

参数:

类型 参数名 说明
CATouch* pTouch 触摸传递对象
CAEvent* pEvent 此参数待定

解释:触摸事件开始时的回调函数

virtual void ccTouchMoved(CATouch pTouch, CAEvent pEvent);

返回值:virtual void

参数:

类型 参数名 说明
CATouch* pTouch 触摸传递对象
CAEvent* pEvent 此参数待定

解释:触摸事件中触点移动时的回调函数

virtual void ccTouchEnded(CATouch pTouch, CAEvent pEvent);

返回值:virtual void

参数:

类型 参数名 说明
CATouch* pTouch 触摸传递对象
CAEvent* pEvent 此参数待定

解释:触摸事件结束时的回调函数

virtual void layoutSubViews();

返回值:virtual void

参数:

解释:子视图布局

JSRUN闪电教程系统是国内最先开创的教程维护系统, 所有工程师都可以参与共同维护的闪电教程,让知识的积累变得统一完整、自成体系。 大家可以一起参与进共编,让零散的知识点帮助更多的人。
X
支付宝
9.99
无法付款,请点击这里
金额: 0
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间
如有疑问请联系QQ:565830900
正在生成二维码, 此过程可能需要15秒钟