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

【IOS 开发学习总结-OC-45】★★ios开发之UI控件——UISegmentedControl与UIImageView

2015-10-13 18:06 627 查看
UISegmentedControl在头文件中是这样的
@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];
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息