您的位置:首页 > 产品设计 > UI/UE

UISlider的应用-----通过简单的图片设置改变滑动效果

2013-10-30 23:50 507 查看
  对于一个Slider,只需要准备四张图片,两个结点图片,两个背景图片。其中结点图片一个为正常状态,一个为高亮状态。对于结点两边也采用不同的背景图片区分。

//设置结点普通效果图片
UIImage *thumbImageNormal = [UIImage imageNamed:@"SliderThumb-Normal"];         //SliderThumb-Normal为图片名字
[self.slider setThumbImage:thumbImageNormal forState:UIControlStateNormal];     //slider为Slider对象名

//设置结点高亮效果图片
UIImage *thumbImageHighlighted =[UIImage imageNamed:@"SliderThumb-Highlighted"];
[self.slider setThumbImage:thumbImageHighlighted forState:UIControlStateHighlighted];

//设置结点左边背景
UIImage *trackLeftImage = [[UIImage imageNamed:@"SliderTrackLeft"]stretchableImageWithLeftCapWidth:14 topCapHeight:0];
[self.slider setMinimumTrackImage:trackLeftImage forState:UIControlStateNormal];

//设置结点右边背景
UIImage *trackRightImage = [[UIImage imageNamed:@"SliderTrackRight"]stretchableImageWithLeftCapWidth:14 topCapHeight:0];
[self.slider setMaximumTrackImage:trackRightImage forState:UIControlStateNormal];


原装Slider:



添加图片之后效果:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息