读书频道 > 移动开发 > ios开发 > iOS应用开发攻略
攻略7 定制滑动条与进度条
2012-08-20 18:42:51     我来说两句 
收藏    我要投稿   

本文所属图书 > iOS应用开发攻略

本书收录了最新的iOS 软件开发的最佳做法,涵盖了应用开发及构建优雅解决方案的必备知识,包括:编写通用的启动画面和嵌入式Web 浏览器;构建复杂表视图;使app 或游戏活灵活现的填充、变换和动画;通过手势、...  立即去当当网订购
问题
也许标准的UISlider与UIProgressView的外观跟你的app的其他部分不一致。但在Interface Builder中只能调整宽度,那么怎么做才能改变这些元素的外观呢?
解决方案
如果不满足于基本的外观,就需要深入代码,探寻若干图像属性,理解可拉伸UIImage的用法。
UISlider有以下一系列属性在Interface Builder中是看不到的:currentMaximumTrackImage、currentMinimumTrackImage和currentThumbImage。这些属性带来了很大的灵活性,让我们可以为控件指定其他图像。要充分利用这些属性,就需要理解可拉伸的UIImage是如何工作的(参见图13)。



图13 定制滑动条的演示画面
跟其他图像一样,我们从图像文件创建可拉伸的UIImage,但必须同时设置leftCapWidth与topCapHeight的值。我们通过调用stretchableImageWithLeftCapWidth:topCapHeight方法,定义不被拉伸部分的长度。如果图像宽100点,而我们把leftCapWidth定义为49,那么第50个点将是被拉伸(或者说被复制)的点,而剩下的50个点将保持不变。如果再把图像长度设为200,那么将插入拉伸点的150个副本以填满图像。可以看到,我们需要精心挑选图像与拉伸点,使其拉伸之后仍能正确显示。请看示例代码中的图像。图像看起来形状怪异,但拉伸之后可以得到我们想要的样子。
CustomSlider/Classes/CustomSliderViewController.m
UIImage* sunImage = [UIImage imageNamed:@"sun.png"];
[customSlider setThumbImage:sunImage forState:UIControlStateNormal];
我们可以使用thumbImage属性为滑动条上可拖动的元素设置新的图像。这个例子中,跟默认的白色圆点比起来,太阳的图像显得格外醒目,而它也同时起到隐藏两段滑轨图像接缝的作用。
CustomSlider/Classes/CustomSliderViewController.m  
customProgress.userInteractionEnabled = NO;
 
UIImage* sliderPoint = [UIImage imageNamed:@"sliderPoint.png"];
[customProgress setThumbImage:sliderPoint forState:UIControlStateNormal];
 
UIImage *leftStretch = [[UIImage imageNamed:@"leftImage.png"]
                                stretchableImageWithLeftCapWidth:10.0
                                                    topCapHeight:0.0];
[customProgress setMinimumTrackImage:leftStretch
                                        forState:UIControlStateNormal];
 
UIImage *rightStretch = [[UIImage imageNamed:@"rightImage.png"]
                                stretchableImageWithLeftCapWidth:10.0
                                                    topCapHeight:0.0];
[customProgress setMaximumTrackImage:rightStretch
                                        forState:UIControlStateNormal];
这里我们没有创建真正的UIProgressView,而是使用部分禁用的滑动条来实现同样的效果,这样做可以使用与UISlider相同的设计技巧。这里有个技巧,我们使用的滑块图像小得多,而且实际起到了低端滑轨图像(mininum track image)[1]的尾端的作用。由于userInteraction- Enabled属性设为了NO,而且没有能看见的可拖动元素,滑动条看上去就是特殊风格的进度条。
演示版的app包括了一个定时器,点击屏幕上端的按钮就会启动,可以展示通过修改UISlider的value属性来创建动态进度条有多么容易。


[1]   minimum track image,本书译做低端滑轨图像,是指滑轨上从跟最小值对应的一端到滑块之间的滑轨图像。
——译者注
点击复制链接 与好友分享!回本站首页
分享到: 更多
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:攻略6 组装可重用的网页视图
下一篇:攻略8 打造自己的手势识别器
相关文章
图文推荐
1.3.5 有限的屏幕尺
1.2 必备条件
精通iOS开发 : 第7版
3.5 iFunBox
排行
热门
文章
下载
读书

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做最好的IT技术学习网站