【IOS 开发学习总结-OC-45】★★ios开发之UI控件——UISegmentedControl与UIImageView
2015-10-13 18:06
627 查看
UISegmentedControl在头文件中是这样的
![](https://img-blog.csdn.net/20151013180851119)
![](https://img-blog.csdn.net/20151013180955212)
![](https://img-blog.csdn.net/20151013181025164)
属性说明:
1. style:支持3个选项:
plain:普通风格;
bordered:普通风格上加一圈边框;
bar:工具条风格;
-
2. state:提供了一个 momentary(短暂的,瞬间的)的复选框——勾选后,单击分段控件某一分段时会高亮显示,然后马上就会消失,不再显示用户单击的是哪个分段。
3. tint:——设置分段控件被选中分段的高亮颜色。
4. segments:——分段控件要分几段。
5. segment:——用于选择指定的分段。
6. title:——用于segment中选定的分段设置标题。segment 0代表第1个分段,依次类推;
7. image:——用于segment中选定的分段设置图片。
8. behavior:①enabled:控制分段是否可用;②selected:控制分段是否被选中。
![](https://img-blog.csdn.net/20151013201058845)
绑定 IBAction 后的关键代码:
![](https://img-blog.csdn.net/20151013201126346)
关键代码——为2个按钮绑定的 IBAction 实现方法:
其中为了访问分段控件和 文本框控件,2个控件分别绑定到控制器的 segment 和 tv 2个 IBOutlet 属性。
添加同样有在 interface builder 中拖入和代码添加UIImageView对象2种方法。
属性面板可设置的属性:
![](https://img-blog.csdn.net/20151013181247592)
![](https://img-blog.csdn.net/20151013181300936)
UIView的 Mode 属性,有如下列表项:
1. scale to fill:不保持纵横比,使图片完全适应该 UIImageView 控件;
2. aspect fit: 保持纵横比缩放图片,使图片长边能完全显示出来;
3. aspect fill:保持纵横比缩放图片, 只保证短边能显示出来,长边会发生截取;
4. center:不缩放图片,只显示图片的中间区域;
5. top:不缩放图片,只显示图片的顶部区域;
6. 其他的类似 top。
除了上图中的属性,UIImageView还可以使用动画显示一组图片。所用到的属性和方法如下:
1.
2.
3.
4.
5.
6.
7.
图片浏览器
![](https://img-blog.csdn.net/20151013181336031)
实现代码段:
幻灯片动画播放
![](https://img-blog.csdn.net/20151013181356740)
关键代码:
@interface UISegmentedControl : UIControl <NSCoding>,它继承了UIControl。可以作为活动控件,直接绑定 IBAction 方法。
分段控件是个啥?
它是可以提供一栏按钮的控件,但每次只能激活其中一个按钮。就像这样:一般什么时候使用分段控件呢?
当程序需要输入的不仅仅是布尔值(2个选项),而是多个枚举值时,可以考虑使用分段控件。分段控件会导致用户在屏幕上看到的内容发生变化。——常用于不同类别的信息之间选择,或在不同屏幕之间进行切换。分段控制器的属性面板
属性说明:
1. style:支持3个选项:
plain:普通风格;
bordered:普通风格上加一圈边框;
bar:工具条风格;
-
2. state:提供了一个 momentary(短暂的,瞬间的)的复选框——勾选后,单击分段控件某一分段时会高亮显示,然后马上就会消失,不再显示用户单击的是哪个分段。
3. tint:——设置分段控件被选中分段的高亮颜色。
4. segments:——分段控件要分几段。
5. segment:——用于选择指定的分段。
6. title:——用于segment中选定的分段设置标题。segment 0代表第1个分段,依次类推;
7. image:——用于segment中选定的分段设置图片。
8. behavior:①enabled:控制分段是否可用;②selected:控制分段是否被选中。
示例1:分段控件控制背景颜色
绑定 IBAction 后的关键代码:
- (IBAction)segmentChanged:(id)sender { // 根据UISegmentedControl被选中的索引 switch ([sender selectedSegmentIndex]) { case 0: // 将应用背景设为红色 self.view.backgroundColor = [UIColor redColor]; break; case 1: // 将应用背景设为绿色 self.view.backgroundColor = [UIColor greenColor]; break; case 2: // 将应用背景设为蓝色 self.view.backgroundColor = [UIColor blueColor]; break; case 3: // 将应用背景设为紫色 self.view.backgroundColor = [UIColor purpleColor]; break; } }
示例2:动态增加与删除分段
关键代码——为2个按钮绑定的 IBAction 实现方法:
其中为了访问分段控件和 文本框控件,2个控件分别绑定到控制器的 segment 和 tv 2个 IBOutlet 属性。
- (IBAction)add:(id)sender { NSUInteger count = self.segment.numberOfSegments; // 获取该文本框内输入的字符串 NSString* title = self.tv.text; // 如果用户输入的字符串长度大于0 if([title length] > 0) { // 以用户输入的内容插入一个分段 [self.segment insertSegmentWithTitle:title atIndex:count animated:YES]; // 清空文本框内容 self.tv.text = @""; } } - (IBAction)remove:(id)sender { NSUInteger count = self.segment.numberOfSegments; // 删除UISegmentedControl控件最后一个分段 [self.segment removeSegmentAtIndex: count-1 animated:YES]; }
UIImageView——图像控件
UIImageView,直接集成 UIView, 没有继承 UIControl。——因此,它作为图片的显示控件,不能接受交互,是一个静态控件。添加同样有在 interface builder 中拖入和代码添加UIImageView对象2种方法。
属性面板可设置的属性:
UIView的 Mode 属性,有如下列表项:
1. scale to fill:不保持纵横比,使图片完全适应该 UIImageView 控件;
2. aspect fit: 保持纵横比缩放图片,使图片长边能完全显示出来;
3. aspect fill:保持纵横比缩放图片, 只保证短边能显示出来,长边会发生截取;
4. center:不缩放图片,只显示图片的中间区域;
5. top:不缩放图片,只显示图片的顶部区域;
6. 其他的类似 top。
除了上图中的属性,UIImageView还可以使用动画显示一组图片。所用到的属性和方法如下:
1.
animationImages——需要动画显示的多张图片,属性值为 NSArray 对象;
2.
animationDuration——动画图片持续时间;
3.
highlightedAnimationImages——高亮状态下需要动画显示的多张图片,属性值为 NSArray 对象;
4.
animationRepeatCount——动画重复次数;
5.
startAnimating——开始播放动画;
6.
stopAnimating——结束播放动画
7.
isAnimating——判断是否正在播放动画。
示例:图片浏览器与幻灯片动画播放
示例源代码下载地址(参考自疯狂 IOS 书中源码):图片浏览器
实现代码段:
#import "FKViewController.h" @interface FKViewController () @end @implementation FKViewController NSArray* images; int curImage; CGFloat alpha; - (void)viewDidLoad { [super viewDidLoad]; curImage = 0; alpha = 1.0; images = [NSArray arrayWithObjects:@"lijiang.jpg", @"qiao.jpg", @"xiangbi.jpg" , @"shui.jpg" , @"shuangta.jpg" , nil]; // 创建一个轻击的手势检测器 UITapGestureRecognizer *singleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(clicked:)]; // 启用iv控件的用户交互,从而允许该控件能响应用户手势 self.iv.userInteractionEnabled = YES; // 为UIImageView添加手势检测器 [self.iv addGestureRecognizer:singleTap]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; } - (IBAction)plus:(id)sender { alpha += 0.02; // 如果透明度已经大于或等于1.0,将透明度设置为1.0 if(alpha >= 1.0) { alpha = 1.0; } // 设置iv控件的透明度。 self.iv.alpha = alpha; } - (IBAction)minus:(id)sender { alpha -= 0.02; // 如果透明度已经小于或等于0.0,将透明度设置为0.0 if(alpha <= 0.0) { alpha = 0.0; } // 设置iv控件的透明度。 self.iv.alpha = alpha; } - (IBAction)next:(id)sender { // 控制iv的image显示images数组中的下一张图片 self.iv.image = [UIImage imageNamed: [images objectAtIndex:(++curImage % images.count)]]; } - (void) clicked:(UIGestureRecognizer *)gestureRecognizer { // 获取正在显示的原始位图 UIImage* srcImage = self.iv.image; // 获取用户手指在iv控件上的触碰点 CGPoint pt = [gestureRecognizer locationInView: self.iv]; // 获取正在显示的原图对应的CGImageRef CGImageRef sourceImageRef = [srcImage CGImage]; // 获取图片实际大小与第一个UIImageView的缩放比例 CGFloat scale = srcImage.size.width / 320; // 将iv控件上触碰点的左边换算成原始图片上的位置 CGFloat x = pt.x * scale; CGFloat y = pt.y * scale; if(x + 120 > srcImage.size.width) { x = srcImage.size.width - 140; } if(y + 120 > srcImage.size.height) { y = srcImage.size.height - 140; } // 调用CGImageCreateWithImageInRect函数获取sourceImageRef中 // 指定区域的图片 CGImageRef newImageRef = CGImageCreateWithImageInRect(sourceImageRef , CGRectMake(x, y, 140, 140)); // 让iv2控件显示newImageRef对应的图片 self.iv2.image = [UIImage imageWithCGImage:newImageRef]; } @end
幻灯片动画播放
关键代码:
@implementation FKViewController NSArray* images; - (void)viewDidLoad { [super viewDidLoad]; // 创建一个NSArray集合,其中集合元素都是UIImage对象 images = [NSArray arrayWithObjects: [UIImage imageNamed:@"lijiang.jpg"], [UIImage imageNamed:@"qiao.jpg"], [UIImage imageNamed:@"xiangbi.jpg"], [UIImage imageNamed:@"shui.jpg"], [UIImage imageNamed:@"shuangta.jpg"], nil]; // 设置iv控件需要动画显示的图片为images集合元素 self.iv.animationImages = images; // 设置动画持续时间 self.iv.animationDuration = 12; // 设置动画重复次数 self.iv.animationRepeatCount = 999999; // 让iv控件开始播放动画 [self.iv startAnimating]; }
相关文章推荐
- GUI - Web前端开发框架
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- 评价ui设计作品好坏的八个标准(界面/交互设计研究)
- 不可修补的 iOS 漏洞可能导致 iPhone 4s 到 iPhone X 永久越狱
- iOS 12.4 系统遭黑客破解,漏洞危及数百万用户
- 每日安全资讯:NSO,一家专业入侵 iPhone 的神秘公司
- [转][源代码]Comex公布JailbreakMe 3.0源代码
- 为Yahoo! UI Extensions Grid增加内置的可编辑器
- Cocos2d-x UI开发之文本类使用实例
- winform异型不规则界面设计的实现方法
- 在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
- UI Events 用户界面事件
- 基于jQuery UI CSS Framework开发Widget的经验
- jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
- jQuery UI设置固定日期选择特效代码分享
- jQuery UI的Dialog无法提交问题的解决方法
- jQuery ui实现动感的圆角渐变网站导航菜单效果代码
- 关于jQuery UI 使用心得及技巧