IOS学习之segmented control

什么是segmented control? 先上几张图:

 

      

 

            

 

这几幅图就是典型的segmented control UI视图, 第一幅是某个游戏程序,红色框出来的就是segmentedcontrol。 后面三幅是我这篇博文做的demo示例。

 

segmented control有如下几个特征:

 

1通常是在单视图中使用,不做多视图之间的切换。实现视图中不同显示的快速切换,每一个分割表示一个不同的显示,这些显示往往是相关的,所谓的相关,可以理解成,功能一样,但是属性类别有差异,比如上图游戏程序中的几个分割。

 

比较常用的还有比如说,在一个视图中,不同的分割控制tableView加载不同的数据源。

 

2 它通常在整个屏幕的上部,不是必然,但大部分情况下是这样用。

 

3 一般是3到5个分割,超过5个的话每个分割的大小对于用户触碰的体验会很差。

 

4 任意时刻,只有一个分割是激活状态的。有点像单选按钮。

 

开发环境:

mac os +xcode5.0 + ios7模拟器。

 

生成控件,代码如下:

 

[objc]  view plain copy 在CODE上查看代码片 派生到我的代码片
 
  1. - (void)initSegmentedControl  
  2. {  
  3.     NSArray *segmentedData = [[NSArray alloc]initWithObjects:@"apple",@"orange",@"banana",nil];  
  4.     UISegmentedControl *segmentedControl = [[UISegmentedControl alloc]initWithItems:segmentedData];  
  5.     segmentedControl.frame = CGRectMake(10.0, 20.0,300.0, 30.0);  
  6.     /* 
  7.      这个是设置按下按钮时的颜色 
  8.      */  
  9.     segmentedControl.tintColor = [UIColor colorWithRed:49.0 / 256.0 green:148.0 / 256.0 blue:208.0 / 256.0 alpha:1];  
  10.     segmentedControl.selectedSegmentIndex = 0;//默认选中的按钮索引  
  11.   
  12.   
  13.     /* 
  14.      下面的代码实同正常状态和按下状态的属性控制,比如字体的大小和颜色等 
  15.      */  
  16.     NSDictionary *attributes = [NSDictionary dictionaryWithObjectsAndKeys:[UIFont boldSystemFontOfSize:12],NSFontAttributeName,[UIColor redColor], NSForegroundColorAttributeName, nil nil];  
  17.   
  18.   
  19.     [segmentedControl setTitleTextAttributes:attributes forState:UIControlStateNormal];  
  20.       
  21.       
  22.     NSDictionary *highlightedAttributes = [NSDictionary dictionaryWithObject:[UIColor redColor] forKey:NSForegroundColorAttributeName];  
  23.       
  24.     [segmentedControl setTitleTextAttributes:highlightedAttributes forState:UIControlStateHighlighted];  
  25.       
  26.     //设置分段控件点击相应事件  
  27.     [segmentedControl addTarget:self action:@selector(doSomethingInSegment:)forControlEvents:UIControlEventValueChanged];  
  28.       
  29.     [self.view addSubview:segmentedControl];  
  30. }  


 

 

每个功能注释都有清晰的描述,有一点要特别说明一下:

在ios7以前,segmentedcontrol有一个segmentedControlStyle 属性,通常都要设置,比如像下面这样:

 

[objc]  view plain copy 在CODE上查看代码片 派生到我的代码片
 
  1. /* 
  2.      typedef enum { 
  3.      UISegmentedControlStylePlain, 
  4.      UISegmentedControlStyleBordered, 
  5.      UISegmentedControlStyleBar, 
  6.      UISegmentedControlStyleBezeled, 
  7.      } UISegmentedControlStyle; 
  8.  
  9.  */  
  10. segmentedControl.segmentedControlStyle = UISegmentedControlStyleBar;  



 

但是这个在ios7之后,出于扁平化风格的考虑,这些style都不在有效了

 

我们再写一个按钮的事件响应函数,设置不同的背景图片,如下:

 

[objc]  view plain copy 在CODE上查看代码片 派生到我的代码片
 
  1. -(void)doSomethingInSegment:(UISegmentedControl *)Seg  
  2. {  
  3.       
  4.     NSInteger Index = Seg.selectedSegmentIndex;  
  5.       
  6.     switch (Index)  
  7.     {  
  8.         case 0:  
  9.             self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:kSrcName(@"bg_apple_small.png")]];  
  10.             break;  
  11.         case 1:  
  12.             self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:kSrcName(@"bg_orange_small.png")]];  
  13.             break;  
  14.         case 2:  
  15.             self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:kSrcName(@"bg_banana_small.png")]];  
  16.             break;  
  17.         default:  
  18.             break;  
  19.     }  
  20. }  

 

 

代码比较简单。关键是理解segmented control的应用场景,灵活运用。除了第一幅图中的游戏程序,我这里再举一个例子,很多时候会把segmented control嵌套在navigation bar里面使用,以减少navigationview之间的层级数量,给用户较好的体验,就像下面这样:

 

          

 

源码下载:

 

https://github.com/pony-maggie/SegmentedControl

 

http://download.csdn.net/detail/pony_maggie/7403175

 

版权声明:本文为博主原创文章,未经博主允许不得转载。

转载于:https://www.cnblogs.com/Sucri/p/4876802.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值